One of the things I love about Genesis child themes is that they look great straight out of the box. That means that you can have a site up and running in no time at all.
But even great looking themes usually need a bit of tweaking.
Maybe the text is too small or you don’t like the colour of the links or perhaps the blockquote doesn’t stand out enough. That’s when knowing a little CSS comes in handy to make those changes and add a few personal touches to your website.
This post is not about learning CSS it’s about showing you how to hunt down the CSS for the section of your site that you want to change, making the change, previewing what that change looks like in the browser and then making the change permanent.
To help you do that we’re going to look at three tools.
- Firebug for Firefox – if Firefox is your browser of choice then Firebug is the CSS hunting tool for you.
- Chrome Inspector / Developer tools – the Chrome Inspector is what you need if you browse with Chrome.
- Genesis Extender plugin – Genesis Extender is a premium plugin. It works with any Genesis child theme and you can use it with any browser.
Learning CSS… and maybe a little html
You may never be, or even want to be, a Genesis developer but knowing a bit of CSS and html can be useful and doing your own styling is very satisfying.
Here are a couple of free web resources to get you started:
CSS guides and tutorials graded as beginner, intermediate and advanced and all the resources use CSS3.
HTML guides and tutorials again graded as beginner, intermediate and advanced and all the resources use HTML5.
This is what the CSS for my post titles looks like… let’s change it
To make things more interesting you can try the techniques described in this post by playing with the CSS for my post title – the bit of text at the top of the post, which begins “Firebug, Chrome Dev tools…”.
My post title is an h1 tag with the class “entry-title” and this is the CSS for the class “entry-title”.
Once I’ve shown you how, you can find that CSS and make a few changes.
You can change the font size to whatever you want and you can change the alignment, currently set to center, to left or right.
Have a play, enjoy yourself and don’t worry… when you hit refresh all your changes are removed.
I use Github Gists in combination with the Embed GitHub Gist plugin to display code snippets like the CSS snippet above.
Github is a repository for small code snippets. You can add any number of snippets and you can easily embed the code in your blog post.
For an in-depth article on why and how to use Github Gists check out:
Still using a Syntax Highlighting plugin? Its time to replace the sucker.
If you use Firefox check out your CSS with Firebug
Right listen up you Firefox users, this is your bit of the post.
If you use Firefox and creepy crawly things don’t scare you then Firebug is the tool that will help you find the CSS you’re after.
Firebug is a Firefox add-on and this is how Firefox describe it:
Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse.
So that’s what it is and this is the official Firebug download page.
Once you’ve installed Firebug take a look at this video by Carrie Dills a Genesis developer who regularly helps people out in the StudioPress forum.
Carrie’s video shows you how to use Firebug to find the CSS for a particular element and then change it in real time. She also shows you how to find where that particular chunk of CSS is located on your stylesheet.
As you can see Firebug is pretty easy to use, but let’s run through the main points that Carrie covered:
- Highlight the text – highlight the text that you want to examine, right click and click “Inspect element with Firebug”. That brings up the Firebug window at the bottom of your screen.
- Examine the Firebug window – the Firebug window is split into two panels. The HTML panel on the left and the CSS panel on the right. The CSS panel is the one we’re interested in.
- Change the CSS properties – in the CSS panel you can change or add new properties and preview the results in your browser in real time.
- Find the CSS in your stylesheet – in the CSS panel to the right of the selector there is a link to your stylesheet, which begins style.css, click that link and your stylesheet will open. Make a note of the line number for the style that you want to change permanently.
To make the changes permanent you have to download your stylesheet using FTP, make the changes and upload back to your server.
And don’t forget, make a backup copy of your stylesheet before you make any changes… just in case.
Now you can have a play with my post title.
Highlight the post title, right click, click “Inspect element with Firebug”…. and away you go.
If you’re a Chrome user try the Chrome Inspector
Right Chrome users if you’re feeling unloved and neglected now it’s your turn for a little tender loving care.
If you’re using Chrome as your browser you can use the Chrome Inspector (also known as Chrome Developer Tools) to inspect your CSS. The Chrome Inspector is almost identical to Firebug but it’s built into Chrome so you don’t have to download anything.
To guide you through how to use the Inspector here is a great video by Andrea Whitmer of Nuts and Bolts Media. Andrea provides WordPress services to bloggers and small businesses as well as producing fabulous videos.
Like I said “The Chrome Inspector is almost identical to Firebug… “ so if you want to play with my post title all you have to do is: highlight the post title, right click, click “Inspect element with Firebug”…. and away you go.
Create custom CSS on the fly with the Genesis Extender plugin
If you use Firebug or the Chrome Inspector to find the CSS for the elements that you want to change, your workflow will be something like this:
- Find the CSS that you want to change – highlight the element you want to change, find its CSS attributes, make any changes and check where the CSS is located in your stylesheet.
- Make the changes permanent – copy the modified CSS from the CSS panel of Firebug or Chrome Inspector, download your stylesheet via FTP, make the changes and upload back to your server.
That’s OK for a few changes but if you want to make lots of changes or changes on lots of sites then all that FTPing can become a pain in the proverbial!
Enter the Genesis Extender plugin, a premium plugin that allows you to find, create, add and preview custom CSS whilst you’re actually on the page – no more nasty FTPing.
In this video Eric Hamm, the developer of the Genesis Extender plugin, walks you through the full range of the Extender’s custom CSS functions.
I use the Genesis Extender plugin on all my sites and all my client sites. I use it on its own and in conjunction with the Chrome Inspector and it allows me to add custom CSS, preview the result and make the change permanent without ever leaving the page.
You get the Genesis Extender plugin for a one-off payment, which includes all future updates, you can use it on as many sites as you like and it comes with a rock solid 30 day money back guarantee.
Adding custom CSS is only one of the many things you can do with the Genesis Extender plugin.
If you want to know more about the Extender, check out my other posts:
Firebug, Chrome Inspector and the Genesis Extender plugin
Now you have three great tools to help you locate and customise your CSS:
- Firebug for Firefox – if Firefox is your browser of choice.
- Chrome Inspector / Developer tools – if you browse with Chrome.
- Genesis Extender plugin – the premium plugin for adding custom CSS without leaving the page.
Get a little practice under your belt and who knows, maybe next time we meet you’ll be helping Genesis users out with their CSS problems in the StudioPress forum.