I'm getting better skinning with Artisteer, and I thought I would share a few points that I didn't see spelled out explicitly elsewhere, including the documentation.
Right now mojoPortal comes with two Artisteer templates. The documentation suggests that you merge your Artisteer files with one of these skins. That's a good start, but it doesn't get you all the way. You still have to edit the layout.master file and the stylemojo.css file.
(1) The header.
The issue here is that Artisteer may use multiple div tags to define the header section, and layout.master may not include all these divs. In my case, I was using rounded corners on the header. The artisteer-swirly1 layout.master includes this:
<div class="art-Header">
<div class="art-Header-jpeg"></div>
but I needed this:
<div class="art-Header">
<div class="art-Header-png"></div>
<div class="art-Header-jpeg"></div>
In other words, the Artisteer-generated style.css file defined a definition for a div, "art-Header-png," but the layout.master didn't have the it. This div had the css to display the rounded corners on my header. Once I added the div in layout.master, it all worked.
(2) The background.
When you create a background in Artisteer, you can define a color, a gradient, an image or a texture, or some combination of these. Artisteer creates a separate div tag for each of these in style.css. So you need to make sure that layout.master puts all the appropriate divs on the page. In my case, layout.master included this:
<div id="art-page-background-gradient"></div>
<div id="art-page-background-glare"><div id="art-page-background-glare-image"></div>
But I had to edit it to this:
<div id="art-page-background-simple-gradient"></div>
<div id="art-page-background-glare"><div id="art-page-background-glare-image"></div></div>
<div id="art-page-background-gradient"></div>
Note that the footer also has this kind of problem.
(3) The slogan.
The text of the slogan is hard coded in the layout.master. You need to edit it there:
<div id="slogan-text" class="art-Logo-text">Slogan text</div>
(4) The mojoPortal menu.
MojoPortal adds a menu at the top of the page: Home, Search, Sign In, Register, etc. If you want, you can rearrange or remove these links by editing layout.master:
<div class="topnav">
<ul>
<portal:WelcomeMessage ID="WelcomeMessage" runat="server" RenderAsListItem="true" ListItemCss="firstnav" />
<portal:HomeLink ID="HomeLink" runat="server" RenderAsListItem="true" />
<portal:SiteMapLink ID="SiteMapLink2" runat="server" CssClass="sitelink" RenderAsListItem="true" />
<portal:MyPageLink ID="MyPageLink1" runat="server" RenderAsListItem="true" />
<portal:UserProfileLink ID="UserProfileLink" runat="server" RenderAsListItem="true" />
<portal:MailboxLink ID="MailboxLink1" runat="server" RenderAsListItem="true" />
<portal:MemberListLink ID="MemberListLink" runat="server" RenderAsListItem="true" />
<portal:SearchInput ID="SearchInput1" LinkOnly="True" RenderAsListItem="true" runat="server" />
<portal:RegisterLink ID="RegisterLink" runat="server" RenderAsListItem="true" />
<portal:LoginLink ID="LoginLink" runat="server" RenderAsListItem="true" />
<portal:LogoutLink ID="LogoutLink" runat="server" RenderAsListItem="true" />
You can change the font and the position by editing stylemojo.css. I had to move everything slightly down and to the right to make it look right.
div.topnav { position:absolute; top:0; left:0; text-align:center; font-weight:700; margin:0px 0px 3px 40px; width:100%; } - set the position
div.topnav ul { display:inline; margin:0; padding:0; }
li.topnavitem { float:left; list-style-type:none; padding:0 7px; }
li.firstnav { float:left; list-style-type:none; padding:0 7px 0 5px; }
.sitelink,a.sitelink:link,a.sitelink:visited { color:#fff; text-decoration: none; } - set the font.
I hope this saves someone some time.