HTML & CSS

Window notification pop-up for users’ first-time visit/access to a newly created page - is this possible? anyone have done this before and/or have suggestions?

Hey there! Upper management would like us to make Docebo look more like our new AEM-built websites...their main focus is to have the Docebo catalog images have the same look and feel as carousel images being used on our websites.  Docebo’s catalog images are 2:1, while our AEM website carousels support 1:1. Is there a way to adjust how Docebo’s catalog images are displayed so we can accommodate management's request? The vertical, rectangular catalog cards are fine, we’d just need to make the card images square versus elongated horizontally.  Thank you in advance for your insights and expertise! 

Has anyone tried to embed a poll in a html email notification. I don’t just mean a link to a poll but an actual poll embedded. I want to make the poll as easy to answer as it’s for people who are not engaging with Docebo as much as others. Anyone got any ideas of how to do this?

Hello -Does anyone know what CSS coding to use to remove the registration code requirement on an extended enterprise?

Are you worried that if you so much as even touch the Custom CSS box that you’ll have some explaining to do? It would only take a single keystroke to drastically change the look and feel of your Docebo platform.I totally get why you don’t want to be that person. #gulp #shiftyEyesCSS tells the HTML how to look so don’t forget that there is another half to this equation and they must be in agreement or things will not turn out as planned.It is pretty normal to want to test the water before getting in the pool so here are a few tips for you to help make it a little easier to get in the CSS water. Remember to Separate Things For the same reason we keep milk in a different jug than our Diet Coke or our orange juice, we should try to keep our blocks of custom CSS separated from other blocks as well. If we don’t  - bad things can happen. One way to go about this is to provide a container for your code and be sure to give it a name not likely to be found elsewhere in Docebo. Our container is o

The Certifications tab on the My Activities page was renamed in our environment through the Localization Tool.  For a domain we’d like to rename it.  Does anyone have the CSS code to change it?  TIA

Anyone figure out how to leverage these neat little animations coming out of the lottiefiles space?I have figured out how to add subtle animated gifs….but that is not the same….

Dear Team,Our platform is used by internals and externals. Is there possible to hide the “Avatar image upload” on my profile page? If yes, it could be better option for us.

We have several users that do not have their own laptops, so we provide iPads for them to use to access Docebo.In several courses, we have policies that we require the learners to read, which consist of PDF links provided via iFrame using an HTML page activity. However, we have found that if the PDF consists of multiple pages, the learners can only view the first page via the iFrame when viewing it on the iPads.Does anyone know of a solution that would allow the learners to scroll through all of the pages of the PDF via the HTML page using an iPad?Thank you

In this example, we have a set of five divs arranged horizontally. When you click on a colored div and hold, it will reveal the “rest of the box”.This is perhaps an “expansion” of the click to reveal box in Idea #8.Someone more fluent than I am may have an easier way to pull this off but I’ve been having a good time playing around with these ideas and thought many of you might benefit from that as well.This is what I ended up with.CSS Accordion EffectHere is the code for you to play with./* Accordion *//* This is the CSS for the Branding and Look section */.accBox { width: 25px; height: 175px; margin: 25px; padding: 10px; position: absolute; white-space: nowrap; top: 0px; color: #ffffff;}#one { left: 0px; background-color: #000000;}#two { left: 45px; background-color: #ff0000;}#three { left: 90px; background-color: #00ff00;}#four { left: 135px; background-color: #0000ff;}#five { left: 180px; background-color: #5f6369;}#one:active { width: 250px;}#one:active ~ #two

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 { width: 250px; height: 170px; margin: 40px; padding: 20px; color: white; font-size: large; position: absolute; box-shadow: 2px 2px 5px grey;}#card1 { background-color: green;}#card2 { background-color: blue; animation-name: shuffle; animation-duration: 2s; a

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 navigation sections without being able to adjust the page completely as it does tend to leave gaps and loopholes for how people navigate through non-visual based methods.In docebo’s particular case I

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?

Does anyone have any fun CSS or system settings I’m missing to control the height of this header across the platform (marked by red rectangle in the image)?It really feels like a waste of real estate just for a page title.  

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?