How to Easily Create a mojoPortal Skin Using Artisteer

If you don't want to develop a skin yourself or pay someone else to do it, you can use Artisteer (or any other automated tool, really). Please keep in mind what you end up with will probably not be a great website design. It will look like it was generated by a program, because it was.

These instructions are for Artisteer 4.1 Standard Edition and mojoPortal content management system 2.3.9.6 or higher. For older versions of mojoPortal CMS and/or Artisteer see the older instructions for Artisteer 3.1, Artisteer 3.0, Artisteer 2.4 to 2.6, and Artisteer 2.3.

We have supported Artisteer for several years now but there have always been a number of steps involved with converting an HTML export from Artisteer to a mojoPortal skin. But with version 4 of Artisteer there is a new SDK that allowed us to develop a custom plugin to directly export a mojoPortal skin from Artisteer with 1 click.

System Requirements

• Artisteer 4.1 Standard Edition or higher (see the News page on the Artisteer Site after clicking our affiliate ad above)
• mojoPortal Skin Exporter Plugin for Artisteer
• mojoPortal 2.3.9.6 or higher 

To Install the Plugin, extract the .zip file and then drag the .artp file onto Artisteer 4 or double click it. Then you willl see an option in Artisteer to export a mojoPortal skin.

Designing a mojoPortal Skin in Artisteer

• Use a 3 column layout in Artisteer, mojoPortal automatically adapts the layout from 1 to 3 columns depending on the page content but you need to use 3 columns in Artisteer so it exports all the needed css for 3 columns.
• Leave about 30px margin at the top for the standard mojoPortal links, depending on the design the margin will be needed on the Sheet, Header, or Menu
• Right click the topmost heading the center of the Artisteer design and make sure it is not hiding the article title. You will either see an option to hide or un-hide the article title there, make sure it is not hidden.
• Keep in mind that the content in the Artisteer design is not used in mojoPortal, for our purposes it is just filler content to show what the design will look like, it is not part of the skin.
• You may need to change the jQueryUI theme to somehting that better matches the colors of your design
• You may need to do some minor tweaks to the CSS for little things, for example if the design has a dark background the standard mojoPortal top links for login, user profile, etc may need to ahve the color changed so that you can see them, dark text on a dark background might not be visible.
• You may find that the time picker in the blog edit page does not work due to an error in the script.js file generated by Artisteer, there is a solution for that documented on this forum thread.
• Do not change the default css prefix from art- to something else in the export options. Doing that will prevent your skin from working.

If you export a skin from Artisteer 4 and something is not as it should be, feel free to email the .artx file to me at joe dot audette at g mail dotcom so that we can see if it is something we can improve in the plugin