Creating mojoPortal Skins
A Video Tour of Included Skins
Creating a new skin in mojoPortal is just a matter of copying an existing skin and modifying it to your satisfaction. You should pick an existing skin with a layout closest to what you are looking for rather than based on colors as colors can be changed very easily while CSS positioning and layout is trickier business. You can, of course, layout things in any way supported by CSS but more CSS knowledge is required to do good layout than is needed for color scheme changes. If you are unfamiliar with HTML and CSS, you might find it easier to use templates generated by Artisteer.
Where are the skin files used by the site?
The skin folder is stored in the /Data/sites/[SiteID]/skins folder. This keeps skins separate for each site in a multi site installation. When new sites are created the default set of skins from
/Data/skins
is copied to
/Data/Sites/[new site id]/skins Any custom skins added later only need to be added to the site specific skin folder unless you want to share them with other sites.
What you need to know before you start editing a skin
The first thing that most people stumble on is that they make a change to the css in a skin and they do not see any change in the browser. This is because the CSS is cached both on the server and in the browser by default for best performance on production sites. So the first thing you need to do is disable caching while you are working on the design. To do that, add these entries to your user.config file:
<add key="CacheCssOnServer" value="false" />
<add key="CacheCssInBrowser" value="false" />
After adding those settings you need to touch Web.config to make it reload settings because it does not automatically detect changes in user.config, but it does automatically detect changes in Web.config, so you just type a space in Web.config and save it. After making these changes you still may need to clear your browser cache one time.
When you are finished with your skin you should turn caching back on for best performance. Note that since visitors to your site may already have cached the old version of CSS, the easiest way to be sure all visitors will see the new changes in the skin is to copy the skin and give it a new name like yourskin_v2 and then set the site to use the new copy of the skin. Since the name of the skin changed, the path for the css also changes and this means all visitors will load the new CSS on their next visit because the caching is base don the url and this makes the url change.
Design Process
You should always design your skins using Firefox first because it it the most standards compliant browser, then if things aren't quite right in Internet Explorer you can tweak the IESpecific.css or IE7Specific.css to correct problems with the display in Internet Explorer without messing things up in Firefox. Never design in Internet Explorer or you will end up with IE specific styles in your main CSS files and it will likely cause problems in other browsers.
Debugging CSS Problems
By default, the mojoPortal CSS Handler combines and minifies all the css files listed in your style.config file. So viewing the css directly by url it can be difficult to see what is going on with the CSS.
You can debug the css by manipulting these settings:
<add key="MinifyCSS" value="true" />
<add key="CombineCSS" value="true" />
Generally disabling MinifyCSS is the one that is useful for debugging issues with CSS.
Important:
Because of the way our CSS Handler combines and minifies the CSS it also has to resolve relative image urls in background images to fully qualified urls. It is very important when defining background images in your CSS to always use single quotes around the image name like this:
url('someimage.png');
not like this: url(someimage.png);
and not like this: url("someimage.png");
The structure of included skins
All of the currently included skins are using table less layout. As you may know historically over the past decade many web designers haves used html tables to layout a site. However this was not a use that the table tag was originally intended for and it is recommended today not to use tables for layout but only for showing tabular data.
A mojoPortal Skin consists of:
a folder which is the name of the skin
layout.Master
theme.skin (I recommend you don't use this for styling though it can be used)
style.config (which is a list of css files to include, the files are combined and minified)
CSS files used in included skins
When naming skin folders do not use any spaces or special character in the name. In general I don't recommend using spaces in the names of any of the css files or images either.
The reason we have stylesheets specific to Internet Explorer has to do with the fact that Internet Explorer is not fully or correctly standards compliant. Things have improved quite a bit in newer versions of Internet Explorer but still, Firefox is more standards compliant as of the time of this writing. Nevertheless, Internet Explorer is still the most popular web browser in use today so we must make sure things render correctly for users of Internet Explorer. When I'm working on new skins, I usually work in Firefox, then when I'm happy with it I check it in Internet Explorer and if anything needs tweaking I edit the IESepcific.css and IE7Specific.css files to solve the problem without affecting Firefox.
In designing a new skin for mojoPortal, most of the work is going to be in the css files and a little in layout.master. See the following pages for more information:
Understanding the layout.Master file
Understanding the CSS files
CSS Its All About Understanding Selectors
Understanding the theme.skin fiile
You can also study the existing skins for more ideas and post in the forums if you have questions or run into troubles.
Last Updated: 2010-01-13 Joe Audette