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.

  • 217 Posts
  • 1,230 Replies

217 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
11 months ago
D
Novice II
DackNovice II
asked in HTML & CSS

Can tags be hidden?

I understand the usefulness of tags for search. However once a learner arrives at a video, the need to show the tags is not important. Is it possible to hide the tags?

3
gstager
Hero III
11 months 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
11 months 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
11 months ago
archoll72
Novice I
archoll72Novice I
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
11 months 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 II
11 months 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 II
1 year ago
Annarose.Peterson
Hero II
Annarose.PetersonHero II
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 II
1 year ago
G
Contributor II
GRussContributor II
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
Contributor II
1 year ago
omer.bitas
Influencer I
omer.bitasInfluencer I
asked in HTML & CSS

how to remove course ID from player

HI can anybody advise on removing the ID code from the course player?Ive tried using  subtitle-block ng-star-inserted {    display: none !important;But it did not work. any help?

4
Daniel
Helper III
1 year ago
L
Novice III
lisa.schneerNovice III
asked in HTML & CSS

How to Hide Pop Up: COURSE has been added to your learning activity!

We are trying to reduce the number of START buttons and this particular pop up it just an additional click we don’t need.   I’ve been digging on the HTML/CSS pages but haven’t quite found any code that shows how to eliminate/block this pop up.   Our external users don’t care about their “learner activity”  they just want to register and start a course.   So it would be a huge win if there were code to block this box. 

5
Bfarkas
Hero II
1 year ago
Holly
Contributor II
HollyContributor II
asked in HTML & CSS

Show user name on every page of User Personal Summary

Hi, we would like to show the user’s name on each page/tab of the user personal summary. Currently the name only appears on the Statistics page, but we’d like to have it appear on the other pages. Has anyone created CSS code to do this? 

3
Bfarkas
Hero II
1 year ago
K
Contributor II
karilynnrussellContributor II
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 II
1 year 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
1 year ago
elamast
Guide III
elamastGuide III
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
1 year 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
1 year 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
1 year 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
Docebian
1 year 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
1 year ago
JZenker
Helper III
JZenkerHelper III
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
Helper III
1 year ago
malicm
Novice III
malicmNovice III
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
Novice III
1 year ago
W
Contributor II
wizenupContributor II
asked in HTML & CSS

Course description paragraph/heading space after

Sorry for the terrible title!We are working with a course description and have a problem with the spacing after a paragraph or heading.Everyone thinks the spacing is not enough, but adding a return makes it too much.We’d like to add a bit more space. I believe this is margin-bottom in css, but that does not seem to have any affect.Any ideas?

3
gstager
Hero III
1 year ago
B
beppeartzNewcomer
asked in HTML & CSS

Change style on one link

Hello CommunityI need to add style to the first link of this nav bar. Only that one, but i don’t know how to call it on css.If i add h1, i change all the h1 of the page:(Not very expert. Can you help me?https://resistenzatype.fontdue.com

1
alekwo
Guide III
1 year ago
JZenker
Helper III
JZenkerHelper III
asked in HTML & CSS

Centering Text of a CSS/HTML flipcard

Hello,I finally managed to work in flip cards successfully (yay!) but am struggling to get the text of the back of the card to be centered:  Would anyone might have any insight as to what I need to add to either the html or the css to achieve this? Here is my current code: HTML:<div class="flip-card"> <div class="flip-card-inner"> <div class="flip-card-front"> <img src="https://s3.us-east-2.amazonaws.com/docebo.traceinternational/_Site+Images/tasa+widget.jpg" alt="Avatar" style="width:443px;height:300px;" /></div> <div class="flip-card-back"> <div class="align-items-center"> <h1>I figured out flipcards!</h1> <p>Finally!</p> </div> </div> </div></div>CSS:.flip-card { background-color: transparent; width: 443px; height: 300px;}.flip-card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.8s; transform-style: pr

7
dklinger
Hero III
1 year ago
Neil Patterson
Guide I
Neil PattersonGuide I
asked in HTML & CSS

HTML 'flip card' widget

Hi all,Random question and not sure exactly how to word it, BUT…I remember attending a Docebo webinar last year and they demonstrated the use of what I would call flip card  widgets (you hovered over an image and it flipped over).  I think it was something to do with airlines.They sent out the HTML/CSS code, but I cannot find it anywhere.Does anyone else know what I am talking about?  If so, do you have that email/code?Thanks :)

12
JZenker
Helper III
1 year ago

Badge winners

Show all badges
Terms & ConditionsCookie settings