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,300 Replies

236 Posts

gstager
Hero III
gstagerHero III
posted in HTML & CSS

Countdown Timer - Animation Idea #13

I came across an animation that I thought was pretty cool and I decided I would try to recreate the effect for use with Docebo.This is an animated countdown timer - currently only 9 to 0 - I suppose you could have it count up as well. It uses two black divs over the top of a greenyellow div. The two black divs simply animate to different locations within the green div to mask portions of it out so that the result is a number showing through.The animation lasts for 10 seconds as you might imagine.Here is the code for you to play with and tweak as desired. As usual - there are two parts - CSS and HTML.First the CSS/** This is a countdown timer **//** This sets the size and color of your overall background **/.digitBG { background-color: black; width: 70px; height: 90px; position: absolute;}/** This sets the size, color, and start position of your number digit **/.digit { height: 50px; width: 30px; background-color: greenyellow; position: relative; top: 20px; left: 20px;}/** The

2
gstager
Hero III
9 months ago
K
Novice I
KarenClementNovice I
asked in HTML & CSS

Editing 404 page image via CSS

Has anyone found what part of the CSS to edit to change out the image on the 404 page? Hoping to replace Einstein with our mascot! Thanks in advance 

3
amusselman
Novice II
9 months ago
gstager
Hero III
gstagerHero III
posted in HTML & CSS

Rotate on Hover - Animation Idea #12

I was recently asked about rotating an icon on hover so I decided I would add this to my growing list of animation ideas with a little write up.As with other ideas of this sort - it requires adding some code in two areas.CSS code will go in the Branding and Look area of your admin panel HTML code will go in your widgetWe will use the HTML to place an icon and the CSS to spin it when you hover over it with the mouse.Here is a look at the end result.In this example, we’re just making the icon rotate by 180 degrees. It isn’t much but it is something that adds a little extra to the otherwise mundane to try making them a bit more interesting.Here is the CSS/** This block will rotate the object with an ID of spinner by 180 degrees **//** This rotation will happen when hovered over **//** Adjust the amount of rotation as desired **/#spinner:hover { transform: rotate(180deg);}Here is the HTML for the widget.<!-- This code places a font awesome star icon on the screen and sets the size --&g

6
gstager
Hero III
9 months ago
lrodman
Guide II
lrodmanGuide II
asked in HTML & CSS

CSS need help: trying to insert a globe icon before the word "English" on signin page (language selector menu)

code not workingtried image and character codecharacter code would be better ui-language-selector ui-button-dropdown ui-button-text button:before{ content: url('https://docebo-institute.s3.us-east-2.amazonaws.com/public/branding_hacks/signin-globe.svg'); /*'\f173';*/}/*globe icon for lang selector on homepage*/ 

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

CSS: Can I trigger an image by day of the week?

Would love to add a “Happy Friday!” image to my homepage automatically on Fridays.

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

Free CSS: disable overflow on my profile page-widget text

/* disable overflow on my profile page-widget text */myprofile-widget myprofile-additional-field.additional-field div.root div.label { overflow: hidden; width: 100%;} 

3
Bfarkas
Hero II
9 months ago
C
Novice I
c.bolkNovice I
asked in HTML & CSS

Change buttons via CSS

Our IT team managed to change the radius of the custom buttons on the Dashboard..mdl-button { border-radius: 2.625rem; } However, it seems that the ‘fixed’ buttons (which are visible in the learning plans/courses), are somehow secured, because we were not able to change anything.Do you know if there is any other way to change those buttons as well, or do we need to leave it like it is?

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

CSS: Enable transparent learning plan thumbs without a glitched background in activity stream

activities-stream-widget .tile-bg-image.bg-white {    background-color: white !important;}/*fix broken grey background on activity stream transparent learning plans*/ Now I (and soon, you) can safely use transparent learning plan thumbs.  Feel free to use my code in upcoming updates Docebo if you like!

2
lrodman
Guide II
9 months ago
ktbadham
Helper I
ktbadhamHelper I
asked in HTML & CSS

Search look and feel for three column pages

We really like the look and feel of the search on the Courses and Learning Plans widget whenever the widget is three columns wide. Example of what we like:We would love if it would look like this whenever the widget is placed in a singular column or two column, but instead of shortens. There’s more than enough real estate on the page for it to look the same as the one that’s all three column. Does anyone know how to change this? I assume the answer is some sort of CSS or jquery, which I am comfortable doing.Example of what we don’t like:  

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

How do I hide the content marketplace (and setup guide) buttons?

I want to hide from all superadmins including me.  

0
lrodman
Guide II
9 months ago
M
Novice II
mooboughNovice II
asked in HTML & CSS

Extended Enterprise Static Message On Header Removal

Hey folks, Does anyone know how to remove the: Browse [Company Name] Courses & Learning PlansOwn your future by learning new skills On the header for an extended enterprise domain? We’d love to not have that text visible. 

5
Jamie at GuyKat
Novice II
9 months ago
gstager
Hero III
gstagerHero III
posted in HTML & CSS

Revisiting the Flip Tile

Why This Post?It seems the flip tile has made a resurgence in popularity of late and having been asked about how to rotate something and defaulting to the Z-axis which was not the desired effect but rather to rotate along the Y-axis - I decided to spend a little time playing with this and offer some code.Also because a common question I have seen is how to get the code from the Docebo Inspire session a couple years ago. My hope is that this post will help make the process of implementing some flip tiles in your platforms a little bit easier by finding it here directly without downloading and digging it out of another document.Lets start with the end result of my playing around. I made four tiles that were slightly different.**NOTE**These are tiles which are all placed inside of an HTML/WYSIWYG widget.These are not widgets themselves that are flipping. Tiles ExplainedThe first tile (upper left) is an image for the front and an image for the back along with a button that links to somewhe

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

Free CSS: Make the table of contents appear on the left

For docebo-native course player I want to match articulate rise and articulate storyline courses where the ToC is on the left update: for both ToC icons/*player ToC on the left*/.mdl-grid.course-player-elements__wrapper.mdl-cell--12-col{ flex-direction: row-reverse !important;}i.zmdi-mode-full.bg-accent.bg-circle-button.mdl-cell--hide-tablet.mdl-cell--hide-phone, i.zmdi-mode-compact.bg-accent.bg-circle-button.mdl-cell--hide-tablet.mdl-cell--hide-phone { transform: rotate(180deg) !important;} 

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

Free accessibility CSS

div.course-widget.course-docs div, div.course-widget.course-docs span.text-main { font-size:18;}/*accessibility: larger text attachments widget */ Larger file attachment widget text

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

Hiding the expired date in the user summary.

Morning CSS hackers….a question that I thought I would not have to tackle for a little but is being driven by more and more inquiries by our managers after some training on the My Team view….Folks are getting antsy about the Expired Date shown in the summary.For things that are not leveraging roaming certifications but a deadline was issued? It is gonna get people nuts...and I can see us answering it forever…...OR…..can the row Expired Date be hidden with CSS????? Have you tried tackling it? @gstager - that magic inspector of yours (just kidding)...has it looked at trying to refine that one?

5
dklinger
Hero III
9 months ago
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
9 months 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
9 months 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
9 months 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
9 months 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
9 months 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
9 months 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
9 months 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
9 months 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
9 months 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
9 months ago

Badge winners

Show all badges
Terms & ConditionsCookie settings