Easy CSS Edits with Firebug
Did you know that with Firebug you can edit any website’s CSS live. Possibly one of the best keep secrets out there. I bet your wondering what the devil is Chrissie talking about now? Well it’s so simple and fun to do.
[Source: Firebug homepage]
For this blog I want to look at the editing of css and html for WordPress websites. Once you learn how to view and edit you will also be able to troubleshoot CSS element problems and assist you in custom edits for your WordPress site’s layout and design.
Let’s start, goto any site, open up firebug. ( from your browser, under the tools tab, goto web developer, then firebug, or hit the F12 key ) to open firebug.
Here’s our how to video on YouTube! There was just too many screen shots to explain everything so I had to make a video 😀
I really love firebug it has assisted me with my coding skills and hope you find it useful too.
- always download your style.css file via ftp, from your site, save that file as the original, and make your edits to a copy of the style.css
- Firebug will also show you the line number of elements which helps when you are looking for that line in your style.css file
- before you upload your newly edited style.css file always ( and I mean ALWAYS ! ) rename the original file such as: stylemaster.css , then upload the edited file, making sure rename the new file to style.css
- view your site, reload/refresh to see your edits. If the site breaks, all you have to do is delete the current style.css file and rename the original one back to the style.css, and your site will be reset.
By renaming the original file it is easy to revert back to it when things don’t work.
I know you can use the editor in the WordPress dashboard to makes edits to any of your sites themes files, but if you make a mistake with the code, and save it, there is no way to revert back. You will need to have a copy of that file to ftp to your site’s directory to replace the corrupted file.
I would like to hear from you. Did you watch the video? And are you using Firebug? Please post a comment.
[Blog by Chrissie ]