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.

  • 432 Posts
  • 2,294 Replies
432 Posts
N
Novice III
ncmooreNovice III
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)

1829
pmo
Docebian
5 months ago
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!

765
L
5 months ago
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!

1195
K
5 months ago
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

654
dklinger
Hero III
5 months ago
G
Novice II
GPSlifeNovice II
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

300
G
Novice II
5 months ago
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? 

380
L
5 months ago
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; }

534
gstager
Hero III
6 months ago
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  

262
Isram
Influencer III
6 months ago
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
6 months ago
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.

384
elamast
Hero I
6 months ago
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. 

3233
EmilyG
Novice III
6 months ago
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?

686
ktbadham
Helper I
6 months ago
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.

4146
N
Novice III
6 months ago
H
haileyoliviacNewcomer
asked in HTML & CSS
Editing Code on Custom Icon Boxes

Hello everyone!I recently have begun attempting some HTML/CSS coding endeavors on our homepage to hopefully make a more organized and clean experience for our users. I found a course on Docebo University, titled Take Platform Design to the Next Level and it generously supplied some ideas and accompanying codes. I implemented the ‘Custom Icon Boxes’ on our homepage, this is what it looks like on Screenshot #1 and I am very happy with the size and layout of the boxes, but there is a few things I would love some support on if anyone is willing to help.Is there a way to get rid of the white edge that borders each box? I would ideally love to have the box just be the solid color. I would love to upgrade the design and text on these boxes to make it look a little more professional or ‘finished’. I love the border and ‘button’ look of the Docebo custom content boxes, I have included a screenshot of what I am talking about. Is it possible to edit the code so I can add a border/box around the t

1292
H
6 months ago
SamBWillans
Novice III
SamBWillansNovice III
posted in HTML & CSS
Custom Footer with Image

Hi therePlease could some one help me out with how we could edit the footer on the home page to add an image? and how I figure out recommended sizes for the images please?Ideally I'm trying to adjust the whitespace at the bottom? Any help appreciated!!! ThanksSam 

1289
JZenker
Guide II
6 months ago
EmilyG
Novice III
EmilyGNovice III
asked in HTML & CSS
Duplicate html widgets appearing to overlap

Hi, all. I’m currently working on an unpublished duplicate page of our homepage. I have added a html/WYSIWYG widget to the page that has simple text and some custom CSS that I’ve added to the appropriate custom style area in our Docebo instance. I searched the page’s code via inspect elements and found the proper id to use as a selector in the CSS, and the new widget appears correctly on the page.However….The widget seems to be appearing twice -- almost like it’s stacked on top of one another.This is what’s rendered on the pageThis is the custom CSS codehtml selectors for one of the widget occurrences (I used “#doc-widget-57” as the selector for CSS purposeshtml selectors for the second widget occurrence If anyone has any ideas as to what’s going on here and how I can eliminate the second widget, I’d be grateful. Emily

5914
EmilyG
Novice III
7 months ago
JZenker
Guide II
JZenkerGuide II
asked in HTML & CSS
Hiding Page Title on certain pages?

Trying to hide the page title wrapper on a certain page but can’t seem to get the below to take: #doc-page-575 #page-title__wrapper { display: none !important;}Only able to get the below to work on all pages:#page-title__wrapper { display: none !important;}Any ideas? Thanks!

895
JZenker
Guide II
7 months ago
C
cdoughertyNewcomer
asked in HTML & CSS
Changing the "Ask the experts" button

The “graduation cap” icon for the Ask an Expert button in Discover Coach & Share is fairly meaningless to our users, and creates a lot of confusion. Has anyone found a way (using CSS?) to swap out that icon for something else? Thanks!

502
JeanetteMcVeigh
Hero II
7 months ago
JZenker
Guide II
JZenkerGuide II
asked in HTML & CSS
How to get a container to span the full area of a custom page?

Having some trouble getting custom css containers outside of their restricted widget box settings. Even with css/html I’m not able to use the entire area of the page:  Looking to have the containers in my code to auto use all of the available space like this design:https://info.fintechos.com/hubfs/Academy%20and%20Learning/Homepage.png  

614
JZenker
Guide II
7 months ago
R
Novice III
RaisNovice III
asked in HTML & CSS
Internal Page - Iframe

Hi All,I am trying to add personal summary or Activity page (Transcript) as Iframe. Is there any way, I could do it. The internal page can’t be Iframed is the message that I get. Any Idea if it is doable? I have re-directed pages with same banner as first html widget, However Activity page is not falling in place. 

612
lrnlab
Hero III
7 months ago