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.

  • 286 Posts
  • 1,589 Replies

286 Posts

susan2000
Contributor III
susan2000Contributor III
asked in HTML & CSS

Increase asset/view height to fit portrait files in C&S channel

Hello CSS peeps!I want a letter/portrait orientation channel PDF or Document to display at full height of the image instead of the top portion with a scroll bar while keeping the image at full width of the window. (without clicking full page view)I tried .slides-player__wrap {height: 100%;} and that sort of does it but overlaps the div/tile below it instead of pushing page content down.Anyone know CSS for doing this? 

12
Bfarkas
Hero III
1 year ago
K
KristianSchneidNewcomer
asked in HTML & CSS

Putting 'Log-in as this user' button in User Personal Summary

Hi team,In the power User section of our LMS, there is a button in the top right that looks like this: “Log in as this power user”This only appears on the Power User page, and not a normal, typical user. I was wondering whether there was a way for this button to be added into the User Personal Summary section for all learners, to allow efficient user impersonation without having to back out the page I look forward to your response. Many thanks Kris

1
Bfarkas
Hero III
1 year ago
gstager
Hero III
gstagerHero III
posted in HTML & CSS

Adjust Logo Header

We wanted to make some changes to the main header where the logo resides. We felt the logo was a bit too small and wanted to make it slightly more prominent but not too extreme. We also canned the global search altogether.We’ve run with this for a few months now without finding anything that negatively impacts our platform but as always - if you implement this for your own environment - be sure to be on the lookout for glitches it may cause on your platform.Here is what we did if there is anyone else out there looking for a similar adjustment.This allowed us to go to a rendered size of 150w x 70h logo vs the default which says max: 380x72 but the rendered size seems to be a bit less than that so we made this adjustment./** Change Site Header Height and Logo Adjustment **//** Again - not too much bigger **//** This refers to logo itself **/doc-layout-internal-header .internal-header-logo a img { height: auto; max-height: none !important; width: 150px; }/** Removal of the global sea

3
Bfarkas
Hero III
1 year ago
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 III
1 year 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 III
1 year ago
Adam Ballhaussen
Hero I
Adam BallhaussenHero I
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
1 year 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 III
1 year ago
Jay.Kolbenson
Docebian
Jay.KolbensonDocebian
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 III
1 year 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
1 year 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
1 year 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
1 year 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
1 year 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
1 year ago
lrodman
Guide II
lrodmanGuide II
asked in HTML & CSS

CSS: Is it possible to replace the skills illustration?

Thanks!

0
lrodman
Guide II
1 year 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
1 year 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 III
1 year 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
1 year 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 III
1 year 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
1 year 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
1 year 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
1 year 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
1 year ago
caycocho
Contributor II
caycochoContributor II
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 II
1 year 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
1 year 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
1 year ago

Badge winners

  • Product Q&A Influencer
    elamasthas earned the badge Product Q&A Influencer
  • Product Q&A Influencer
    JasonHailerhas earned the badge Product Q&A Influencer
  • Product Q&A Genius
    Cheneyhas earned the badge Product Q&A Genius
  • Product Q&A Influencer
    B0LThas earned the badge Product Q&A Influencer
  • Product Q&A Influencer
    Teresa2023has earned the badge Product Q&A Influencer
Show all badges
Terms & ConditionsCookie settings