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.

  • 408 Posts
  • 2,135 Replies
408 Posts
C
Novice I
CrysGNovice I
asked in HTML & CSS
Using Superscripts / subscripts for Test Training Materials

One of the choices in our test question has a superscript, and I thought using the tag <sup> could do the trick. It looks ok within the Question Bank, but when it’s being viewed on the test, the actual tags are shown as well:  I’m not very familiar with CSS or HTML coding, so I’m sure there must be a step I’m missing. Does anyone have a recommendation on how to fix this? Thanks in advance!  

5
lrnlab
Hero III
10 months ago
S
seanpfmNewcomer
asked in HTML & CSS
How can I change the color of the hamburger menu?

Hi,I’ve made a few attempts to target the hamburger icon and change it to flat white with no success. Looking for code to do so. Thank you!

1
Bfarkas
Hero III
10 months ago
ktbadham
Helper I
ktbadhamHelper I
asked in HTML & CSS
Hiding Menu Items on New Course Player

The add to calendar button doesn’t work for us. I was hiding it in the old player with this CSS:#doc-layout-action-buttons [aria-label="Calendar"] {display:none;} But I can’t seem to figure out how to do the same thing on the new course player. Does anyone know the class/ID that controls this, and what the aria labels are for the new menu? I want to hide the calendar as well as mark as outdated. Thank you in advance for your help!

1
Bfarkas
Hero III
10 months ago
JeanetteMcVeigh
Hero II
JeanetteMcVeighHero II
asked in HTML & CSS
We have custom CSS and it's messing with the information displayed when the Gamification icon is clicked

OK, so all you CSS peeps out there...I have custom CSS that was created by people that are not me.  😀 Working on turning on Gamification and the layout when a user clicks on the trophy icon is not working. I know it’s my custom CSS because if I remove all of it, it display correctly.Can anyone help me determine what ‘stuff’ controls the Gamification displays? Image below is showing the issue… Thanks. 

1
Bfarkas
Hero III
10 months ago
andym
Novice I
andymNovice I
posted in HTML & CSS
Hide ability to invite all channel users to view asset

Like a few others here, I’ve been concerned about the ability of users to invite an entire channel’s user base to view an asset, but seem to have found a CSS fix.ProblemI’ve altered our language pack to remove any reference to inviting a channel, but the search box still returns channel results, e.g. if searching for someone called ‘Sofia’, typing ‘sof’ will autocomplete to our global ‘Soft Skills’ channels with thousands of users…BEFORE Solution /* AM - Prevent invitations to all channel users */.inviting-search-multiselect .text-basic-size:has(.additional-info){display: none!important;}.inviting-search-multiselect being the search bar on the Invite pop-out .text-basic-size being the individual search results :has specifying only search results which also include the number of channel users (.additional-info)This results in users still being selectable, but channels not! AFTER 

3
AnneG
Contributor II
11 months ago
lrodman
Guide II
lrodmanGuide II
posted in HTML & CSS
Free CSS: Three column hamburger menu as a "mega menu"

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: 

4
Bfarkas
Hero III
11 months ago
omer.bitas
Influencer I
omer.bitasInfluencer I
asked in HTML & CSS
how to remove course ID from player

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?

7
J
Influencer III
11 months ago
lrodman
Guide II
lrodmanGuide II
posted in HTML & CSS
Can I create hover-over popups for the full-width calendar (my-calendar OR catalog-calendar) with CSS?

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. 

2
jckemv
Helper I
11 months ago
Paul_Diniakos
Contributor II
Paul_DiniakosContributor II
asked in HTML & CSS
Notifications - Code to track user interest

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.

1
lrnlab
Hero III
11 months ago
L
Contributor III
lyndagutmanContributor III
asked in HTML & CSS
Using CSS with Extended Enterprise

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

3
mateojones
Novice III
11 months ago
J
Novice I
jonvNovice I
asked in HTML & CSS
Identical code from existing HTML/WYSIWYG page widget creates a different result in new page widget

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: 

8
gstager
Hero III
11 months ago
R
rashminayak25Newcomer
asked in HTML & CSS
HTML Widget, HTML Widget link

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

3
lrnlab
Hero III
11 months ago
A
Novice II
amwilliamsNovice II
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

3
Bfarkas
Hero III
11 months 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

5
K
Novice III
11 months 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. 

3
lrnlab
Hero III
11 months 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! 

2
Bfarkas
Hero III
11 months 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?   

6
Bfarkas
Hero III
11 months 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 -  

6
Bfarkas
Hero III
11 months 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.

2
Bfarkas
Hero 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;}  

6
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?  

0
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

2
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.

4
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.

5
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.

6
A
Novice III
1 year ago

Badge winners

  • Product Q&A Influencer
    rhunt79has earned the badge Product Q&A Influencer
  • Dallas Inspire 2024
    mgrady70has earned the badge Dallas Inspire 2024
  • Dallas Inspire 2024
    erin.brissonhas earned the badge Dallas Inspire 2024
  • Dallas Inspire 2024
    barthurhas earned the badge Dallas Inspire 2024
  • Dallas Inspire 2024
    brevellihas earned the badge Dallas Inspire 2024
Show all badges
Terms & ConditionsCookie settings