In this article we are going to learn how to create our own custom stylesheet for use with the Mingle 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’ll create a copy of that skin’s stylesheet in the theme folder, incrementing the skin number to the next unused value.
For example, if we want to base our design on Skin 2 then we’ll duplicate style-skin-2.css and name the new stylesheet style-skin-7.css.
At the top of our new stylesheet we’ll need to update the comments where the skin’s name is defined:
/* Skin Name: Horace Worblehat */
As you can see, we can name the skin anything we like, it does not have to be named “Skin 7″.
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.
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 appropriately according to our custom stylesheet’s number. So in our example here we would duplicate the skin-2 folder and name it skin-7.
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-2″ and replace it with “skin-7″ so that all occurrences of the path to our image folder 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-mingle/ 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-7 images folder goes in the assets/images/skins/ folder with all the other skin-# folders.
To activate the stylesheet we simply go to Appearance > Design Settings > Set default skin 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.
Resources
- Shortcodes: http://para.llel.us/themes/mingle-wp/shortcodes/
- Support forum: http://para.llel.us/support/groups/mingle-wordpress/forum/
