Using Firebug for Custom CSS


Firebug is a popular tool for Firefox which can be used to inspect the elements of a website. You can simply point your mouse cursor at the element of which you would like to see the current HTML and CSS code, and adjust the CSS to immediately see what the effect of this CSS change would be. Next, when you are happy with the result, you can copy the CSS and paste it in the All Browsers Stylesheet.

  1. After you have installed Firebug, a new button will appear in the upper right corner of your browser. This will activate the Firebug panel.
    using firebug
  2. Now navigate to the home page of your platform. With the Firebug panel opened, you should see a button with an arrow in its upper left corner. Click it, and select the text Welcome!.
    firebug panel
  3. On the left part of the Firebug panel, you should now see the HTML structure of the platform, with a focus on the bit code of code for Welcome!. On the right side, you should now see the CSS code already present for this element.
  4. Now, click on the part that says color: #0075B3 (the color-code for CMNTY blue) and replace it with ‘red’. You will see that the text Welcome! is now red. This change is not permanent yet. Firebug merely adjusts your view of the CSS. As soon as you refresh or move away from the page, the changes you have made will disappear.
  5. The next step is to copy the block of code which you have just edited and paste it in the Custom CSS section of the platform, and your changes will be permanent. You can do this by right-clicking the name of CSS block, and choose Copy Rule Declaration then paste it in the Custom Style field in Admin.
  6. Press Save and view the home page. You will now see the color of the text in red.

Moreover, you could remove all rules of code between brackets { } of attributes you don’t wish to change. For example: if you don’t want to change the font-size attribute, you could simply remove the font-size line. This way you will keep your code compact and clean.

When utilizing this method, you can easily change the properties for every platform element and immediately see how this will affect the platform. As soon as you are satisfied with the result, you copy the modified block of CSS code and save it in the Custom CSS. This way you can give any platform your own twist, one element at a time.

How to create custom CSS for your CMNTY platform

Custom CSS tips & tricks

Read more about building an online community following the why, how and what

Was this article helpful?

Related Articles