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.

  • 480 Posts
  • 2,467 Replies
482 Posts
B
Helper I
B0LTHelper I
asked in HTML & CSS
Column Width Customization for Learning Paths Page

Has anyone figured out a way to customize the columns on the learning paths page. Ours currently looks like this   And I would really like to extend the name column so we can see the name. I found a page that has the CSS tags for the course management page but not for learning paths. Does anyone have any experience with the CSS for learning paths ?  

1022
Isram
Influencer III
T
Novice I
the DH Pace Academy TeamNovice I
asked in HTML & CSS
Email Notification not sending

We use email notifications to send training plans to our users. In the last 2 weeks email notifications that we have been set up using Source Codes are not being sent from the platform.Has something changed to where notifications only work using HTML text? Is anyone else having this issue? I’ve recreated a few of our notifications removing the Source code and only using the Short Codes provided and it seems to work. However, we use the source code due to the branding and clean look that it provides. 

362
T
Novice I
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

823
Bouben
Influencer II
K
Novice II
kendallNovice II
asked in HTML & CSS
Left nav menu

Has anyone had success adding a sticky left navigation? I’ve been gazing adoringly at Tiktok Academy’s version, but I only seem to be able to find HTML/CSS for horizontal nav. I’d love any tips if you have them! 

740
K
Novice II
S
sethmtinklerNewcomer
asked in HTML & CSS
Page Builder Permissions

Is there a way to give a contractor access to build out an HTML page without making them a SuperAdmin  thus giving them access to my entire platform.  

343
R
Novice III
mjl93
Novice I
mjl93Novice I
asked in HTML & CSS
Changing Text on Play Buttons in Learning Plans using CSS

Hello!Does anyone know how to change the text on the Play button in a Learning Plan? We would like to change the text on the button that takes you to the courses in the Learning Plan from “Play” to “Enroll” but I am having some trouble. I can change it on the page itself by using the following: <div class="ui-button-outlined-content visible"><!---->Enroll<!----><!----></div> However, when I go to Configure Branding and Look, enter this into the CSS section under Custom Styles, and hit save, there is no change to the Learning Plans when I go back to them. This is very new to me so any help is appreciated!

933
mjl93
Novice I
JZenker
Guide II
JZenkerGuide II
asked in HTML & CSS
Course tags having different colors

I can’t for the life of me figure out why Not Started tags show as #004e72 background (blue) but In Progress and Completed show as Black. Any ideas? Thanks!   

1147
mjl93
Novice I
M
mhall27Newcomer
posted in HTML & CSS
Built in Page - Course Catalog displaying all catalogs

 Hello, our organization is a big fan of using catalogs and assigning views as needed. For many cases, we may leave a catalog open to all users - but share the link to those who need to access it. As it stands- the advanced settings for catalogs is set on ‘hide.’ Making it hide the internal catalog. We also have a custom built homepage, with a widget for catalogs. This widget only displays certain catalogs that are publicly availble. Today as I was setting up an unlisted but public catalog - I realized in my test account that users are able to click ‘course catalog’ - which redirects them to the full internal catalog. This encompasses the catalogs that we would like to be unlisted but public, and only visible by linking. I have tried to delete or edit the ‘course catalog’ built in page but it cannot be done. I would appreciate any insight into keeping users from having the option and or clicking ‘course catalog’ and being taken to the full catalog. Thank you for your help in advance! H

871
N
Docebian
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?

4256
A
Helper I
A
Helper I
ariel.zimmermanHelper I
asked in HTML & CSS
Custom Styles CSS Export

Is there a way to export our Custom Styles CSS? I know we should back it up regularly, so I was wondering if there was a way to run a report on it so we could have it export on a regular basis. How is everyone keeping theirs backed up? Saving a copy each time something is changed?

562
lrnlab
Hero III
M
Contributor I
michelle.franzContributor I
asked in HTML & CSS
Can This Be Done?

Good Morning!My organization is currently implementing Docebo Learn and we are trying to work with the UI/UX to create some custom catalog pages.  Specifically, we have a page on which we’ll have buttons for access to titles by category (image #1). The challenge comes in whether we can create the effect of the white back drop and course listing appear when clicking on one of the topic buttons (image #1).Since we are so new to the application I was hoping there was an expert here who could share whether they think we can make this work and how we might approach it.  I have two excellent designers who code in HTML/CSS but we didn’t want to go too far down the rabbit hole if this simply isn’t functionality that could be supported.Would anyone be able to share their thoughts on if this is something we can get working in our portal?Thank you so much!Michelle

114837
Annarose.Peterson
Hero III
gstager
Hero III
gstagerHero III
posted in HTML & CSS
Revisiting the Flip Tile

Why This Post?It seems the flip tile has made a resurgence in popularity of late and having been asked about how to rotate something and defaulting to the Z-axis which was not the desired effect but rather to rotate along the Y-axis - I decided to spend a little time playing with this and offer some code.Also because a common question I have seen is how to get the code from the Docebo Inspire session a couple years ago. My hope is that this post will help make the process of implementing some flip tiles in your platforms a little bit easier by finding it here directly without downloading and digging it out of another document.Lets start with the end result of my playing around. I made four tiles that were slightly different.**NOTE**These are tiles which are all placed inside of an HTML/WYSIWYG widget.These are not widgets themselves that are flipping. Tiles ExplainedThe first tile (upper left) is an image for the front and an image for the back along with a button that links to somewhe

28314
A
Helper I
N
Contributor II
ncmooreContributor II
asked in HTML & CSS
Designing New CSS/HTML Page Almost to the finish line!

Ok! you guys are just great at helping I am a jack of all master of none. I do everything from ID, to graphics, to LMS, to video editing, so CSS HTML is a jack not expert trade for me.I am trying to design a new page. I really liked the hover on the map kind of example Docebo put out on the guides, but I couldn’t get it to work without a white background and scrollbar.I moved to the custom flipcard and added those *somewhat* successfully. I don’t love the background color, etc.I am down to just trying to create a HTML widget that takes you to a course because I do not have Coaching or Assets. (It is also not my favorite, I would rather have just a list of downloadable files) If I could JUST get rid of that padding on the image, I could be satisfied but not happy with what I’ve done so far.Here is my CSS and my HTML for the Handy Tools/Course link widget (I gave up on the hover effect on this one): //HandT_image #HandT_image {width: 100%; opacity: 1.0; background: rgb(95, 200, 139, 0.1)

2889
pmo
Docebian
L
Liana DrozdNewcomer
asked in HTML & CSS
Custom HTML for Register Page

Hi! Tell me please if I can change the name of the button “SAML SSO” in this login window, I didn't find such an option in the settingsI need the button to be called differently for internal and external customers but have redirect on the same link.Also, I need to change the link under the Register button. Please tell me how I can do this?Thanks!

995
L
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!

1235
K
EmilyG
Novice III
EmilyGNovice III
asked in HTML & CSS
Layouts with channels

Hi.  I have a few questions re: the use of channels.First, is it possible to place a channel I’ve created inside the HTML/WYSWYG widget? If so, how is that done?Second, is it possible to change the height and width of a channel widget? Thanks,Emily

884
dklinger
Hero III
G
Novice III
GPSlifeNovice III
asked in HTML & CSS
CSS for Task list and activity Background Color

Hi thereIs there a way to manipulate the background color of the ”task list” and the “activity overview” widgets via costum css? I changed the thunps up picture, but the white background does not match the rest of the design.Best Regards

390
G
Novice III
L
lottieirelandNewcomer
asked in HTML & CSS
CSS for Personal Summary Progress

Hey! We are trying to change the colours of our Progress wheels on the user summary page. At the moment the inner colours wheel and text sit as red, the middle is light blue and the outer is red. We would like it to be red outer ring, yellow/orange middle ring, and green inner ring. We have tried using the CSS in the pic attachedbut when editing the HEX codes and colours names it doesn't work. Does anyone know how to fix this? 

400
L
M
Novice I
mwilcox-perksNovice I
asked in HTML & CSS
CSS to hide the Change password button on the My Profile Page

HiI read else where that the CSS code below would remove the “Change Password” for Super Admin.  I have plugged this in but it removes it for users only. Does anyone have code to remove the “change password” for super admin?  Or does it matter? /*hide the “Change Password” section the “My Profile” page*/#vertical-tab-changePassword { display: none; }

574
gstager
Hero III
Isram
Influencer III
IsramInfluencer III
asked in HTML & CSS
CSS support in eliminating the "Arrow Share content" for members NOT experts in CHANNELS SECTION

Hello Docebians!This is me again...Sorry to bother you again… I'm working now on channels...I know I can assign and allow experts to upload content.However, IN THE CHANNELS SECTION is there a way to hide- with CSS- the arrow channel for members, not experts? Here this is what I mean.…  Once you click on the arrow, the menu appears  I want members not to see the arrow there -upload content-. Only the experts to see it.It's confusing for membersThanks in advance @DPatel  @roberto.moscatelli @whetstoneth @lrnlab @Annalisa  

302
Isram
Influencer III
T
Influencer I
Teresa OInfluencer I
posted in HTML & CSS
Footer Disappeared

Hi everyone,Does anyone have issue with seeing their footer? Ours just disappeared (both public facing page and logged in) but I checked our white label setting and our custom footer (using CSS) is turned on. Very strange…Thanks in advance!Teresa

222
T
Influencer I
elamast
Hero I
elamastHero I
asked in HTML & CSS
Disble the "keep me logged in"

Do any of you know of a reliable way to turn off the “keep me logged in” functionality?I can’t seem to find the right CSS:div[class='ui-input-checkbox'] {    visibility: hidden !important;}Nor does this jQuery seem to be working correctly:$("label[for='ui-input-checkbox-14']").hide(); These do work from the console, so I’m guessing it has something to do with the modal window itself.

414
elamast
Hero I
Jenna M.
Novice III
Jenna M.Novice III
asked in HTML & CSS
HTML image sizing

I’m trying to use HTML widgets to load images for multiple languages that will each be linked to separate catalogs. Using the WYSIWYG works great to add the image to the widget, but no matter what sizing on the image I try, I cannot get the alignment I’m looking for. The widget automatically adds <p> to the HTML which creates whitespace, I’m able to remove the whitespace but that makes the widget slightly shorter than the carousel I have next to it.Whitespace whitespace removed but widgets different sizes - both HTML/WYSIWYG widgets - both images set to 220pxAspect ratio lost when forcing the HTML widget to 220px to align with image on left. Showing with or without white the versions showing the image doesn’t size properlyI am a novice with HTML/CSS so I’m hoping I’m just missing something simple. Any best practices out there for this? We have tried many many sizes of the image but ultimately it’s the same issue over and over again. 

3583
EmilyG
Novice III
ktbadham
Helper I
ktbadhamHelper I
posted in HTML & CSS
Bullets are not displaying in Title type on a Test

We have set up a test, and the first “question” is a title type. A screenshot of the setup is below. You will notice bullets next to part 1 and part 2.When we view the test the way a learner would however, the bullets are missing. Screenshot below. When I inspect that element on the page, I can see that it has proper unordered list tags, so the only thing I can assume is that those elements are not styled properly when it comes to tests. Screenshot below. I did go and remove all of our custom styles to see if I had done something that broke this, but that didn’t work. This is unfortunately where my expertise ends :( Has anyone else encountered this? Any ideas on how to fix it?

696
ktbadham
Helper I
sabine.deliveroo
Influencer I
sabine.deliverooInfluencer I
posted in HTML & CSS
Carousel Style 'My Courses and Learning Plans' display

Hi Community members, Does anyone have experience on creating a ‘Carousel Style’ My courses and Learning plans display? The easiest way to describe this would be the ‘Netflix look’.Currently this widget only allows ‘Card’ and ‘List’.Would be happy to learn from you or create this as an idea if that’s something you see as useful as well.

4316
N
Contributor II

Badge winners

Show all badges
Terms & ConditionsCookie settings