HTML & CSS

 Hello, our organization is a big fan of using catalogs and assigning views as needed. For many cases, we may leave a catalog open to all users - but share the link to those who need to access it. As it stands- the advanced settings for catalogs is set on ‘hide.’ Making it hide the internal catalog. We also have a custom built homepage, with a widget for catalogs. This widget only displays certain catalogs that are publicly availble. Today as I was setting up an unlisted but public catalog - I realized in my test account that users are able to click ‘course catalog’ - which redirects them to the full internal catalog. This encompasses the catalogs that we would like to be unlisted but public, and only visible by linking. I have tried to delete or edit the ‘course catalog’ built in page but it cannot be done. I would appreciate any insight into keeping users from having the option and or clicking ‘course catalog’ and being taken to the full catalog. Thank you for your help in advance! H

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

Hi! I’m not too bad with CSS but I can’t figure out the code to enlarge the logo and the header that contains it. I have inspected the code and tried various things, but no luck, Can someone help me? Thanks!

Hi everyone,Does anyone have issue with seeing their footer? Ours just disappeared (both public facing page and logged in) but I checked our white label setting and our custom footer (using CSS) is turned on. Very strange…Thanks in advance!Teresa

We have set up a test, and the first “question” is a title type. A screenshot of the setup is below. You will notice bullets next to part 1 and part 2.When we view the test the way a learner would however, the bullets are missing. Screenshot below. When I inspect that element on the page, I can see that it has proper unordered list tags, so the only thing I can assume is that those elements are not styled properly when it comes to tests. Screenshot below. I did go and remove all of our custom styles to see if I had done something that broke this, but that didn’t work. This is unfortunately where my expertise ends :( Has anyone else encountered this? Any ideas on how to fix it?

Hi Community members, Does anyone have experience on creating a ‘Carousel Style’ My courses and Learning plans display? The easiest way to describe this would be the ‘Netflix look’.Currently this widget only allows ‘Card’ and ‘List’.Would be happy to learn from you or create this as an idea if that’s something you see as useful as well.

Hi therePlease could some one help me out with how we could edit the footer on the home page to add an image? and how I figure out recommended sizes for the images please?Ideally I'm trying to adjust the whitespace at the bottom? Any help appreciated!!! ThanksSam 

Hi community!Has anyone managed to changed the border colour (on hover) for the course icons? Thank you!

Here’s some CSS that will adjust the new course player to “light mode” if you don’t like the default look and feel. Insert the following into the CSS editor:/* Light Theme */lrn-course-player-play-area { --ui-color-layout-contrast: rgba(255, 255, 255, 1); --ui-color-typography-negative: rgba(33, 39, 33, 1); --ui-color-border-accessibility-default: rgba(228, 230, 229, 1); --ui-color-layout-overlay-dark: rgba(255, 255, 255, 1);}lrn-training-material-header,.lrn-course-player-table-of-contents-header,.lrn-course-player-training-material-idle-view-content { --ui-color-icon-negative: rgb(73, 43, 43); --ui-color-icon-neutral: rgba(255, 255, 255, 1);}lrn-training-material-header button,.lrn-course-player-table-of-contents-header button,dcb-ui-list-item-training-material-content,.lrn-course-player-training-material-idle-view-content { --ui-color-border-accessibility-negative: rgba(102, 102, 102, 1); --ui-color-interaction-ripple-light: rgba(0, 0, 0, 0.08); --ui-color-interaction-hover

Hello, So I had a client ask me if there was another way to create a “2nd” sign in button on the Sign in page. In this client’s use case they want to quickly point learners who were external to use the Extended Enterprise if they accidentally arrived at the main parent platform page. Please see the Look of the Sign and Page, the header I created, and the CSS I use to style the Sign in Button which is a link to Extended Enterprise.   CSS Used:/*Use to Edit Header Sign in Button Message*/.header-message-inner a {background-color: #683A5E;color: #FFFFFF;border-style: groove;padding-top: 10px;padding-left: 10px;padding-right: 10px;padding-bottom: 10px;border-radius: 5px;}/*Change EE Employee Sign In Text to White*/div p a:link {color: #ffffff;} 

Hi Community,I have a Power Automate workflow that sends a calendar invitation when a user is enrolled into a session.Whatever I write in the session description, will be reflected in the body of the calendar invitation.So what we do is ahref the teams meeting link.The issue, however, is that for some reason it duplicates the links.@Docebo support say “they dont support html” but in this case I believe this is a system flaw.What do you guys think? any ideas?Screenshot of double link attached. 

 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

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.

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

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

Hey hey, I couldn’t find this issue anywhere but I know it has been done by some organizations.So here goes, I want to break out of the boundaries set by the HTML widget. Specifically, I would like to get to 100% width on the page to help create clearer sections of the pages. Hopefully the screenshots below will help illustrate what I’m asking about. Anybody figured this out and I willing to share?

before and after (I have a few other tweaks in there too) /***************header and titlebar ***************************//* fancy header bar*/header.doc-layout-header div.doc-layout-header-bar doc-layout-internal-header { background: url(https://docebo-institute.s3.us-east-2.amazonaws.com/public/branding_hacks/breadcrumb-branding-header.png) repeat-x center; background-size: contain; background-color: transparent;}/* fancy breadcrumb bar*/doc-layout-breadcrumbs div.breadcrumbs { background: url(https://docebo-institute.s3.us-east-2.amazonaws.com/public/branding_hacks/breadcrumb-branding.png) repeat-x center; background-size: contain;}doc-layout-breadcrumbs div.breadcrumbs div.hierarchical-breadcrumbs ul li{ visibility: hidden;} /* hide breadcrumb text*/ doc-layout-breadcrumbs div.breadcrumbs div.navigation-history a { color: black;} /* black navigation-back text*//* fancy page title bar */doc-layout-title-bar div#page-title__wrapper { background: url(https://docebo-institute.s3.us-eas

Hello, We didn’t end up using this code, but I thought it might be helpful to others. It turns your hamburger menu into a 3 column “mega menu” top center using CSS-flexbox columns. It also makes the topbar “fat” plus a few other tweaks. Enjoy! Before:After: 

Hello, Could I use CSS to create hoverovers for the calendar, so users wouldn’t have to click an event to see details? I assume not but figured I’d try. See below. 

In this example - I decided to create a custom button that has the effect of being pressed.It has the look of a momentary push button rather than a persistent one.To do this we are simply changing the size and position by just a few pixels and adjusting the color and shadow.CSS Button Press EffectHere is how I did it./* Button Press Effect *//* This is the CSS for the Branding and Look section */#myBtn { width: 75px; height: 25px; background-color: #e21836; border-radius: 25px; position: absolute; box-shadow: 3px 3px grey; left: 25px; top: 25px;}#myBtn:active { background-color: #9d061f; left: 29px; top: 29px; width: 74px; height: 24px; box-shadow: none;}#myBtn:active p { color: #ffffff;}Here is the HTML<!-- This is the HTML for your widget or other page --><div><div id="myBtn"><p style="padding-left:7px;">Press Me</p></div></div><!-- Want to actually add a link to this button? --><!-- You can just add the following and

I had a slider working thanks to @gtstager HTML/CSS code provided. And then I borked it…  My CSS is now showing up as text :(  Anyone have any idea what I am doing wrong… Google was not helpful and I only know enough CSS HTML to be dangerous.  This is showing instead of my image on one of my carousels and the other one at least displays an image.  I answered my own question…  The CSS Goes in the configure branding and look…. The HTML goes in the widget…. If you put the CSS in the Widget it will show in the widget…  I want to put in a second slider… . Do I need to give it another name?   

Hi,I’m wondering if anyone may know the CSS to change the color of the course expiration date on cards to red. I’ve been trying this with no luck}/** Change text color expiration date due **/.ui-list-item-status-details ui-typography-subtitle ui-color-typography-secondary ng-star-inserted{    color: #1D7000;}  

This post is a continuation of the first post found at the following link.Information found at that link is still valid but there is a new twist in the plot and so I decided to start a new thread to cover that scenario.Highlights From First EpisodeManagers have a team and they have an option to give team members the boot both individually, and when multiple folks are selected, en masse. We removed those options with CSS. HR is happy.Second Episode TeaserAs the manager - you find out that your boss, can still give your team members the boot even though you cannot. You inform HR and the tension in the room becomes palpable.DiscussionInformation at the link above works fine when your organizational structure is only one manager deep. This is due to the fact that Direct Managers have a few more options with their teams than the Functional Manager one level up does. This results in the “Remove From Team” option appearing at different positions in the pop-up menu.Two Level Management Structu

Has anyone looked at the CSS options for the New course player?  For example I want to remove the Learning Object type (SCORM). in the old player there is theCSS option to remove this./* Remove the object type in the course player view */div.information.mdl-cell.mdl-cell--10-col.ng-star-inserted > div.info.text-main {display: none;}Not being very adept at this i managed to find where in the code it seems to be displayed, but I have no idea how to convert this to a CSS command..   Also I cannot see which module the course player resides in the localization app (any Suggestions?) 

Some time ago some ago a few questions went around regarding the icons along the top right and being able to change the color of them.I happened to notice this morning that they had reverted back to the default dark grey color so I decided to look into it.I discovered that the ID from prior code is no longer being used so using the hashtag to reference the ID of the iconex. g#gamificationstopped working. Instead - it looks like ID has been replaced with data-icon-name So - for those who may be interested - here are a couple examples of my updated approach to targeting the individual icons.There may be other ways to do this as well and as always - test to make sure that nothing else is affected with your instance of Docebo. /** Change Icon Color **/[data-icon-name="gamification"] { fill: #AD122A;}[data-icon-name="notifications"] { fill: #fcb614;}/** End Change Icon Color **/