How to set logo in header to overlap the content area?


Author Message
Sean D.

Posted: 10/2/2012
Quote message 

Hi, actually have two questions.

How do I get a logo in a header to overlap the content area? Here is what I have in artisteer now:

I edited this in Paint.NET to show what I would like to do. Here is what I would like to do:

My other question is this. In artisteer I have the menu sitting on top of the edge of the content area. But when I import the template into wordpress the bottom part of the menu items are hidden. How can I fix this too?

Thanks!
Sean
 
Sean D.

Posted: 10/3/2012
Quote message 

I searched through the forums. Can someone confirm that all I need to do is set the z index for the logo? Or do I have to do something for the header too? Right now when I try to drag the logo where I want it in Artisteer the bottom of the logo is either hidden or cut off by the sheet. Thank you.
 
richard

Posted: 10/3/2012
Quote message 

z-index is one part i.e. to make sure it is not hidden. You'll probably need to set a -ve margin for the div it's overlapping too so that it actually overlaps.
 
Sean D.

Posted: 10/3/2012
Quote message 

Ugh... I cannot get it to work. I need a little more info on the css I need to fix.
 
gcm

Posted: 10/3/2012
Quote message 

Are you able to upload this to the web? If so, put in a link so others can look at it.
 
gcm

Posted: 10/3/2012
Quote message 

Try changing the overflow property in .art-shapes from hidden to show.

I was playing around with fragile lifting template. I tried changing the z index and was able to get it to overlap the menu but not into the body of the page. I changed the property of overflow:hidden from that to overflow:show and it worked. Also you may need to put in z-index in this same section I used z-index: 999

Hope this will work for you




 
Sean D.

Posted: 10/3/2012
Quote message 

Hey gcm,

That worked! The only thing I need to do now is figure out why the layout is messed up in IE9. Looks just fine in Chrome and Firefox.
 
Sean D.

Posted: 10/3/2012
Quote message 

Ahh... the problem was IE9 had the zoom set to 80%. At 100% it works fine.
 
Cees

Posted: 10/3/2012
Quote message 

Hi Sean,

Can you explain how to solve this in iE9.
Where can I change the zoom set
 
Sean D.

Posted: 10/6/2012
Quote message 

Hi Cees,

If the layout looks weird in IE9 go to View -> Zoom on the main menu in IE9 and see if the zoom is not at 100%. In my case it was at 75% and the layout was totally messed up. When I set it to 100% the layout looked normal.
 
Cees

Posted: 10/8/2012
Quote message 

Dis As you suggested, but cannot get it to work in Artisteer 4
 
Nick

Posted: 10/9/2012
Quote message 

@gcm: Amazing tutorial, this will definitely be added to my arsenal of "tricks" .

I am also finding out that this method works only if your header's property is set to "sheet width", and not "Page Width". I don't know why this is, and how to fix it. Increasing the z-index value to a much higher value does not work either.

I bet this is the reason why you could not get it to work Cees...
 
gcm

Posted: 10/9/2012
Quote message 

When I switched from sheet width to page width it creates a different div below the art-shapes div. It also created a style called art-object0 I changed the overflow property from hidden to show in the art-shapes section as above and changed the z-index from 0 to 999 in the art-object0 section


 
Pat

Posted: 10/9/2012
Quote message 

Thanks for the good info, this was exactly what i was looking for, however, it works when i set it with firefly, but i have no idea where to change it so it is automaticly exported to my template.

In what css file do i need to change this ?

And even better, can i change the default behaviour of artisteer 4 to this ..

Regards,
Pat
 
Pat

Posted: 10/9/2012
Quote message 

Thanks for the good info, this was exactly what i was looking for, however, it works when i set it with firefly, but i have no idea where to change it so it is automaticly exported to my template.

In what css file do i need to change this ?

And even better, can i change the default behaviour of artisteer 4 to this ..

Regards,
Pat
 
MissEmmaLee

Posted: 10/9/2012
Quote message 

:-D :-D Wow! Small World, Hi Sean!
 
Nick

Posted: 10/9/2012
Quote message 

@Pat: style.css
 
gcm

Posted: 10/10/2012
Quote message 

Was your header set for page width or sheet width? When I switched over to page width it created a div called art-object0

Quote Cees:

There is no art-object0 class in my css.???
(sheet width = page / Artsiteer 4))
http://www.erikemmers.be
:
<body class="home page page-id-277 page-template-default chrome page-home-2">
<div id="art-main">
<div id="art-hmenu-bg" class="art-bar art-nav clearfix">
</div>
<div class="art-sheet clearfix">
<header class="clearfix art-header clickable">
<div class="art-shapes">
<div class="art-headline" data-left="44.55%">
<a href="http://www.erikemmers.be/">Binnen en Buitenschrijnwerk</a>
</div>
<div class="art-slogan" data-left="68.68%">Toezicht en Beheer</div>
</div>

</header>


 
Nick

Posted: 10/10/2012
Quote message 

Hi Pat,

I thought I new all versions of Artisteer since 2.0 pretty well, and I have no idea what you are talking about. Can you educate me please, specially regarding the "default behavior in Artisteer 3"? What am I missing?
 
Pat

Posted: 10/10/2012
Quote message 

Hi Nick ;-)

sure, i mean, in artisteer 3, whenever i set an image in the header the default is to overlap the content area. With version 4 that changed (for me that is).

Within artisteer 3 you could actually see the image overlapping the content. In artisteer 4 its behind the content. So now i need to alter the style.css everytime i export to a live server, i never had to do that in version 3.

Regards and thanks for your answer,

Pat
 
Cees

Posted: 10/10/2012
Quote message 

I do not get the css art-object0, neither with page width or sheet width.

art-shape set overflow to visible and z-index to 999 does not help either.

????
 
gcm

Posted: 10/10/2012
Quote message 

Yikes :-@In my previous post I said to set overflow property to "show" I should have said visible, Sorry
 
Cees

Posted: 10/11/2012
Quote message 

Artisteer gave me this great support:

Upload the image (logo) in wp-admin => Media => Add new, copy its link.

Go to wp-admin => Appearance => Editor and open header.php, before </nav> tag add this code:

<img src="http://yoursite.im/wp-content/uploads/2012/10/094010.carpenter-houston-tool-belt2.png" style="overflow: visible; margin-top: -70px; margin-bottom: -50px; float: right;" class="imglogo"/>

Replace http://yoursite.im/wp-content/uploads/2012/10/094010.carpenter-houston-tool-belt2.png with the link to your image.


Add this code to style.css:

#art-hmenu-bg {
height: 51px !important;
}

If you will need to adjust the position of the image, let me know.
And you should probably delete the image in header in Artisteer before adding it via header.php.


The images in version 4 are added as background, not like in Artisteer 3.

You also mentioned that you want this image to be only on home page, to achieve this add this code to your style.css file:

.home img {
display: block !important;
}
img.imglogo {
display: none;
}
Now how do I adjust the vertical and horizontal position??

I would like it about 20 pixels higher and 5 pixels more to the right

Use this code:

img.imglogo {
margin-right: -5px !important;
margin-top: -90px !important;
}

Now how do I adjust the vertical and horizontal position??
I would like it about 20 pixels higher and 5 pixels more to the right


Use this code:

img.imglogo {
margin-right: -5px !important;
margin-top: -90px !important;
}


 
Cees

Posted: 10/11/2012
Quote message 

Check it out:

http://www.erikemmers.be/

 
Rico

Posted: 11/1/2012
Quote message 

Quote Pat:

Hi Nick ;-)

sure, i mean, in artisteer 3, whenever i set an image in the header the default is to overlap the content area. With version 4 that changed (for me that is).

Within artisteer 3 you could actually see the image overlapping the content. In artisteer 4 its behind the content. So now i need to alter the style.css everytime i export to a live server, i never had to do that in version 3.

Regards and thanks for your answer,

Pat


try this for a permament change:

edit the file ./Artisteer4/Library/Data/Templates/DefaultView/Glyphs/Page.css

find:

.art-shapes
{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: 0;
}

replace with:

.art-shapes
{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: visible;
z-index: 9999;
}

this works for me

Rico
 
Cees

Posted: 11/3/2012
Quote message 

.art-shapes
{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: visible;
z-index: 9999;
}

IS NOT WORKING FOR ME ??
 
Cees

Posted: 11/3/2012
Quote message 

.art-shapes
{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: visible;
z-index: 9999;
}

IS NOT WORKING FOR ME ??
 
Rookie

Posted: 7/13/2016
Quote message 

Quote Cees:

Artisteer gave me this great support:

<img src="http://yoursite.im/wp-content/uploads/2012/10/094010.carpenter-houston-tool-belt2.png" style="overflow: visible; margin-top: -70px; margin-bottom: -50px; float: right;" class="imglogo"/>

Replace http://yoursite.im/wp-content/uploads/2012/10/094010.carpenter-houston-tool-belt2.png with the link to your image.



This was a really helpful post.

Thanks heaps...

Regards
Rookie