• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Tips and Tricks HQ

  • Home
  • Blog
  • Projects
    • All Projects
    • Simple WP Shopping Cart
    • WP Express Checkout Plugin
    • WP Download Monitor
    • WP Security and Firewall Plugin
    • WP eStore Plugin
    • WP Affiliate Platform
    • WP eMember
    • WP Lightbox Ultimate
    • WP Photo Seller
  • Products
    • All Products
    • Checkout
  • Support
    • Support Portal
    • Customer Only Forum
    • WP eStore Documentation
    • WP Affiliate Software Documentation
    • WP eMember Documentation
  • Contact

How to Use Firebug to Modify Your WordPress Site’s CSS (Video Tutorial)

You are here: Home / Video Tutorial / How to Use Firebug to Modify Your WordPress Site’s CSS (Video Tutorial)

Last updated: July 2, 2016





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.
Hopefully these videos will help you customize various aspects of your WordPress site’s CSS easily.

Related Posts

  • Basic Guide to CSS
  • Query or show a specific post in wordpress
  • CSS Bugging You? Fire Those Bugs!
  • How to Easily Import or Export any of Your WordPress Database Table Content

Video Tutorial,  Web Development,  Wordpress CSS,  CSS Usage,  Web Design,  Wordpress,  WordPress tutorial,  WordPress Tweaks

Reader Interactions

Comments (11 responses)

  1. admin says:
    March 16, 2015 at 7:43 pm

    @Alan, Yeah it will display that change also. Make sure to refresh your page so it picks up the new changes.

  2. R. Alan Payne says:
    March 16, 2015 at 7:40 pm

    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?

  3. jin says:
    June 20, 2012 at 9:38 am

    Thank you for this nice post on how to use Firebug!

  4. Peter Fisher says:
    December 3, 2011 at 4:51 am

    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

  5. healthy and fresh info says:
    November 30, 2011 at 7:41 am

    Hi, thanks for your tips, this is open source tools??

  6. admin says:
    November 22, 2011 at 9:01 pm

    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/

  7. Melanie says:
    November 22, 2011 at 2:58 pm

    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!

Leave a Reply

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

Primary Sidebar

Featured & Popular Articles

Video Answers to Top WordPress QuestionsWordPress Optimization Tips and Tricks for Better Performance and SpeedEssential WordPress Security Tips - Is Your Blog Protected?WordPress Simple PayPal Shopping Cart PluginTop 15 Search Engine Optimization (SEO) Techniques I Forget to DoList of the Best and Must Use WordPress PluginsHow do I Start a Blog and Make Money Online?Good Domain Name Picking Tips for Your Blog SetupFind Out Which WordPress Web Hosting Company Offers the Cheapest and Reliable Web Hosting Solution

Featured WordPress Plugins

wordpress estore plugin
wordpress membership plugin
WP Express Checkout Plugin
WordPress Lightbox Ultimate Plugin
WordPress photo seller plugin
wordpress affiliate plugin

Recent Posts

  • Accept Donations via PayPal from Your WordPress Site Easil [...]
  • Buy Now Button Graphics for eCommerce Websites [...]
  • Subscription Button Graphics for eCommerce Websites [...]
  • Adding PayPal Payment Buttons to Your WordPress Sidebar Ea [...]
  • PayPal QR Codes [...]

Comment & Socialize

  • @Rodrigo Souza, Thank you f ...
    - admin
  • The example for 'slm_add_ed ...
    - Rodrigo Souza
  • @Ron, All the valid transac ...
    - admin
  • Hello, when people have sel ...
    - Ron
  • We have hte following featu ...
    - admin

Check out our solutions

View our WordPress plugin collection and start using them on your site.

Our WordPress Solutions

Footer

Company

  • About
  • Privacy Policy
  • Terms and Conditions
  • Affiliate Login

Top WordPress Plugins

  • Simple Shopping Cart
  • PayPal Donations
  • WP Express Checkout
  • WP eStore
  • WP eMember

Blogging Tips

  • How to Start a Blog
  • Selecting a Good Domain
  • Cheap WP Hosting
  • WP Video Tutorials
  • Simple SEO Tips

Search


Keep In Touch

Copyright © 2023 | Tips and Tricks HQ