mojoPortal - Understanding The style.config File

Documentation > Creating Skins > Understanding The style.config File

Understanding The style.config File

In mojoPortal, the style.config file is a list of CSS (Cascading Style Sheets) files that will be combined and minified by our CssHandler. This allows you to organise your css into as many files as you like without hurting performance by having a lot of separate files included in the page.

The order in which you list them is important, they will be added and combined in that order. If you understand CSS, then you know that CSS rules lower in the file override rules higher up in the file (thats how the "cascade" of cascading style sheets works).

There are 3 ways to configure files for inclusion.

Css files that live in the skin folder are added very simply with an entry like this for each file:

<file>style.css</file>

If you want to have some CSS files in a common location and use them in multiple skins, you can add them with an entry like this:

Where the cssvpath is an url relative to the root of the site. Since image files in CSS are always relative to the Css file, if the Css references any images, you should put them in the same folder with the css and specify the imagebasevpath. This allows our CssHandler to resolve the correct full url for images.

If you have some Css associated with a javascript widget and the location is going to change whenever you get a new version, then you can add files based on Web.config/user.config settings. Then you can just update the setting without having to touch the style.config files for your skins. For example suppose I am using YUI tabs and I am hosting the files locally rather than using the CDN. So my YUI files are located at /ClientScript/yui270b/ but this will change if I get the next version of YUI. So I create a Web.config/user.config setting for the location of the tab css and its related images files like this:

Then in style.config I add them like this:

So, as you can see, how you organise your Css is pretty flexible. You may notice that the included skins are all organised in a similar way but that just because I happened to organise them that way. You are free to organise yours differently.

Common CSS Included in most Skins

Tip: Put the common CSS entries at the top of your style.config so you can override anything from style.css

Example Scenarios Where You Might Want to Organise The CSS Differently

There are times when you want a particular page to have different column widths than the other pages but still have the same general style as the main site. You could copy the main skin with a new name and modify the column widths in the style.css file, but then you will be maintaining the other Css in 2 places and this can be problematic. Or maybe you have multiple sites configured to support different languages but you want to use the same css across sites and not have to maintain different copies in each site. These are both situations where you can re-organize the css and edit your style.config file so that you don't have to maintain multiple copies of the main Css.

What I would do in this situation is create a new folder at /Data/style/[skinname] where skinname is whatever the name of your skin is (it should have no spaces since it will be a folder name). I would move all the Css files and images from the original skin folder into this folder. Then I would edit the style.css to remove the column layout Css and put it in a new file named stylelayout.css. The stylelayout.css will go in the original skin folder.

So the site would still use the skin /Data/Sites/[SiteID]/skins/[skinname] as the skin. But the only files that will go in this folder are:
style.config
layout.master
theme.skin
stylelayout.css
IESpecific.css
IE7Specific.css

and the style.config file would be edited to it load all of the Css from the /Data/style/[skinname] folder except for stylelayout.css which it would load from the actual skin folder. So assuming the skinname is customskin1 it would look something like this:

<?xml version="1.0" encoding="utf-8" ?>
<cssfiles>
<file csswebconfigkey="YUITabCss" imagebasewebconfigkey="YUISkinImagePath">none</file>
<file cssvpath="/ClientScript/oomph/oomph.css" imagebasevpath="/ClientScript/oomph/">none</file>
<file cssvpath="/Data/style/cluetip/jquery.cluetip.css" imagebasevpath="/Data/style/cluetip/">none</file>
<file>stylelayout.css</file>
<file>/Data/style/customskin1/style.css</file>
<file>/Data/style/customskin1/stylemenu.css</file>
<file>/Data/style/customskin1/styletreeview.css</file>
<file>/Data/style/customskin1/styleblog.css</file>
<file>/Data/style/customskin1/styleforum.css</file>
<file>/Data/style/customskin1/stylefeedmanager.css</file>
<file>/Data/style/customskin1/styleformwizard.css</file>
<file>/Data/style/customskin1/stylewebstore.css</file>
<file>/Data/style/customskin1/styleaspcalendar.css</file>
<file>/Data/style/customskin1/styledatacalendar.css</file>
</cssfiles>

I mentioned previously that you should move the column layout css out of the style.css and into a new file stylelayout.css which will live in the skin folder and allow you to specify different column widths. Most of the skins use one of two layout approaches, either using floated columns or absolute positioning with margins on the center column. To learn more see How The Main Column Layout Works.

Obviosly the names of the files are arbitrary, you can name them as you want and list them in style.config however you name them. I do recommend not using spaces or special characters in the file or folder names you choose though.

Nominate mojoPortal for the 2010 CMS Awards

mojoPortalAdvanced Web Sites Made Easy

Understanding The style.config File

There are 3 ways to configure files for inclusion.

Common CSS Included in most Skins

Example Scenarios Where You Might Want to Organise The CSS Differently