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 probably prefer to leave out when designing from scratch. We have a number of non-Artisteer skins that would make a better starting point available from our mojoSkins project.  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 a 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 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 multisite 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 > Design Tools > Cache Tool

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

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="false" />

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

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: It's All About Understanding Selectors
Understanding the theme.skin file

You can also study the existing skins for more ideas and post in the forums if you have questions or run into troubles.