Artisteer customization help

A place for discussion about skinning and design. Before posting questions here you should review the documentation about creating skins.

This thread is closed to new posts. You must sign in to post in the forums.
1/11/2012 2:38:04 PM
Gravatar
Total Posts 41

Artisteer customization help

I've created a skin using Artisteer 3.0 and the colour and menu came in fine but my header and logo did not. I copied artisteer-30verticalmenu1 for my base.

Please refer to the correct layout in Artisteer http://db.tt/H12mnEfA

and the incorrect layout in the web page here http://db.tt/dP8QINSH

Problems...

  1. Logo not showing up
  2. Slogan not showing up
  3. There should be a little space between the header and the menu.

Can anyone point me in the right direction?

Thanks
Rob

 

1/11/2012 3:34:38 PM
Gravatar
Total Posts 41

Re: Artisteer customization help

Ok I got the logo and Site Slogan to show up using the built in Mojo stuff. Now I have to position them and I can probably poke around the CSS to do that. 

My last issue is the space between the header and the menu that I wanted. It seems I have two white boxes in the header area. Anyone know how to get rid of one?

http://db.tt/H12mnEfA

 

 

1/11/2012 3:45:27 PM
Gravatar
Total Posts 40

Re: Artisteer customization help

I noticed the two white boxes earlier. It would appear that one is the white background color of the element that the logo image goes in and the other is the white background of the image itself. Once you get the positioning corrected there should be no need to eliminate the white background color unless you really want to.

As far as the spacing between the logo and the menu, If you want less of it look at decreasing either the margin-bottom on the element your logo image (or the header itself) is in or the margin-top of the menu's wrapper.

Don't forget that in CSS things like margin and padding follow the "trouble" acronym TRBL (Top, Right, Bottom, Left) meaning that:

margin {10px 0 10px; }
equals:
margin-top: 10px; margin-right: 0; margin-bottom: 10px;

Sitepoint has a pretty good online CSS Reference if you run into anything else.

1/11/2012 3:51:20 PM
Gravatar
Total Posts 40

Re: Artisteer customization help

if you really want to get rid of the background color in the one element, just find the rule for it in the CSS and set background-color:transparent; or background-color: none; Personally, I prefer transparent, especially if I am using transparent PNG images in my layout. Just my two cents.

1/11/2012 4:22:38 PM
Gravatar
Total Posts 1203
Proud member of the mojoPortal team

Help support mojoPortal!
Add-on modules

Re: Artisteer customization help

If you haven't already, be sure to install the Firebug plugin so you can inspect the CSS directly in Firefox or Chrome. That will save a ton of time in determining where your changes need to be made. Also, while you're working on the skin, be sure to disable CSS caching through Administration, Advanced Tools, Design Tools, Cache Tool.

Ideally, you want to make minimal CSS overrides, if possible. You may need to change some of the mojoPortal CSS choices, though, to align the look of those elements with your skin. What we do is add a separate .css file for our own overrides, and add it to the very bottom of style.config. That way, we can put in overrides that supersede just about everything else, and keep them in one central spot for maintenance.

Jamie

1/12/2012 7:09:03 AM
Gravatar
Total Posts 41

Re: Artisteer customization help

Thanks guys. I'll play around with it some more and shee where I get. I'm sure I'll have a couple of more questions.

1/12/2012 7:14:17 AM
Gravatar
Total Posts 18439

Re: Artisteer customization help

If the logo is part of the Artisteer design, its possible that the layout.master file is missing a div that would be used for it. I would examine the exported html page and compare it to the layout.master and look for any missing div with a class on it that may be used for the logo rather than using our <portal:SiteLogo control and trying to position it. Chances are if you add the missing div in the correct location and remove the sitelogo control then the existing Artisteer css will add the logo and position it correctly.

Hope that helps,

Joe

1/13/2012 8:26:01 AM
Gravatar
Total Posts 41

Re: Artisteer customization help

Thanks again everyone.

Joe, I managed to get the divs that I needed on the Artisteer side of things and move them around a bit.
Never got that space betweeen the header and the menu correct but maybe another time. I'm off to Mexico and then I have another project to start on when I return so this will be sidelined for a while.

You must sign in to post in the forums. This thread is closed to new posts.