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.

  • 286 Posts
  • 1,589 Replies

286 Posts

gstager
Hero III
gstagerHero III
posted in HTML & CSS

The Search for a Better Slider - Option 1

This post is meant to be an attempt at helping folks implement a slider type of widget with images that cycle through in an endless loop. No interaction. Down the road, I will offer one that has some manual selection to it. That is why this is titled as option 1.There has indeed been a number of postings referencing Comslider as a great resource for this sort of thing. I have not used it personally but I would venture a guess that it is much nicer and simpler than what I am about to offer here but this is free - so I guess you get what you pay for - LOL. At any rate - I figure that for some folks - Comslider may not be an option. If that is the case - you have one here.This is a CSS and HTML option - no JavaScript. This would still require some work on your part to tweak it for your number of images and to put in your image URLs - etc. I will try to help with that part as best I can.Here is a quick look at the one I built as a sample. Sorry it is a little small and blurry but I had to

57
sfrost
Helper I
1 month 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
1 month 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
1 month ago
sfrost
Helper I
sfrostHelper I
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
1 month ago
N
Novice II
NRettNovice II
posted in HTML & CSS

Breaking the boundaries of the HTML widget

Hey hey, I couldn’t find this issue anywhere but I know it has been done by some organizations.So here goes, I want to break out of the boundaries set by the HTML widget. Specifically, I would like to get to 100% width on the page to help create clearer sections of the pages. Hopefully the screenshots below will help illustrate what I’m asking about. Anybody figured this out and I willing to share?

7
M
Helper II
1 month 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
1 month 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
2 months ago
M
Contributor I
michelebanksContributor I
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
2 months 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
2 months ago
M
Contributor I
michelebanksContributor I
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 I
2 months 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
2 months ago
B
Novice II
BrentDeaytonNovice II
asked in HTML & CSS

HTML/WYSIWYG Widget Altering Nested HTML Elements

Hi all, I’m experiencing an issue with the HTMLL/WYSIWYG page widget and I’m hoping that someone here might have come across it/resolved it. The ProblemWhen nesting block elements (<div>) inside inline elements (<a>), the editor seems to "auto-correct" the structure upon saving, leading to a disrupted and redundant layout.Original structure:<a href="#"> <div></div> <div></div></a>Becomes:<a href="#"></a><div><a href="#"></a></div><a href="#"></a><div><a href="#"></a></div>I’ve managed to find a work around, however it’s impacting the intended functionality and appearance of the content.I reached out to helpdesk regarding the issue but they said they aren’t HTML experts and suggested consulting the community.  Seeking Insights:Has anyone else faced a similar problem with nested elements in the HTM/WYSIWYG widget on Docebo?   Any known workarounds or fixes? I susp

3
B
Novice II
2 months ago
M
Helper I
MazHelper I
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 I
2 months 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
2 months ago
JZenker
Helper III
JZenkerHelper III
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;} 

0
JZenker
Helper III
2 months ago
V
Novice II
vin.porterNovice II
asked in HTML & CSS

Hiding Outdated option

Is there any way to hide the option on the course mini-menus to “Mark as Outdated”? Client either wants a text entry for the user to enter (already upvoted that idea) or for it to go away.

12
hwolfehall
Helper I
2 months 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! 

4
hwolfehall
Helper I
2 months 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?

3
lrnlab
Hero III
3 months ago
elamast
Guide III
elamastGuide III
posted in HTML & CSS

How to hide the pop-over completion message for HTML content

If you’re using the HTML training material type and really want to get rid of that instantaneous pop-over saying the activity is completed, here’s some CSS code to hide it: /*Hide pop-over completion message for HTML content*/div.intime-completed.ng-star-inserted > div {    display: none !important;} The activity will still be marked completed everywhere it needs to be.  This just prevents the pop-over message from displaying.

4
JZenker
Helper III
3 months ago
JZenker
Helper III
JZenkerHelper III
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

2
JZenker
Helper III
3 months 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?

2
Annarose.Peterson
Hero III
3 months ago
kfortenb
Contributor III
kfortenbContributor III
asked in HTML & CSS

CSS to hide asset uploader in channels?

Hello! Is there a way to hide the “asset uploaded by” field within channels, using CSS? If so, can it apply globally, and/or to just to specific domains within Extended Enterprise? The rationale is that we use channels for content presentation and functionality, but the uploaders are not considered to be experts/contacts for the content.Example: I’d like to hide the names of all uploaders from all assets, such as this one: 

2
hwolfehall
Helper I
3 months 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.

3
M
Helper I
3 months ago
JZenker
Helper III
JZenkerHelper III
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  

0
JZenker
Helper III
3 months ago
B
Contributor I
Ben BaumanContributor I
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

4
B
Contributor I
3 months ago

Badge winners

  • Product Q&A Influencer
    elamasthas earned the badge Product Q&A Influencer
  • Product Q&A Influencer
    JasonHailerhas earned the badge Product Q&A Influencer
  • Product Q&A Genius
    Cheneyhas earned the badge Product Q&A Genius
  • Product Q&A Influencer
    B0LThas earned the badge Product Q&A Influencer
  • Product Q&A Influencer
    Teresa2023has earned the badge Product Q&A Influencer
Show all badges
Terms & ConditionsCookie settings