Scared To Try CSS? --> Start By Dipping Your Toe In The Water

Are you worried that if you so much as even touch the Custom CSS box that you’ll have some explaining to do?

It would only take a single keystroke to drastically change the look and feel of your Docebo platform.

I totally get why you don’t want to be that person. #gulp #shiftyEyes

CSS tells the HTML how to look so don’t forget that there is another half to this equation and they must be in agreement or things will not turn out as planned.

It is pretty normal to want to test the water before getting in the pool so here are a few tips for you to help make it a little easier to get in the CSS water.

1. Remember to Separate Things
   For the same reason we keep milk in a different jug than our Diet Coke or our orange juice, we should try to keep our blocks of custom CSS separated from other blocks as well. If we don’t  - bad things can happen.
   
   One way to go about this is to provide a container for your code and be sure to give it a name not likely to be found elsewhere in Docebo. Our container is on the HTML side.
   
   Consider the following two CSS examples and feel free to try them out yourself.

   /** This is CSS for all paragraph tags **/
   
   p {
     color: blue;
   }

   /** This is CSS for a particular ID **/
   
   #gstager p {
     color: blue;
   }

   If you paste the top one into your custom styles area, save your changes, and then open the styles part of the accordion again right away - you might see that some of the text is now blue. (As well as some other areas)
   
   However, if you paste the second one in the custom styles area, there would be no change. That is because we are addressing only the paragraph tags that are found within the container labeled gstager - (I was pretty sure that one didn’t exist in Docebo)
   
   The HTML code below should reflect the blue text. Notice that I create a DIV and give it the ID of gstager… In the CSS above, I select the object that has the ID of gstager (that is what the hashtag means) and I change the color of the paragraph tags inside.
    

   <!-- This is HTML for the ID above -->
   
   <div id="gstager">
     <p>This should be blue.</p>
   </div>

   By only addressing my container - I can rest assured that I won’t mess with any CSS on the Docebo side.
   
   You could also use classes. Typically we would use an ID when only a single object will have that name. We would use a class when multiple objects would share it. Addressing a class would use a decimal instead of a hashtag. The box below will have both CSS and HTML to show the difference.

   /** This is the CSS for a Class **/
   
   .gstager p {
     color: blue;
   }

   <!-- This is the HTML for the class above -->
   
   <div class="gstager">
     <p>This should be blue.</p>
   </div>
   
   <div class="gstager">
     <p>This should be blue too.</p>
   </div>

   
    

2. Make Heavy Use Of Commenting
   As you might imagine - it won’t take long to fill your custom styles area with hundreds of lines of code. It can be a challenge to find what you are looking for if adjustments need to be made later.
   
   I use commenting in two ways to help me.
   First, I use it to mark the beginning and end of a particular block of code.
    

   /** Begin Change Text Color **/
   
   #gstager p {
     color: blue;
   }
   
   /** End Change Text Color **/

   In the above example, you see how I mark where code starts and ends. This way if I change my mind - I only capture  the code between my two comments. That way I don’t accidentally delete something else I didn’t want to.
   
   Secondly, I use comments to mark my test area.
    

   /** Begin Change Text Color **/
   
   #gstager p {
     color: blue;
   }
   
   /** End Change Text Color **/
   
   /** Perform All CSS Testing Above This Comment **/
   /** All CSS Below This Comment Has Been Tested For Keeps **/

   As my custom CSS area began to grow - I did not want to keep scrolling to find my code so I only test at the top and when I find something I want to keep and all the tweaks are  found, only then will I move it below the comment to the bottom.
    

3. Put Some High Miles On The Browser Console
   I cannot emphasize this enough.
   Open the browser console (often F12 or right-click » Inspect or similar wording)
   Make your changes and see how things respond.
   Changes in the console are not permanent and will go away when you leave the page.
   Not only do you get a test drive but you get to see more and more code and how it is written and how it behaves. You will be learning by virtue of simply being here.
   
   This is where you will find all those IDs and Classes you need to address in your custom CSS. So start looking! It won’t hurt.

Hopefully you find something useful from these tips.