Store
Community Documentation

v3 Knowledgebase

How to Use Firebug to Find Which File to Edit Your CSS

This is a basic guide. Not an all out CSS guide as that is not my expertise.

If you are trying to find where to edit your CSS to change some things on your site, Firefox's Firebug- Inspect Element is a cool tool for that. Get firebug here, https://getfirebug.com/ .

Once you have it and have installed it to Firefox, you will have the Inspect Element tool available. You could use the Inspect Element tool that comes with Firefox but I prefer the one with Firebug as it is easier to use in my opinion.

To use Inspect Element to change things do this:

For our tutorial we will change the Header style

Please watch this video and you will see the edits preview that can be done as well as how to use inspect element.



On the server for this tutorial we will change the default style. We recommend for you to create your own template/style to use for editing. This example will just be for demonstration purposes.

Look for this file:

theme/frontend/default/style/default/css/layout.css

we see the following in firebug

#header {
    background: url("../theme/frontend/default/style/default/image/layout/header.png") repeat-x scroll 0 0 #333333;
    color: #FFFFFF;
}

If we remove the image link or replace the header.png with our own header image, we can change the look rather quickly. You see the path to load your header.png file.

So in our file layout.css that we are already in on the server, we find the code from Firebug and we make the changes to it. For instance, delete the url in the background and change the background color to blue and save it. Look at your site and you will see the changes.