HTML & CSS

I am very much a novice in the CSS area, so any help will be greatly appreciated! I am trying to create an effect similar to the one below using CSS, where each image (or face as in the example below) is a clickable element:The problem I am finding is the widget won’t automatically resize when the window is minimized.  I would like to avoid having scroll bars appear when the window is minimized a little bit and I am wondering if there is some attribute in the CSS that I can apply to allow the image to be resized when expanding and minimizing my browser window?Here is the css and example html that I am using:@charset "utf-8";/*circle image*/.circle-container { position: relative; /* 1 */ width: 30em; height: 30em; padding: 0; border-radius: 50%; list-style: none; /* 2 */ box-sizing: content-box; /* 3 */ margin: 0em auto 0; border: dashed 0px #ffffff;}.circle-container > * { /* 4 */ display: block; position: absolute; top: 50%; left: 50%; width: 6em; height: 6em; m

.mdl-button {    text-transform: none;}/*get rid of mandatory uppercase for all buttons*/  

 Dreamweaver rewrite:<!doctype html><html><head><meta charset="utf-8"><title>Quick Links</title></head><body><p><strong><em>Institute Quick Links</em></strong></p><ul> <li><a href="https://in.leadingre.com/pages/28/help-and-faq">Help and Support Page</a></li> <li><a href="https://in.leadingre.com/legacy/lms/index.php%3Fr%3DmyActivities/index">My Activities</a></li> <li><a href="https://in.leadingre.com/pages/30/my-profile-and-calendar">My Profile and Calendar</a></li> <li><a href="https://in.leadingre.com/pages/56/syllabi-learning-journeys">Syllabi (Learning Journeys)</a></li> <li><a href="https://in.leadingre.com/learn/course/11/institute-forums">Forums</a></li> <li><a href="https://in.leadingre.com/pages/36/contests-and-events">Contests and Events</a&gt

<table style="background-image: url('https://in.leadingre.com/admin/certificate.png');" border="0" width="1810px"><tbody><tr><td width="100" height="1104"> </td><td width="1610"> </td><td width="100"> </td></tr><tr><td height="200"> </td><td style="font-size: 40pt; text-align: center;">[firstname] [lastname]</td><td> </td></tr><tr><td height="68"> </td><td> </td><td> </td></tr><tr><td height="134"> </td><td style="font-size: 18pt; text-align: center;">[course_name]</td><td> </td></tr><tr><td height="320"> </td><td style="text-align: center;">[course_description]</td><td> </td></tr><tr><td height="78"> </td><td s

Happy Friday!I’m hoping that someone has CSS code to hide the GMT city? Please and thank you? 

#doc-layout-page-content > doc-layout-legacy-wrapper > div > ui-spinner > div > div.ui-spinner-layer { border-color:#133D8D; height: 200%; width: 200%;}/*colorize spinner*/this also makes it bigger with mixed results I would love to replace it with my logo but I don’t think I know enough about how it works

I was browsing the Docebo University site yesterday looking for a course to send to someone, and came across this old presentation: ”Take Platform Design to the Next Level”https://university.docebo.com/share/asset/view/69It has resource files and many common requests. I know this has been mentioned in a few threads around, but thought it deserved a proper thread dedicated to it so it doesn’t get overlooked as much! 

Hi everyone,We have created a beautiful video we want to use for our background on the sign in page.The video contains audio but when I upload it and then go to the sign in page, there is no audio.Does anyone know if audio is possible for this? Is it a CSS issue?Thanks in advance for any and all help.

We've heard a lot of excitement from many of you about the new Follow Channels functionality. The two new notifications, New Content in Followed Channel and Digest: New Content in Followed Channels will not be configured or activated by default in your platform. Choosing not to configure these notifications will result in minimal impact of the feature on your learners. They'd only see a new Followed tab on the All Channels page (see the Following Channels section of the Managing Channels and Their Content knowledge article). Additionally, if you'd like to turn on notifications, your learners still have the ability to disable notifications for channels they follow as shown in the July 2022 release webinar (see 15:00 in the Release Webinar recording). If you'd like to hide the ability for your learners to follow channels in Docebo Learn altogether, you can use the following CSS to do so:ui-carousel .dcb-ui-carousel-additional { display: none!important;}ui-carousel .ui-carousel-header.dcb

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