In this video tutorial I will show you how you can customize the style of your WordPress site easily using a FireFox addon called Firebug. You can do the same thing using Google Chrome’s inspector tool too.
I will do this by walking you through a live example in which I will make a selection of modifications to a standard WordPress site using the TwentyEleven WordPress theme.
What is Firebug
Firebug is a handy tool which every web developer and blog owner should have in their arsenal. Firebug enables you to very easily investigate or troubleshoot almost any CSS design question or problem. It is an ideal tool for WordPress bloggers because you can use it to assist you in making modifications to your WordPress site’s styling or layout.
What will be Covered in this Video Tutorial
I will show you examples of CSS modifications for properties and scenarios such as the following:
- Changing the background color of a page
- Modifying the padding and margin properties to achieve a particular spacing between elements
- Changing the colors of text such as the main blog title and post titles
- Moving a particular element on a page by modifying some of its properties
Use Firebug to Modify WordPress Site’s CSS Video Part 1
Use Firebug to Modify WordPress Site’s CSS Video Part 2
Alternatively, you can view this videos on YouTube by going to the following links
- Use Firebug to Modify Your WordPress Site’s CSS (Video Part 1)
- Use Firebug to Modify Your WordPress Site’s CSS (Video Part 2)
Additional Resources
- You can use the custom CSS plugin to insert your CSS tweaks easily.
- Another helpful resource for CSS beginners is the basic CSS guide.
@Alan, Yeah it will display that change also. Make sure to refresh your page so it picks up the new changes.
Using WordPress (plus theme twentyeleven and a child theme – thus a custom style.css). When a change is added to the custom style.css (in the child) to ‘over-ride’ a property is the change (i.e. the new property) displayed by fireBug?
Thank you for this nice post on how to use Firebug!
Yes its open source. Its a Firefox addon. You can get it here http://getfirebug.com/ and you contribute to the development here http://getfirebug.com/getinvolved
Hi, thanks for your tips, this is open source tools??
Hi Melanie, You can use any of the following open source lightweight editors
Notepad++ Editor – http://notepad-plus-plus.org/
Context Editor – http://www.contexteditor.org/
Very clear and easy to follow video. One question: which CSS editor do you use/recommend? If it is not open-source, is there a free editor that you can recommend?
Thanks!