WordPress Tutorial Videos | Change Title, Font, Color, Size Using FireBug

Wordpress Tutorials

WordPress Tutorial Videos | Change Title, Font, Color, Size Using FireBug


In this WordPress Tutorial Videos use FireBug to edit your css, change WordPress title, font, color and size in the twenty ten theme. You can actually use this technique to change anything you want within any WordPress theme.

Resources:FireBug
Acknowledgements:
Music:Outro-Special thanks to Martin Tallstrom for providing “Ambient Groove”

FireBug is a free web development tool which allows you to inspect html and css code within any website. It doesn’t matter if you’re just a casual web builder, affiliate marketer or seasoned pro,.. FireBug is a must have web tool.

In this video I’ll show you how to change the WordPress twenty ten themes default font family, size and color. Once you see how it’s done you can use this method to change literally anything within your website.

If you’ve never used this tool it may look a little challenging at first but with a little practice you’ll soon see how easy it really is to make changes in your css code. Remember one thing however, whenever you go into your code to make a change… always,,always make a copy of the code you’re working with first.

Save it in a text file so you will have an original just in case you make a mistake. Believe it or not, an accidental space here or a period (.) there are potential hazards which could change things and lock you out of your system. Another good rule of thumb is to always open a new window and preview your change just in case there’s a problem you will see it ahead of time before you exit the style sheet itself.

FireBug let’s you examine code and make changes within an environment which allows you to “see” the results of the edit. When you move the element tool and hover over a .div section you get to select an area. You can then click on the css and make changes in real time and you see the results. But remember, you haven’t actually changed the “real” code,… you simply changed the code in the temporary “environment” of the page you’re viewing.

It’s pretty slick actually because you get to play with all types of ideas without really messing anything up. Once you’re satisfied with your changes you simply go to your WordPress themes, editor, css style sheet and make the changes “for real.”

FireBug is a must have! If you want to learn more WordPress training and how to set, build, optimize and promote a website visit me at

17 Comments

17 Replies to “WordPress Tutorial Videos | Change Title, Font, Color, Size Using FireBug”

  2. Apparently this is for coders.  Cause I haven’t the slightest idea how you got two screens, and it’s too small to read.  Totally useless for me.

  3. Excellent tutorial.  Very simple and easy to understand!  Delighted with the results on my website.  Thank you!  Denise (UK)

  4. Great video.  Can Firebug also be used to customize individual page colors?  Is so, How. 

  7. One of the best tutorials online….straight to the point wihtout alot of useless talk and info..Other so called tutors shuould copy your style and stop wasting their visitors time..by getting to the point like you do…very refreshing

  8. i installed firebug to see if i could get my footer back as i have lost my footer on my web site, before installing firebug i clicked inspect element and was doing it that way, not that i knew much of how to do it, but at least there was a footer then, but the footer was TOO BIG and blocking out everything on the site, was able to get it out of the way of the site content, but now the footer seems to have disappeared, is there some way to use firebug in order to try and get footer back as i cant seen to find it any more

  10. 12hr i traing to edit my wordpress style sheet but it is not changing where i want. you said go Mozilla it’s very use full to me sooooooooooooooooooooo thank brother

  14. Great tutorial.  Thank you!   Would you please explain how to change the font in pages and posts using Firebug?  

    Lisa

  15. Good info but I’m searching for a way to change the color of a link, once I’ve clicked on it, and have it show a different color when I go back to the page. What I have now, Windows 7 Home premium isn’t doing this color change. I used an Acer Aspire – downloaded Windows 10, didn’t like it and tried to go back to Windows 7. It totally screwed the Acer – I had to take it into a computer service, get it wiped, and have them reinstall Windows 7 Home premium. And now the links won’t change color when I have clicked on it and go back to the page afterward.

  16. how can i change the color if i choose only a one word on the title? example ‘ WordPress Tutorial Videos ” I only want to change the color of the ” Videos ” word.

    Let me know, I’ll wait for your reply

Comments are closed.