Understanding The style.config File

Understanding The style.config File

In mojoPortal content management system, 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 organize 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:

<file cssvpath="/ClientScript/oomph/oomph.css" imagebasevpath="/ClientScript/oomph/">none</file>

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:

<add key="YUITabCss" value="~/ClientScript/yui270b/assets/skins/sam/tabview.css" />
<add key="YUISkinImagePath" value="/ClientScript/yui270b/assets/skins/sam/" />

Then in style.config I add them like this:

<file csswebconfigkey="YUITabCss" imagebasewebconfigkey="YUISkinImagePath">none</file>

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

Common CSS Included in most Skins

<!-- choose one of these for colorbox used in the Image Gallery
<file cssvpath="/ClientScript/colorbox/colorbox.css" imagebasevpath="/ClientScript/colorbox/">none</file>
<file cssvpath="/ClientScript/colorbox/cb_mojo_dark1.css" imagebasevpath="/ClientScript/colorbox/">none</file>
<file cssvpath="/ClientScript/colorbox/cb_mojo_light1.css" imagebasevpath="/ClientScript/colorbox/">none</file>
<file cssvpath="/ClientScript/colorbox/cb_mojo_light2.css" imagebasevpath="/ClientScript/colorbox/">none</file>
-->
<file cssvpath="/ClientScript/colorbox/cb_mojo_dark1.css" imagebasevpath="/ClientScript/colorbox/">none</file>

<!-- choose one of these for the gridview
<file cssvpath="/Data/style/gridview/ChromeBlackGridView.css" imagebasevpath="/Data/style/gridview/">none</file>
<file cssvpath="/Data/style/gridview/ChromeGridView.css" imagebasevpath="/Data/style/gridview/">none</file>
<file cssvpath="/Data/style/gridview/GlassBlackGridView.css" imagebasevpath="/Data/style/gridview/">none</file>
<file cssvpath="/Data/style/gridview/SoftGreyGridView.css" imagebasevpath="/Data/style/gridview/">none</file>
<file cssvpath="/Data/style/gridview/WhiteChromeGridView.css" imagebasevpath="/Data/style/gridview/">none</file>
<file cssvpath="/Data/style/gridview/YahooGridView.css" imagebasevpath="/Data/style/gridview/">none</file>
-->
<file cssvpath="/Data/style/gridview/SoftGreyGridView.css" imagebasevpath="/Data/style/gridview/">none</file> 

<!-- These are for jPlayer used in the Audio Player and Video Player features. Choose one of these 3 to style these features.
If you include the allskins one, it contains both of the skins for jPlayer and then you can specify which skin is used by setting this custom CSS class to either bluemonday or pinkflag. Or to reduce the total amount of CSS you can choose one of the other files and include only one of the skins for the media player. 
<file cssvpath="/Data/style/jplayer/allskins.css" imagebasevpath="/Data/style/jplayer/">none</file>
<file cssvpath="/Data/style/jplayer/bluemonday/jplayer.blue.monday.css" imagebasevpath="/Data/style/jplayer/bluemonday/">none</file>
<file cssvpath="/Data/style/jplayer/pinkflag/jplayer.pink.flag.css" imagebasevpath="/Data/style/jplayer/pinkflag/">none</file>
-->

<file cssvpath="/Data/style/jplayer/bluemonday/jplayer.blue.monday.css" imagebasevpath="/Data/style/jplayer/bluemonday/">none</file>
<file cssvpath="/ClientScript/markitup/skins/html/style.css" imagebasevpath="/ClientScript/markitup/skins/html/">none</file>
<file cssvpath="/Data/style/cluetip/jquery.cluetip.css" imagebasevpath="/Data/style/cluetip/">none</file>
<file cssvpath="/Data/style/jqtoolbar/style.css" imagebasevpath="/Data/style/jqtoolbar/">none</file>
<file cssvpath="/Data/style/forums/style.css" imagebasevpath="/Data/style/forums/">none</file>
<file cssvpath="/Data/style/CalExtender/Calendar.css" imagebasevpath="/Data/style/CalExtender/">none</file>
<file cssvpath="/Data/style/adminmenu/style.css" imagebasevpath="/Data/style/adminmenu/">none</file>
<file cssvpath="/Data/style/common/style.css" imagebasevpath="/Data/style/common/">none</file>
<file cssvpath="/Data/style/qtfile/default.css" imagebasevpath="/Data/style/qtfile/">none</file>

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

One Set of CSS for Multiple Skins

There are times when you may need to have two different layout.master files for your site. For instance, if your homepage is drastically different from your other pages or if you have splash pages. Generally, these pages will still use most of the same css so it can become tedious to keep two sets of css files up-to-date.  Another situation would be if you were using the multi-sites feature and you had two sites that used mostly the same CSS. You can easily create multiple skins that use the same css but different layout.master files using the technique described below.

  1. Create a new directory at /Data/style/[skinname] where skinname is the name of your skin (no spaces). 
  2. Move all of the CSS files and images from the original skin directory into this new directory.
  3. Create a new file named style-overrides.css in the original skin directory.
  4. Now the only files you should have in the skin directory under your site should be:
    • layout.master
    • style-overrides.css
    • style.config
    • theme.skin
  5. Open the style.config file in the original skin directory and locate all of the references for the files you moved to the /data/style/[skinname] directory. For instance, if you moved a file named style.css, it should be referenced in the style.config as <file>style.css</file>. This would change to <file cssvpath="/Data/style/[skinname]/style.css" imagebasevpath="/Data/style/[skinname]/">none</file>.
  6. Add the style-overrides.css file reference to your style.config file. (<file>style-overrides.css</file>
  7. Your style.config file should be similar to this:<file cssvpath="/Data/style/mycoolskin/style.css" imagebasevpath="/Data/style/mycoolskin/">none</file>
    <file cssvpath="/Data/style/mycoolskin/stylemenu.css" imagebasevpath="/Data/style/mycoolskin/">none</file>
    <file cssvpath="/Data/style/mycoolskin/styletreeview.css" imagebasevpath="/Data/style/mycoolskin/">none</file>
    <file cssvpath="/Data/style/mycoolskin/styleblog.css" imagebasevpath="/Data/style/mycoolskin/">none</file>
    <file cssvpath="/Data/style/mycoolskin/styleforum.css" imagebasevpath="/Data/style/mycoolskin/">none</file>
    <file cssvpath="/Data/style/mycoolskin/stylefeedmanager.css" imagebasevpath="/Data/style/mycoolskin/">none</file>
    <file cssvpath="/Data/style/mycoolskin/styleforms.css" imagebasevpath="/Data/style/mycoolskin/">none</file>
    <file cssvpath="/Data/style/mycoolskin/stylewebstore.css" imagebasevpath="/Data/style/mycoolskin/">none</file>
    <file cssvpath="/Data/style/mycoolskin/styleaspcalendar.css" imagebasevpath="/Data/style/mycoolskin/">none</file>
    <file cssvpath="/Data/style/mycoolskin/styledatacalendar.css" imagebasevpath="/Data/style/mycoolskin/">none</file>
    <file cssvpath="/Data/style/mycoolskin/style-sprites.css" imagebasevpath="/Data/style/mycoolskin/">none</file>
    <file>style-overrides.css</file> 
  8. Copy your original skin directory to a new directory so it can be used as a second skin.
  9. Enable the "Allow Setting Skin for Page" option in Site Settings.
At this point you can create as many different skins as you want, all based on the same set of css. If you want make a css change to just one skin, modify the style-overrides.css file for that skin. If you want to change css for all of them, modify the appropriate file in the /Data/style/[skinname] directory.

Obviously the names of the files are arbitrary, you can name them as you want and list them in style.config however you name them. You should not, however, use spaces or special characters in the file or folder names you choose.

Updated: 2012/02/09 -- Joe Davis of i7MEDIA, Your source for elegant mojoPortal solutions.