mojoPortal Tips: Creating a Custom Skin, Part 3
Written by Carole Bennett Thursday, 22 November 2012
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.
In Part 4, we’ll go over the steps to get all this in place on your staging/live server as a “live template”.