Getting Started with HTML/CSS Widget and Images

Hi ​@hailey.gebhart , you can put your CSS in the ‘Custom Styles’ section of the ‘Configure branding and look&feel’ settings page.

The HTML/WYSIWYG editor strips out a fair amount of html elements and attributes, but you can add classes and/or IDs which can be targeted by CSS depending on specificity needs. Most basic HTML tags work, but if you want anything like script, summary/details etc., or for=”” and ARIA attributes, you’re out of luck. 

In terms of overwriting styles, I suggest using classes where you can, then add higher specificity by targeting the full selector if you run into default styling issues. For example  paragraphs <p> in the HTML widget has a default margin that can’t be overwritten by a class alone, so use something like:

.htmlwidget .content p.<your class>

Regarding uploading images - in the HTML/WYSIWYG widget, switch to the editor and click the ‘insert image’ button. You can actually upload and manage all the images included in widgets here - the images will have a URL that points to the docebo CDN that you can use in <img> tags or in CSS (ie. background images etc.)

You can also use the material design icon font that Docebo uses (full list here) by using HTML. eg: <i class="zmdi zmdi-help"></i>

I was trying to add a ticker tape stye animated ‘latest news’ widget using the HTML block but the animation is ‘patchy’.  Do I need to add the code to ‘Configue look and feel’?