Many of our users customize their theme from the default look, from just changing the link color to drastically changing the layout and look. Most will dive straight in and modify the code in the theme, which is the easiest way to do it. But this leaves the problem of updating the theme in the future, since all modifications will essentially be lost if you overwrite your files with the new version of the theme.
What we want to show you in this tutorial is the best ways to customize your theme, so that updating your theme will be as painless as possible, and you are more in control of your customizations. There are two ways of doing this based on how much customization you want to do.
A comprehensive video tutorial
In this tutorial we go over two methods of customizing your WooTheme, via the custom.css stylesheet or by creating a child theme.
Custom.css: Only stylesheet changes
If you only plan on doing small modifications to the stylesheet or CSS, then the best option is to use the included custom.css file in the theme folder. Simply copy the CSS you want to change from style.css (or alt. stylesheets in /styles/*.css folder) in to the custom.css file, and edit it from there. This will effectively overwrite the style in style.css as the custom.css stylesheet is loaded after style.css on page load.
Lets do an easy example where we use FireBug to find the navigation link color in the Object theme. We inspect the element by clicking on it with FireBug enabled, and it will show us what the style for the nav element is called.
FireBug shows us which style to change
We see in the screenshot above that the style for the link color in the navigation and that we can find it on line 41 and 42 in style.css. We open style.css and copy this out:
.nav a{color:#767676;display:block;line-height:33px;z-index:100;padding:0 10px;}
.nav a:hover{color:#b939d3;}Then we paste this into custom.css, we want to change the color so to red (#ff0000), and the hover color to black (#000000). We also remove the other styles which we won’t be changing so it ends up looking like this:
.nav a{color:#ff0000;}
.nav a:hover{color:#000000;}Once you save custom.css and refresh your page you will notice the nav link color is now red, and if you hover over it it will turn black.
Changes after applying styles to custom.css
You can also add new styles to your custom.css stylesheet to supplement those already in the theme. If the theme ever gets updated, remember to not update your custom.css file, as this will then be overwritten. We always recommend backing up your theme before updating to a newer version, and also check out our upgrade tutorial on how to do it.
Using a child theme
If you have viewed the video tutorial above and want further information on child theming, please see the following tutorial.
If WooThemes were a work desk, it would be one of those really messy desks littered with sketches and papers at the moment. We have so many theme concepts we are currently working on both in-house and with theme collaborators. It’s most certainly a creative place to be.
In recent months we’ve worked quite hard to bring you some fantastic free stuff and we think that our 
