Head back up.
Theme Blvd WordPress Themes

3 years ago

How to make your own CSS customizations easily with Firebug

By Jason Tutorials, Web Design 15 Comments
firebug

It can be difficult to jump into someone else’s CSS and start making changes. You shouldn’t have to spend a ton of time trying to make minor CSS changes with all the tools out there to help us. My favorite tool for this is the Firebug addon for Firefox. Firebug can be used for a lot more than just making CSS changes, however in this basic tutorial, I’m going to be using it to focus on how to make simple CSS changes.

With the themes I sell on Theme Forest, I get a lot of customer support questions regarding basic CSS issues. I understand that some people really are just looking to get whatever free work out of the theme author they can for that whole $15 the author just made off of the purchase when they simply drop a laundry list of CSS changes they want “help” with into the item’s discussion board. However, I also know that many theme buyers out there are legitimately trying to solve these issues themselves and they just can’t figure them out. These people want to learn and I’m sure they don’t like buying that WordPress theme and then feeling like they can’t move forward until the theme author finally responds to them telling them how to change the dimensions of the logo or how on earth that “one title” in that in that “one box” is styled.

So, now I’m going to give a very basic example of how you might go about making a minor CSS change with Firebug. Keep in mind that while I’m using my Theme Forest theme, Complexity, as an example, these strategies can be applied to anyone making any kind of CSS changes to their site. So, whether you’ve just bought a WordPress theme, or you’re diving into your partner’s sloppy code, these methods should work for you.

Download and install Firebug

Start by making sure you’re currently using the Firefox web browser. Then go to the Firebug website and download and install the addon.

CSS Example: Changing that random title in that random box

When you’re wanting to make a simple change, it’s not always so simple. It’s not enough to look at the HTML source code and determine what’s wrapped around an element and then know what CSS to apply in order to change it. You need to know exactly how that element is being styled in the current CSS files, so you can either change it, or override it.

Looking at this example, let’s say you want to change the font size of the titles of these three homepage boxes.

Many people might start by looking at the HTML source code and then determine that the title is wrapped in<h2> tags. However, this isn’t enough to tell you how to make your CSS change because you don’t know how the original developer coded it in the CSS style sheet. Sure, you could guess, but if you’re trying to make a bunch of CSS customizations, this is going to slow you down and take up a lot of your time.

So, let’s use Firebug to figure it out really quickly. Simply right click on the element you want to check out and click “Inspect Element” to open up the Firebug panel on the item you’re interested in looking at.

Now you’ll be shown exactly what CSS is being applied to that element and what file that CSS is located in.

Now you know that the CSS that controls this element is located in style.css and looks something like this:

#default-home-widget-area .widget h2 { font-size: 22px; }

From here’s it’s easy. You can either change that in style.css or write some CSS that overrides it somewhere else.

On my themes, and like many other authors, I generally have a place on my theme options page where you can put in custom CSS. So you might do something like this to change that above element to have a 15px font size instead of its default 22px size.

Why is this all so important?

The reason why Firebug made this so quick is because we needed to know the exact CSS declaration. With the above example, custom CSS like this would have had no effect:

1
.widget h2 { font-size: 15px; }

It needs to be like this or it wouldn’t have overridden the original CSS:

1
#default-home-widget-area .widget h2 { font-size: 15px; }

Because of how “cascading” stylesheets (CSS) work, anything that’s more specific or drilled down is going to take precedence over something that’s more broad.

It’s also a good idea to watch this helpful video walk through on all of the basic features of Firebug. You can do a lot more than just make simple CSS changes!

, , , ,

15 comments

Leave a Reply

Your email address will not be published. Required fields are marked *


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">