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,237 Replies
428 Posts
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
5 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
5 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
5 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. 

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

4106
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

1242
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 

1229
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
6 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!

815
JZenker
Guide II
6 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!

492
JeanetteMcVeigh
Hero II
6 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  

604
JZenker
Guide II
6 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. 

602
lrnlab
Hero III
6 months ago
S
stiansNewcomer
asked in HTML & CSS
Widget visibility for non-subscribers?

We would like to promote our subscription program to our non-subscribers. We don’t want to bother our subscribers with this information.Does anyone know if it’s possible to show a widget/image/text to non-subscribers only?I could not find anything useful in the CSS for this purpose.

242
S
6 months ago
emily.mccarthy
Guide I
emily.mccarthyGuide I
asked in HTML & CSS
Widget Scroll Bar

Hello! I am hoping some one can help me. At one point we added a scroll bar with a forced height to out Activity Stream widget on our home page. This has since stopped working. Does anyone have any advise on how I can modify the CCS to have it work again? /* Added scroll bar for Activity Stream Widget on page*/#doc-widget-31 {    height: 450px;    overflow:scroll}

1109
emily.mccarthy
Guide I
7 months ago
jcellitti
Influencer I
jcellittiInfluencer I
asked in HTML & CSS
CSS to remove 0/1 lesson completion on course player

 Can anyone help me remove the above? I have tried:  .lrn-course-player.lrn-widget-session-completion-status-open {display: none;}.lrn-widget-session-completion-status-open {display: none;}lrn-widget-session-completion-status-open {display: none; What am I missing?

210
jcellitti
Influencer I
7 months ago
A
Novice I
amberNovice I
asked in HTML & CSS
Course UX - AWS and Docebo U - templates??

I notice that AWS skill builder and Docebo University both have the same responsive full page course design with table of contents on the left, and scrollable content for 80% of the interface. The content then includes flip cards, tabs, accordions, videos, images, text, and quizzes in similar styles, although the Amazon version is slightly cleaner.I am interested in replicating this look for at least some of the e-learning courses on my platform. Since these are so similar, is there a “standard” method to achieve this look and functionality? I can design this if needed, but hoping there are shortcuts in the form of templates, etc. to expedite.Here are the two examples of the look and function I am referencing:https://explore.skillbuilder.aws/learn/course/134/play/99519/aws-cloud-practitioner-essentialshttps://university.docebo.com/learn/courses/534/docebo-for-microsoft-teams/lessons/2587:550/docebo-for-microsoft-teams-embedding-and-sharing-trainingScreenshots:    Any suggestions and id

883
L
Helper III
7 months ago
JZenker
Guide II
JZenkerGuide II
asked in HTML & CSS
Removing elements - new course player

Hello,Has anyone had any luck withdisplay: none;on either of these two elements on the new course player?Can’t get anything to stick - thanks

1142
JZenker
Guide II
7 months ago
markbrumley
Novice I
markbrumleyNovice I
asked in HTML & CSS
Remove the Overlay in the Course Player

Hi! How do I remove or make transparent the overlay in the course player? I have tried all sorts of nonsense. I put this code in the Configure Branding and Look > Course Player area:.lrn-course-player-training-material-idle-view-overlay {    background-color: #ffffff;    opacity: 0;}Doesn’t work. 😪 Please help! 

854
D
Novice II
7 months ago
M
Novice I
MerejayNovice I
asked in HTML & CSS
HTML: Adding Table to questions in a test

The table cells do not show up when you are actually taken the test?  Is there anyway to have the table cells show? This is now it displays when taking the assessment 

1396
S
Novice I
7 months ago
D
Novice II
diy.aNovice II
posted in HTML & CSS
Using CSS to customise hover over course icons

Hi community!Has anyone managed to changed the border colour (on hover) for the course icons? Thank you!

491
D
Novice II
7 months ago
N
Docebian
nick.tostoDocebian
posted in HTML & CSS
Social media links widget HTML and CSS Snippet

Hello! I thought I’d share a quick HTML/CSS snippet for anyone that wants to include their company social media links on their pages to look something like this:  Here’s the HTML that you would need to paste into a 1/3 column width page widget:<div style="padding:19px 10px;"> <div class="social-row"> <!-- Instagram --> <a href="https://www.instagram.com/" target="_blank" class="socials" style="background:#125688;color:#FFFFFF;" rel="noreferrer noopener"><i class="zmdi zmdi-instagram"></i></a> <!-- Facebook --> <a href="https://www.facebook.com/" target="_blank" class="socials" style="background:#3B5998;color:#FFFFFF;padding:15px 24px;" rel="noreferrer noopener"><i class="zmdi zmdi-facebook"></i></a> <!-- Twitter --> <a href="https://twitter.com/" target="_blank" class="socials" style="background:#55ACEE;color:#FFFFFF;" rel="noreferrer noopener"><i class="zmdi zmdi-twit

1441
dwilburn
Guide III
7 months ago
B
Novice I
BaRonaNovice I
asked in HTML & CSS
Adding interactive reaction buttons with html code

hi, I am trying to add an interactive reaction buttons html widget to my LMS homepage. when I test the code on an external platform, it seems to work fine, but when I try to add this to an HTML widget, for some reason the buttons are not visible, and the html code I am adding in the widget configuration settings, disappears. is there any additional configuration I need to do here?would appreciate any help, thanks! 

1599
dwilburn
Guide III
7 months ago
Johfra
Influencer III
JohfraInfluencer III
asked in HTML & CSS
Hide Completed courses within a channel widget (display stream)

Hi,we are using the channel widget on our Dashboard and we would like to hide the completed courses from the widget, so that they only see courses that they have started or need to start..I tried to do this with CSS but then I have an empty spot on the list I used the following CSS Code:#doc-page-97 .ui-card-status-done {display: none !important;}We do not use the “Courses and Learning plan” widget, because we have multiple content categories and the “Courses and Learning plan” widget shows all assigned courses (so can’t be divided into categories).Does anybody have an idea how we can hide completed courses from the channel widget?

22523
Stephen.Barton
Guide II
7 months 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