Make non-standard shaped headers


Author Message
Richard

Posted: 6/9/2010
Quote message 

Hi, I have designed a few websites with Artisteer but I am struggling to work out how to make a non-rectangular header. I want to make a header that appears to go over the background like the header on blissfulbambini.com or lettland-guide.de. Can this be acheived with artisteer? I am willing to fiddle around with the files via FTP to get a transparent header etc and I can do basic PHP editing too. Any help would be much appreciated. thanks
 
Bud

Posted: 6/16/2010
Quote message 

You can do it by having a background image that is larger than your header. You then use the same image for both. Just make sure that when you load image from file for header you use the original size. Also make sure that the background image is centered.

Then position the visible part of the header to match the background. It takes a little playing around but you can get it to match up perfectly.

Here's an example...



Bud Griffin
The Templateer
www.thetemplateer.com
===========================
Take your Artisteer Wordpress
themes to the next level.
Saves you time and money.
===========================
 
Daverino

Posted: 6/20/2010
Quote message 

How about something like this where an image hovers over the header, menu, and sidebar? IE: the picture of the woman?

http://gorillathemes.com/latest-themes/seduction-celebrity-fashion-wordpress-theme/

And this one?

http://www.flashmint.com/show-template-2662.html
 
Tuomas Leppänen

Posted: 7/14/2010
Quote message 

Quote Daverino:

How about something like this where an image hovers over the header, menu, and sidebar? IE: the picture of the woman?

http://gorillathemes.com/latest-themes/seduction-celebrity-fashion-wordpress-theme/

And this one?

http://www.flashmint.com/show-template-2662.html


Using custom CSS-styles. They have done div with either absolute or relative positioning and background to go with it. It's also possible with negative margins but I'd definately go with positioning because its less hassle.


Div would look like something like this:

.hoverimage
{
background: url("images/woman.png");
width: 100px;
height: 200px;
position: absolute;
z-index: 9999;
top: 50;
left: 50;
}

or something.
 
Lesley

Posted: 8/29/2010
Quote message 

For the Gorilla theme I would make the image part of the nav.png then adjust the size to fit your image. I would take the formatting off the nav buttons and just have plain text, and add padding to make the menu drop down over a menu bar I would create as part of the image.

You can see what I mean with what I have done here:

http://aliarts.co.nz/development/nortonlaw/