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.

  • 269 Posts
  • 1,471 Replies

269 Posts

lrnlab
Hero III
lrnlabHero III
asked in HTML & CSS

Hiding the option, "Manage Team Requests"

Just noticed that anyone with access to view users can also access the option to “Manage Team Requests” and potentially remove a team member association. This page seems to track all changes made to employee/manager relationships whether done by an admin or via CSV import. This definitely poses a risk…Does anyone know or have CSS to hide this option on the User Management page? @gstager ?thank you.

0
lrnlab
Hero III
6 months ago
S
Novice III
StephSchulteNovice III
asked in HTML & CSS

Hide Next Recommended Content

Hello Friends,I would like to hide “Next Recommended Content” on this screen below:Is it possible to hide this using CSS? And if so, would you be so kind to share the code? Many thanks-Steph

3
hwolfehall
Helper I
6 months ago
dklinger
Hero III
dklingerHero III
asked in HTML & CSS

Hide Shareable Links

Wow almost a little more than a year in to just catch on to this one…I first posted this:And completely missed that there is another shareable link to hide for the user experience.Um - anyone try hiding that puppy in the task widget?

0
dklinger
Hero III
6 months ago
C
Guide I
Chelsy KoshyGuide I
posted in HTML & CSS

HTML Widget and Code Issue

I'm trying to add a clickable card with an image and text below in a Docebo page. Tried it in editor and browser it worked fine. Here is the code://///////<style>.tcolumn {  float: left;  width: 18.68%;  margin-bottom: 16px;  padding: 0 8px;}@media screen and (max-width: 650px) {  .tcolumn {    width: 100%;    display: block;  }}.tcard {  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);      border: 2px solid #1e5b67;}.tcontainer {  padding: 0 16px;  text-align: center;    background: #ffffff;    margin-top: -25px;}.tcontainer::after, .row::after {  content: "";  clear: both;  display: table;}</style><div class="row"><a style="display: inline-block;" href="https://picsum.photos/images"><div class="tcolumn"><div class="tcard"><img src="https://picsum.photos/id/1/222/148"/><div class="tcontainer"><div style="padding-top:30px;height:175px;font-family:Arial;"><p style="font-size:15px;font-weight:600;color:#1e5b67;margin-top:33%;">Conte

7
C
Guide I
6 months ago
Bouben
Influencer II
BoubenInfluencer II
asked in HTML & CSS

CSS change course tag (not started, in progress, completed) in List mode

 Dear CSS gurusI was able to change my course/LP tiles tags colors looking in the various messages 💪🏼But I’m stuck on doing the same while displaying courses in List mode (instead of Cards). I’ve tried to go through with my console… no results 😭And I would simply match my colors: Not stated = light blue, In progress = Orange and Completed = Green.Can you help me ?Thanks a lot in advance

4
Bfarkas
Hero II
6 months ago
lrodman
Guide II
lrodmanGuide II
asked in HTML & CSS

Does anyone enter branding colors with CSS and then use them on pages?

I was thinking of entering branding colors in CSS and then using them on pages, to make my life easier with EE clients. Then I could set all my pages to automatically use branding colors (with various other tweaks obviously) with EE variations. Has anyone tried anything like this? Any known pitfalls to declaring color variables in the CSS and then using them in CSS and pages? 

4
rich.schmick
Contributor II
6 months ago
Bouben
Influencer II
BoubenInfluencer II
asked in HTML & CSS

CSS Completion/non completion icon of courses in LP

Hello again CSS gurusFollowing my previous question, I was also able to change LO completion iconsBut when displaying my LP courses (by clicking on a LP details)… I would like also to match my icon colorsAny hint ?Thank you

2
Bouben
Influencer II
6 months ago
lrodman
Guide II
lrodmanGuide II
posted in HTML & CSS

Can Adobe XD export to html somehow?

I guess copy paste to dreamweaver and pray? I figured XD can probably export things other than graphics.I made a new homepage with image buttons as a temp fix but want to remake the same thing with html for speed and to add hover effects without adding more kbs.Any suggestions, or does anyone have a working “3 across buttons html flow” codeset?  

0
lrodman
Guide II
6 months ago
M
Novice I
mark.brumleyNovice I
posted in HTML & CSS

CSS to Enlarge the Logo

Hi! I’m not too bad with CSS but I can’t figure out the code to enlarge the logo and the header that contains it. I have inspected the code and tried various things, but no luck, Can someone help me? Thanks!

4
Bfarkas
Hero II
6 months ago
R
Novice I
rwatkinsNovice I
posted in HTML & CSS

CSS Code Library

Hi,We just launched Docebo to our company and are now turning our mind to customizing the interface and menus to suit our culture and needs. I have found many CSS code chunks in various threads to do wonderful things like remove the multiple Start Now buttons and hide the Remove from Team feature. All of these have been accomplished using user-submitted CSS code. I’m curious if there is a library of user generated CSS tweaks anywhere we can access instead of trying to find code fixes through community searches.Thanks!

4
Bfarkas
Hero II
6 months ago
M
mmumfordNewcomer
asked in HTML & CSS

CSS to hide calendar button on ILT course player

Does anyone have any CSS to hide the “Add to calendar” button on the course player page for ILT courses? Thus far we’ve only been able to hide all three buttons (Calendar, Add to Playlist and Related Sections) wheras we only want to hide the first button.

1
Bfarkas
Hero II
6 months ago
L
Helper II
LSPHelper II
asked in HTML & CSS

How to keep comments in HTML training material code editor?

I only just started out using some HTML for HTML training material by copying some code from somewhere else and playing around with it. I made some <!-- … --> comments to mark what was what, but they disappear once I save the code. Any way to change keep them in there?Is there anything else that gets stripped?

5
Bfarkas
Hero II
6 months ago
lrodman
Guide II
lrodmanGuide II
posted in HTML & CSS

How do links work in an iframed comslider

Hello, If we iframe a comslider in as an html widget on our homepage, and a user clicks a link in that comslider, can we make it navigate the whole “master” docebo page? Or do all comslider links have to be “new window” or “in iframe”. Here is an example of where the comslider would go - replacing that “limitless” banner. 

8
Bfarkas
Hero II
6 months ago
A
Novice I
acdNovice I
asked in HTML & CSS

Change 'Back' icon SVG color in CSS without changing 'Magnifying Glass' icon color

Hi, Could anyone enlighten me as to how I can change the ‘Back’ icon fill (circled in red) without changing the fill color of the ‘Magnifying glass’ icon (also circled in red)?I can’t seem to change one in my CSS without the other also changing. Thanks!  

8
Bfarkas
Hero II
6 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. 

1
Bfarkas
Hero II
6 months ago
brandonq
Contributor II
brandonqContributor II
asked in HTML & CSS

Hiding the "NEW" and "IN PROGRESS" buttons on Course Thumbnails

I previously used the localization tool to switch the confusing NEW button on any course that hasn’t been accessed to NOT STARTED, but what I’m realizing is it’s still an unnecessary and obtrusive feature (see below).Is there CSS to hide it entirely? When you do a list view it completely covers the thumnail. 

2
brandonq
Contributor II
7 months ago
Lola Fernandez
Novice I
Lola FernandezNovice I
asked in HTML & CSS

Widget layout

Hello Docebo Community! 🤙🏼I'm writing this afternoon, because I'm in the process of creating our catalog page… And I'm very admiring the layout of the Go1 marketplace ⬇Go1 marketplaceIdeally, I'd like to be able to get something similar: to have these five category “boxes/maps” side by side, instead of the three widgets proposed when organizing the widgets. Do you know if this is possible? And if so, by what means? Thanks in advance for your insights! 🎯Lola

1
Bfarkas
Hero II
7 months ago
dklinger
Hero III
dklingerHero III
asked in HTML & CSS

My Team - Real life story - Assist Request

I just got this message from a manager trying to understand.So, for example, xxxx and xxxx need to log into the learning center and complete NH Training even though they show as Looks Good?What do I tell the person??? They are right.So a question for you - does anyone know if you can hide the KPI “Looks Good” tag via CSS? Because the training is given a deadline? Albeit a soft-deadline - and the KPI tag isnt helping - it is confusing people on my end. 

9
dandrews
Helper I
7 months ago
lrodman
Guide II
lrodmanGuide II
posted in HTML & CSS

Free CSS: Themed header, titlebar and breadcrumb bar

before and after (I have a few other tweaks in there too) /***************header and titlebar ***************************//* fancy header bar*/header.doc-layout-header div.doc-layout-header-bar doc-layout-internal-header { background: url(https://docebo-institute.s3.us-east-2.amazonaws.com/public/branding_hacks/breadcrumb-branding-header.png) repeat-x center; background-size: contain; background-color: transparent;}/* fancy breadcrumb bar*/doc-layout-breadcrumbs div.breadcrumbs { background: url(https://docebo-institute.s3.us-east-2.amazonaws.com/public/branding_hacks/breadcrumb-branding.png) repeat-x center; background-size: contain;}doc-layout-breadcrumbs div.breadcrumbs div.hierarchical-breadcrumbs ul li{ visibility: hidden;} /* hide breadcrumb text*/ doc-layout-breadcrumbs div.breadcrumbs div.navigation-history a { color: black;} /* black navigation-back text*//* fancy page title bar */doc-layout-title-bar div#page-title__wrapper { background: url(https://docebo-institute.s3.us-eas

5
C
Contributor III
7 months ago
sjennings78
Helper II
sjennings78Helper II
posted in HTML & CSS

Adding GIF images to your pages

Docebo may not currently have a built-in way to add GIFs to your pages, but with a few extra resources, you can add them to your pages.  I’ll share here what we have done on our LMS to use GIFs.We have a webserver where we are able to host images outside of Docebo - but there may be other storage options out there that will also work.  As for creating the GIFs, we have been using mostly Canva lately to create them (it’s super easy to use and inexpensive for a PRO account).Sometimes we’ll do a single GIF image and place on the page to draw more attention to a topic.  Other times, we do a set of “slides” to scroll additional information on the page.  Once we have the slide(s) created, we export them as a GIF in Canva.  We then upload that GIF to our webserver (please comment below if you have found other hosting solutions for images) and place it on a page using an HTML widget.In the HTML widget, we just use a simple <img> tag to display the GIF.  Here’s a sample code snippet and G

5
H
Novice II
7 months ago
rogergreenlee
Contributor II
rogergreenleeContributor II
asked in HTML & CSS

Is it possible to customize the 403 page?

This default page is ominous, any way we can provide better information to a user, like adding our own support contact info? How do I overhaul this 403 page? 

11
lrodman
Guide II
7 months ago
omer.bitas
Influencer I
omer.bitasInfluencer I
asked in HTML & CSS

Change the color of header buttons

HiWhat is the way to set the color of the header icons/buttons (?, Gamification, Notifications etc) ?I’ve tried /*question mark menu color*/ #ui-button-icon-4{ color: #f1f1f1 !important;but although the CSS reference is right (Display:none works), the color will not change.Does anybody know a solution? (P.S about the same question for the breadcrumb bar color and text color) thanks, 

5
Bfarkas
Hero II
7 months ago
raffy
raffyNewcomer
posted in HTML & CSS

Hide Total Badges and Points from the Badges widget

Hello community,I am trying to look for the right ID or class the past hour to no avail. Basically, what we want is to hide the bottom tab that says My Awarded Badges and My Total Points. This way, only the badges will show up in the widget. If they need to dive deeper, they can always click the Trophy Icon on the top bar or the dedicated Badges and Points link we have on the homepage. Hopefully someone in here encountered this use case and was able to find the right id/class to modify.I appreciate any help regarding this  

1
raffy
7 months ago
Bfarkas
Hero II
BfarkasHero II
posted in HTML & CSS

Using a SCORM wrapper to insert webpages/scripts/mini-sites into courses

This has come up a few times, so I thought I’d share my lightweight wrapper to solve this.Issue: Building small webpages, scripts, webapps to bring into a course, but because regular html pages cannot be directly uploaded you must host it somewhere else and then iframe into the course.Workaround: Move the files into a lightweight SCORM wrapper, zip all the files into a package and load into a course as a SCORM package. How: Download and unzip the attachment (SCORM_WRAPPER_HACK.zip) Open the file ‘imsmanifest.xml’ and update the two title tags that currently have ‘Example SCORM Package Hack Update the Title!’ in them. These will show in a few places so use a good logical name. Copy your files into the base of the folder (you can bring in subfolders as long as you have referenced them correctly. The main page that will load needs to be an index.html file and should reference everything you loaded into the directory. Zip all contents of the folder into a single directory. Be careful not t

15
Bfarkas
Hero II
7 months ago
K
Novice I
kelseycoffeyNovice I
asked in HTML & CSS

CSS to remove "shared content" from the playlist

Hello! Does anyone have css to remove the shared content from the playlist screen? any help would be appreciated. I would love to use this feature but the but the user experience is confusing with the shared content so visible and the actual content hidden at the bottom.

0
K
Novice I
7 months ago

Badge winners

Show all badges
Terms & ConditionsCookie settings