HTML & CSS

Hello, We didn’t end up using this code, but I thought it might be helpful to others. It turns your hamburger menu into a 3 column “mega menu” top center using CSS-flexbox columns. It also makes the topbar “fat” plus a few other tweaks. Enjoy! Before:After: 

HI can anybody advise on removing the ID code from the course player?Ive tried using  subtitle-block ng-star-inserted {    display: none !important;But it did not work. any help?

Hello, Could I use CSS to create hoverovers for the calendar, so users wouldn’t have to click an event to see details? I assume not but figured I’d try. See below. 

I hope to ask this question as clearly as possible:We want to send an email notification to a group of users, and in that email we are asking if they are interested (yes/no) in attending an upcoming vILT. Is there any code out of the box or code that would capture the yes/no button responses in a single place for us to track?Thanks in advance.

Hi Community.  We are currently implementing EE and i can’t get a straight answer from Docebo about using CSS iwithin the sub-domains. If within the sub-domain, i turn on “enable custom settings for this client”, does it use the root CSS along with the client-specific CSS i add, OR do i have to copy the root CSS into the client CSS area to have it all apply?The latter seems to be an administrative nightmare, but i’d like to better understand how the CSS updates work within EE.Thanks for any guidance you can provide.Lynda

I created a new page for my site and copied an HTML/WYSIWYG widget from an existing page. However, the new page widget, using the identical code copied from the existing page widget, looks different from the original. If anyone has any suggestions of how to troubleshoot, it would be much appreciated. Thanks!Here’s the code:<h4>Manager Dashboard</h4><p><a href="/manage/users">My Staff</a></p><p><a href="/course/manage">Course Enrollments</a></p><p><a href="/learn/admin/reports">Reports</a></p>Here’s the existing page widget desktop view: Here’s the new page widget desktop view: 

Hi, Does anyone know how to link HTML widgets to internal pages? 

I’ve put my platform into light mode in the new course player according to the forums here (thanks!), but I have one additional style issue. The “Previous” button and some of the icons in a test are showing white text over the grey background. I’m not sure which color to modify, but it definitely isn’t any color I have set to white or grey currently. Here’s what I have in Branding:/* Light Theme */lrn-course-player-play-area { --ui-color-layout-contrast: #f5f5f5; --ui-color-typography-negative: rgb(0, 0, 0); --ui-color-border-accessibility-default: rgba(65, 64, 66, 0.507); --ui-color-layout-overlay-dark: rgb(255, 255, 255);}lrn-training-material-header,.lrn-course-player-table-of-contents-header,.lrn-course-player-training-material-idle-view-content { --ui-color-icon-negative: rgb(73, 43, 43); --ui-color-icon-neutral: rgb(255, 255, 255);}lrn-training-material-header button,.lrn-course-player-table-of-contents-header button,dcb-ui-list-item-training-material-content,.lrn-course-pl

In this example - I decided to create a custom button that has the effect of being pressed.It has the look of a momentary push button rather than a persistent one.To do this we are simply changing the size and position by just a few pixels and adjusting the color and shadow.CSS Button Press EffectHere is how I did it./* Button Press Effect *//* This is the CSS for the Branding and Look section */#myBtn { width: 75px; height: 25px; background-color: #e21836; border-radius: 25px; position: absolute; box-shadow: 3px 3px grey; left: 25px; top: 25px;}#myBtn:active { background-color: #9d061f; left: 29px; top: 29px; width: 74px; height: 24px; box-shadow: none;}#myBtn:active p { color: #ffffff;}Here is the HTML<!-- This is the HTML for your widget or other page --><div><div id="myBtn"><p style="padding-left:7px;">Press Me</p></div></div><!-- Want to actually add a link to this button? --><!-- You can just add the following and

Having issues with the description being collapsed automatically since the banner update came in over the summer. As shown below, Most of the description is collapsed (we’ve added the “click…description” text in order to draw people there but there must be a way to make it display fully as. defaultDoes anyone know if there’s a solution within the page design options? Or if someone’s found a string of code that does the same. 

Hello, I’m attempting to use a free code found in the Docebo University to make my sign in place semi-transparent:login-wrapper {background-color: rgba(255, 255, 255, 0.85) !important;} .bg-white-opacity, .login-container .login-content {background: transparent !important;}  I’m adding this code to the platform's configure branding, look, and feel section under the 7.0 sample interface.  It’s not reflecting when attempting to sign-in. What am I doing wrong?   Thank you! 

I had a slider working thanks to @gtstager HTML/CSS code provided. And then I borked it…  My CSS is now showing up as text :(  Anyone have any idea what I am doing wrong… Google was not helpful and I only know enough CSS HTML to be dangerous.  This is showing instead of my image on one of my carousels and the other one at least displays an image.  I answered my own question…  The CSS Goes in the configure branding and look…. The HTML goes in the widget…. If you put the CSS in the Widget it will show in the widget…  I want to put in a second slider… . Do I need to give it another name?   

Hi Team,Is it possible for someone to assist me guiding changing the colours for course deadlines in Docebo through CSS? I'd like to set a colour coding scheme where courses nearing their deadlines appear in blue, and courses that are overdue display in pink.

Hi,I’m wondering if anyone may know the CSS to change the color of the course expiration date on cards to red. I’ve been trying this with no luck}/** Change text color expiration date due **/.ui-list-item-status-details ui-typography-subtitle ui-color-typography-secondary ng-star-inserted{    color: #1D7000;}  

Hi We want to change the small icon that appears on the login panel to be our company Logo. I’m told this can be done via ‘Custom Styles’ but am trying to ‘locate/target’ the CSS that needs to be changed.The nearest I can get is:.ui-button .ui-icon {and it looks like there is an ‘Injected Stylesheet’ being used.Has anybody else managed to change this ‘icon’ to their own company logo?  

Hi,I have some code that I used to move the SSO button to the top of the login pageThe issue I am running into is if I expand the width of the SSO button - it displaces the Sign in TextI’d like to keep the Sign in Text above the SSO button because I plan to replace itThis is the code I am using/*CSS to Flip the Login Page*/#doc-layout-login form {    display: flex;    flex-wrap: wrap;}#doc-layout-login  h1.login-form-title.hyd-typography-heading-2 {    order: -3;}#doc-layout-login p.login-form-subtitle.hyd-typography-subtitle.hyd-color-typography-secondary {    order: -2;    font-weight: bold;    font-size: 15px;}#doc-layout-login ui-input-text.login-field-username {    border-top: 1px solid #dbdbdb;    border-right: 1px solid #dbdbdb;    border-left: 1px solid #dbdbdb;    padding: 8px;} #doc-layout-login ui-input-password {    width: 100%;    padding: 8px;    border-left: 1px solid #dbdbdb;    border-right: 1px solid #dbdbdb;} #doc-layout-login ui-input-checkbox.login-field-remember-m

Anyone know to download and use a custom font in an HTML widget?  I can obtain both an html link and @import for CSS, but can seem to find a place where I can add them to the header or style sheet.

Is there anyway to hide the breadcrumbs entirely on a specific course page? My new starter onboarding is very step by step and I don’t want them clicking on “My courses and learning plans” in the breadcrumbs at the top of the course page. However, I do want that available for normal users on normal courses.

Hi, forgive me if this has been asked countless times before, what is the easiest way to find out what a specific widget ID is if I want to try an alter the look of it.  That is to say both system and custom widgets?Thanks for you help.

Hi all!We are getting ready to launch our new platform in the next 30 days or so.  I was wondering if it was possible to have the logo in the upper left be a static URL so that regardless of what a user’s landing page is, they can click on the logo to get to the same home page.  My situation is that we have a ‘gatekeeper’ page for our hourly employees to verify they are on the clock.  Once they click on the “continue” button on that gatekeeper page, they land on the actual home page (where a salaried employee lands first).  For the hourly employee, when they click the logo, they wind up back on the ‘gatekeeper’ page.  It’s easy enough for them to click continue to get back to the real home page, but I think what will be clunky user experience. Any ideas for accomplishing this?

Hi team, Can anyone help me with the ID to hide this search bar on the my.calendar widget? Tried so many different IDs but none are taking, thanks

Has anyone tested using css to edit the banner at the top of the new course player. We are trying to keep this update as simple as possible and want to just use the same color for all courses across our platform. Docebo support said we could do this through css, but told me they couldn’t help with that. Just curious if anyone has tried this and if they would be willing to share it with us so we can try it in our platform.

Interested in showing maybe three cards at a time here before the arrow shows up, and possibly having them centered  

Have seen others use it and looks great - thanks for any heads up.