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.

  • 414 Posts
  • 2,185 Replies
414 Posts
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 -  

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

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

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

330
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

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

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

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

2176
A
Novice 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;} 

290
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! 

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

523
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

312
JZenker
Guide II
1 year ago
Annarose.Peterson
Hero III
Annarose.PetersonHero III
asked in HTML & CSS
CSS to change breadcrumb font color?

I thought I was on the right track with changing changing the breadcrumb font size color by using: doc-layout-breadcrumbs .breadcrumbs { font-size: 14px; color: black;}This successfully changes the font size, but it keeps that font color white (I’m guessing because it is a link?).  Has anyone been able to successfully change the color of the font on the breadcrumb with CSS?

862
Annarose.Peterson
Hero III
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.

3283
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  

210
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

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

 

1254
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! 😊

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

813
K
Novice II
1 year ago
gstager
Hero III
gstagerHero III
posted in HTML & CSS
Remove From My Team 2 --> The Sequel

This post is a continuation of the first post found at the following link.Information found at that link is still valid but there is a new twist in the plot and so I decided to start a new thread to cover that scenario.Highlights From First EpisodeManagers have a team and they have an option to give team members the boot both individually, and when multiple folks are selected, en masse. We removed those options with CSS. HR is happy.Second Episode TeaserAs the manager - you find out that your boss, can still give your team members the boot even though you cannot. You inform HR and the tension in the room becomes palpable.DiscussionInformation at the link above works fine when your organizational structure is only one manager deep. This is due to the fact that Direct Managers have a few more options with their teams than the Functional Manager one level up does. This results in the “Remove From Team” option appearing at different positions in the pop-up menu.Two Level Management Structu

3117
gstager
Hero III
1 year ago
B
Novice I
BCunha1Novice I
asked in HTML & CSS
CSS Question: Removing Gradient from Course Overview Header

Hi there! For those who have activated the latest docebo features, has anyone successfully removed the gradient from the header image using CSS? This is the course overview page one lands on when they click on an unenrolled course from the course catalog. I know Docebo University has coded the gradient out for their own purposes but am having hard time figuring out the CSS in this particular instance where a page ID isn’t evident. Note: i have not activated the new features yet, and am not sure if that impacts what I’m looking at in the code. Thank you all! 

2407
ktbadham
Helper I
1 year ago
K
Contributor I
KyleRBennettContributor I
asked in HTML & CSS
CSS to remove boxes around html widget

Does anyone know if there is CSS to hide the boxes that automatically form around the HTML widget when you add it it pages?The part in the red circleThanks!!

3063
Annarose.Peterson
Hero III
1 year ago
JZenker
Guide II
JZenkerGuide II
asked in HTML & CSS
Changing font

Any idea on how to update the font used in my custom buttons? Trying to get them to match the custom content widget font  My CSS:/* Custom Buttons PU Page */.button_PU_page { border-radius: 4px; background-color: #105074; border: none; color: #FFFFFF; font-style: bold; font-family: Arial, Helvetica, sans-serif; font-size: 28px; text-align: center; padding: 28px; height: auto; width: 100%; transition: all 0.5s; cursor: pointer;}.button_PU_page span { cursor: pointer; display: inline-block; position: relative; transition: 0.5s;}.button_PU_page span:after { content: '\00bb'; position: absolute; opacity: 0; top: 0; right: -20px; transition: 0.5s;}.button_PU_Page:hover span { padding-right: 25px;}.button_PU_page:hover span:after { opacity: 1; right: 0;}My Html on the widget:<a href="/pages/384/trace-power-user-guides"><button class="button_PU_page"><span>Power User Guides</span></button></a>Any help would be super appreciated - I

1624
JZenker
Guide II
1 year ago
S
Novice II
stephanie.pankewiczNovice II
asked in HTML & CSS
Remove padding between widgets on pages

Hi all! Wondering if anyone knows how to reduce the level of padding between the widgets? The widgets here are custom content boxs and then the catalog widget. Ideally, they would be less far apart so there is less scrolling required.  

1342
S
Novice II
1 year ago

Badge winners

Show all badges
Terms & ConditionsCookie settings