How To Create a mojoPortal Skin From an Artisteer 3.1 HTML Export

Please click our Artisteer advertisement before purchasing Artisteer. It costs you the same either way, but by doing so we will get a nice commission on the sale, so this is a good way to support the mojoPortal project.

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

General Advice for Designing for mojoPortal Using Artisteer 3.1

Note that Artisteer is primarily a design tool but in recent versions has added features for creating pages and blog posts and they have an online service where you can post the pages you create in Artisteer. So in a sense Artisteer is also like a very basic content management system that exports static html files. For the purposes of use with mojoPortal Artisteer is just a design tool, you cannot use it to create content in mojoPortal so there is no need to create additional pages during the design process. You need to realize that for our purposes the content on the pages in Artisteer are just filler content used to show what the design looks like, the content itself is not part of the design and the .html files exported by Artisteer are not used in mojoPortal. The part of the Html export from Artisteer used in mojoPortal consists only of the CSS files, javascript and images. 

Use a 3 Column Layout

You should always use a 3 column layout in Artisteer even if you are not planning to use all 3 columns, otherwise the CSS exported from artisteer won't have what is needed to support 3 columns. mojoPortal adapts automatically from 1 to 3 columns depending on which panels you put content instances in. By using a 3 column layout in Artisteer the exported HTML template will include the CSS needed to support from 1 to 3 columns. My advice is choose a 3 column layout that has the side columns a little narrower than the center column.

Include a Vertical Menu

I recommend include a vertical menu in the left column in your Artisteer design. If you decide you don't want the vertical menu you can easily remove the <portal:PageMenu control from your layout.master file later, but if you don't include a vertical menu in your Artisteer design there won't be any style for a vertical menu in the exported CSS.  Also on the main horizontal menu make sure you have sub item configured for multi-level otherwise there won't be any style for the flyout sub menus. If you don't want to show flyout sub menus on the main horizontal menu, you can edit the theme.skin file and find the setting for <portal:mojoTreeView runat="server" SkinID="SiteMenu" and add MaxDataBindDepth="0" to make it only show the top level.

Leave Room at The Top for Standard Links

Unless your design has the menu bumped right against the top of the page you should set a top margin of about 30px either on the sheet or the header to leave room for the standard mojoPortal links like Home, Sign In, Sign Out, My Account, Member List, Site Map and Search. If your menu is flush with the top of the page or you don't want the links at the top for other reasons you can put them at the bottom instead but you may have to edit the layout.master file and stylemojo.css files to position it where you want. For the designs listed below that do have the mneu flush with the top we have the links at the bottom but for all other designs we have them at the top.

Choose an Existing Skin to Start From

Choosing the correct skin to start with is the most important step in converting an Artisteer HTML export into a mojoPortal skin.  All of the Artisteer 3.1 skins we ship have identical theme.skin files and identical (mostly) style-artisteer-overrides.css file. The main thing that varies is the layout.master file and we have created example skins using just about every possible combination of layout configurations so that we have a layout.master file that should work with any design you export assuming you folow the advice above. Other than the layout.master file there is some variation in supporting CSS files for specific features since Artisteer doesn't produce comprehensive CSS for all of the mojoPortal features. For those supporting CSS files, if needed you can copy them from another Artisteer 3.1 skin based on the color scheme and that should get you most of the way there. Depending on your color scheme you may also want to try out the various jQueryUI themes to find the one that is most compatible or generate your own using the jQuery UI theme roller. And in style.config there are a few choices for grid styles and a few other things, see the comments in style.config.

The table below lists the layout configuration scenarios supprted by Artisteer and the corresponding skin you should use as your starting point before exporting your own design from Artisteer. By looking at the position properties under the header , menu, and footer tabs in Artisteer you should be able to determine which configuration below matches yours.

You simply copy one of the skins according to this chart and name the skin folder something unique (use no spaces or special characters in the folder name). Then you export your design from Artisteer as an HTML Template (File > Export > HTML Web Site - choose folder for the export) and copy the exported files into your skin folder and it should be 90-100% ready.

Possibly you may want to tweak little things in the supporting feature CSS files or change the jQuery UI theme as mentioned above. You should NOT edit the style.css or any of the files exported from Artisteer. If you want to make changes after exporting, go back into Artisteer instead and make the needed changes in Artisteer and then export again.

Artisteer Layout Configuration	mojoPortal Skin to Use
header inside sheet menu inside sheet below header footer page width or sheet width (outside sheet)	artisteer31-alphamotors
header inside sheet menu inside sheet above header footer page width or sheet width (outside sheet)	artisteer31-pinknwhite
header inside sheet menu inside sheet above header footer inside sheet	artisteer31-blackngreen artisteer31-verticalmenu2 *
header inside sheet menu inside sheet below header footer inside sheet	artisteer31-hovermenu artisteer31-verticalmenu1 *
header inside sheet menu outside sheet above header footer inside sheet	artisteer31-mellowyellow
header inside sheet menu outside sheet above header footer outside sheet	artisteer31-red
header inside sheet menu inside header at top footer inside sheet	artisteer31-bluenwhite
header inside sheet menu inside header at bottom footer inside sheet	artisteer31-business2 artisteer31-globeheader *
header inside sheet menu inside header at top footer outside sheet	artisteer31-green
header inside sheet menu inside header at bottom footer page width or sheet width (outside sheet)	artisteer31-orangecream
header inside sheet (flash object in header) menu inside header at bottom footer inside sheet	artisteer31-flashexample
header inside sheet menu - without menu vertical menu only footer inside sheet	artisteer31-verticalmenu3 *
header outside sheet menu inside header at bottom footer inside sheet	artisteer31-earthygreen
header outside sheet menu inside header at top footer inside sheet	artisteer31-redpaint
header outside sheet menu outside sheet above header footer page width or sheet width (outside sheet)	artisteer31-fullheader
header outside sheet menu outside sheet below header footer page width or sheet width (outside sheet)	artisteer31-turquoise
header outside sheet menu outside sheet above header footer inside sheet	artisteer31-blueonblue
header outside sheet menu outside sheet below header footer inside sheet	artisteer31-starsnflowers

* Indicates the skin is not included in mojoPortal but is available in our ExtraSkins.zip on our Codeplex download page.

The basic steps are:

1. Under the /Data/Sites/[SiteID]/skins folder copy one of the skin folders and rename it to something so you know it is your custom version. Don't use spaces or special characters for the folder name. Choose the skin to copy based on the table above. Choosing the correct starting skin is the most important step.
2. Export your design from Artisteer using File Export > HTML Web Site (choose folder)
3. Copy the "contents" of your exported folder (not the folder itself) into the skin folder you created in step one. It will overwite some of the files, that is expected.
4. Go into Site Settings and select your custom skin and save. 

If you feel you have chosen the correct starting skin and followed the instructions correctly but somehow the layout is not matching the design in your .artx file, please post in the Design Forum. One of us will probably ask you to email us your .artx file so we can find out if we have missed any configuraiton combinations in the above table and we can send you back a skin corrected for your design.

Created 2011-12-18 by Joe Audette