Top Menu Buttons On Top Of Sheet (how to instructions)


Author Message
Cathy

Posted: 5/28/2010
Quote message 

For all of you who aren't CSS Gurus like myself, I always like share what I've done in order to manipulate Artisteer to achieve the look and feel that you want. In this case, I've figured out a way to place the Top Menu Buttons outside and on top of the sheet itself and how to create a transparent background behind them. For all of you gurus, this probably isn't news to you.

1. Log into your host server and access your template.

2. Download the nav.png file and make the entire image transparent, upload and replace the old image so that the background of your top menu buttons are now transparent.

3. Go into the backend of Joomla into your Template CSS file and change or add the following code:

.art-menu
{
padding: 0px 10px 10px 0px; (Change to This)
}

.art-menu a
{
position:relative;
display: block;
overflow:hidden;
height: 45px;
cursor: pointer;
text-decoration: none;
margin-right: 1px;
margin-left: 1px;
top: -45px; (Add this line of code)
}

.art-Sheet
{
margin-top: 180px !important; (Change px amount based on header/glare image)
}

In order to use a background image and a header image that is separate from the sheet itself, I save my header as a png file and upload it as a GLARE image. This way you are still able to have a colorful background.

Hope this helps..... :)

Cat


 
Cathy

Posted: 5/28/2010
Quote message 

One more thing...if you are using a radus on your sheet change the code to the following so that the buttons don't fall off the edge.

.art-menu
{
padding: 0px 12px 12px 0px;
}