{"id":4085,"date":"2011-11-21T17:44:38","date_gmt":"2011-11-21T23:44:38","guid":{"rendered":"http:\/\/www.evolutionarydesigns.net\/blog\/2011\/11\/21\/use-firebug-to-customize-your-wordpress-theme\/"},"modified":"2011-11-21T17:49:50","modified_gmt":"2011-11-21T23:49:50","slug":"use-firebug-to-customize-your-wordpress-theme","status":"publish","type":"post","link":"http:\/\/www.evolutionarydesigns.net\/blog\/2011\/11\/21\/use-firebug-to-customize-your-wordpress-theme\/","title":{"rendered":"Use Firebug to Customize Your WordPress Theme"},"content":{"rendered":"<p>The one thing I found I do most often with <a href=\"http:\/\/www.wordpress.org\" target=\"_blank\">WordPress<\/a> once I have it setup, configured, and the site is running smoothly is, customizing the look of the theme to give it a more unique look to the site. One of the easiest ways to change up the look is to use plugins, but they can\u2019t and won\u2019t do everything you may want them to do to your site. The best way to customize your theme is to modify the CSS file of your theme. Its usually called style.css. By modifying the style.css file, you can completely change the look of the site.<\/p>\n<p>But the downside to modifying the CSS file is that when the designer updates the theme and you choose to update your theme because the designer says to, you might loose all your modifications to the CSS. So to avoid this issue, use a theme that is a child theme or create a child theme and make your modifications there. This way, your changes will not be over written. I have never created a child\u00a0 theme, but I will figure this out and write up a tutorial or share an article with you. <a href=\"https:\/\/i0.wp.com\/www.evolutionarydesigns.net\/blog\/wp-content\/uploads\/2011\/11\/firebug.jpg\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" style=\"display: inline; float: none; margin: 10px 0px; border-width: 0px;\" title=\"Use Firebug to Customize Your WordPress Theme\" src=\"https:\/\/i0.wp.com\/www.evolutionarydesigns.net\/blog\/wp-content\/uploads\/2011\/11\/firebug_thumb.jpg?resize=604%2C604\" alt=\"Use Firebug to Customize Your WordPress Theme\" width=\"604\" height=\"604\" border=\"0\" \/><\/a><\/p>\n<h2>How to Customize a WordPress Theme with Firebug<\/h2>\n<p>When you are first starting out, modifying a CSS file can be a little intimidating. There is so much code to deal with and its even harder to figure out what each element does and where to find it in the code. I found that the easiest way to do this is to use <a href=\"http:\/\/getfirebug.com\/\" target=\"_blank\">Firebug<\/a> For Firefox. Actually, Firebug is the preferred way of debugging and testing code for WordPress by designers. <em>Image Source: <\/em><a href=\"http:\/\/www.flickr.com\/photos\/jrguillaumin\/4022342269\/\" target=\"_blank\"><em>Flickr \u2013 Gendarme<\/em><\/a><\/p>\n<h3>Things you can Do with Firebug<\/h3>\n<ul>\n<li>You can change background color<\/li>\n<li>You can change the fonts<\/li>\n<li>You can change<strong> <\/strong>the link colors<\/li>\n<li>You can adjust the spacing<\/li>\n<li>But that isn\u2019t all <a href=\"http:\/\/www.evolutionarydesigns.net\/blog\/2011\/06\/09\/3-ways-to-find-scripts-and-cmss-running-on-a-website\/\">Firebug<\/a> can do. You have to see it in action to believe how valuable it is.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/i0.wp.com\/www.evolutionarydesigns.net\/blog\/wp-content\/uploads\/2011\/11\/htmlpanel.png\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" style=\"display: block; float: none; margin: 10px auto; border: 0px;\" title=\"Use Firebug to Chnage the HTML and CSS of your WordPress theme\" src=\"https:\/\/i0.wp.com\/www.evolutionarydesigns.net\/blog\/wp-content\/uploads\/2011\/11\/htmlpanel_thumb.png?resize=604%2C286\" alt=\"Use Firebug to Chnage the HTML and CSS of your WordPress theme\" width=\"604\" height=\"286\" border=\"0\" \/><\/a> I was originally going to write a tutorial on how to customize your theme using Firebug, but Siobhan McKeown beat me to it and wrote up a helpful <a href=\"http:\/\/http:\/\/wpmu.org\/customizing-your-wordpress-theme-using-firebug\" target=\"_blank\">article<\/a> on <a href=\"http:\/\/http:\/\/wpmu.org\" target=\"_blank\">WPMU<\/a>. I may still do one, but right now, this tutorial is the best to follow. <em>Image Source: <\/em><a href=\"http:\/\/getfirebug.com\/html\" target=\"_blank\"><em>Firebug<\/em><\/a><\/p>\n<h2>Final Thoughts<\/h2>\n<p>Whenever I am working on a new web project, I always use Firebug as a way to debug, edit, and to figure out what a certain line of code is doing. Then if I wanted to fix the issue on the fly, I can Firebug to do it. Its a great tool to have in your design tool bar.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The one thing I found I do most often with WordPress once I have it setup, configured, and the site is running smoothly is, customizing the look of the theme to give it a more unique look to the site. One of the easiest ways to change up the look is to use plugins, but [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[9],"tags":[871,1481,1025],"class_list":["post-4085","post","type-post","status-publish","format-standard","hentry","category-wordpress","tag-firebug","tag-wordpress","tag-wordpress-themes-design","entry","has-post-thumbnail"],"aioseo_notices":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/pJPdG-13T","jetpack_sharing_enabled":true,"jetpack-related-posts":[],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"http:\/\/www.evolutionarydesigns.net\/blog\/wp-json\/wp\/v2\/posts\/4085","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.evolutionarydesigns.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.evolutionarydesigns.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.evolutionarydesigns.net\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/www.evolutionarydesigns.net\/blog\/wp-json\/wp\/v2\/comments?post=4085"}],"version-history":[{"count":0,"href":"http:\/\/www.evolutionarydesigns.net\/blog\/wp-json\/wp\/v2\/posts\/4085\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.evolutionarydesigns.net\/blog\/wp-json\/wp\/v2\/media?parent=4085"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.evolutionarydesigns.net\/blog\/wp-json\/wp\/v2\/categories?post=4085"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.evolutionarydesigns.net\/blog\/wp-json\/wp\/v2\/tags?post=4085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}