HTML & CSS

I am not seeing this specific thing posted anywhere so I do apologize if it is - But is there a way to apply CSS to sort ‘completed’ from ‘in progress’ and ‘not started?’ Looking specifically for the “My Courses and Learning Plans” page so that it shows up in the three groupings instead of just showing the courses all together.

So I was pointed to the super awesome post where we can use CSS to have specific fonts.  I was able to apply the CSS to an HTML widget and it worked fabulously! Here is the post: But when I linked the text, the font style totally changed!  See example:Top is unlinked text, and the bottom is the linked text.  I want the linked text to have at least the same font family as the top text.Is there CSS formatting that I can use to keep the format even if it is linked?

My team is looking to take Docebo to the next level in the next year or so. Currently we use Docebo features mostly out of the box, with some small customizations based on what I’ve learned here. To utilize more advanced customizations/features would it be helpful for me to learn CSS specifically or coding in general? I’d love to hear what other people have done with more advanced features. 

Hiwe use a custom footer but on legacy pages the “Powered by Docebo” is still shown. After checking with Docebo Support, this is the expected behavior and can we hide the “Powered by Docebo” by using the following css code:/*Hide footer in legacy pages*/#footer > p > a {display:none !important;}The code itself works but now within legacy pages the footer is empty and we want to have the custom footer, because we have a link the Imprint and Privacy Policy.Does anybody know how we can force the custom footer on the legacy pages? 

Is there CSS code to hide the course rating stars for the extended enterprise? We want to turn on course rating for our employees but not our customers.

Basically I don’t like this icon covering the image.  I assume the change I made here in Inspector wouldn’t translate well to mobile, but has anyone tried anything like this?  

Thought I would have a little more fun with some CSS ideas.I was thinking about how a bunch of bullet points can be really boring and what we could do to change that up a bit so here was something I thought of to make it a little more interesting.I used a Font Awesome icon (part of Docebo) to be the new bullet and made it so when you hover over it you can read the text when the information slides out.Of course you can modify the code however you wish for colors or the icon to suit your needs.Here is how it turned out. This has both a CSS and an HTML component.Here is the code for exactly what you see above.CSS/** Tweak your width and height as desired **//** I chose to go small to just show the bullet **//** adjust colors and duration as desired **/.hoverBox { width: 42px; height: 25px; background-color: #008aab; color: white; transition-property: width; transition-duration: 0.5s; margin: 5px; white-space: nowrap;}/** This is the new width when you hover **//**

Hi Community, I’m wondering if anyone is currently using CSS to keep the ILT Session information dropdowns open when a user opens the course? One of the biggest issues we see with ILTs is that user’s cant find the “Join the Webinar” button and will often miss trainings because of this. I’ve started looking into the CSS code to see what can be applied, but figured I would ask incase anyone has already attempted/solved this. Thank You! -Jason

These are somewhat useful but cover up my images sometimes in significant ways.I think invisible unless hovered might be best. Has anyone hid or otherwise edited these with css?

Use case: the tags cover my nice iconsIdeas to implement: they’re still useful info so maybe shorter, or change them to a hover-only state. has anyone done this?  

Trying to replicate those channel iconsng-component#doc-page-21 div.course-catalog-content-wrapper div.ui-carousel-info::before {}/*icon for all LP's catalog*/

Hi,  I’m trying to iFrame a piece of xAPI content hosted within the central repository into a piece of learning.  At first it works, however, after approximately 12 hours I then receive a ‘401’ error message.  It appears that the preview link I’m using is a temporary url which refreshes every 12 hours.  Is there a way to get the preview url link to be static so the xAPI content remains available within the learning content?

How to use the CSS code to only change the two check circle icon colors of the training materials status (Activity in Progress and Activity Completed)?  

Hi! I’m trying to make the text smaller and the weight lighter in the font of these custom widgets. Could anyone share the CSS for this? Thanks! 

The little progress wheel when the page or a widget is loading  

I came across an animation that I thought was pretty cool and I decided I would try to recreate the effect for use with Docebo.This is an animated countdown timer - currently only 9 to 0 - I suppose you could have it count up as well. It uses two black divs over the top of a greenyellow div. The two black divs simply animate to different locations within the green div to mask portions of it out so that the result is a number showing through.The animation lasts for 10 seconds as you might imagine.Here is the code for you to play with and tweak as desired. As usual - there are two parts - CSS and HTML.First the CSS/** This is a countdown timer **//** This sets the size and color of your overall background **/.digitBG { background-color: black; width: 70px; height: 90px; position: absolute;}/** This sets the size, color, and start position of your number digit **/.digit { height: 50px; width: 30px; background-color: greenyellow; position: relative; top: 20px; left: 20px;}/** The

Has anyone found what part of the CSS to edit to change out the image on the 404 page? Hoping to replace Einstein with our mascot! Thanks in advance 

I was recently asked about rotating an icon on hover so I decided I would add this to my growing list of animation ideas with a little write up.As with other ideas of this sort - it requires adding some code in two areas.CSS code will go in the Branding and Look area of your admin panel HTML code will go in your widgetWe will use the HTML to place an icon and the CSS to spin it when you hover over it with the mouse.Here is a look at the end result.In this example, we’re just making the icon rotate by 180 degrees. It isn’t much but it is something that adds a little extra to the otherwise mundane to try making them a bit more interesting.Here is the CSS/** This block will rotate the object with an ID of spinner by 180 degrees **//** This rotation will happen when hovered over **//** Adjust the amount of rotation as desired **/#spinner:hover { transform: rotate(180deg);}Here is the HTML for the widget.<!-- This code places a font awesome star icon on the screen and sets the size --&g

Would love to add a “Happy Friday!” image to my homepage automatically on Fridays.

/* disable overflow on my profile page-widget text */myprofile-widget myprofile-additional-field.additional-field div.root div.label { overflow: hidden; width: 100%;} 

Our IT team managed to change the radius of the custom buttons on the Dashboard..mdl-button { border-radius: 2.625rem; } However, it seems that the ‘fixed’ buttons (which are visible in the learning plans/courses), are somehow secured, because we were not able to change anything.Do you know if there is any other way to change those buttons as well, or do we need to leave it like it is?

activities-stream-widget .tile-bg-image.bg-white {    background-color: white !important;}/*fix broken grey background on activity stream transparent learning plans*/ Now I (and soon, you) can safely use transparent learning plan thumbs.  Feel free to use my code in upcoming updates Docebo if you like!

We really like the look and feel of the search on the Courses and Learning Plans widget whenever the widget is three columns wide. Example of what we like:We would love if it would look like this whenever the widget is placed in a singular column or two column, but instead of shortens. There’s more than enough real estate on the page for it to look the same as the one that’s all three column. Does anyone know how to change this? I assume the answer is some sort of CSS or jquery, which I am comfortable doing.Example of what we don’t like:  

I want to hide from all superadmins including me.  

Hey folks, Does anyone know how to remove the: Browse [Company Name] Courses & Learning PlansOwn your future by learning new skills On the header for an extended enterprise domain? We’d love to not have that text visible.