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.

  • 442 Posts
  • 2,355 Replies
442 Posts
Bfarkas
Hero III
BfarkasHero III
posted in HTML & CSS
Friday at 4 Challenge: Profile Avatar ‘Zoom’ Effect

 A few colleagues and I have an ongoing joke that one of us will throw out an idea late in the afternoon on a Friday, and normally it would go nowhere, but there is something special about that magic hour before taking a weekend break, not only do we tend to come up with a  solution, but it is usually ready for Monday! These could be small quality of life improvements, style adds, complex automations, or anything in between. I thought it might be nice to start documenting and sharing some of these that are applicable to other organizations.First up, last week I was on the phone with a colleague at a different organization and she was working on making some department and instructor pages. She was lamenting on how it just felt static and stale. After sending some screenshots of what it currently was, it was basically 2-5 people, with a headshot, name, and a link, and then a widget underneath with a broader description and information for the group, something like the below: We kicked it

1274
JKolodner
Helper III
9 months ago
I
ibrahimNewcomer
asked in HTML & CSS
Active nav link indicator

Hi everyone!We've been given guidance by our Marketing and Design team on some pointers on the top Nav. One of the things which they want to see is - the Nav header remaining highlighted based on the page we are on aka an Active nav link indicator for every page. For example - If I am to navigate to the 'Home' page the Top Nav should highlight the 'Home' button on the Nav. Proposed lookUpon further research I have seen that an Active nav link indicator can only be added via JavaScript which Docebo Learn does not support at the moment.Is there any roundabout way to do this with only the help of CSS? Would really appreciate insights on this problem, thanks!

641
Bfarkas
Hero III
9 months ago
J
jshoaf1Newcomer
asked in HTML & CSS
Where does HTML and CSS go?

Hi! I'm looking for general assistance with HTML and CSS. My company is planning a learning center cleanup, and we'd like to be able to construct a drop down menu at the top of our site. We are trying to use the code in: Creating a Horizontal Navigation Menu for Novices | Community (docebo.com). The difficulty is that I'm not clear where the HTML and CSS information should go. I'm using an HTML widget at the top of our page, but when we save the HTML and CSS to the widget, we get this:Can somebody tell us where we need to enter this code and why it isn't showing up? Thanks!

942
Bfarkas
Hero III
10 months ago
K
Helper II
KaterinaTHelper II
asked in HTML & CSS
New course player - LP ID

Hi there,In the new course player, is there a way to hide the Learning Plan ID in the box ‘Learning Plan Details’?Thank you!

1073
K
Helper II
10 months ago
A
Novice I
Anna BowskillNovice I
asked in HTML & CSS
Hide 'score' field in External Training

Hi there, Does anyone know of any CSS that will hide the ‘Score’ field in the ‘Report External Training’ page? Thanks in advance to anyone who takes the time to respond.

1085
Bfarkas
Hero III
10 months ago
J
Influencer III
jsalinasInfluencer III
asked in HTML & CSS
Manage Team Requests?

Greetings~I can’t find any info on this. My Power users can see this under their user management. What is manage team requests? Where would someone put in a request that would appear here? More importantly, how can I hide this? Thank you!  

444
J
Influencer III
10 months ago
S
Novice I
swansonnNovice I
asked in HTML & CSS
Hyper link on Public Page Banner

Based upon user feedback, we are trying to add a hyperlink to text within the banner on our public page to direct people to the sign in page. (For whatever reason our users are not seeing the bright sign in button in the top right corner where all other log-in buttons on all other websites always are).Using the suggestion I found through Add/edit hyperlinks on Sign In page | Community (docebo.com) I translated the text to add hyperlinks.  But all it is doing is verbatim adding that text on the banner:What am I missing?!? I this just not possible?

875
S
Novice I
10 months ago
I
Novice III
inessaNovice III
asked in HTML & CSS
Changing the shape of a button by CCS code

Hello,Does anyone know the CSS code for changing the shape of buttons to an elliptical shape??I want them to be like that:Thanks in advance,Inessa

1284
C
10 months ago
cchadford1
Contributor II
cchadford1Contributor II
posted in HTML & CSS
Move the SSO button - CSS

Hi all, we want to move the SSO login button futher up, so users get to see this first rather than the login (which they don’t use)….. We can’t turn off/hide the login buttons as others have suggested otherwise we wouldn't have access (security).  Does anyone have any CSS code we could take a look at please? 

17511
JEntis
Helper I
10 months ago
JEntis
Helper I
JEntisHelper I
posted in HTML & CSS
How do I "reskin" a SSO button on the login screen with CSS?

Hi all, I’m hoping the CSS geniuses in the audience here can help me with this one. We are switching from an Auth0 to SSO and OpenID login process in phases, and I need to relabel the button to make it crystal clear to our learners which one they need to click on depending on their role. Here is our login page with the new Open ID button turned on (our field and corporate users have been using only Auth0 up until now):  Our IT team was assured by Docebo’s IT team that it is possible to “reskin” the button using CSS but don’t have an established process as to how so they pointed me here to the Community. How can I achieve this? I have only a baseline knowledge of CSS and don’t know where to start.

1953
Ian
Guide I
10 months ago
K
Contributor I
KyleRBennettContributor I
asked in HTML & CSS
Trademark Info Font Size

Hello There,I need to make the registered trademark info ® appear in superscript on my course title instead of big horsey block letters. Can someone assist?Thank You

503
K
Contributor I
10 months ago
mdougy
mdougyNewcomer
asked in HTML & CSS
CSS to remove button on a course page

I would like remove the button “enroll” and “syllabus” from a course page. (like the screenshot below)Before the new course player, we used a CSS code to remove that but now it doesn’t work anymore. The course is an e-learning that we have adapted like a “window” of our training. The objective is to have a showcase of the learning plan by showing only the description of the course and that learners cannot enroll for it. (Because this is the manager who enrolls in our process) Does anyone know what CSS code we should use?Thank you in advance for your help, 

1956
K
Contributor I
10 months ago
dklinger
Hero III
dklingerHero III
asked in HTML & CSS
My Team - Real life story - Assist Request

I just got this message from a manager trying to understand.So, for example, xxxx and xxxx need to log into the learning center and complete NH Training even though they show as Looks Good?What do I tell the person??? They are right.So a question for you - does anyone know if you can hide the KPI “Looks Good” tag via CSS? Because the training is given a deadline? Albeit a soft-deadline - and the KPI tag isnt helping - it is confusing people on my end. 

14110
K
Helper II
10 months ago
cschmelzer
Helper II
cschmelzerHelper II
asked in HTML & CSS
Localization - translations

When changing text in the localization tool, is it possible to add a bold attribute?  For example, I want to emphasize the word IMPORTANT, but html code does not work.Appreicate any feedback.Regards,Cheryl

1567
jckemv
Helper I
10 months ago
dklinger
Hero III
dklingerHero III
asked in HTML & CSS
Trying the profile widget

Anyone catch the CSS needed to adjust the color of the profile widget?

46414
A
Novice III
10 months ago
K
Novice III
KellyNovice III
asked in HTML & CSS
HTML image editing

Hello, I have used a GIF instead of an image on a widget but i dont know how to remove the white space at the bottom and also the scroll panel at the side. I have tried resizing but no luck, any ideas?  

1198
N
Novice III
11 months ago
L
Contributor I
lisa.schneerContributor I
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. 

1198
G
Influencer I
11 months ago
Ian
Guide I
IanGuide I
asked in HTML & CSS
Can I *host* custom fonts with Docebo?

I’m running into a spot of bother with some custom CSS. All I want to do is replace the default Open Sans with a different web font. The CSS itself is fine (it’s managing to replace Open Sans with my fallback font, Arial). However, where the preferred web font is concerned, I’m running into issues with CORS:"Access to font at 'https://example.com/font.woff2' from origin 'https://example.docebosaas.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."I’ve seen posts here illustrating that you can host images in Docebo (tried uploading the woff2 file as an image; it was unsurprisingly rejected as invalid). I also tried uploading it as a file (as part of a course’s training materials); that seemed to be working, but then it said: File does not existSo, I’m wondering if anyone knows of a way to host web fonts in Docebo. If not, I guess I need to find another place to host it, where I can control the CORS policy, or simply ask t

1211
Ian
Guide I
11 months ago
kfortenb
Influencer I
kfortenbInfluencer I
asked in HTML & CSS
CSS to hide asset uploader in channels?

Hello! Is there a way to hide the “asset uploaded by” field within channels, using CSS? If so, can it apply globally, and/or to just to specific domains within Extended Enterprise? The rationale is that we use channels for content presentation and functionality, but the uploaders are not considered to be experts/contacts for the content.Example: I’d like to hide the names of all uploaders from all assets, such as this one: 

1455
I
Novice III
11 months ago
K
Novice III
KellyNovice III
asked in HTML & CSS
CSS it increase button size?

Hi, Im trying to find code to increase the size of the button on a custom content box - any ideas?  Thanks in advance :) 

1336
Betsysentamu
Novice II
11 months ago
malicm
Contributor II
malicmContributor II
asked in HTML & CSS
Remove Fields

Hi! I am looking to remove these two fields from My Activities > External Training > New Activity.  I tried a couple ways, but not successful. Was wondering if anyone here would be faster at this. 

806
malicm
Contributor II
11 months ago
G
Novice III
gusNovice III
asked in HTML & CSS
Set Minimum Character Length on Enrollment Additional Field

Hey community. Hopefully I’m not repeating anything here, but I couldn’t find anything similar. I’m hoping some smart cookie might know if there’s a way to set a minimum character length on an enrollment additional field. We have a purchase order field as a mandatory requirement for self-enrollment to our ILT sessions, but you can circumvent it by entering a single character or even a space.

373
Bfarkas
Hero III
11 months ago
I
Novice III
inessaNovice III
asked in HTML & CSS
Hide the sharing option "Only me" in the channel with CSS codes

Hey ,We have Discover Coach & Share on our platform and we would like to Hide the sharing option "Only me" in the channel.Has anyone been able to hide the option “ only me “ in the channel  . 

374
I
Novice III
11 months ago
gstager
Hero III
gstagerHero III
posted in HTML & CSS
Rotating Text Barrel - Animation Idea #11

Here is another fun little HTML/CSS idea for all of you.A rotating text barrel.OK - maybe there is another name for this but I am going with the barrel.Here is the code needed to pull this off.As always - test with your platform for conflicts and let me know about any bugs with thisCSS for Branding and Look area /** Rotating Text Barrel **//** This block will help set the color and dimensions of your widget **/#barrel { background: #000000; height: 100px; width:100%; position: absolute;}/** This block will allow you to adjust **//** your positioning of the barrel **//** Set all values as desired **/#barrelBox { width: 50%; margin-left: auto; margin-right: auto; margin-top: 35px;}/** This block will set parameters on the static text **/.flipSign h3 { height: 30px; float: left; margin-right: 5px; color: #ffffff;}/** This block has general settings for the moving text **/.barrelText { float: left; overflow: hidden; position: relative; height: 25px; top: 0px;}/** T

3475
gstager
Hero III
11 months ago
S
Influencer III
simone.yaghiInfluencer III
asked in HTML & CSS
Hide/Unhide Password Button from Login Page

Hi all, does anyone know if it’s possible to remove the unhide password field from the log in page? I have been looking into knowledge articles but can’t find the answer or the setting in advanced settings. 

753
S
Helper II
11 months ago

Badge winners

  • Product Q&A Influencer
    Cindy Moorehas earned the badge Product Q&A Influencer
  • Let's Talk Shop Genius
    gstagerhas earned the badge Let's Talk Shop Genius
  • Product Q&A Genius
    JKolodnerhas earned the badge Product Q&A Genius
  • Product Q&A Influencer
    kjandersonhas earned the badge Product Q&A Influencer
  • Product Q&A Influencer
    Lisa Dhas earned the badge Product Q&A Influencer
Show all badges
Terms & ConditionsCookie settings