• Skip to main content
  • Skip to header right navigation
  • Skip to after header navigation
  • Skip to site footer

WP Engine hosting includes Genesis and 35 of the StudioPress themes!

Philip Gledhill

WordPress | Genesis Framework | StudioPress

  • Search
  • Home
  • Genesis Newbie
  • Setup Wizard
  • Genesis Geek
  • Resources
  • Blog
  • Content
  • Beaver Builder
  • CSS
  • WooCommerce
  • WP Tutorial
  • Contact
  • Specific Themes
  • Find it
You are here: Home / Web design tips / Firebug – editing WordPress CSS

Firebug – editing WordPress CSS

Before you use Firebug to edit any code on your website, backup up your site and make sure you know how to replace any files that you may accidentally damage. You need FTP access and you need to know which files are important before you do this.

A good alternative, if you are just starting to practice editing code, is to use the Jetpack WordPress plugin and the Custom CSS feature.

After installing and configuring the Custom CSS feature of Jetpack go to…
Appearance > Edit CSS. In your dashboard.

Install Firebug Add On for Firefox.

In Firefox go to Tools > Add Ons > search for Firebug.

As you make changes to your style sheet, if you don’t see the changes, clear your browser’s cache.

Open your web page in Firefox.
Open Firebug.

Open Firebug
Click the Element Inspector button in Firebug.

Firebug element Inspector button

Click the element on your page that you want to edit.

Select an element to style with Firebug

Use Firebug to find the html div or class tag.

  • In the html section of Firebug (left hand side) look for the tag you think is styling the page element you want to change.
  • If the html tag has a plus sign next to it, click the plus sign to expand the code.
  • Hover over different tags and see which part of your web page is highlighted.
  • Click the tag when your chosen page element becomes highlighted Firebug displays the CSS for the page section you want to edit.

Choose the page elements to edit in Firebug

Look in the right hand panel of Firebug. The first element listed is usually the most specific CSS style rule that is styling the highlighted page element.

The selected rule in firebug

Make changes in Firebug and see if you’ve got the right style rule.

  • When you’ve found the style rule, edited the CSS to achieve the look you want.
  • Open your theme’s CSS and go to the line number you found in Firebug.
  • The formatting may be slightly different to the way it looked in Firebug but the string of selectors and their order will be the same.
  • Copy the selected code from your style sheet. Firebug told you which line to find it on in your style sheet.
  • Paste the CSS code you just copied from your style sheet, back into the same style sheet at the very bottom.
  • Make any changes you need in this bottom piece of code, it will override the code further up the page.
  • Save your changes.

How to make the changes in Firebug

  • In the CSS panel on the right, click a green CSS property.
  • Press tab on the keyboard to move to the value section of the code.
  • Press the up and down arrow keys to cycle through different options or type in a value by hand.
  • Press tab to move on again to the next property.
  • Your changes can be seen on the web page as you make them. BUT! The changes are temporary.
  • Add the changes to the bottom of your theme’s style sheet to make them permanent.

Cycle through options in firebug

To install Firebug…

In Firefox, go to Tools > Add Ons > search for Firebug.

Get Firebug

 I hope you found this Firebug tutorial useful, you can find more WordPress web design stuff on Philip’s blog.

Category: Web design tips

About Philip Gledhill

Philip helps small and medium service businesses build and maintain clean, minimalist, professional looking websites. He loves clear, concise, customer focused content, and websites that are easy to navigate. His motto is focus on your customer and keep it simple.

Previous Post: « Writing good website content – a simple guide
Next Post: Genesis Framework widget areas (how to add them) »

Sidebar

WordPress logo

StudioPress and Genesis Tutorials

  • StudioPress and Genesis Tutorials
Disclosure: I receive compensation from some of the companies whose products I review.

A recent project

Zulfi Hussain on Global Promise 7th Anniversary

I recently spent a day with Zulfi Hussain MBE, explaining the pros and cons of WordPress and guiding him through the process of running his own website. Find out more...

StudioPress Premium WordPress Themes

WordPress Hosting, Which Deal is Best For You?

WordPress Hosting, Which Deal is Best For You?

The services I offer

  • What I do
  • WordPress websites
  • Site set-up training and SEO
  • Working together
  • Contact me

Some recent posts from my blog…

  • Genesis Pro by StudioPress a Review
  • How to Write and Publish a WordPress Post Using the New Block Editor
  • Mai Reach Theme
  • Navigation Pro theme by StudioPress
  • Twenty Twenty Theme: a great choice for service professionals

Writing website content

  • Writing good website content – a simple guide

For WordPress tips and tricks visit my blog

Web Hosting

If you’re in the market for premium web hosting from a team you trust why not checkout WP Engine. It’s designed to be Fast, Secure & Worry Free!

Looking for a StudioPress theme or hosting?

Check out the two links below…

Get Genesis Framework & StudioPress Themes free.

When you sign up for a WP Engine plan, you receive the Genesis Framework and 36 StudioPress Themes free. That’s over $2,000 in value.

Free themes with hosting
Get Premium WordPress Themes

Buy a StudioPress theme outright and use it on all of your sites. There are three ways to get all of the StudioPress themes AND save.

Choose Your Theme

Web Hosting

If you’re in the market for premium web hosting from a team you trust why not checkout WP Engine. It’s designed to be Fast, Secure & Worry Free!

Site Map

Site Map: if you can’t see what you’re looking for read through my sitemap, it may well be there :-)

  • Search
  • Home
  • Genesis Newbie
  • Setup Wizard
  • Genesis Geek
  • Resources
  • Blog

This website is independently owned by an affiliate marketer of StudioPress. It is not sponsored by StudioPress, WP Engine, Copyblogger Media LLC, WordPress, or Automattic Inc. WordPress, Genesis, StudioPress and WP Engine, are registered trademarks of their respective owners.

Copyright © 2021 Philip Gledhill · Privacy policy and disclosure

© Copyright Philip Gledhill

Return to top