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.

  • 236 Posts
  • 1,290 Replies

236 Posts

gstager
Hero III
gstagerHero III
posted in HTML & CSS

Modifying the Numeric Rating Position

I have often been annoyed by how tight this is to the stars.This is at the end.Annoyingly Tight ValueIf you are as well, I offer two solutions.Solution 1 is to simply hide the value./** Hide the numeric course rating value **/.shown-rating-value { display: none;}Hidden ValueThe second is to move it over a little if you would prefer to keep it./** Move the numeric rating value over **/.shown-rating-value { margin-left: 10px;}Shifted ValueAs always, test for any conflicts in your platform.Hope this helps someone today.

2
Bfarkas
Hero II
9 months ago
gstager
Hero III
gstagerHero III
posted in HTML & CSS

Animated Border

This is the promised write-up based on the following post. @dklinger @Adam Ballhaussen Here is the look based on some additional tweaking. I chose to thicken the border and added my previous barrel text into the div. I also chose to change the color of the barrel text on hover with the border animation.As expected, there was some tweaking to be done in order to make this work in Docebo. For starters, Docebo did not like the use of the ampersands  &:hover::before, &:hover::after  and I have found that sometimes it will choke on the code when declaring multiple selectors so I separated them and typed it all out.The other main modification I made is the creation of the magicBorder class. I did this so that I could isolate this particular div and not have magic borders all over my platform. Here is how the CSS looked in the end./** Test Border Magic **/div.magicBorder { position: relative; width: 90%; height:90%; margin-left: auto; margin-right: auto; margin-top:

4
Bfarkas
Hero II
9 months ago
Adam Ballhaussen
Docebian
Adam BallhaussenDocebian
posted in HTML & CSS

CSS Border Animations and Properties [Medium Repost]

 👋 Hey there Docebo Community, and happy Friday! Check out this awesome post on Medium: 🔗 Fantastic CSS border animation This post popped up in my inbox today and I found it extremely interesting. I’m not quite savvy enough with CSS to understand everything this article covers in detail, but we have some experts in this community (I’m looking at you @gstager @Bfarkas @nick.tosto) who I’m sure could do some pretty awesome things in their platforms with some of the code shared in the post. Here’s a snippet I found to be really cool: Border length changes  div { position: relative; border: 1px solid #03A9F3; &::before, &::after { content: ""; position: absolute; width: 20px; height: 20px; } &::before { top: -5px; left: -5px; border-top: 1px solid var(--borderColor); border-left: 1px solid var(--borderColor); } &::after { right: -5px; bottom: -5px; border-bottom: 1px solid

6
gstager
Hero III
9 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

1
Bfarkas
Hero II
9 months ago
JayKolbenson
JayKolbensonNewcomer
asked in HTML & CSS

Editing Privacy Policy Agreement Page CSS

Hello,I am trying to remove some text from a custom privacy policy acknowledgement page for a specific Extended Enterprise. I’m not a CSS expert but I think I understand the concept. As a first step I’m trying to identify the target page and I see people are doing this with the browser inspector tool. However I cannot find the page ID when I do this.I am hoping to remove, hide, or turn white so you cant see the line under the first line. It is the line that says “ you must read and agree to the Privacy Policy in order to proceed”Yes, I know you can use the localization tool however we have other Extended Enterprises that want to keep this so I was hoping to do this through custom CSS for this particular Extended Enterprise. Can anyone help get me started on how to get that page ID so I can call out that line and hide it?Thanks,Jay

4
Bfarkas
Hero II
9 months ago
lrodman
Guide II
lrodmanGuide II
posted in HTML & CSS

Free CSS: Recolor the gamification and virtual coach icons

I wanted to highlight these two icons more, to encourage more users to look at them. /*gold gamification icon*/.internal-header-gamification ui-button-icon button ui-icon span.color-neutral svg {fill: #d4af37 !important;}/*blue robot icon*/.internal-header-virtual-coach ui-button-icon button ui-icon span.color-neutral svg {fill: #133D8D !important;} 

1
gstager
Hero III
9 months ago
lrodman
Guide II
lrodmanGuide II
posted in HTML & CSS

Free CSS: Make the "My Home Page" titlebar (and other titlebars) more compact

/*shrink the "my home page" bar*/#page-title__wrapper.hyd-shadow-md.ng-star-inserted {     min-height: 50px !important;    height: 50px !important;}

2
lrodman
Guide II
9 months ago
lrodman
Guide II
lrodmanGuide II
posted in HTML & CSS

CSS: making the profile / avatar image larger

I’m trying to make my avatar image larger. div.avatar__image.ng-star-inserted {height: 80px important!; width: 80px important!; }div.avatar-clip.border-main.ng-star-inserted {height: 80px important!; width: 80px important!; } Not working, any idea why?  

2
lrodman
Guide II
9 months ago
lrodman
Guide II
lrodmanGuide II
posted in HTML & CSS

Free CSS: Make the certificate html composer taller (full-page portrait editing)

/*portrait certificates full view*/#mceu_22-body.mce-container-body.mce-stack-layout { height:800px !important;}#mceu_33.mce-edit-area.mce-container {height:717px !important;}#mceu_33.mce-edit-area.mce-container.mce-panel.mce-last.mce-stack-layout-item iframe  {height:725px !important;} ps caught you Docebo its an iframe ;)

1
gstager
Hero III
9 months ago
lrodman
Guide II
lrodmanGuide II
posted in HTML & CSS

Free CSS: Make widgets closer together on homepage and other pages

/*make all UI boxes closer together*/.single-widget.ng-star-inserted {    margin-bottom: 10px !important;}

0
lrodman
Guide II
9 months ago
lrodman
Guide II
lrodmanGuide II
asked in HTML & CSS

CSS: Is it possible to replace the skills illustration?

Thanks!

0
lrodman
Guide II
9 months ago
lrodman
Guide II
lrodmanGuide II
asked in HTML & CSS

looking to improve the "stream" view for channels and categories

There is a lot of white space and we have nice graphical assets.  I’d like to shrink down the white space and make the images bigger among other things. I can’t find a guide on this. I’m sure other users have done this too. 

0
lrodman
Guide II
10 months ago
dklinger
Hero III
dklingerHero III
asked in HTML & CSS

CSS Challenge/Trickery/I maybe a little lazy and wanted to see if someone else has fought it

Hi - I genuinely feel lame asking this, but I have a catalog widget that I am using in list mode and there are three things that I would love to tighten up with the experience.make that title a little smaller cut down on the spacing if possible remove the status from the widget all togetherWith an attempt to make the widget to the left scale better with the one that is “dynamic”.If some of you have fought this and have something that can come out of your backpocket? Maybe I can answer something for you soon enough?????Any help would be appreciated….

6
Annarose.Peterson
Hero II
10 months ago
H
harriskoNewcomer
asked in HTML & CSS

Always show session join (auto expanded)

Hi, Looking some previous queries, people have been asking about having accordion elements default to being open. No solution has been posted. If there’s a CSS guru out there who’s had luck setting this to default to open it would be very much appreciated. Thank you!

7
gstager
Hero III
10 months ago
Jennifer.Petru
Novice I
Jennifer.PetruNovice I
asked in HTML & CSS

Business Case: 'Show only SSO buttons and Hide Login Form' ....but where to log in for Admins ?

 We use deeplinking quite a bit, which takes our users to the sign-on page for Docebo.  We’ve enabled SSO, and I know you can ‘Show only SSO buttons and hide login form’ and the users just click the SSO button and move forward to the course….However, Docebo reps have told us we need separate learner and admin accounts for our admin team...if we hide the login form, how should we as Super Admins log in?Thanks in advance for what is probably a very newbie question! Jen

5
Annarose.Peterson
Hero II
10 months ago
L
Helper II
LNewHelper II
asked in HTML & CSS

Badging - Is it possible to hide the point value?

Good day Community!I was curious to know if anyone had come up with code that could hide the point value that appears on badge ribbons. There's some concern in my organization that even if we set the point value to 0 for each badge we create (as we're going for a less competitive approach to badging), users will find it odd to see a line of 0s across their awarded badges. Any insight would be appreciated. Thank you!

4
L
Helper II
10 months ago
lrnlab
Hero III
lrnlabHero III
posted in HTML & CSS

How to hide "remove from my Team" option for Managers

If you are like us, we do not let managers manage and update their own teams. This is usually done by user updates by a centralized admin team, or via a connector that automatically updates user profiles. We needed a way to prevent managers from removing users from their teams as this could affect things like reporting and assignments.Here’s a quick CSS snippet you can use to hide that option:/*Hide "Remove from My Team" in My Teams*/a.action-can_remove_relation {    display: none !important;}You can add this to your “7.0 Custom CSS” block under Configure Branding and Look. This code can also be used on sub-domains only if you prefer to have a group with the option to remove and another without.TIP: if you want to the code but make it ‘inactive’, you can “comment” it out by moving the “*/” to AFTER the last bracket…..it would look like this: /*Hide "Remove from My Team" in My Teamsa.action-can_remove_relation {    display: none !important;}*/ 

24
gstager
Hero III
10 months ago
N
Novice II
natticattNovice II
asked in HTML & CSS

Internal/Bookmark Links not working

I’m attempting to create a link at the top of the page that will link down the page to a course catalog at the bottom of the page. Instead the link goes back to the homepage. I can’t quite figure out why this is and I can only assume its some kind of code in Docebo that’s causing the issue. Does anyone know why the code here wouldn’t work?<a href="#cataland"><img src="https://d36spl5w3z9i0o.cloudfront.net/files/g/e/genesyssandbox_docebosaas_com/userfiles/562892/PDS/catalog_leap.png" alt="Click here to go to the catalog" width="5792" height="468" /></a><!--Other Content Here--><div id="cataland"><img src="https://d36spl5w3z9i0o.cloudfront.net/files/g/e/genesyssandbox_docebosaas_com/userfiles/562892/PDS/catalog_land.png" alt="Partner Digital Catalog" width="5792" height="468" /></div>The code appears to work in other editors.

8
P
Docebian
10 months ago
J
Contributor I
JavierPuertasContributor I
asked in HTML & CSS

Footer overlapping widget

Hello everyone, I am organising one of the pages I am working on by using CSS. The problem comes since the footer stands in the middle of the page after doing some changes. It is actually quite weird because it is behind the calendar widget but on top of a catalog widget. I have tried to use the code that you can find below but the footer remains still there:/*Code to put the footer at the bottom of the page*/#doc-page-32 div.doc-layout-common-footer {  position: fixed;  bottom: -500}Has anyone had a similar problem? You can see a pic below:Thank you all in advance for your help. 

8
gstager
Hero III
10 months ago
caycocho
Contributor I
caycochoContributor I
asked in HTML & CSS

Help needed! Looking for a CSS script

Hello,Can anyone share the CSS script to change the login box background to semi-transparent?I tried looking for it in the community but no success.Thank you for the attention.Kind regards,Caesar

3
caycocho
Contributor I
10 months ago
gstager
Hero III
gstagerHero III
posted in HTML & CSS

CSS Animation Idea Series

As I have shared before - I have been more of a JavaScript guy and would have gladly put those skills to work in Docebo. Since that is not possible - it meant trying to make some things a bit more interesting with the use of CSS.So that’s what I set out to do. I started out by sharing the blinking dot idea which caused me to sort of inspire myself - LOL - to put together a little series of ideas that hopefully helps lessen the learning curve and inspires some of you to dig in as well. I am an advocate of lifelong learning so don’t be surprised to hear me attempt to encourage you all to keep pushing that envelope. This would be one such attempt. If I can do it - so can you!These ideas are not polished products but basically just ideas in their raw form to help others see some possibilities. The exact code I used is provided in every example for both the CSS and HTML portions of the ideas. Take them and tweak them. Mix them together. Make them your own. I did not do extensive testing in

3
P
Docebian
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?

13
L
Novice I
10 months ago
omer.bitas
Influencer I
omer.bitasInfluencer I
asked in HTML & CSS

Use CSS to hide Not yet awarded Badges

Hi EverybodyIs there a way to use CSS to hide this section of the widget?I am aware of the unique widget number and refer to it, can’t find a way to refer to this object.Anybody tried and succeeded? Thanks 

2
gstager
Hero III
10 months ago
J
Novice III
Jenny EngNovice III
asked in HTML & CSS

Window notification pop-up for newly created pages

Window notification pop-up for users’ first-time visit/access to a newly created page - is this possible? anyone have done this before and/or have suggestions?

0
J
Novice III
11 months ago
Katie C
Katie CNewcomer
asked in HTML & CSS

Changing Catalog Image Aspect Ratio via CSS?

Hey there! Upper management would like us to make Docebo look more like our new AEM-built websites...their main focus is to have the Docebo catalog images have the same look and feel as carousel images being used on our websites.  Docebo’s catalog images are 2:1, while our AEM website carousels support 1:1. Is there a way to adjust how Docebo’s catalog images are displayed so we can accommodate management's request? The vertical, rectangular catalog cards are fine, we’d just need to make the card images square versus elongated horizontally.  Thank you in advance for your insights and expertise! 

2
Katie C
11 months ago

Badge winners

  • Product Q&A Influencer
    randallsimhas earned the badge Product Q&A Influencer
  • Product Q&A Influencer
    captainzeldahas earned the badge Product Q&A Influencer
  • Product Q&A Influencer
    billsohas earned the badge Product Q&A Influencer
  • Product Q&A Influencer
    gigi galgoczihas earned the badge Product Q&A Influencer
  • Product Q&A Influencer
    Hollyhas earned the badge Product Q&A Influencer
Show all badges
Terms & ConditionsCookie settings