Rule #1 – This is my blog.

Use Firebug to Modify WordPress Theme CSS

Firebug has many uses for a web developer. This tutorial is for the novice WordPress user who just wants to pinpoint the theme element and the CSS codes so he or she could edit the design. Firebug is available for both Firefox and Chrome web browsers. If you use Chrome it would be best if you use it’s own dedicated Web Developer tool (Ctrl + Shift + i ). This works the same way as Firebug. If you use Firefox, go to Firebug website and click install.

The good thing about Web Developer tools like Firebug is that changing the CSS properties on the window also temporarily changes the elements appearance on the website in real time. This enables you to see exactly how the design would appear even

Simple CSS – Changing Text Color

Look at the sample image below. Let’s say we want to change the color of the text on the header part that says “Just another WordPress site”.

Change CSS on WordPress Theme

Click image to expand.

Activate Firebug by clicking its icon on your browser’s toolbar. On the Firebug window, click on the Inspect Element tool as seen on the image below. Finally, click on the HTML element that you want to inspect. This means clicking on the “Just another WordPress site” text.

Change Text Color with CSS

Click image to expand.

The Firebug window highlights the element you just clicked. On the sample image below we see that the element <h4 id=”site-description”> is selected. On the right side of the Firebug window, we see the CSS codes that affect our selected element.

Firebug for WordPress Themes

Click image to expand.

On the example above we see the CSS codes that dictate the color of our target text. We have to edit the color attribute then add our modified code on our child-theme’s style.css or on any Custom CSS option. To change the color to Red we use the code below.

#site-description {
    color: #FF0000;
}

 

Another Sample

See if you can solve this one. The image below shows the Firebug window after selecting a theme’s widget title using the inspect element tool.

Analyze the CSS code on the image then try to solve these:
1. What code do we use to change the widget title’s background color to black?
2. What if we want to change the widget title’s font to Georgia?

Change Widget Background Color

Click image to expand.

Solution
1.

.widget-title {
    background-color: #000000;
}

2.

.widget-title {
    font-family: Georgia, Serif;
}

If you’re not that familiar with CSS and you’re having a hard time figuring out what to do, it might be a good idea to read a quick tutorial on the basics of CSS to get you started.

Share This Post :

1 Comment

Add a Comment

Leave a Reply

Please write your comments in english. I delete anything that even remotely resembles spam.

Note: When posting code, enclose it in pre and code tags.
e.g. <pre><code> Add code here </code></pre>

ronangelo © 2014 Frontier Theme
css.php