HTML & CSS

Is there any way we can remove the training materials tab? Thank you.

In this example, I wanted to start developing some more interactivity as opposed to passive effects.This requires the user to click on the box. When you click on it, the background color changes so that the text can be read. Of course, the trick here is to start with a background color that matches the text color so that it blends in and cannot be read.CSS Click to Reveal EffectHere is the CSS to make the above./* Click to Reveal *//* This is the CSS for the Branding and Look section */#card { width: 250px; height: 175px; background-color: #00ff00; margin: 25px; padding: 10px; font-family: 'Courier New', Courier, monospace; font-size: 24px; color: #00ff00;}#card

I did not see an easy way to do this within the platform using the text editor so I thought I would offer this little nugget for those who need to do these sorts of things.  In the image above, you can see two examples of where a subscript and a superscript would be used.To get this look, you would need to use the code editor by selecting the  < >  icon on your menu bar.For subscripts, surround the text you wish to have slightly lowered between the “sub tags”.<sub>6</sub>For superscripts, surround the text you wish to have slightly raised between the “sup tags”.<sup>2</sup> Here is how the code looks for what you see above.Note that I added a little extra styling which would not be required.<!-- H

In this example - I thought it might be neat to create some sort of animated revelation of text.CSS Reveal Text Effect/* Text Reveal *//* This CSS goes in the Branding and Look Section */#mask { width: 500px; height: 50px; background-color: black; transform-origin: 100% 0%; animation-name: reveal; animation-duration: 4s; animation-iteration-count: infinite;}@keyframes reveal { 100% {transform: translateX(500px);} 100% {width: 5px;}}Here is what I did with the HTML<!-- This is the HTML code for your widget --><div style="background-color:#000000; font-family: 'Courier New'; color:#00ff00; height:100px; padd

In this little project we take a box and have it pulse a few times and then return to normal.What are some ideas you have for using this kind of animation?CSS Pulsating Box/* Here is the CSS code for the Branding and Look section *//* Pulsing Box*/#box { width: 25px; height: 25px; margin: 20px; background-color: #0000ff; animation-name: pulse; animation-duration: 2s; animation-iteration-count: infinite;}@keyframes pulse { 25% {transform: scale(1.5, 1.5);} 30% {transform: scale(1.25, 1.25);} 35% {transform: scale(1.5, 1.5);} 40% {transform: scale(1.25, 1.25);} 45% {transform: scale(1.5, 1.5);} 60% {transform: scale(1.25, 1.25);} 6

 This fun little CSS trick is similar to the sliding bar but moves the entire graphic rather than animating the width. This gives the arrow a sort of “bounce” effect to draw attention.Turn the arrow and adjust the direction of the “bounce” and you can point out just about anything!CSS Bouncing Arrow/* Here is the CSS for the Branding and Look section *//* Bouncing Arrow */#arrow { animation-name: bounce; animation-duration: 1s; animation-iteration-count: infinite;}@keyframes bounce { 100% {transform: translate(20px, 0px);}}I added a little inline styling here to position things the way I want. <!-- Here is the HTML code for your widget --

In this idea - I thought I would play with some rotation.I attempted to provide a little something extra too. A CAR! - or at least the appearance of a moving car.Perhaps I will see about animating the entire set at some point.Here we have three images - I am only animating two of them - of course.Both tires are tied to the same keyframe code.CSS RotationHere is the code./* Here is the CSS for the Branding and Look section *//* Car Tires */#backTire { width: 50px; height: 50px; left: 77px; top: 65px; position: absolute; animation-name: carTires; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: linear;}#frontTire {

Here is a bar that slides across the widget.I imagine you could use this idea in a variety of ways.I would be interested to hear about all the ways you might find a use for something like this.CSS Sliding BarHere is the code. Feel free to adjust it to your liking./* Here is the CSS for your Branding and Look section *//* Sliding Bar */#slide { width: 50px; height: 20px; background-color: red; border-radius: 40px; animation-name: slide; animation-duration: 2s; animation-iteration-count: 1; animation-fill-mode: forwards; animation-delay: 2s;}@keyframes slide { from {width: 5%;} to {width: 100%;}}<!-

Well - not sure what you might use this for but perhaps you may want to draw the attention of your learners to something.I am more of a JavaScript guy so since I cannot use that - I have been trying to sharpen my CSS skills so I was trying to play with some animation ideas.Here is one that you’re free to use. Adjust anything to your liking.There are two parts here. CSS for the Branding and Look HTML for your widget or other page./* Blinking dot *//* This CSS goes in the Branding and Look Section */#blink { width: 50px; height: 50px; background-color: red; border-radius: 100px; margin: 20px; animation-name: blink; animation-duration: 0.5s; animation-iteration-count: infinite;}@keyframes blink { 50% {opacity: 0;}}/* This is the HTML code for your widget where you want the b

OK - I seem to be missing something. I have entered some custom CSS under the Branding, Look, and Feel area in both the 7.0 and the 6.9 areas.If I use an HTML Widget for a custom page - the custom CSS works fine.However, if I try to use the same custom CSS to style something in an HTML Page as training material for a course - it is ignored.I have also tried doing some style tags but those get stripped out.I seem to remember a place where I could put some CSS for courses but I cannot seem to find it again.It appears I can do some things by placing some styles inline like such but I’d rather access something pre-defined.<p style="color: #ff0000;">Red</p>Is there a way to style course HTML pages with custom CSS?

Hello,Seeing if anyone has had success targeting a specific Div from a Docebo page (the dashboard for example) and using iFrame to show that Div as a widget on another page? Having issues using an iFrame for another internal docebo page (getting 404) even though I have the perms to view in the page using the iFrame. Would like to include this #middle.section only as an iFrame and maybe some others on the dashboard: If anyone has any insight, please do let me know! Thanks!

I was wondering if anyone has CSS to remove the Virtual Coach button, so it can stay on, but not available to the users. We’ve been told that it needs to be on to learn. I noticed the beta quiz questions and started going through them and the sentence structures were not good and the questions were confusing. I love the concept, but it will be confusing to the users, especially new hires. But, we still want the Virtual Coach bot to learn. Thanks for your help!Michelle

Sorry for the terrible title!We are working with a course description and have a problem with the spacing after a paragraph or heading.Everyone thinks the spacing is not enough, but adding a return makes it too much.We’d like to add a bit more space. I believe this is margin-bottom in css, but that does not seem to have any affect.Any ideas?

Hello CommunityI 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

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

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 :)

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….

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!

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!

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.

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’v

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! 

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%2Fb

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.

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 {