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.

  • 269 Posts
  • 1,473 Replies

269 Posts

lrodman
Guide II
lrodmanGuide II
posted in HTML & CSS

Free Accessibility CSS: Larger header icons

ui-icon.ui-icon-size-sm { transform: scale(1.5);}/*larger header icons*/ 

1
lrodman
Guide II
1 year ago
lrodman
Guide II
lrodmanGuide II
posted in HTML & CSS

CSS need help: trying to animate a "use me!" image sliding out from under Virtual Coach

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animationsTrying to use this The idea would be after 90 seconds on the home page (or any page as long as it isn’t training material), a giant virtual coach head with a speech bubble “hi!” would slide out from the top right corner of the screen, sit there for 15 seconds, then slide out (and stay  “out” for another 900 seconds or forever, whichever is easier)

1
gstager
Hero III
1 year ago
K
Novice I
kristirebs12Novice I
asked in HTML & CSS

CSS Coding to remove channels from Power Users

Hey all!Wondering if anyone has used CSS to try and hide the channels tab (under course management) from Power Users? Not sure if this is possible but if it is, would love any input if people have tried it thus far! 

3
Bfarkas
Hero II
1 year ago
willingworth
Influencer III
willingworthInfluencer III
asked in HTML & CSS

Display Due Date in Courses

Hello, community,Does anyone have any Widget or CSS hacks that actually display the course due date in the course itself? Once a user is in the course, there is no communication to them that the course has a specific due date. Many users leave the tab open and shuffle it into their open tabs, others don’t notice the due date on the course card on the home page. Any suggestions to help improve visibility for the all-important due date? Thanks!

17
Jenna M.
Novice III
1 year ago
M
Novice II
mooboughNovice II
asked in HTML & CSS

CSS for Menu Color background

Hey folks! Does anyone know the CSS for changing the flyout menu background color? Thanks!

4
M
Novice II
1 year ago
lrodman
Guide II
lrodmanGuide II
posted in HTML & CSS

Free CSS: Compactify homepage and other screens/widgets

How do you compactify?™/* compactify my profile buttons*/widget-action-button div.root.action a.mdl-button.mdl-js-button.text-main { height: 24px; line-height: 24px;}/********************compactify***********************//*compactify "my home page" bar*/div#page-title__wrapper { padding-top: 2px !important; padding-bottom: 2px !important; min-height: 50px !important;}/*compactify homepage widgets - make all UI boxes closer together*/.single-widget.ng-star-inserted { margin-bottom: 10px;}/*compactify homepage channels widget*/channels-content-wrapper.channels-content-wrapper-hide-info.channels-content-wrapper-cards-2 { padding-top: 0px; /*top padding overall*/}channels-content-wrapper.channels-content-wrapper-hide-info.channels-content-wrapper-cards-2 div.ui-carousel-info.ui-color-typography-primary { padding-bottom: 2px; /*between icon and "follow" on mobile*/}channels-content-wrapper.channels-content-wrapper-hide-info.channels-content-wrapper-cards-2 div.ui-carousel-items-wrappe

3
Bfarkas
Hero II
1 year ago
lrodman
Guide II
lrodmanGuide II
posted in HTML & CSS

Free CSS: Make the flowplayer fullscreen iconconsistent with all other pages and websites

/* flowplayer fullscreen icon */.flowplayer .fp-header a.fp-fullscreen.fp-icon:before { font-weight: bold; content: '\26F6'; /*alt image: \2750*/}enjoy! ps I meant consistent, not iconsistent

2
Bfarkas
Hero II
1 year ago
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 II
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 II
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 II
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 II
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 II
1 year 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
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 II
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 II
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

Badge winners

Show all badges
Terms & ConditionsCookie settings