CSS Master Guide – how to target the right .class and #id

  • 1 December 2021
  • 8 replies
  • 265 views

Userlevel 7
Badge +5

I am curious - for those of you who do lots of CSS customization - how do you go about finding out the right  .class  and  #id  to target?

Are most people…

  1. doing some investigative work with the browser console/inspect features
  2. using some sort of master reference guide out there someplace
  3. sifting through linked stylesheets
  4. contacting Docebo tech support
  5. doing Jedi mind tricks
  6. using some other cool method

I have currently relied heavily on #1 above for the little I have done so far but would be open to studying a well commented, prettified reference guide… #2  :fingers_crossed_tone2: 


8 replies

Userlevel 6

Using the console to inspect elements. The issue is the elements like buttons don’t have dedicated ID’s. So when you refresh the page there's the chance the CSS won’t apply as the element now has a different ID. 

There is an idea open to give elements dedicated ID’s which should help with lots of CSS customization.

Userlevel 7
Badge +7

we rely on Docebo for help and shares in the community...On occasion I do use a developer/coder for the more complex stuff...Did find some interesting code and options on the HTML/CSS discussion group

Userlevel 2
Badge

I use the Inspector.

Userlevel 6
Badge +2

I also use the inspector (and also rely heavily on our contractors).

Maybe we should create some kind of collective online Docebo CSS reference document, where we all add-in  all the CSS tricks we’re using?  It could be in the form of a wiki.  

Userlevel 2
Badge

I also use the inspector (and also rely heavily on our contractors).

Maybe we should create some kind of collective online Docebo CSS reference document, where we all add-in  all the CSS tricks we’re using?  It could be in the form of a wiki.  

You know what would be awesome from Docebo? A visual guide to their structure. Gravityforms for WordPress has this in their developer documentation, and it is a godsend! It looks like this:

 

Can you imagine how awesome our lives would be if we had that as a reference for Docebo? I know it would be tricky for widgetised pages because there are too many variables, but even if we just had a layout guide for each widget/element, that would help a lot.

 

Love the collaborative snippets wiki idea, too!

Userlevel 2

I didn’t realised we had access to anything like CSS. I thought Docebo locked their servers, code…. from us.

I am getting this wrong? or are you talking about the possibility to add custom CSS rules via the Admin dashboard?

Userlevel 7
Badge +5

I didn’t realised we had access to anything like CSS. I thought Docebo locked their servers, code…. from us.

I am getting this wrong? or are you talking about the possibility to add custom CSS rules via the Admin dashboard?

 

You betcha!

You can tweak all sorts of things by putting in some of your own code in the Branding and Look section.

 

 

Userlevel 7
Badge +3

@gstager thanks for adding a comment bringing this up to the top in forums as I missed it the first time around. Like most I heavily do #1, and upvote the idea of a community group helping to put together some type of guide for at least the most common request areas, would be willing to help!

Reply