Responsive WordPress Theme – Caliber

A theme with simple controls and limitless potential. Work fast and build an amazing website!   Find out more »

UpThemes – Beautiful WordPress Themes

Create a site your church, gallery, newspaper, blog, recipes, band and more!   See the themes »

Tutorials

Making a Custom Stylesheet (skin) with Moxie

In this article we are going to learn how to create our own custom stylesheet for use with the Moxie theme. This is not something that everyone needs to do because we can perfectly well tweak the theme’s styles by going to Appearance > Theme Options and adding our own to the Custom CSS box. 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 default 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: Lexa
*/

As you can see, we can name the skin anything we like, it doesn’t have to be named “Skin 0″ to match the filename.

2. Upload and activate

We now need to upload the new custom stylesheet and images folder to the wp-content/themes/parallelus-moxie/ folder on our server. Don’t forget that the stylesheet goes in the root of the theme folder along with the other style-skin-#.css stylesheets.

To activate the stylesheet we simply go to Appearance > Theme Options and in the Skin CSS 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.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 colour from a dark grey colour (as set by the default stylesheet) to black, this is what we might add to our custom stylesheet:

body { color: black !important }

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, all we need to do to put things right is copy our backup of style-skin-0.css into the wp-content/themes/parallelus-moxie/ 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-moxie folder and move the other skin stylesheets into the stylesheets folder, leaving your custom stylesheet where it is. 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.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.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