In this article we are going to learn how to create our own custom stylesheet for use with the Razor theme. This is not something that everyone needs to do because we can perfectly well tweak the theme’s styles by adding our own to the Custom CSS box in the theme’s design settings. However, if we find that we are adding more and more styles and that it is perhaps becoming a little unmanageable, then creating a custom stylesheet is the logical next step.
Also, if we are the kind of WordPress developer whose first instinct is to dive into a theme’s stylesheet and start changing things, then it would be better for us if we did this in a custom stylesheet, otherwise when we need to update the theme it could get complicated and time-consuming for us if the update includes changes or additions to the theme’s styles.
1. Duplicate an existing stylesheet
So first we must decide which of the skins we want to base our design upon, then we create a copy of that skin’s stylesheet in the theme folder naming it style-skin-0.css
At the top of our new stylesheet we’ll need to update the comments where the skin’s name is defined:
/* Skin Name: 0. Greebo Does Dallas */
As you can see, we can name the skin anything we like; we’ve used a zero at the beginning of the name so that in drop-down menus our skin will appear in the list above all the other theme skins.
Note: The “default” stylesheet is for Skin 1 and it is always loaded by the theme. The different skin stylesheets are loaded on top of the default stylesheet, and the styles in these stylesheets modify the default styles and add to them in order to create the different appearance of each skin; this applies also to the custom stylesheet we are creating here.
2. Make a custom assets folder for the custom stylesheet
Now we must duplicate the same skin’s images folder, located in the assets/images/skins/ folder, and name it skin-0. If there isn’t a folder in assets/images/skins/ for the skin you are basing your custom one on, simply create a new folder in there and name it skin-0. If our custom styles use any images this will be the place that we will store them and from where our custom stylesheet will load them.
Once we have created an assets folder for our custom stylesheet we need to open it in a text editor and do a find and replace for the path to our new assets folder. So in our example here we would search for the string “skin-6″ and replace it with “skin-0″ so that all occurrences of the path to our image folder (if there are any) are updated. Save the file when finished.
3. Upload and activate
We now need to upload the new custom stylesheet and images folder to the wp-content/themes/parallelus-razor/ folder on our server. Don’t forget that the stylesheet goes in the root of the theme folder along with all the other style-skin-#.css stylesheets, and the stylesheet’s skin-0 images folder goes in the assets/images/skins/ folder with the other skin-# folders.
To activate the stylesheet we simply go to Appearance > Design Settings and in the Skin drop-down menu we will see the name of our custom stylesheet. Select it and then scroll to the bottom of that page and click the Save Settings button.
And that is all there is to it. It took me far longer to write this article than it will take you to create a custom stylesheet for use with the theme. 
Tips and tricks
This part of the article is available only to registered members.
If you use the Internet Explorer, Chrome or Safari browsers you can use their built-in developer tools to point at and “inspect” elements on a web page to find out what styles they use. You can even tweak the styles live to experiment with any changes you might fancy. If you use Firefox then there is an add-on named Firebug you can install which gives that browser the same functionality as the developer tools built into the other browsers.
If you want to modify styles that already exist in the default stylesheet (style-default.css) then rather than modify the default stylesheet add your modified styles to your custom stylesheet and use the !important declaration with them so that your modified styles will take precedence.
For example, let’s say that we wanted to modify the primary font family, font colour and line spacing set by the default stylesheet, this is what we might add to our custom stylesheet:
/* Primary font family and color
---------------------------------------------- */
/* Default font face */
body, select, input, textarea, #content h3 a.button {
font-family: Georgia, Times, 'Times New Roman', serif !important;
}
/* Font color, size and styling */
body,select,input,textarea {
color: purple !important;
font-size: 12px; !important;
line-height: 1.2 !important;
}
The above CSS has been copied from the style-default.css stylesheet and we have changed the attributes for each property of the styles.
By adding this to our custom stylesheet we are protecting our styles from being changed by any update to the theme because our custom stylesheet is an additional file in the theme’s folder so it will not be overwritten when updating – provided of course that we select the correct option to “merge” when uploading the new theme folder to our server. If we do accidentally overwrite the entire folder, thus deleting our custom stylesheet and its assets, all we need to do to put things right is copy our backups of style-skin-0.css and assets/images/skins/skin-0/ into the wp-content/themes/parallelus-razor/ folder.
If you want to get rid of all the stylesheets listed in drop-down menus so that your custom stylesheet is the only stylesheet available, then on your server create a folder named stylesheets in the parallelus-razor folder and move all the other skin stylesheets (style-skin-#.css) into the stylesheets folder except for your custom stylesheet. This will hide all the others from the theme and so they won’t be listed in any drop-down menus in admin. (Do not move the style-default.css stylesheet.)
Document your styles. Remember that stylesheets are cached by browsers so there is nothing bad about adding documentation to them using comments. It will not add to the time your pages take to load except on the very first occasion a visitor arrives at your site, and even then we are talking about time differences measured in milliseconds. Take a look at the comments in style-default.css for an example of how to document your styles. I can promise you that in a few months when you discover that you need to tweak your styles you will be glad that you took my advice and documented them.
Resources
- Shortcodes: http://para.llel.us/themes/razor-wp/shortcodes/
- Support forum: http://para.llel.us/support/groups/razor/forum/
