Artisteer 3.0 Instructions

Note: These are older instructions for Artisteer 3.0 which is not the latest version of Artisteer.

See How to Easily Create a mojoPortal Skin Using Artisteer for instructions on using the latest version of Artisteer.

As of version 2.3.3.9, we have made changes in mojoPortal to make it easy to use Html template designs exported by Artisteer. Artisteer is a great tool that makes it easy for non technical people to create web designs. You don't need to know about html or how to use Photoshop. I highly recommend you get the Standard Edition it has all the features and is really a great value at $129. I did the work to make it possible to use Artisteer designs in mojoPortal because community members requested it and I was so impressed with Artisteer after trying it myself (Joe Audette). I'm no great designer myself, I understand CSS but I'm more of a developer with no great design skills and even I can make attractive mojoPortal skins with Artisteer. I think even for real designers this tool can be useful because you can generate prototype ideas very quickly. Artisteer has a free trial, so please click our ad and give it a try.

If you are interested in purchasing Artisteer, please click one of our ads before you purchase so we can earn a little affiliate revenue, it costs you the same either way, but we can earn up to 25% commission so it is a big help for the mojoPortal project.

Note: The information below is for Artisteer 3.0 or higher, for instructions targeting older versions of Artisteer see Artisteer 2.3 and Artisteer 2.4 to 2.6.

Step 1 Creating Your Design in Artisteer 3.0

Choose Website or Blog as the project type. Artisteer 3 introduced a number of new features including support for fluid layouts. It also supports creating multiple pages in your design and publishing to a web site. Basically it seems they are now positioning the product as an editor for a static html web site with multiple pages in addition to generating templates for Content Management systems. For the purposes of making a design for mojoPortal, you don't need any extra pages in your design, you just need a single page configured with 3 column layout (though it won't hurt anything if you do have more than one page). In mojoPortal we automatically adapt the layout from 1 to 3 columns depending on whether content features or menus are placed in the side columns, so using a 3 column layout does not mean every page will have 3 columns in mojoPortal. The reason you need a 3 column design in Artisteer is simply to create all the needed CSS for 3 columns.  

All the included artisteer skins use a 30px top offset for the sheet which leaves room for our top nav menu with sign in, register, site map links etc. You may want to use the same approach.

When designing in Artisteer keep in mind that if you make the side columns too narrow it will be difficult to fit features there without crowding.

Step 2 Choose a Starting Skin and Copy it

Notice that pretty much all of the Artisteer 3.0 designs fit into one of these categories, and depending on the category is how you choose which existing mojoPortal skin to use as your starting point.

Note that the skins referenced below for use as a starting point are available in our extra-skins.zip download on our Codeplex download page. We update the skins in that file with each release of mojoPortal so you should get the version that corresponds to your installed mojoPortal version. You can find your mojoPortal version under Administration > System Information, and you can find older releases of mojoPortal (if needed) by using the navigation on the right side of the Codeplex download page.

Horizontal menu at the very top of the page with no vertical menu - use artisteer-30topmenu

Horizontal menu at the bottom of the page header with no vertical menu - use artisteer-30headermenu

Horizontal menu at the very top and a vertical menu - use artisteer-30verticalmeu2

Horizontal menu at bottom of page header and a vertical menu - use artisteer-30verticalmenu1

Vertical menu only - use artisteer-30verticalmenu3

Create a new folder for your skin, ie /Data/Sites/[SiteID]/skins/[yournewfolder]

Typically in a new installation SiteID will be 1. When choosing a name for your skin folder do not use any spaces or special characters. The folder name is the same thing as the name of the skin.

Copy the contents of the appropriate existing skin selected from above (except the images sub folder) 

Paste the contents into your new skin folder.

Step 3 Export your Design From Artisteer

Export your design as an html template (the option is now labelled as "Website or Blog" in the latest version of Artisteer) into a folder, and then copy the contents of the folder into your skin folder. Try it out, you should be almost done. If your site doesn't look just about right at this point, you may need to compare the markup in the layout.master file with the markup in the index.html page exported from Artisteer. The layout.master has the outer skeleton of markup for the design and there can be some variation of markup needed depending on your design. For example, when using a Menu at the top of the page, it is possible to configure it where the Menu is outside the sheet, though in most cases it will be inside the sheet. Sheet is an Artisteer term that corresponds to <div class="art-sheet"> and some nested divs that are related. By comparing the markup between your index.html file exported by Artisteer and your layout.Master file, you should be able to spot any major differences in the outer skeleton and you can edit the layout.master file to make it match more closely to the structure of index.html.

Step 4 CSS Tweaks if Needed

Keep in mind that mojoPortal has a lot of features and Artisteer doesn't provide comprehensive styling for every feature of mojoPortal, so you may want to look around in various features and if you find things you don't like you can change things in the stylemojo.css or some features have their own specific CSS files like styleblog.css.

 

Last Updated 2011-04-15 by Joe Audette