One of the most compelling reasons to leverage a CMS (content management system) is to get a robust, functional site up and running in the shortest amount of time. mojoPortal has a great selection of built-in skins, and tools like Artisteer make it quick and easy to create custom skins to leverage a client-specific color scheme.
However – for some, one of the other compelling virtues of mojoPortal is the price tag – free! Working with a tight budget is very familiar territory to a number of us, as is the need to create a UI that works with company branding. In today’s article, we will discuss a step-by-step method to creating a fast, free, customized UI for mojoPortal using the jQuery UI ThemeRoller.
As we have mentioned before, there are a number of excellent skins that ship with mojoPortal, but they do tend to weigh in heavily towards masculine color schemes. Today, we will borrow a color scheme from the fantastic site Design Seeds; I have decided to use her scheme “Lime Tones”.
Now that I have decided on my color scheme, I will pull up ThemeRoller:
I have got the Design Seeds image pulled up on one tab, and ThemeRoller pulled up in the other. A quick tool to help pick out the colors from the palette image is ColorZilla; this lets me do all my work within the browser, without having to use a third-party program.
Take a bit of time, and experiment with your colors to get the effect you want. Remember that you have a selection of gradients and textures for all of the clickable items, and you can set the icon color separately from the font and border colors. The widgets in the ThemeRoller are interactive, so remember to mouse-over and click, to make sure the UI does not have any hidden surprises.
When you have got your settings done to your satisfaction, click the orange button at the top left labeled “download theme”. On the next screen, you will be given several options; the default settings should suffice. On the right side, under “Advanced Theme Settings”, you can name your theme – I have named this one “lime-tones”, for simplicity. Click your “Download” button, and save your new UI to your computer.
Unzip your download folder, and copy the “css” and “js” files to your “jqueryui-1” skin for your site. It is a good idea to rename the “jqueryui-1” folder so that it is not overwritten during subsequent upgrades. I have renamed mine to “jqueryui-lime” for this exercise.
Open the layout.master in the “jqueryui” skin; you will want to set the skin default to the same name as your custom UI, as well as indicate where your custom skin files are located.
Since I named my theme “lime-tones”, my inserted line looks like this:
<link type=”text/css” href=”css/lime-tones/jquery-ui-1.8.16.custom.css” rel=”stylesheet” />
Start up your mojoPortal instance, and select your new skin. If you have experimented with the jQueryUI skin previously, it may not want to take your new skin; if this happens, add the name of your custom skin to the list of “allowed” jQueryUI skins in the web.config, and then select it. You will see that you now have a customized theme like this:
You will probably want to make a few more changes, such as adding a logo graphic, and editing the menu color to go with the rest of your theme. These are changes that can be made in style.css and layout.master in your custom skin, and are fairly straightforward. If you are comfortable with CSS, you might even want to liven up the look and leverage a webkit from Font Squirrel to build a text-based logo and carry it through the branding. Good luck, and post your results on the comments here!