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.

  • 428 Posts
  • 2,237 Replies
428 Posts
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! 

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

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

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

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

1228
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

3127
gstager
Hero III
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!!

3183
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

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

1422
S
Novice II
1 year ago
danwinter
Contributor I
danwinterContributor I
asked in HTML & CSS
Permanently turn off "Contextual Help" tooltips

It would be great not to have to close the contextual tool tips each time I open a new tab or window - very distracting and frustrating.

74520
S
Novice II
1 year ago
N
Novice II
NRettNovice II
asked in HTML & CSS
Adding HTML outside of HTML/WYSIWYG widgets

So I know we can add HTML to the widgets and go crazy with the CSS customization of already existing elements of Docebo. But now I’m wondering if there’s a way for us to add HTML to Docebo in other ways? Or maybe edit the existing one?I’m wondering that because I want to add a header dropdown menu in-between the breadcrumbs and the page content.And not just on this specific page but on all pages on the platform.Has anyone figured out how to achieve this or something like this?

975
N
Novice II
1 year ago
SMorse
Novice I
SMorseNovice I
asked in HTML & CSS
Adding Alternate Text (Alt Text) to Docebo Image Widgets, Custom Content Widgets, and HMTL Widgets

Is it possible to add Alt text to any of these Docebo widgets:Image, Custom Content or HTML/WYSIWYG widgetsI don’t see a place to do in in the Docebo interface. But, what about adding code somewhere to fill the gap? Possible?

1142
N
Novice II
1 year ago
L
l.zimnitskayaNewcomer
asked in HTML & CSS
Custom html widget in mobile app

Hi. I’ve added a HTML/WYSIWYG Widget with custom styles. In web everything is fine, but in mobile app custom css doesn’t work.Are there any ways to make it work?

962
R
Docebian
1 year ago
carlo.daniels
Novice I
carlo.danielsNovice I
asked in HTML & CSS
Hide Assignment Submission Screen options

I tried searching for a direct answer to this but don’t think I found one. May I ask if anyone knows if you are able to edit the assignment submission screen in the course editor?My goal to have my learners only see the “Drop your file here or browse” option and eliminate the “Record you Screen. Start Recording” and “Alternatively...” options. Please see attached screenshot for reference.Any feedback is appreciated :)

44413
D
Guide II
1 year ago
Paul_Diniakos
Contributor II
Paul_DiniakosContributor II
asked in HTML & CSS
Remove Record Your Screen using CSS

We would like to remove the Record Your Screen from the Share Content section. Can someone post the CSS for me? Thank you!

11111
lrnlab
Hero III
1 year ago
L
Contributor II
LauraHelenaContributor II
asked in HTML & CSS
Changing the colour of Circle Buttons on Assets

Hi all, we’re having a weird issue where some people are getting blank buttons on assets in channels when they should obviously have the share, download etc in there. I’m thinking the best way to fix this might be to change the colour of the icons within those buttons maybe? Anyone know what CSS would work for those?

260
L
Contributor II
1 year ago
erin.brisson
Docebian
erin.brissonDocebian
published in HTML & CSS
What can I find in HTML & CSS?

Welcome to the HTML & CSS Category! This post explains the purpose and themes within this category. What is this category about?The HTML & CSS category is all about sharing code snippets to help others accomplish the nice little hacks and workarounds that are made possible by Custom Styles and HTML pages & widgets in Docebo Learn. You can accomplish a lot with these customization options, but we encourage you to test these changes thoroughly in your sandbox or through the inspector in your browser, as often times these edits can cause unintended consequences that may lead to a negative experience for your learners. What can I do here?Share your examples of custom code or ask questions related to custom HTML & CSS. Please be thorough when sharing your code so that it’s easy for others to understand and replicate. When sharing a post in this category, please include at least the following:Description – what does this code accomplish and what does it impact in the platform

14305
lrnlab
Hero III
1 year ago
M
mohammedhasanNewcomer
asked in HTML & CSS
How to change the colour of the initials using CSS

Hi all, I have been tasked to change the initials within the menu page which is currently blue, and they want it changed to black. Does anyone know how to do this?

675
lrnlab
Hero III
1 year ago
R
Novice III
RichardNovice III
asked in HTML & CSS
Adjust colours in "My Activities" donut

Hi all,I have tried to change the colours of the donut and associated text on “My activities” page. I can see that is has been done in Docebo University. @Adam Ballhaussen, would you be able to share the CSS-code used there?Thanks!

3575
D
Docebian
1 year ago

Badge winners

  • Product Q&A Influencer
    anna.messnerhas earned the badge Product Q&A Influencer
  • Product Tips & Tricks Influencer
    elamasthas earned the badge Product Tips & Tricks Influencer
  • Let's Talk Shop Influencer
    pmohas earned the badge Let's Talk Shop Influencer
  • Product Q&A Influencer
    ChrisBurtonhas earned the badge Product Q&A Influencer
  • Product Q&A Influencer
    MichelleWhas earned the badge Product Q&A Influencer
Show all badges
Terms & ConditionsCookie settings