Creating mojoPortal Skins
Note, this document has been updated to reflect creating skins in the 2.x version of mojoPortal. Creating skins in 1.x mojoPortal is similar in concept but has some differences in details.
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.
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.
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. The general rule today is to use (X)HTML markup only to give your document semantic meaning, and do all style and positioning in CSS (though positioning is also a natural thing determined by the flow of your document). Another thing to keep in mind is we want our pages to be lightweight and this is also a natural benefit of the recommended approach. Using minimal markup makes pages lighter and faster to load. Nothing in mojoPortal forces you to follow these guidelines, you are perfectly free to use tables for layout if you wish but I thought I should shed some light on how most of the included layouts were done and why. There is a lot more information on the web about the vision for the semantic web of the future. I leave it to the reader to search for more information on that if interested.
A mojoPortal Skin consists of:
a folder which is the name of the skin
layout.Master
theme.skin
style.css (the main stylesheet that imports the other stylesheets)
stylelayout.css
stylecolors.css
styleborders.css
styleimages.css
styletext.css
styletextmedium.css
styletextlarge.css
IESpecific.css for overriding the style.css to make things work correctly in Internet Explorer 6
IE7Specific.css for overriding the style.css to make things look correct in Internet Explorer 7
a number of feature specific stylesheets
favicon.ico - the icon displayed in the url or tab of the browser
and any supporting images
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 Internet Explorer version 7 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.
The reason some features have separate css files is just to reduce the size of the main css file. Keeping files small is important to performance.
In designing a new skin for mojoPortal, most of the work is going to be in the layout.Master file and the css files. See the following pages for more information:
Understanding the layout.Master file
Understanding the CSS files
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.
Some Good Places to Find Designs that could be used for mojoPortal skins:
Some Good Places to Find Icons
Last Updated: 2008-04-02 Joe Audette