Skip to main content

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.

  • 464 Posts
  • 2,427 Replies

Recommendations (2)

  • What can I find in HTML & CSS?

    Guide by
    erin.brisson
    erin.brisson

  • Community Text Editor: Formatting code in community posts

    Guide by
    erin.brisson
    erin.brisson
466 Posts
B
beppeartzNewcomer
asked in HTML & CSS
Change style on one link

Hello Community I need to add style to the first link of this nav bar. Only that one, but i don’t know how to call it on css. If i add h1, i change all the h1 of the page:( Not very expert. Can you help me? https://resistenzatype.fontdue.com

431
alekwo
Guide III
JZenker
Guide II
JZenkerGuide II
asked in HTML & CSS
Centering Text of a CSS/HTML flipcard

Hello, I finally managed to work in flip cards successfully (yay!) but am struggling to get the text of the back of the card to be centered: Would anyone might have any insight as to what I need to add to either the html or the css to achieve this? Here is my current code: HTML: <div class="flip-card"> <div class="flip-card-inner"> <div class="flip-card-front"> <img src="https://s3.us-east-2.amazonaws.com/docebo.traceinternational/_Site+Images/tasa+widget.jpg" alt="Avatar" style="width:443px;height:300px;" /></div> <div class="flip-card-back"> <div class="align-items-center"> <h1>I figured out flipcards!</h1> <p>Finally!</p> </div> </div> </div></div> CSS: .flip-card { background-color: transparent; width: 443px; height: 300px;} .flip-card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.8s; transform-style: preserve-3d;} .flip-card:hover .flip-card-inner { transform: rotateY(180deg);} .flip-card-front, .flip-card-back { position: absol

5867
dklinger
Hero III
Neil Patterson
Guide I
Neil PattersonGuide I
asked in HTML & CSS
HTML 'flip card' widget

Hi all, Random question and not sure exactly how to word it, BUT… I remember attending a Docebo webinar last year and they demonstrated the use of what I would call flip card widgets (you hovered over an image and it flipped over). I think it was something to do with airlines. They sent out the HTML/CSS code, but I cannot find it anywhere. Does anyone else know what I am talking about? If so, do you have that email/code? Thanks :)

122812
JZenker
Guide II
dklinger
Hero III
dklingerHero III
posted in HTML & CSS
Moving the universal search to an on page experience

Morning Docebo-ians? Dochobans? Dob-ians? I got a decent question for you. This goes off of another post that I did about lets play hide that header. I have a simple need to hide that search bar on the top menu globally - it is going to cause more of a hassle than not and I need to minimize that hassle. But ideally? I would like to bring a type of search experience to a few high level catalog pages… please dont mind the dreaded stack of blocks...(lol - I will get there)… This is what I mean by a high level catalog page it is not handsome - but it is functional…. Current state with things kind of obscured What I would like is for the search to start off blank at first?And then show people cards or the search experience after. Or even jump over to the global search after a person clicks on a clean search interface….sorry - I have windows open...but you will get the point: If I had some javascript at the table, I could be clever and pass from that tiny form a url...but I am only kinda sma

1090
dklinger
Hero III
josefinarod
Docebian
josefinarodDocebian
posted in HTML & CSS
Have you used CSS on the course player to change the look / feel? Would love some ideas on what people have come up with!

Have you used CSS on the course player to change the look / feel? If so, I’d love to see a screenshot & a little bit of understanding as to what you’re able to accomplish w the added CSS. Would love some ideas on what people have come up! Cheers!

2794
Alan
Guide I
nicole.roman
Influencer I
nicole.romanInfluencer I
asked in HTML & CSS
Hide the "Start Learning Now" Button

Hello, Is there a way to hide the “Start Learning Now” button on the course player once they have begun their course? Having both buttons is very confusing for our users and hiding it would help with the number of help tickets we receive from users thinking their course wasn’t saved because the “Start Learning Now” button brought them back to the beginning of the course. Any advice is appreciated!

44512
Annarose.Peterson
Hero III
dklinger
Hero III
dklingerHero III
asked in HTML & CSS
Let's play - hide that header

Howdy folks, Have you ever played Hide that Header with CSS? Well - I have a situation where I need to hide the header to avoid having some folks seeing that search bar and left hand hamburger menu….I need to give them the one page and the most vanilla experience possible. It is only for a specific page - and I have learned how to adjust the css for a page by working with the page ID. But if you have pulled this off? And are open to sharing it? Can you let me know how you have been hiding the header? Happy to mark you for the correct answer PS - I do know there is a function for replacing the entire header with something else….that is when I grow us up and can afford to have a sandbox of a site.

3516
dklinger
Hero III
M
Helper II
markHelper II
asked in HTML & CSS
Edit margins on homepage via CSS

I’ve tried everything on my end but can’t seem to figure out how to solve this custom css issue and was hoping someone else here might have figured out a solution? We have a custom home page with the page title/description graphic (the one that shows an icon, page title, and description text in a white background just below the header) hidden via a custom style. Below that, we have a logo with a margin-top style assigned with a negative value to get the logo to be a little higher on the page. Without the margin-top: -50px assigned there is a big gap between the logo and the header. This works perfectly in Chrome/Edge (I blurred out our logo but the placement is right): But Safari seems to ignore it completely (see below). I’ve Googled the heck out of this but cannot figure out a workaround. Any css gurus have any ideas? I’ve tried using padding, margin, etc. in all sorts of ways to no avail. Notice the large gap between the header and the logo - this happens only in Safari:

3634
M
Helper II
R
Influencer II
randallsimInfluencer II
asked in HTML & CSS
Changing colors of chart in Activity Overview with CSS

Hi all, Has anyone had success changing the colors in the donut chart of the Activity Overview widget? I’ve been trying to change via CSS but have not been successful. Any help is appreciated!

3683
R
Influencer II
steveninfinger
Helper III
steveninfingerHelper III
posted in HTML & CSS
Content Description code

Had a thread going in another section about the course description and getting existing examples of UI. My team ended up building this example. Others on the thread liked it so I shared the code on that thread and am putting here as well if anyone is interested. Code Snippet: <div class="courseHeader">Blackbaud Financial Edge NXT:<br>Audience Focused Financial Statements</div><div class="content"><div class="floatLeft"><div class="delivery"><p><img src="https://s3-eu-west-1.amazonaws.com/lmsfiles/files%2Fb%2Fl%2Fblackbaud_docebosaas_com%2Fwysiwyg_upload%2F1626194721981-delivery.jpg" style="width:45px;display:block;vertical-align:top;margin:5px auto 5px 0px;text-align:left;" alt="files%2Fb%2Fl%2Fblackbaud_docebosaas_com%2Fwysiwyg_upload%2F1626194721981-delivery.jpg"></p>DELIVERY METHOD<br><div class="subtext">Online (Group Internet Base)</div></div> <div class="prep"><p><img src="https://s3-eu-west-1.amazonaws.com/lmsfiles/files%2Fb%2Fl%2Fblackbaud_docebosaas_com%2Fwysiwyg_upload%2F1626

1051
Adam Ballhaussen
Guide III
msiegel
Novice I
msiegelNovice I
asked in HTML & CSS
Background Image Size for Widget

I have a page with two widgets in a row. The background image I upload for one of the widgets, no matter the size of the image (I’ve tried anything from 700px width to 300px), always looks the same in desktop preview. Is there a way to manipulate this or is there a recommended dimension for widget backgrounds? I was thinking about the background-size: cover; css code but when I try it in chrome inspect, it doesn’t impact the image size.

6204
msiegel
Novice I
Bfarkas
Hero III
BfarkasHero III
posted in HTML & CSS
List view for Channel Widget

We are looking to use channels to present learning plans in segments to users on custom pages. However, we really wanted to use the list view which is not available on course/LP widget or channel widget, just the catalogs widget, which would not work for this. Decided to do some CSS styling to try to imitate, and go a few steps further to allow users to clearly know where they are at with each course and when complete, let it be not as important and take up significant less space. Heres a quick before/after of what we went for: Obviously this was quite a bit of CSS, but feedback has been positive. Note, we tend to cap all the widgets, we find it makes the page cleaner and easier to understand. See the css below: ​/* Add border to wrap list */#doc-page-61 .channels-content-wrapper { border: 1px solid #0078c2;} /* This controls the size and positioning of the image in the header */#doc-page-61 .channels-content-wrapper .dcb-ui-card-header, #doc-page-61 .channels-content-wrapper .ui-card-

3764
Bfarkas
Hero III
A
Novice I
abarriosNovice I
asked in HTML & CSS
Manually select a widget's visibility to either Desktop or Mobile View

Currently, when you add a widget, it is automatically added to the mobile view with the option to hide and or not visible at all if not supported. Can this "hidden" function can also be added when working with desktop view? One possible use case is when a widget is unsupported in mobile, we can load another widget to its place. Sample: Desktop view iframe (visible) html widget (set as not visible) Mobile View iframe (not supported) html widget (visible - this will act as the iframe's substitute) Is there any way to manually configure this via CSS?

3013
Adam Ballhaussen
Guide III
erin.brisson
Docebian
erin.brissonDocebian
published in HTML & CSS
What can I find in HTML & CSS?

Welcome to the HTML & CSS Category! This post explains the purpose and themes within this category. What is this category about? The HTML & CSS category is all about sharing code snippets to help others accomplish the nice little hacks and workarounds that are made possible by Custom Styles and HTML pages & widgets in Docebo Learn. You can accomplish a lot with these customization options, but we encourage you to test these changes thoroughly in your sandbox or through the inspector in your browser, as often times these edits can cause unintended consequences that may lead to a negative experience for your learners. What can I do here? Share your examples of custom code or ask questions related to custom HTML & CSS. Please be thorough when sharing your code so that it’s easy for others to understand and replicate. When sharing a post in this category, please include at least the following: Description – what does this code accomplish and what does it impact in the platform? Problem sol

16055
lrnlab
Hero III
Salvo
Influencer III
SalvoInfluencer III
asked in HTML & CSS
Need a coming soon page with a countdown

Has anyone managed to create a countdown page without the use of Javascript?

1813
Stephanie Dreiling
Helper III
Cindy McElhinney
Helper II
Cindy McElhinneyHelper II
asked in HTML & CSS
HTML/CSS for custom page widget that allows flexible margin for text

Does anyone have html code/css that would control the left or right margin for text on a widget on a custom page allowing you to have an image to the left or right of a box as shown in my mock up below?I don’t have extensive html/css skills but can cut and paste code into an HTML widget and I do know how to add custom styles to the configure branding and look area.

139319
lrnlab
Hero III

Most helpful members this week

Badge winners

  • Product Q&A Influencer
    JeanetteMcVeighhas earned the badge Product Q&A Influencer
  • Product Q&A Influencer
    Glen.D.Ahas earned the badge Product Q&A Influencer
  • Product Q&A Influencer
    shanejacqueshas earned the badge Product Q&A Influencer
  • Product Q&A Genius
    Swatsonhas earned the badge Product Q&A Genius
  • Product Q&A Influencer
    mrrippy82has earned the badge Product Q&A Influencer
Show all badges

Popular tags

Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings