HTML & CSS

Hello again CSS gurusFollowing my previous question, I was also able to change LO completion iconsBut when displaying my LP courses (by clicking on a LP details)… I would like also to match my icon colorsAny hint ?Thank you

Has anyone had success adding a sticky left navigation? I’ve been gazing adoringly at Tiktok Academy’s version, but I only seem to be able to find HTML/CSS for horizontal nav. I’d love any tips if you have them! 

Is there a way to give a contractor access to build out an HTML page without making them a SuperAdmin  thus giving them access to my entire platform.  

Hello!Does anyone know how to change the text on the Play button in a Learning Plan? We would like to change the text on the button that takes you to the courses in the Learning Plan from “Play” to “Enroll” but I am having some trouble. I can change it on the page itself by using the following: <div class="ui-button-outlined-content visible"><!---->Enroll<!----><!----></div> However, when I go to Configure Branding and Look, enter this into the CSS section under Custom Styles, and hit save, there is no change to the Learning Plans when I go back to them. This is very new to me so any help is appreciated!

I understand the usefulness of tags for search. However once a learner arrives at a video, the need to show the tags is not important. Is it possible to hide the tags?

Is there a way to export our Custom Styles CSS? I know we should back it up regularly, so I was wondering if there was a way to run a report on it so we could have it export on a regular basis. How is everyone keeping theirs backed up? Saving a copy each time something is changed?

Good Morning!My organization is currently implementing Docebo Learn and we are trying to work with the UI/UX to create some custom catalog pages.  Specifically, we have a page on which we’ll have buttons for access to titles by category (image #1). The challenge comes in whether we can create the effect of the white back drop and course listing appear when clicking on one of the topic buttons (image #1).Since we are so new to the application I was hoping there was an expert here who could share whether they think we can make this work and how we might approach it.  I have two excellent designers who code in HTML/CSS but we didn’t want to go too far down the rabbit hole if this simply isn’t functionality that could be supported.Would anyone be able to share their thoughts on if this is something we can get working in our portal?Thank you so much!Michelle

Ok! you guys are just great at helping I am a jack of all master of none. I do everything from ID, to graphics, to LMS, to video editing, so CSS HTML is a jack not expert trade for me.I am trying to design a new page. I really liked the hover on the map kind of example Docebo put out on the guides, but I couldn’t get it to work without a white background and scrollbar.I moved to the custom flipcard and added those *somewhat* successfully. I don’t love the background color, etc.I am down to just trying to create a HTML widget that takes you to a course because I do not have Coaching or Assets. (It is also not my favorite, I would rather have just a list of downloadable files) If I could JUST get rid of that padding on the image, I could be satisfied but not happy with what I’ve done so far.Here is my CSS and my HTML for the Handy Tools/Course link widget (I gave up on the hover effect on this one): //HandT_image #HandT_image {width: 100%; opacity: 1.0; background: rgb(95, 200, 139, 0.1)

Hi! Tell me please if I can change the name of the button “SAML SSO” in this login window, I didn't find such an option in the settingsI need the button to be called differently for internal and external customers but have redirect on the same link.Also, I need to change the link under the Register button. Please tell me how I can do this?Thanks!

Hi.  I have a few questions re: the use of channels.First, is it possible to place a channel I’ve created inside the HTML/WYSWYG widget? If so, how is that done?Second, is it possible to change the height and width of a channel widget? Thanks,Emily

Hi thereIs there a way to manipulate the background color of the ”task list” and the “activity overview” widgets via costum css? I changed the thunps up picture, but the white background does not match the rest of the design.Best Regards

Hey! We are trying to change the colours of our Progress wheels on the user summary page. At the moment the inner colours wheel and text sit as red, the middle is light blue and the outer is red. We would like it to be red outer ring, yellow/orange middle ring, and green inner ring. We have tried using the CSS in the pic attachedbut when editing the HEX codes and colours names it doesn't work. Does anyone know how to fix this? 

HiI read else where that the CSS code below would remove the “Change Password” for Super Admin.  I have plugged this in but it removes it for users only. Does anyone have code to remove the “change password” for super admin?  Or does it matter? /*hide the “Change Password” section the “My Profile” page*/#vertical-tab-changePassword { display: none; }

Hello Docebians!This is me again...Sorry to bother you again… I'm working now on channels...I know I can assign and allow experts to upload content.However, IN THE CHANNELS SECTION is there a way to hide- with CSS- the arrow channel for members, not experts? Here this is what I mean.…  Once you click on the arrow, the menu appears  I want members not to see the arrow there -upload content-. Only the experts to see it.It's confusing for membersThanks in advance @DPatel  @roberto.moscatelli @whetstoneth @lrnlab @Annalisa  

Do any of you know of a reliable way to turn off the “keep me logged in” functionality?I can’t seem to find the right CSS:div[class='ui-input-checkbox'] {    visibility: hidden !important;}Nor does this jQuery seem to be working correctly:$("label[for='ui-input-checkbox-14']").hide(); These do work from the console, so I’m guessing it has something to do with the modal window itself.

I’m trying to use HTML widgets to load images for multiple languages that will each be linked to separate catalogs. Using the WYSIWYG works great to add the image to the widget, but no matter what sizing on the image I try, I cannot get the alignment I’m looking for. The widget automatically adds <p> to the HTML which creates whitespace, I’m able to remove the whitespace but that makes the widget slightly shorter than the carousel I have next to it.Whitespace whitespace removed but widgets different sizes - both HTML/WYSIWYG widgets - both images set to 220pxAspect ratio lost when forcing the HTML widget to 220px to align with image on left. Showing with or without white the versions showing the image doesn’t size properlyI am a novice with HTML/CSS so I’m hoping I’m just missing something simple. Any best practices out there for this? We have tried many many sizes of the image but ultimately it’s the same issue over and over again. 

Hello everyone!I recently have begun attempting some HTML/CSS coding endeavors on our homepage to hopefully make a more organized and clean experience for our users. I found a course on Docebo University, titled Take Platform Design to the Next Level and it generously supplied some ideas and accompanying codes. I implemented the ‘Custom Icon Boxes’ on our homepage, this is what it looks like on Screenshot #1 and I am very happy with the size and layout of the boxes, but there is a few things I would love some support on if anyone is willing to help.Is there a way to get rid of the white edge that borders each box? I would ideally love to have the box just be the solid color. I would love to upgrade the design and text on these boxes to make it look a little more professional or ‘finished’. I love the border and ‘button’ look of the Docebo custom content boxes, I have included a screenshot of what I am talking about. Is it possible to edit the code so I can add a border/box around the t

Hi, all. I’m currently working on an unpublished duplicate page of our homepage. I have added a html/WYSIWYG widget to the page that has simple text and some custom CSS that I’ve added to the appropriate custom style area in our Docebo instance. I searched the page’s code via inspect elements and found the proper id to use as a selector in the CSS, and the new widget appears correctly on the page.However….The widget seems to be appearing twice -- almost like it’s stacked on top of one another.This is what’s rendered on the pageThis is the custom CSS codehtml selectors for one of the widget occurrences (I used “#doc-widget-57” as the selector for CSS purposeshtml selectors for the second widget occurrence If anyone has any ideas as to what’s going on here and how I can eliminate the second widget, I’d be grateful. Emily

Trying to hide the page title wrapper on a certain page but can’t seem to get the below to take: #doc-page-575 #page-title__wrapper { display: none !important;}Only able to get the below to work on all pages:#page-title__wrapper { display: none !important;}Any ideas? Thanks!

The “graduation cap” icon for the Ask an Expert button in Discover Coach & Share is fairly meaningless to our users, and creates a lot of confusion. Has anyone found a way (using CSS?) to swap out that icon for something else? Thanks!

Hi All,I am trying to add personal summary or Activity page (Transcript) as Iframe. Is there any way, I could do it. The internal page can’t be Iframed is the message that I get. Any Idea if it is doable? I have re-directed pages with same banner as first html widget, However Activity page is not falling in place. 

We would like to promote our subscription program to our non-subscribers. We don’t want to bother our subscribers with this information.Does anyone know if it’s possible to show a widget/image/text to non-subscribers only?I could not find anything useful in the CSS for this purpose.

Hello! I am hoping some one can help me. At one point we added a scroll bar with a forced height to out Activity Stream widget on our home page. This has since stopped working. Does anyone have any advise on how I can modify the CCS to have it work again? /* Added scroll bar for Activity Stream Widget on page*/#doc-widget-31 {    height: 450px;    overflow:scroll}

 Can anyone help me remove the above? I have tried:  .lrn-course-player.lrn-widget-session-completion-status-open {display: none;}.lrn-widget-session-completion-status-open {display: none;}lrn-widget-session-completion-status-open {display: none; What am I missing?

I notice that AWS skill builder and Docebo University both have the same responsive full page course design with table of contents on the left, and scrollable content for 80% of the interface. The content then includes flip cards, tabs, accordions, videos, images, text, and quizzes in similar styles, although the Amazon version is slightly cleaner.I am interested in replicating this look for at least some of the e-learning courses on my platform. Since these are so similar, is there a “standard” method to achieve this look and functionality? I can design this if needed, but hoping there are shortcuts in the form of templates, etc. to expedite.Here are the two examples of the look and function I am referencing:https://explore.skillbuilder.aws/learn/course/134/play/99519/aws-cloud-practitioner-essentialshttps://university.docebo.com/learn/courses/534/docebo-for-microsoft-teams/lessons/2587:550/docebo-for-microsoft-teams-embedding-and-sharing-trainingScreenshots:    Any suggestions and id