Skip to main content

HTML & CSS

With Custom CSS and access to HTML widgets and pages, there's no limit to what you can accomplish in Docebo Learn. Share how you've customized Docebo to your liking with custom HTML & CSS.

  • 441 Posts
  • 2,348 Replies
441 Posts
R
rashminayak25Newcomer
asked in HTML & CSS
HTML Widget, HTML Widget link

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

1063
lrnlab
Hero III
1 year ago
A
Novice III
amwilliamsNovice III
asked in HTML & CSS
Test navigation buttons contrast color in light mode

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

833
Bfarkas
Hero III
1 year ago
gstager
Hero III
gstagerHero III
posted in HTML & CSS
CSS Button Click Effect - Animation Idea #10

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

5365
K
Novice III
1 year ago
M
morgan.dNewcomer
asked in HTML & CSS
Session page description hidden under "See More"

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. 

423
lrnlab
Hero III
1 year ago
S
SelesteNewcomer
asked in HTML & CSS
Not seeing the CSS Code for Sign in Page

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! 

942
Bfarkas
Hero III
1 year ago
sfrost
Helper II
sfrostHelper II
posted in HTML & CSS
Why is my CSS showing in my HTML?

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?   

646
Bfarkas
Hero III
1 year ago
J
Novice I
JPopeNovice I
asked in HTML & CSS
Task List Widget CSS - Changing the Well Done Icon

Hi CSS Gurus!Would anyone by chance know if there’s a way to change the thumbs up icon in the Task List widget to an icon of our own choosing?I keep thinking that this has to be do-able via CSS similarly to how we added our logo to our sign-in page with a little ::before styling of the right item and display:none on an item that needed to go away. I’m just having the worst time identifying that icon image.  Any brainstorming or help is appreciated!This is the area I’m trying to target -  

1086
Bfarkas
Hero III
1 year ago
D
DivyaNewcomer
asked in HTML & CSS
Customizing Course Deadline Colors in Docebo: Color Coding for Nearing and Overdue Courses

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.

712
Bfarkas
Hero III
1 year ago
S
StumilNewcomer
asked in HTML & CSS
How to change the icon on the Login panel?

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?  

360
S
1 year ago
M
Contributor II
michelebanksContributor II
asked in HTML & CSS
Expand width of SSO Button

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

652
M
Contributor II
1 year ago
M
Novice II
mhigbeeNovice II
asked in HTML & CSS
Downloading a Custom Font

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.

644
alekwo
Guide III
1 year ago
M
Helper II
MazHelper II
asked in HTML & CSS
Hiding breadcrums on specific courses

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.

515
M
Helper II
1 year ago
A
Novice III
AutoTraderGuyNovice III
asked in HTML & CSS
Widget IDs

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.

2396
A
Novice III
1 year ago
M
Contributor II
michelebanksContributor II
posted in HTML & CSS
Change Course Expiration Date color

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;}  

1006
Bfarkas
Hero III
1 year ago
JZenker
Guide II
JZenkerGuide II
posted in HTML & CSS
Hiding X/X Lessons Completed & Lessons Progress Bar

Hello - We have our training material setup in a way that users do not need to complete each one for the course to mark complete (various language options).However, a progress bar and X/X lessons completed appears in the course player, that we thought would be confusing to the end user.  We used the following CSS to hide both of these elements. Please feel free to use the code as well. /* Remove Course Player Lessons Progress Bar */.progress-bar.bg-grey { display: none! important;}/* Hide X Lessons Completed on Course Player */.subtitle-block {    display: none! important;} 

370
JZenker
Guide II
1 year ago
hwolfehall
Helper I
hwolfehallHelper I
asked in HTML & CSS
Asset View - Hide Recommended Next

We are using Channels to provide targeted instruction to groups of users. The content in each channel is curated to that specific set of users, with specific job roles and access.  Currently, when a learner is viewing an asset in their assigned channel, there is a “Recommended Next” panel displayed.  And it is showing/recommending assets that are NOT IN THE ASSIGNED CHANNEL. How can I disable this?  I cannot have leaners accessing information that does not apply to them.  For instance, User Guides and tutorials for our Power Users on the platform.  They have different Power User profiles.  I don’t want my Schedulers to be recommended to view the Course Development assets.  It is confusing to the users.  Is there a way to either (1) hide this Recommended Next thing or (2) lock assets to channels so that if you’re not assigned to the channel, the asset isn’t visible in the Recommended panel?Thanks! 

1564
hwolfehall
Helper I
1 year ago
S
Novice I
sue.hieterNovice I
asked in HTML & CSS
Static home page URL

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?

553
lrnlab
Hero III
1 year ago
JZenker
Guide II
JZenkerGuide II
asked in HTML & CSS
Hiding the calendar search bar

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

322
JZenker
Guide II
1 year ago
A
Influencer I
alex.driggsInfluencer I
asked in HTML & CSS
New Course Player - CSS to edit the new banner

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.

3733
M
Helper II
1 year ago
JZenker
Guide II
JZenkerGuide II
asked in HTML & CSS
Enlarging and centering cards of a catalog

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

220
JZenker
Guide II
1 year ago
B
Contributor III
Ben BaumanContributor III
asked in HTML & CSS
CSS to hide Lightbox player "Your Achievements (Course Score, Your Final Grade: 0)"

Hi Everyone,We are hoping some wizard here has some magic CSS we can sprinkle in, to hide this part of the pop-up after a user completes a scorm package & course: “Course Score: Your final grade: 0”  see picture below     We love the Rate the Course being so prominently displayed!We just want to hide the part of the UI with the “Your Achievements Course score; Your final grade: 0” Until we find a solution to hide that, we have changed our SCORM player to the “Stand-Alone Mode” which then has the effect of there being no pop-up after a user completes a SCORM package and the course. Thanks in advance!Ben from Nashville

644
B
Contributor III
1 year ago
JZenker
Guide II
JZenkerGuide II
asked in HTML & CSS
Anyone have any ideas on limiting the number of cards shown for catalogs via css?

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

280
JZenker
Guide II
1 year ago
JZenker
Guide II
JZenkerGuide II
asked in HTML & CSS
Does anyone know how to hide these details on content tiles?

 

1274
JZenker
Guide II
1 year ago
jcellitti
Influencer I
jcellittiInfluencer I
asked in HTML & CSS
Modifying # of Columns?

I have read SO many posts on here but haven’t been able to track down any CSS/html that allows you to edit the number of available containers. I know it is possible, just looking for someone willing to share! 😊

1268
gstager
Hero III
1 year ago
AnneG
Contributor II
AnneGContributor II
asked in HTML & CSS
Comslider account issues?

Hi Docebo community!We’ve been using Comslider for about five months. Periodically, we get a message that says “UserProjectAccountProblemThe project to be billed is associated with a delinquent billing account.The billing account for the owning project is disabled in state delinquent”. However, we are paid up through the end of the year and are nowhere near our quota for use. The odd thing is that the error seems to crop up about once a month for 24 hours and then self-resolves.I’ve emailed support but not response. Anyone else having this issue? 

833
K
Novice II
1 year ago

Badge winners

  • Product Q&A Influencer
    Cindy Moorehas earned the badge Product Q&A Influencer
  • Let's Talk Shop Genius
    gstagerhas earned the badge Let's Talk Shop Genius
  • Product Q&A Genius
    JKolodnerhas earned the badge Product Q&A Genius
  • Product Q&A Influencer
    kjandersonhas earned the badge Product Q&A Influencer
  • Product Q&A Influencer
    Lisa Dhas earned the badge Product Q&A Influencer
Show all badges
Terms & ConditionsCookie settings