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.

  • 392 Posts
  • 2,056 Replies
392 Posts
A
adam-gutsNewcomer
asked in HTML & CSS
Hide table of content toggle

Hey, i wish to hide the table of content toggle for all users so they only have the default view, how can i do this?

15
gstager
Hero III
2 years ago
willingworth
Influencer III
willingworthInfluencer III
asked in HTML & CSS
Platform Subheader Height: CSS

Does anyone have any fun CSS or system settings I’m missing to control the height of this header across the platform (marked by red rectangle in the image)?It really feels like a waste of real estate just for a page title.  

19
Allan
Novice II
2 years ago
A
adam-gutsNewcomer
asked in HTML & CSS
hide the help center icon

hey, i want to hide the help center icon in the top bar, does this need to be done in CSS or is there a toggle somewhere?

12
Neil Patterson
Guide I
2 years ago
archoll72
Novice III
archoll72Novice III
asked in HTML & CSS
Pseudo classes and elements on CSS (FAQ accordion)

Hello!Has anybody had a chance to do a workaround with CSS an replicate an event listener on JS in an accordion-type animation? offline, it works like a charm on CSS by using pseudo-class and elements. We added a nice SVG triangle with a rotate animation, hid the “answer” content and then make it collapsible.But… when I added the CSS on the branding box, the look is working, but not the behaviour or the SVG:Has anybody worked something similar before?  It seems that CSS and HTML don’t talk if the HTML is losing the CSS file reference once the code is added in Docebo (copy-paste). Input will be greatly appreciated! Txs!

5
gstager
Hero III
2 years ago
Neil Patterson
Guide I
Neil PattersonGuide I
asked in HTML & CSS
Remove the bottom margin of a specific widget ID

Hi all,I’m still getting to grips with CSS and have become stuck in a job I need to get done.  Basically we have an image widget above a channel widget, but it has a margin underneath that I would like to remove so the image is closer to the channel.I have found the widget ID, but am stumped as to what I need to put to change the margin size.Can anyone help please?Thanks in advanceNeil

3
Bfarkas
Hero III
2 years ago
omer.bitas
Influencer I
omer.bitasInfluencer I
asked in HTML & CSS
How to change color of catalog widget bar

Hi CSS and HTML expertsIt would be great to get your help with this one:Can you help me with specifying the color or these buttons using CSS?This was changed to white after I specified the color of the header icons and I want to now separately assign them with a darker color for visability. thanks,  

8
Bfarkas
Hero III
2 years ago
Annarose.Peterson
Hero III
Annarose.PetersonHero III
posted in HTML & CSS
Hide Change Password button on My Profiles page

Does anyone have the CSS to hide the Change Password button on the My Profiles page? I know the button id is: “vertical-tab-changePassword”Has anyone else successfully done this?  We have the option to hide the possibility of changing the password selected, but the option is still showing up for some reason.

3
Annarose.Peterson
Hero III
2 years ago
G
Influencer I
GRussInfluencer I
asked in HTML & CSS
Adjusting Widget height

Howdy folks!Throwing this out to the CSS gurus out there, any suggestions how to reduce the height of the below file repository widget? It’s FAR too high and pushes the course description waaaay down the page.  Have been trying in vain using a variety of code options but nothing successful or scalable thus far. Any advice / code options appreciated.  

2
G
Influencer I
2 years ago
gstager
Hero III
gstagerHero III
posted in HTML & CSS
Custom Pages --> Fun With CSS

We are about a month into our onboarding now so I am having a fair amount of fun tinkering around with some custom pages and thought I would share as others have here. While this is not yet our final product, I think it will do a nice job of providing a look at what is possible. What you see below is with a single HTML/WYSIWYG WidgetSome features:We’ve hidden the native header and footer. A space for an “Announcement Banner” Both Docebo internal and external links along the left Embedded YouTube A place for longer messages or articles General information panels on the right side Custom footers 

11
gstager
Hero III
2 years ago
K
Helper I
karilynnrussellHelper I
asked in HTML & CSS
Images for HTML emails

I’m new to HTML so if this doesn’t make sense, my apologies. I need a place to store images that are referenced in HTML emails sent from the Docebo system that is accessible to all employees. Instead of putting this on SharePoint or a company site (which is difficult given how big our company is) I was wondering if there is a place to store images within the system itself? (specifically for HTML emails) 

3
Bfarkas
Hero III
2 years ago
T
Novice III
tonya.clarkNovice III
asked in HTML & CSS
Customize the Registration Dialog?

Does anyone know how to customize the Register dialog? We are going to use Branch Codes to put new users in the right branch, but only for a specific type of users. We wanted to put text near that field to indicate they should enter their code if given one but ignore if they were not given a code. Any help would be greatly appreciated.  

3
T
Novice III
2 years ago
elamast
Hero I
elamastHero I
posted in HTML & CSS
Hiding contextual help via CSS

If you’ve administered the Docebo LMS for awhile, you’ve probably wanted to turn off the balloon help at some point.  Add this CSS to your site (under Branding and Look ---» Custom Styles) and it’s gone:/*Remove contextual help*/div.docebo-balloon, div.internal-header-suggestion-balloons {    display: none !important;} 

9
erin.brisson
Docebian
2 years ago
gstager
Hero III
gstagerHero III
posted in HTML & CSS
Text Editor Options

A recent conversation had me thinking about some of the text editor options out there.I thought it would be a curious discussion about what everyone prefers.Personally - I am not a fan of the native Docebo editor for code.At a minimum - I would like the code to remain exactly as I placed it there. Don’t re-format my stuff and don’t strip things out - especially harmless things like comments.Here are some free options I have used over the years.NotepadNotepad++BracketsVisual Studio CodeAtom - This one is my current “Go To” for writing up code before pasting it into various platforms and programs.So what is your favorite editor?

6
gstager
Hero III
2 years ago
hlillibridge
Novice II
hlillibridgeNovice II
asked in HTML & CSS
Training Materials Tab, any way to remove

Is there any way we can remove the training materials tab? Thank you.

0
hlillibridge
Novice II
2 years ago
gstager
Hero III
gstagerHero III
posted in HTML & CSS
CSS Click to Reveal Effect - Animation Idea #8

In this example, I wanted to start developing some more interactivity as opposed to passive effects.This requires the user to click on the box. When you click on it, the background color changes so that the text can be read. Of course, the trick here is to start with a background color that matches the text color so that it blends in and cannot be read.CSS Click to Reveal EffectHere is the CSS to make the above./* Click to Reveal *//* This is the CSS for the Branding and Look section */#card { width: 250px; height: 175px; background-color: #00ff00; margin: 25px; padding: 10px; font-family: 'Courier New', Courier, monospace; font-size: 24px; color: #00ff00;}#card:active { background-color: #000000;}Here is the HTML for the widget.<!-- Here is the HTML for your widget --><div id="card">This is the revealed text when you click on the box.</div> I would love to hear some ways that you could use this in your learning spaces.

0
gstager
Hero III
2 years ago
gstager
Hero III
gstagerHero III
posted in HTML & CSS
Making Superscripts and Subscripts

I did not see an easy way to do this within the platform using the text editor so I thought I would offer this little nugget for those who need to do these sorts of things.  In the image above, you can see two examples of where a subscript and a superscript would be used.To get this look, you would need to use the code editor by selecting the  < >  icon on your menu bar.For subscripts, surround the text you wish to have slightly lowered between the “sub tags”.<sub>6</sub>For superscripts, surround the text you wish to have slightly raised between the “sup tags”.<sup>2</sup> Here is how the code looks for what you see above.Note that I added a little extra styling which would not be required.<!-- HTML code for the subscripts --><div style="font-family:'Courier New'; font-size:24px; padding:10px;">Glucose: C<sub>6</sub>H<sub>12</sub>O<sub>6</sub></div><!-- HTML code for the superscripts --><div s

1
Adam Ballhaussen
Guide III
2 years ago
gstager
Hero III
gstagerHero III
posted in HTML & CSS
CSS Reveal Text Effect - Animation Idea #6

In this example - I thought it might be neat to create some sort of animated revelation of text.CSS Reveal Text Effect/* Text Reveal *//* This CSS goes in the Branding and Look Section */#mask { width: 500px; height: 50px; background-color: black; transform-origin: 100% 0%; animation-name: reveal; animation-duration: 4s; animation-iteration-count: infinite;}@keyframes reveal { 100% {transform: translateX(500px);} 100% {width: 5px;}}Here is what I did with the HTML<!-- This is the HTML code for your widget --><div style="background-color:#000000; font-family: 'Courier New'; color:#00ff00; height:100px; padding:10px; font-size:24px;">This is revealed text.</div><div id="mask" style="position: absolute; left: 0px; top: 0px;"></div>Please share all the ideas you might have for an effect such as this one.All you have to do is tweak the settings to make it fit your own projects or theme.

0
gstager
Hero III
2 years ago
gstager
Hero III
gstagerHero III
posted in HTML & CSS
CSS Pulsating Box - Animation Idea #5

In this little project we take a box and have it pulse a few times and then return to normal.What are some ideas you have for using this kind of animation?CSS Pulsating Box/* Here is the CSS code for the Branding and Look section *//* Pulsing Box*/#box { width: 25px; height: 25px; margin: 20px; background-color: #0000ff; animation-name: pulse; animation-duration: 2s; animation-iteration-count: infinite;}@keyframes pulse { 25% {transform: scale(1.5, 1.5);} 30% {transform: scale(1.25, 1.25);} 35% {transform: scale(1.5, 1.5);} 40% {transform: scale(1.25, 1.25);} 45% {transform: scale(1.5, 1.5);} 60% {transform: scale(1.25, 1.25);} 65% {transform: scale(1.5, 1.5);} 70% {transform: scale(1.25, 1.25);} 75% {transform: scale(1.5, 1.5);} 100% {transform: scale(1, 1);}}<!-- Here is the HTML for your widget --><!-- This one is as basic as it gets. --><div><div id="box"></div></div> As always - change it up however you see fit for

0
gstager
Hero III
2 years ago
gstager
Hero III
gstagerHero III
posted in HTML & CSS
CSS Bounce - Animation Idea #4

 This fun little CSS trick is similar to the sliding bar but moves the entire graphic rather than animating the width. This gives the arrow a sort of “bounce” effect to draw attention.Turn the arrow and adjust the direction of the “bounce” and you can point out just about anything!CSS Bouncing Arrow/* Here is the CSS for the Branding and Look section *//* Bouncing Arrow */#arrow { animation-name: bounce; animation-duration: 1s; animation-iteration-count: infinite;}@keyframes bounce { 100% {transform: translate(20px, 0px);}}I added a little inline styling here to position things the way I want. <!-- Here is the HTML code for your widget --><div style="padding:20px; height:50px;"><div style="margin-bottom:20px;"><img id="arrow" src="https://path/to/your/graphic/arrow.png" width="80" height="41" alt="arrowrt.png" /></div><div style="position:absolute; left:125px; top:30px;">This is some text worth looking at!!</div></div>Are there

0
gstager
Hero III
2 years ago
gstager
Hero III
gstagerHero III
posted in HTML & CSS
CSS Rotation - Animation Idea #3

In this idea - I thought I would play with some rotation.I attempted to provide a little something extra too. A CAR! - or at least the appearance of a moving car.Perhaps I will see about animating the entire set at some point.Here we have three images - I am only animating two of them - of course.Both tires are tied to the same keyframe code.CSS RotationHere is the code./* Here is the CSS for the Branding and Look section *//* Car Tires */#backTire { width: 50px; height: 50px; left: 77px; top: 65px; position: absolute; animation-name: carTires; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: linear;}#frontTire { width: 50px; height: 50px; left: 296px; top: 65px; position: absolute; animation-name: carTires; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: linear;}@keyframes carTires{ 100% {transform: rotate(360deg);}}<!-- Here is the HTML for the widget --><div style="padding

0
gstager
Hero III
2 years ago
gstager
Hero III
gstagerHero III
posted in HTML & CSS
CSS Sliding Bar - Animation Idea #2

Here is a bar that slides across the widget.I imagine you could use this idea in a variety of ways.I would be interested to hear about all the ways you might find a use for something like this.CSS Sliding BarHere is the code. Feel free to adjust it to your liking./* Here is the CSS for your Branding and Look section *//* Sliding Bar */#slide { width: 50px; height: 20px; background-color: red; border-radius: 40px; animation-name: slide; animation-duration: 2s; animation-iteration-count: 1; animation-fill-mode: forwards; animation-delay: 2s;}@keyframes slide { from {width: 5%;} to {width: 100%;}}<!-- Here is the HTML I used in the widget --><div style="padding:20px;"><div id="slide"></div></div><p style="margin:20px;">Sliding Bar</p> 

0
gstager
Hero III
2 years ago
gstager
Hero III
gstagerHero III
posted in HTML & CSS
CSS Blinking Dot

Well - not sure what you might use this for but perhaps you may want to draw the attention of your learners to something.I am more of a JavaScript guy so since I cannot use that - I have been trying to sharpen my CSS skills so I was trying to play with some animation ideas.Here is one that you’re free to use. Adjust anything to your liking.There are two parts here. CSS for the Branding and Look HTML for your widget or other page./* Blinking dot *//* This CSS goes in the Branding and Look Section */#blink { width: 50px; height: 50px; background-color: red; border-radius: 100px; margin: 20px; animation-name: blink; animation-duration: 0.5s; animation-iteration-count: infinite;}@keyframes blink { 50% {opacity: 0;}}/* This is the HTML code for your widget where you want the blinking dot */<div id="blink"></div><p style="margin:20px;">Attention please! This is an announcement that you don't want to miss.</p>Here is how it looks - (hopefully this shows up whe

0
gstager
Hero III
2 years ago
gstager
Hero III
gstagerHero III
asked in HTML & CSS
Using Custom CSS to edit the look and feel of the HTML Page Training Material

OK - I seem to be missing something. I have entered some custom CSS under the Branding, Look, and Feel area in both the 7.0 and the 6.9 areas.If I use an HTML Widget for a custom page - the custom CSS works fine.However, if I try to use the same custom CSS to style something in an HTML Page as training material for a course - it is ignored.I have also tried doing some style tags but those get stripped out.I seem to remember a place where I could put some CSS for courses but I cannot seem to find it again.It appears I can do some things by placing some styles inline like such but I’d rather access something pre-defined.<p style="color: #ff0000;">Red</p>Is there a way to style course HTML pages with custom CSS?

6
N
Docebian
2 years ago
JZenker
Guide II
JZenkerGuide II
asked in HTML & CSS
Targeting a specific Docebo Div for an iFrame

Hello,Seeing if anyone has had success targeting a specific Div from a Docebo page (the dashboard for example) and using iFrame to show that Div as a widget on another page? Having issues using an iFrame for another internal docebo page (getting 404) even though I have the perms to view in the page using the iFrame. Would like to include this #middle.section only as an iFrame and maybe some others on the dashboard: If anyone has any insight, please do let me know! Thanks!

2
JZenker
Guide II
2 years ago
malicm
Contributor II
malicmContributor II
asked in HTML & CSS
Hide Virtual Coach button in top bar using CSS

I was wondering if anyone has CSS to remove the Virtual Coach button, so it can stay on, but not available to the users. We’ve been told that it needs to be on to learn. I noticed the beta quiz questions and started going through them and the sentence structures were not good and the questions were confusing. I love the concept, but it will be confusing to the users, especially new hires. But, we still want the Virtual Coach bot to learn. Thanks for your help!Michelle

4
malicm
Contributor II
2 years ago

Badge winners

  • Product Q&A Influencer
    robrienhas earned the badge Product Q&A Influencer
  • Inspire 2023
    SarahBhas earned the badge Inspire 2023
  • Docebo Inspire 2024
    SarahBhas earned the badge Docebo Inspire 2024
  • Product Q&A Genius
    andrew.charleshas earned the badge Product Q&A Genius
  • Product Q&A Influencer
    trillyhas earned the badge Product Q&A Influencer
Show all badges
Terms & ConditionsCookie settings