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.

  • 236 Posts
  • 1,290 Replies

236 Posts

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
1 year 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
Guide II
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
Influencer I
HollyInfluencer I
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
dklinger
Hero III
dklingerHero III
posted in HTML & CSS

Moving the universal search to an on page experience

Morning Docebo-ians? Dochobans? Dob-ians? I got a decent question for you. This goes off of another post that I did about lets play hide that header.I have a simple need to hide that search bar on the top menu globally - it is going to cause more of a hassle than not and I need to minimize that hassle. But ideally? I would like to bring a type of search experience to a few high level catalog pages… please dont mind the dreaded stack of blocks...(lol - I will get there)…This is what I mean by a high level catalog page it is not handsome - but it is functional….Current state with things kind of obscuredWhat I would like is for the search to start off blank at first?And then show people cards or the search experience after. Or even jump over to the global search after a person clicks on a clean search interface….sorry - I have windows open...but you will get the point: If I had some javascript at the table, I could be clever and pass from that tiny form a url...but I am only kinda smart a

0
dklinger
Hero III
1 year ago
josefinarod
Docebian
josefinarodDocebian
posted in HTML & CSS

Have you used CSS on the course player to change the look / feel? Would love some ideas on what people have come up with!

Have you used CSS on the course player to change the look / feel?  If so, I’d love to see a screenshot & a little bit of understanding as to what you’re able to accomplish w the added CSS.  Would love some ideas on what people have come up!  Cheers!

4
Alan
Helper II
1 year ago
nicole.roman
Influencer I
nicole.romanInfluencer I
asked in HTML & CSS

Hide the "Start Learning Now" Button

Hello,Is there a way to hide the “Start Learning Now” button on the course player once they have begun their course? Having both buttons is very confusing for our users and hiding it would help with the number of help tickets we receive from users thinking their course wasn’t saved because the “Start Learning Now” button brought them back to the beginning of the course. Any advice is appreciated!

12
Annarose.Peterson
Hero II
1 year ago
dklinger
Hero III
dklingerHero III
asked in HTML & CSS

Let's play - hide that header

Howdy folks,Have you ever played Hide that Header with CSS?Well - I have a situation where I need to hide the header to avoid having some folks seeing that search bar and left hand hamburger menu….I need to give them the one page and the most vanilla experience possible.It is only for a specific page - and I have learned how to adjust the css for a page by working with the page ID.But if you have pulled this off? And are open to sharing it? Can you let me know how you have been hiding the header? Happy to mark you for the correct answer PS - I do know there is a function for replacing the entire header with something else….that is when I grow us up and can afford to have a sandbox of a site.

6
dklinger
Hero III
1 year ago
K
keithcorwinNewcomer
asked in HTML & CSS

Hosting iframe files within Docebo

Hey everyone,I’m wondering if anyone here uses iframes and if you do, where do you host external files?Currently we have a rotating carousel image banners, with the images being hosted from another server. I was thinking if there are options or workaround for hosting the files within Docebo rather than pulling the urls from another server?

6
elamast
Guide III
1 year ago

Badge winners

  • Product Q&A Influencer
    randallsimhas earned the badge Product Q&A Influencer
  • Product Q&A Influencer
    captainzeldahas earned the badge Product Q&A Influencer
  • Product Q&A Influencer
    billsohas earned the badge Product Q&A Influencer
  • Product Q&A Influencer
    gigi galgoczihas earned the badge Product Q&A Influencer
  • Product Q&A Influencer
    Hollyhas earned the badge Product Q&A Influencer
Show all badges
Terms & ConditionsCookie settings