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,238 Replies
428 Posts
gstager
Hero III
gstagerHero III
posted in HTML & CSS
CSS Card Cycle Effect - Animation Idea #7

In this example, I tried to do something a little bit more complicated and come up with an effect that might resemble cycling through a set of flash cards.The tricky part of this was that using the z-index - which was my first idea - was not cooperating well. So I ended up working with the opacity instead. I figured it did the job well enough.This animation is set to allow you a full 5 seconds to view each of 5 cards.CSS Card Cycle EffectDue to the timing nature of this particular effect - it is only meant to cycle once through the deck. The animated gif above simply captures it once through and repeats it for you.Here is the CSS for this one…/* Card Shuffle *//* This CSS goes in the Branding and Look Section */.cards { width: 250px; height: 170px; margin: 40px; padding: 20px; color: white; font-size: large; position: absolute; box-shadow: 2px 2px 5px grey;}#card1 { background-color: green;}#card2 { background-color: blue; animation-name: shuffle; animation-duration: 2s; a

10991
S
Helper II
2 years ago
C
clare.barberNewcomer
asked in HTML & CSS
External HTML and CSS writers

We are a very small charity and none of us overly good with IT systems. We have set up and have been using Docebo for a number of years now, but there are issues we have with the system that i am sure could be easily resolved with some coding and re-design, non of us however are competent to do this ourselves. Has anyone used an external body to do this that they could recommend? Unsure if Docebo offers this service itself?

1376
eleonora.maggioni
Novice II
2 years ago
janina.zielecki
Influencer III
janina.zieleckiInfluencer III
asked in HTML & CSS
Shortening the list of elements shown in the "Courses and Learning Plans" widget

Hi everybody,has anyone ever tried to shorten the number of list items shown in the “Courses and Learning Plans” widget? I would like to have the button “Load More” already appear after one row of list items. 

1916
P
Novice III
2 years ago
K
Keith BalaberdaNewcomer
asked in HTML & CSS
Remove Expiration Date from Courses

Can any provide assistance with CSS code to remove the “Expiration Date” column from Courses, within Activities? During data migration this field was populated with the end enrollment date in our past LMS. Being a new LMS, users are confused by this column and think the course is expired and needs to be renewed.

1274
K
2 years ago
Annarose.Peterson
Hero III
Annarose.PetersonHero III
asked in HTML & CSS
Hiding catalog item count with CSS?

We have discovered that our catalogs when filtered show the incorrect number.  When I filter the catalog the item count will update to a new number, for example, 18 items, but when I scroll down the catalog, there are waaaay more than 18 items.I have a ticket open to figure out this issue, but curious, would anyone know if it is possible to just hide this item count with CSS?  

1858
S
Contributor II
2 years ago
agilleland
Novice III
agillelandNovice III
asked in HTML & CSS
How to Remove "Click Here" box and have entire image as the click box

We are looking to get ride of the click box to access a different page from an icon.  We realize we would need to use HTML or CSS to do it.  Does anyone know what code we could use?  We aren’t super versed in HTML or CSS. 

411
lrnlab
Hero III
2 years ago
N
Novice II
natticattNovice II
asked in HTML & CSS
Safari Not Reading Custom CSS

I’m testing my custom layouts/code in different browsers. One of the issues I’ve run into is that Safari doesn’t use certain pieces of my custom code. Specifically, the code concerning styling of specific pages (example: #doc-page-209) is skipped/ignored. However, all other custom CSS is applying correctly.Is this a known bug? is there are work around or some additional code I need to apply just for Safari?

12187
gstager
Hero III
2 years ago
J
Novice III
Jenny EngNovice III
asked in HTML & CSS
Where to find existing HTML & CSS code lines?

Hi there,Brand new here in the community, new to the possibility of using HTML & CSS to customize page, HTML/WYSIWYG widget, as well as look & feel for the platform as well as for courses. Currently learning CSS on the go, have basic knowledge of HTML. My questions are very foundational.Where/how can I write/change a page’s HTML/CSS line? I’ve created the page and would like to customize further. For HTML/WYSIWYG widgets, is it possible to remove the “box” for the particular widget?Thank you!

85612
N
Novice II
2 years ago
N
Novice II
natticattNovice II
posted in HTML & CSS
HTML/CSS Limitations

Hello!I recently began working with Docebo as a designer for my company. The goal was to do a custom design for different “hub” pages underneath a fairly typical landing page/dashboard and utilizing Docebo’s content assignment and management features. The problem I’m running into is that it seems as though certain types of CSS do not work within the HTML/WSIWYG widgets which will make or break the design. For example:Any attempt to center divs (not just text), within a widget seems to ignore whatever CSS class or ID I set. The best I can tell is that it seems to be related to site wide styles for divs and/or the clearfix styles. While there are more numerical, and less responsive, ways of centering I worry about the maintenance time this creates going forward.Position:Sticky also seems to be ignored regardless of how I try to implement it. This is a much bigger issue than centering.

1592
gstager
Hero III
2 years ago
lrnlab
Hero III
lrnlabHero III
posted in HTML & CSS
How to Center Widget Titles

Copying this original post to this group:Thanks again @gstager 

490
lrnlab
Hero III
2 years ago
K
Novice III
kjo133Novice III
asked in HTML & CSS
Can this course layout be achieved?

Hello all! I am new to Docebo and am looking to put together a site similar to the design attached.  I’m looking to have the five main categories at the top.  When you click on a category like ‘Technology’ for example, it would then take you to a page where you would be able to select from ‘Technology’ topics, and then clicking on a topic would take you to a page with the actual courses.  So the route a user could take would be Course Page→ Technology Page → Technology Topic Page → Technology Course. Based off the screen shot of my mockup, would this be do-able and if so what would be the best route?  I was playing around with the Categories widget, but it would just show the courses within that Category.  Is there a widget that would display the five categories in a row like I have here, or would that be best handled with custom html and css? Thanks for any advice! Kevin 

1593
Bfarkas
Hero III
2 years ago
Bfarkas
Hero III
BfarkasHero III
posted in HTML & CSS
Considerations when making CSS modifications

Hey everyone, Moving a conversation that started between @gstager and I over on a different question to allow it to live on its own and encourage more to converse. The original thread can be found here:What kicked it off was to accomplish the request the idea of using an aria selector to hide a navigation element which I had a knee jerk reaction worried about different types of users interacting with the page, but more generally what I see a lot on here of just how to hide things without thinking through the full repercussions to different end users. The beginning post that really started it was me explaining why I had that reaction here: More just using an aria selector to hide things, since the goal of aria selectors is to help navigation. In general I have a hard time with hiding entire navigation sections without being able to adjust the page completely as it does tend to leave gaps and loopholes for how people navigate through non-visual based methods.In docebo’s particular case I

1914
Bfarkas
Hero III
2 years ago
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?

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

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

11212
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!

2665
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

893
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,  

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

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

932
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 

154811
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) 

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

823
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;} 

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

756
gstager
Hero III
2 years 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