mojoPortal Tips: Creating a Custom Skin, Part 3

In Part 1, we discussed tools for your basic design, and in Part 2, we discussed workflow pros and cons. Today, we’ll talk about how to fill the gap between our basic template, and the finished “live template” to be presented for actual content insertion.

Prerequisites for this stage; access to a working installation of the latest version of mojoPortal, your exported template from Artisteer, using Joe Audette’s free export plugin, and any third-party jQuery/graphic/CSS elements/web fonts you want to integrate into your finished design.

Under the folder /Data/Sites/[your site number]/skins, drop your skin template folder.  Make sure it’s named something that you’ll be able to recognize – I usually use the naming convention of the client I’m working with. Open this folder; if you’re using a web-kit for web fonts, create a folder called “fonts”, and drop the web font files in.  If you’re using any special jQuery widgets, create a named folder under Web/ClientScript, and add your files there.

In your layout.master, you’ll add your references to any of your script files; in your style.css, or style-artisteer-override.css, you’ll add your references to your web font, and any of your custom CSS, for areas such as custom blocks, custom fields, etc.

You may find it easier to do a search/replace for the default font referenced in your style.css, vs. the web fonts you actually want to use. Be careful how you use this technique, as you may change some font references you don’t mean to. I usually add any custom css classes to the end of my style.css, so that I can find them easily if there’s a tweak I want to add.

If you’re relying on custom CSS for your layout, you may find it easier to limit inserting your features on the page to top, center and bottom (you’ll need to add some extra lines to your layout.master, as referenced here), and avoid using the left/right panels. To apply custom CSS classes, click the “Settings” link for your feature, and enter the name of your class in the field next to “Custom CSS Class”. Click “Save”, and you should see the custom class applied.

If you’re adding something script-based, like a custom jQuery widget, you’ll probably want to do away with the formatting issues of the HTML editor. To do this, go to “Settings” for your feature, and de-select “Use WYSIWYG Editor?”. When you access the edit screen after this, you’ll have a window you can drop raw HTML/javascript into directly.

In Part 4, we’ll go over the steps to get all this in place on your staging/live server as a “live template”.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Looking for quality mojoPortal Hosting? Look no further than Arvixe Web Hosting!

Tags: , | Posted under MojoPortal | RSS 2.0

Author Spotlight

Carole Bennett

Carole Bennett is the founder and principal of IndigoTea. As a professional IT consultant, Carole has provided solutions for companies as diverse as Verizon, Frito-Lay, Capital One Auto Finance, and Zales Jewelers, parlaying a unique talent for acting as a translator between the worlds of business challenges and technology solutions. She considers multi-tasking skills gained from simultaneously 1) managing a fire performance troupe, 2) raising a family, and 3) working as a full-time IT consultant excellent preparation for her current career incarnation as the driving force behind IndigoTea. "Fire-breathing redhead on a mission" is not just a metaphorical description!

Leave a Reply

Your email address will not be published. Required fields are marked *


5 − = 1

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>