DOWNLOAD DEMO
Current Version: 2.4.1.0 2016-04-10
Need a hand? Join the community.

Overview - Creating Skins for mojoPortal

Creating mojoPortal Skins

There are 2 approaches to creating new skins for mojoPortal content management system, if you have a good understanding of HTML and CSS, you could start by copying an existing skin and modifying it to implement your own custom design, or if you don't have strong HTML and CSS skills you could use Artisteer which is a design tool that allows you to design visually and it can export a template of HTML and CSS that can then be used to create a mojoPortal skin. If you are going to modify an existing skin I don't recommend using any of the Artisteer skins as your starting point because there is a lot of extra markup used in Artisteer designs that you would pobably prefer to leave out when designing from scratch. We have a number of non-Artisteer skins that would make a better starting point in the extra-skins.zip file available on our codeplex download page.  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 will probably find it easier to use templates generated by Artisteer. If you you want to modify one of the existing Artisteer skins we include with mojoPortal it is better to do that by using Artisteer and then re-export the CSS, rather than trying to modify the CSS after is has been exported from Artisteer. We make the .artx files for our included skins available in the ArtisteerFiles.zip on our Codeplex download page.

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. To make the browser reload the CSS from the server instead of from the browser cache, the url for the CSS needs to change. We've made this easy by appending a random guid to the url for the CSS handler, so to change the url all you need to do is reset the skin Guid. You can do this by clicking a button under Administration > Advanced Tools > Design Tools > Cache Tool

When you reset the skin guid and then refresh the web browser it will relaod all of the CSS.

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 make the CSS easier to read in the browser by setting this to false:

<add key="MinifyCSS" value="true" />

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 have 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 contains the outer skeleton of the markup and pockets where feature content is rendered from the database.
theme.skin enables setting properties on various controls to affect how they render
style.config (which is a list of css files to include, the files are combined and minified by our csshandler.ashx)
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: 2012-04-30 Joe Audette