HTML & CSS

In this example, I tried to do something a little bit more complicated and come up with an effect that might resemble cycling through a set of flash cards.The tricky part of this was that using the z-index - which was my first idea - was not cooperating well. So I ended up working with the opacity instead. I figured it did the job well enough.This animation is set to allow you a full 5 seconds to view each of 5 cards.CSS Card Cycle EffectDue to the timing nature of this particular effect - it is only meant to cycle once through the deck. The animated gif above simply captures it once through and repeats it for you.Here is the CSS for this one…/* Card Shuffle *//* This CSS goes in the Branding and Look Section */.cards { wid

We are a very small charity and none of us overly good with IT systems. We have set up and have been using Docebo for a number of years now, but there are issues we have with the system that i am sure could be easily resolved with some coding and re-design, non of us however are competent to do this ourselves. Has anyone used an external body to do this that they could recommend? Unsure if Docebo offers this service itself?

Hi everybody,has anyone ever tried to shorten the number of list items shown in the “Courses and Learning Plans” widget? I would like to have the button “Load More” already appear after one row of list items. 

Can any provide assistance with CSS code to remove the “Expiration Date” column from Courses, within Activities? During data migration this field was populated with the end enrollment date in our past LMS. Being a new LMS, users are confused by this column and think the course is expired and needs to be renewed.

We have discovered that our catalogs when filtered show the incorrect number.  When I filter the catalog the item count will update to a new number, for example, 18 items, but when I scroll down the catalog, there are waaaay more than 18 items.I have a ticket open to figure out this issue, but curious, would anyone know if it is possible to just hide this item count with CSS?  

We are looking to get ride of the click box to access a different page from an icon.  We realize we would need to use HTML or CSS to do it.  Does anyone know what code we could use?  We aren’t super versed in HTML or CSS. 

I’m testing my custom layouts/code in different browsers. One of the issues I’ve run into is that Safari doesn’t use certain pieces of my custom code. Specifically, the code concerning styling of specific pages (example: #doc-page-209) is skipped/ignored. However, all other custom CSS is applying correctly.Is this a known bug? is there are work around or some additional code I need to apply just for Safari?

Hi there,Brand new here in the community, new to the possibility of using HTML & CSS to customize page, HTML/WYSIWYG widget, as well as look & feel for the platform as well as for courses. Currently learning CSS on the go, have basic knowledge of HTML. My questions are very foundational.Where/how can I write/change a page’s HTML/CSS line? I’ve created the page and would like to customize further. For HTML/WYSIWYG widgets, is it possible to remove the “box” for the particular widget?Thank you!

Hello!I recently began working with Docebo as a designer for my company. The goal was to do a custom design for different “hub” pages underneath a fairly typical landing page/dashboard and utilizing Docebo’s content assignment and management features. The problem I’m running into is that it seems as though certain types of CSS do not work within the HTML/WSIWYG widgets which will make or break the design. For example:Any attempt to center divs (not just text), within a widget seems to ignore whatever CSS class or ID I set. The best I can tell is that it seems to be related to site wide styles for divs and/or the clearfix styles. While there are more numerical, and less responsive, ways of centering I worry about the maintenance time this creates going forward.Position:Sticky also seems to be ignored regardless of how I try to implement it. This is a much bigger issue than centering.

Copying this original post to this group:Thanks again @gstager 

Hello all! I am new to Docebo and am looking to put together a site similar to the design attached.  I’m looking to have the five main categories at the top.  When you click on a category like ‘Technology’ for example, it would then take you to a page where you would be able to select from ‘Technology’ topics, and then clicking on a topic would take you to a page with the actual courses.  So the route a user could take would be Course Page→ Technology Page → Technology Topic Page → Technology Course. Based off the screen shot of my mockup, would this be do-able and if so what would be the best route?  I was playing around with the Categories widget, but it would just show the courses within that Category.  Is there a widget that would display the five categories in a row like I have here, or would that be best handled with custom html and css? Thanks for any advice! Kevin

Hey everyone, Moving a conversation that started between @gstager and I over on a different question to allow it to live on its own and encourage more to converse. The original thread can be found here:What kicked it off was to accomplish the request the idea of using an aria selector to hide a navigation element which I had a knee jerk reaction worried about different types of users interacting with the page, but more generally what I see a lot on here of just how to hide things without thinking through the full repercussions to different end users. The beginning post that really started it was me explaining why I had that reaction here: More just using an aria selector to hide things, since the goal of aria selectors is to help navigation. In general I have a hard time with hiding entire n

Hey, i wish to hide the table of content toggle for all users so they only have the default view, how can i do this?

hey, i want to hide the help center icon in the top bar, does this need to be done in CSS or is there a toggle somewhere?

Hello!Has anybody had a chance to do a workaround with CSS an replicate an event listener on JS in an accordion-type animation? offline, it works like a charm on CSS by using pseudo-class and elements. We added a nice SVG triangle with a rotate animation, hid the “answer” content and then make it collapsible.But… when I added the CSS on the branding box, the look is working, but not the behaviour or the SVG:Has anybody worked something similar before?  It seems that CSS and HTML don’t talk if the HTML is losing the CSS file reference once the code is added in Docebo (copy-paste). Input will be greatly appreciated! Txs!

Hi all,I’m still getting to grips with CSS and have become stuck in a job I need to get done.  Basically we have an image widget above a channel widget, but it has a margin underneath that I would like to remove so the image is closer to the channel.I have found the widget ID, but am stumped as to what I need to put to change the margin size.Can anyone help please?Thanks in advanceNeil

Hi CSS and HTML expertsIt would be great to get your help with this one:Can you help me with specifying the color or these buttons using CSS?This was changed to white after I specified the color of the header icons and I want to now separately assign them with a darker color for visability. thanks,  

Does anyone have the CSS to hide the Change Password button on the My Profiles page? I know the button id is: “vertical-tab-changePassword”Has anyone else successfully done this?  We have the option to hide the possibility of changing the password selected, but the option is still showing up for some reason.

Howdy folks!Throwing this out to the CSS gurus out there, any suggestions how to reduce the height of the below file repository widget? It’s FAR too high and pushes the course description waaaay down the page.  Have been trying in vain using a variety of code options but nothing successful or scalable thus far. Any advice / code options appreciated.  

We are about a month into our onboarding now so I am having a fair amount of fun tinkering around with some custom pages and thought I would share as others have here. While this is not yet our final product, I think it will do a nice job of providing a look at what is possible. What you see below is with a single HTML/WYSIWYG WidgetSome features:We’ve hidden the native header and footer. A space for an “Announcement Banner” Both Docebo internal and external links along the left Embedded YouTube A place for longer messages or articles General information panels on the right side Custom footers 

I’m new to HTML so if this doesn’t make sense, my apologies. I need a place to store images that are referenced in HTML emails sent from the Docebo system that is accessible to all employees. Instead of putting this on SharePoint or a company site (which is difficult given how big our company is) I was wondering if there is a place to store images within the system itself? (specifically for HTML emails) 

Does anyone know how to customize the Register dialog? We are going to use Branch Codes to put new users in the right branch, but only for a specific type of users. We wanted to put text near that field to indicate they should enter their code if given one but ignore if they were not given a code. Any help would be greatly appreciated.  

If you’ve administered the Docebo LMS for awhile, you’ve probably wanted to turn off the balloon help at some point.  Add this CSS to your site (under Branding and Look ---» Custom Styles) and it’s gone:/*Remove contextual help*/div.docebo-balloon, div.internal-header-suggestion-balloons {    display: none !important;} 

A recent conversation had me thinking about some of the text editor options out there.I thought it would be a curious discussion about what everyone prefers.Personally - I am not a fan of the native Docebo editor for code.At a minimum - I would like the code to remain exactly as I placed it there. Don’t re-format my stuff and don’t strip things out - especially harmless things like comments.Here are some free options I have used over the years.NotepadNotepad++BracketsVisual Studio CodeAtom - This one is my current “Go To” for writing up code before pasting it into various platforms and programs.So what is your favorite editor?

Is there any way we can remove the training materials tab? Thank you.