Building Your Own mojoPortal Skins and mojoPortal Themes

Author’s note: I started writing this last year but never got the time to publish it out. The steps herein are still valid but Joe Audette has added some cracking new features to mojoPortal since then, so I recommend you head over to the mojoPortal blog to stay up to date.

mojoportal is a .NET driven CMS system developed by a great developer & personable guy, Joe Audette; and supported by a friendly and knowledgeable community. If you’re a regular reader of my blog you’ll know that I post quite frequently regarding development and tidbits surrounding mojoPortal, most frequently I blog or Tweet about mojoPortal skin design or things you can do with your mojoPortal themes.

For those unfamiliar with mojoPortal, here’s the opening gambit from mojoportal.com:

Need to develop a custom web application? Why start from scratch? Save time and money on your next web development project by developing your custom functionality on top of mojoPortal.

We’ve done the heavy lifting to provide elegant plumbing for role based security, navigation, skinnable design, and more, so you can focus on your application features.

- mojoportal.com

And that’s summed up perfectly.

Now, whilst mojoPortal can do so much more than build standard CMS websites – that is certainly the most obvious and common use for this fantastic .NET CMS system. I find it to be the best CMS for clients based on its flexibility and extremely wide range of features that come bundled with the initial download.

So, you’re keen on using mojoPortal for your new website, or for a client’s website? Well mojoPortal, as it says on the tin, does all of the heavy lifting for you. However, you’re of course going to need to customise the look and feel of mojoPortal. This is where mojoPortal skins / mojoPortal themes come in.

mojoPortal Skins & Themes – Colour Your Website As You See Fit, And Change Anytime!

As with most CMS systems, mojoPortal allows “skinning” – that is to change the look, layout and feel of your website by creating mojoPortal “skins” (sometimes called mojoPortal “themes”). Creating new mojoPortal skins requires a fair level of design ability couple with a sound level of HTML and CSS understanding, but if you’re in the right mindset to learn these things, even a new web designer can create a good looking mojoPortal skin.

The beauty of using mojoPortal skins as opposed to other CMS systems is the complete design flexibility you have with this system – you truly can create an entirely bespoke design on top of a fully featured website without any layout constraints whatsoever; a pleasant change from alot of CMS systems around right now. Make your mojoPortal themes as you want them, and change or upgrade them when you like – without sacrificing current content or functionality.

Creating mojoPortal Themes & Skins From Scratch

When creating your own mojoPortal themes or skins it’s important to find a process which you’re comfortable with. After being a mojoPortal skin designer for a while I’ve come up with my own process for putting together my mojoPortal skins.

Howeer, there is something I’d like to mention: this is purely a method that I use, It’s not set in stone, it’s nothing “approved” but it’s just how I work. I am totally open to suggestions, tweaks and improvements to help the mojoPortal community out.

What I’ve tried to do is cover as many bases as possible and answer as many questions as I can that cropped up when I started creating mojoPortal themes. Joe is forever evolving this fantastic system so I will try my best to keep this up to date as I find myself asking Joe more and more questions – alternatively, ask him yourself and share in the comments if you feel it is relevant.

My mojoPortal Skins / mojoPortal Themes Build Process

Here’s my process (this is based on the base process highlighted here: http://www.mojoportal.com/Forums/Thread.aspx?thread=3177&mid=34&pageid=5&ItemID=4&pagenumber=1#post13580):

• Download Firefox
• Download the Firebug extension for Firefox
• Create your design file, preferably in Photoshop or similar
• Slice and dice your Photoshop layout as you need, and create a separate “logo.gif” file for your site logo
• Once done, create a single page template in fully valid (X)HTML and CSS (note: I’ve created a free mojoPortal skins CSS starter sheet that you can use wich contains the classes assigned to the left, centre and right content columns all ready to code)
• Tip: Call your stylesheet “styles.css”
• Tip: Give your <body> tag a class of “pagebody” and apply all styles that you would normally apply to <body> to this class
• Tip: if you plan on using dropdown menus within your mojoPortal theme, I’d suggest using the Superfish dropdowns which are supported natively in mojoPortal. To do so, create a <ul> with a class of “sf-menu”:
  
  &lt;ul class="sf-menu"&gt; &lt;li&gt;&lt;a href="" title=""&gt;Some link here&lt;/a&gt;&lt;/li&gt; ....and so on &lt;/ul&gt;

  1 2 3 4

  <ul class="sf-menu"> <li><a href="" title="">Some link here</a></li> ....and so on </ul>

  
  Apply the relevant styles to this class and its children, then check out the documentation on using mojoPortal with SuperFish, along with the Superfish website
• Test your web page thoroughly in Firefox (the most standards compliant browser there is today), get it looking exactly as you want it and then be sure to run some cross browser compatibility checks on it. I normally test in Firefox, Safari, Google Chrome, Opera and (boo) Internet Explorer 6, 7, 8 and 9 (where possible). If you make any IE specific CSS changes or hacks, put them in files called “IESpecific.css” and “IE7Specific.css”. This will help the transition to a mojoPortal skin later on. Your web page needs to look as close to the same in each browser as you can get it – but that’s standard cross browser compatibility for you. What a pain!
• Once you have your basic HTML and CSS page looking great across all browsers, you’re ready to make it into a mojoPortal skin
• Jump off to the mojoPortal.com site and download the latest release, install either on a local machine or a remote hosting server (be sure to check out the hosting requirements before buying any web hosting)
• Run the setup at http://www.yoursite.com/Setup/Default.aspx
• Watch it fly

Making A mojoPortal Skin From Your Basic HTML Webpage

The next step is to transform your basic webpage into a mojoPortal theme. Here’s what I do:

• Run your mojoPortal website which will be installed with the default mojoPortal skin, “artisteer-greenlagoon”
• Head over to the “Data/sites/1/skins” folder and copy the “artisteer-greenlagoon” folder
• Paste the copied folder into the “Data/sites/1/skins” folder and rename it something meaningful – MySkin maybe? Your shout.

Ok this is where it gets a little complicated, but only a little. Read on…

At this point I’d advise you head over to mojoPortal.com and check out some of the mojoPortal skins documentation, namely the texts on understanding the Layout.Master file and the way that mojoPortal assigns dynamic classes throughout the system.

Once you’re fairly happy with the documentation jump right in and start tinkering with the mojoPortal skin you copied earlier. Remember, we copied the “artisteer-greenlagoon” skin and renamed the folder to our own name, it should be sitting in “Data/Sites/1/skins”.

From there this is what I do:

• Open up your skins folder and crack open Layout.Master
• Copy your “style.css” file from your dummy HTML page in to your skin folder
• Strip out all of the none mojoPortal controls including all of the layout HTML markup
• However, do leave in all of the mojoPortal controls (you can’t miss them, they look like a normal ASP.Net control but with a different tag prefix)
• Also, leave in the <html>,<head> and <body class=”pagebody”> tags.

Sounds weird right? If you’ve familiarised yourself with mojoPortal skins documentation you’ll recognise that what we’re actually doing is leaving in all of the mojoPortal controls that the layout.master file needs to function.

Now, if you’ve coded up your basic HTML file nicely, indented your code and maybe even laced it with comments, transferring this HTML markup to your new mojoPortal theme design is easy!

Let’s assume the following:

1. You have a centered website layout with a class of “websitewrapper”
2. You have a header (.header), a left column (.leftside), a right column (.rightside) and a centre column (.center-rightandleftmargins) along with a footer (.footer)

Note: if you’re wondering where the centre class of “.center-rightandleftmargins” comes from, check out the mojoPortal skins documentation or my blog post “mojoPortal Skin Design – mojo’s Dynamic Columns Explained”.

Ok now, what I do is:

• Copy each main element of my initial HTML page into the newly stripped layout.master file – I do this in a segmented fashion with care and purpose
  • Start with your wrapper (.wrapwebsite here), drop that around everything that you want included in the site including all of the, as yet unpositioned, mojoPortal skin tags
  • Next, copy all of your other main tags in, either one at a time or all together if you’re more confidentTypically I’ll drop my HTML into the page in this fashion so that I end up with the tested HTML from my dummy page within the mojoPortal skin layout.master file. The mojoPortal controls that were remnants of the original “styleshout-refresh” mojoPortal theme will, at this point, be below the pasted HTML – ready to just grab and drop in place of the “static” HTML markup already created.

All that’s left to do with your mojoPortal theme layout.master file is replace the static HTML markup that we used for testing with the mojoPortal controls that create the CMS’s dynamic content.

How to do this?

Let’s say that within the footer of your tested HTML page you have something like:

Fairly standard footer markup isn’t it. You usually see these links and a couple of others (Terms & Conditions, “Top of Page” etc) in the footer of a page.

Let’s use the two example links above and look at how you can replace them with mojoPortal controls, and more importantly, why you would replace them in your mojoPortal skins.

First, the why: using mojoPortal’s built in controls for each allows you more flexibility and extensibility moving forward. The site map is fairly standard, however something like the Privacy Policy has a standard URL within the mojoPortal system “out of the box” – “privacy.aspx”.

This is normally fine, and you could hardcode it, but the benefit of using the mojoPortal skin control is that, should you change the URL of your Privacy Policy, you have no maintenance to carry out on the skin – you simply change the target URL of the Privacy Policy within the mojoPortal admin area (Administration > Site Settings) and the skin updates itself.

Note: when you set the Privacy Policy URL within the site settings, you still need to create the physical page within the website. The setting within the Administration panel simply acts as a convenient way to update your Privacy Policy URL without having to tweak your mojoPortal theme’s Layout.Master file.

Replacing Standard HTML Markup With mojoPortal Theme Controls

In the example we’re using, we’re going to replace the Sitemap and Privacy Policy links, which are currently hardcoded in to our dummy HTML markup, with two mojoPortal controls:

which is taken from the “styleshout-refresh” skin, the one I use as a starting point. We’ll be using this along with

which is taken from Joe Audette’s response to a forum post regarding mojoPortal’s privacy link control.

The replacement is easy, simply copy the <portal:SiteMapLink> control and paste in place of your previous anchor tag. Then, just do the same with the <portal:PrivacyPageLink> control. The only other thing that you will need to add is an atribute to each: “RenderAsListItem=”true”.

This tells mojoPortal to display each of these links inside an <li></li> element – not essential to your mojoPortal skin but relevant to our example above.

A couple of other bits that I include in my footers tend to be:

These show a link to a printable version of the page (using a printer friendly stylesheet) and a copyright label respectively; with the copyright name being pulled from “Your Company Name” within the Site Settings screen. There are a pile of other things that you may want to include but I’ve not mentioned here, the most common I guess being (X)HTML & CSS validation links.

I’m not going to list all of the controls available here but (sorry to keep saying it) instead I recommend you take (another?!) close look at Understanding The Layout.Master File on mojoPortal.com – it tells you the essential controls that mojoPortal needs to see to function correctly.

Note: Most of the mojoPortal skin controls have user options that can be assigned using attributes within the tag (such as the previously mentioned “RenderAsListItem”), the Intellisense (Ctrl + Space) within Visual Web Developer Express throws contextual attributes out so you and pick and choose on a control by control basis.

The only thing to do now is follow the same copy and paste process for all other portal controls you’d like to include in your new mojoPortal skin.

Obviously you’re going to want to create some sort of admin links (not to be confused with the admin toolbar which appears when you’re logged in), and most of these can be found within the Layout.Master file of “artisteer-greenlagoon” but if not, the Layout.Master file of the other pre-installed skins will give you a starting point for these – it’s actually following the same procedure as adding the copyright label and so on.

Test, test and more test

When you’re ready, switch your skin on by heading to “Administration > Site Settings” within your site and start fully testing!

There’ll no doubt be a pile of things that need tweaking but, this will give you a solid base to to work from and 95% of your skin should work just fine.

Good luck, and remember the forums are always open!