Upgrading Information for Skins

Over time the skinning system has evolved in mojoPortal content management system. This document provides information about how to update older skins and things to be aware of about how the included skins are maintained and upgraded.

Site Skins Do Not Get Updated Automatically

Over time as features are added or enhanced, additional CSS is added to the skins that are included with mojoPortal. However, you need to understand that the skins used by the site are not touched during upgrades in case they have been customized. In mojoPortal we have a catalog of skins located in the /Data/skins folder, and these skins are updated and upgraded over time. However, sites do not use skins directly from the catalog. When a site is created, the skins are copied from the /Data/skins folder to /Data/Sites/[SiteID]/skins, and this is where the skins used by the site are located. This way, in a multi-site installation, sites do not share skins by default. During upgrades we never touch any of the files under /Data/Sites/[SiteID]/skins; to get updated skins you would have to copy them manually from /Data/skins to /Data/Sites/[SiteID]/skins. In a single site installation, SiteID will be 1, so the skins used are at /Data/Sites/1/skins.

We try to include notes about CSS or skinning changes in the blog release announcements, so it is always a good idea to review release announcements for versions since your previous version for notes about skinning changes. We also have the Important Skin Changes documentation page where we post changes to skins in major releases. However, periodically it is also a good idea to compare your CSS to the CSS in included skins in the catalog to see if you need to harvest any new CSS and include it in your own skin. You should also compare your layout.master file with updated skin versions, particularly if you notice something that doesn't look right in your skin.

Major Historical Changes

Please view the Important Skin Changes documentation page for the most recent information skinning adjustments in major releases.

As of version, we implemented a solution to combine and minify CSS files in the skins. All the included skins have been updated. If using an older custom skin you need to update your skin as follows:

  1. Open layout.master file in a text editor and replace this:
    <portal:StyleSheet id="StyleSheet" runat="server" /> 
    with this
    <portal:StyleSheetCombiner id="StyleSheetCombiner" runat="server" />
  2. Add this to the bottom of the <head>:
    <portal:ScriptLoader id="ScriptLoader1" runat="server" />
  3. Copy the file style.config from any of the other skins into your custom skin. This file is a list of css files to include and combine. 
  4. Review the list of included CSS files in the style.config. The names of CSS files in included skins have also changed over time, so your CSS files may not be named the same as existing skins and you may need to edit the style.config file to include the correct names for your skin. You should include all the css files in your skin folder in the list, except for the IESpecific CSS files.
  5. Due to the way our CSSHandler combines and minifies the CSS included in the style.config list, it has to resolve the URLs for background images in CSS to fully qualified URLs. For this to work, any background image URLs you specify in your CSS files need to be single quoted like this: url('someimage.png'), otherwise it can break the CSS because of failure to resolve the images.

For more information, see:

Modified 2/7/2012 by Jamie Eubanks