Firebug is one of my favorite must have tools, especially if I’m working with changing the style (css). Once your site is up and running, and you are happy with its appearance, focus on content, traffic, and conversions (people doing whatever you want them to do on your site: buy stuff, sign up for updates, etc.) If you are happy with your theme, ignore rest of this post.
WordPress style sheets (style.css) are often packed full of stuff. These style sheets control how your site looks, the color, spacing, text, margins, layout, etc. It is quite involved. One of the hardest things for me when I first started editing themes was figuring out what #div controlled what so I’d know what to change. You have things like body, wrapper, content, header, footer, main. Firebug helped bunches.
Below you will see a short video showing how I used firebug to add more space on the side of a theme to try different things. This is what I often do before making the changes live on my site. These Firebug changes are only on my browser until I refresh the page, then those changes are gone. Firebug is a great tool if you do much editing of WordPress themes.
Now once you decide what you want to change, you need to make those changes on your WordPress theme itself. In the above example I suggest setting the width in div#wrapper to 80%-90%. Possibly changing the background color of the body and wrapper. Here are some of the colors I used: #ffffff (white) #062B58 (dk blue) and #9ccae3 (lighter blue) or #dbdbdb (blue to match a color in superbee image.) You could even add a drop shadow around the wrapper.
The best way to make these changes is in the theme itself. The example above is using the Atahaulpa theme and I believe it has ways to edit these things built into the theme.
Another way is to edit the style.css file, but it isn’t my first choice. When you make changes to a theme, sometimes those changes are lost in theme upgrades. If you make changes to the theme’s code itself instead of using various theme options, it is best to create a child theme.
Please support WordPress 101 for Boomers by tweeting, liking, +1, sharing etc. this post using the buttons above.
Comments are always welcome.