[SOLVED] move the header logo

[seow]

Dear vekia,
How do i place the headerlogo under the searchbar, login menu etc. layers?

[vekia]

hello

 

i moved your thread to the new topic

 

what template you use?

[seow]

standard template

[vekia]

in this case you need to modify the header.tpl file

 

you've got there code:

<div id="header" class="grid_9 alpha omega">
				<a id="header_logo" href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}">
					<img class="logo" src="{$logo_url}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" {if $logo_image_width}width="{$logo_image_width}"{/if} {if $logo_image_height}height="{$logo_image_height}" {/if}/>
				</a>
				<div id="header_right" class="grid_9 omega">
					{$HOOK_TOP}
				</div>
			</div>

use this one:

			<div id="header" class="grid_9 alpha omega">
				<div id="header_right" class="grid_9 omega">
					{$HOOK_TOP}
				</div>
                <a id="header_logo" href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}">
					<img class="logo" src="{$logo_url}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" {if $logo_image_width}width="{$logo_image_width}"{/if} {if $logo_image_height}height="{$logo_image_height}" {/if}/>
				</a>
			</div>

[vekia]

then from #header_logo remove position:absolute

#header_logo {
position: absolute;
left: 0;
top: 30px;
z-index: 1;
}

(global.css line 579)

 

 

efect:

[seow]

Now the logo is gone?

[vekia]

can you share url?

[seow]

http://www.airsoftlipo.com/index.php

[vekia]

ok, it's weirdy because you've got there display:none;

 

can you attach header.tpl file?

[seow]

ok, it's weirdy because you've got there display:none;

 

can you attach header.tpl file?

couldnt upload it here so i did it with dropbox:

https://www.dropbox.com/s/fp0y37r832qfl9i/header.rar

Edited September 11, 2013 by seow (see edit history)

[seow]

so did you have a look?

[vekia]

yes! i checked it and i thought that i replied here :|

 

with this file everything is okay. the problem is with nivoslider module that you use.

it has got this block and this styles <div style='display:none'>

what to do? you need to close this div right before the logo. 

[seow]

yes! i checked it and i thought that i replied here :|

 

with this file everything is okay. the problem is with nivoslider module that you use.

it has got this block and this styles <div style='display:none'>

what to do? you need to close this div right before the logo. 

i use minicslider and cannot find the div style or something in the style.css where to look? and how do i close the div

[vekia]

you have to edit minic slider .tpl file, not css, because this styles are defined in style="" tag

[seow]

i think i didnt clarify enough what i wanted exactly... i wanted the logo in the same place as standard..but when i make it wider it covers up the searchbar so the searchbar becomes invisible.

i just wanted to put the headerlogo behind the searchbar and other topmenustuff

[vekia]

you can do it with z-index style for other elements.

define this param for:

 

#search_block_top {

position: absolute;

right: 26%;

top: 34px;

z-index:9;

}

 

and your logo will be behing the search field

[seow]

okay great, where do i find the file which has that code?

 

and how do i put the header back to the original position?

Edited September 15, 2013 by seow (see edit history)

[vekia]

you need to move your logo above the {HOOK_TOP} section in header.tpl file.

 

code that i mentioned you can find in: http://www.airsoftlipo.com/modules/blocksearch/blocksearch.css

[seow]

you need to move your logo above the {HOOK_TOP} section in header.tpl file.

 

code that i mentioned you can find in: http://www.airsoftlipo.com/modules/blocksearch/blocksearch.css

im sorry i am a real big noob on this.  when you say move the logo you mean this code? :

</div>

                <a id="header_logo" href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}">

                    <img class="logo" src="{$logo_url}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" {if $logo_image_width}width="{$logo_image_width}"{/if} {if $logo_image_height}height="{$logo_image_height}" {/if}/>

                </a>

            </div>

 

            <div id="columns" class="grid_9 alpha omega clearfix">

                <!-- Left -->

                <div id="left_column" class="column grid_2 alpha">

[vekia]

several posts above you attached header.rar file (dropbox url) it is actual version of your header.tpl file?

[seow]

several posts above you attached header.rar file (dropbox url) it is actual version of your header.tpl file?

the current version of my header is : https://www.dropbox.com/s/atuzl5nl91vmg0u/header.tpl

 

as you can see http://www.airsoftlipo.com/index.php the header is now to high..

[vekia]

okay, now it's necessary to change:

 

1

add position:absolute to #header_logo in global.css file

#header_logo {
position: absolute;
left: 0;
top: 30px;
z-index: 1;
}

2

to .sf-contener add margin-top:140px; in http://www.airsoftlipo.com/modules/blocktopmenu/css/superfish-modified.css

.sf-contener {
margin-top:140px;
clear: both;
}

 

 

effect:

[seow]

Awesome i got it thanks! id buy you a beer anyday!

[vekia]

you're welcome glad that i could help you a bit

im going to mark this topic as [solved]

 

best regards

[seow]

you're welcome glad that i could help you a bit

im going to mark this topic as [solved]

 

best regards

so to put the shoppingcart stuff on top i need to add a z index 9 on that aswelll?

http://www.airsoftlipo.com/index.php

because i want to use a wider banner

[vekia]

that's right, you have to  define z-index value for each block in your top section

[seow]

that's right, you have to  define z-index value for each block in your top section

do you know which blocks those are? because i tried blockcart and that didnt have any effect

[vekia]

add z-index: 9; position: relative; to #header_right #header_user in http://www.airsoftlipo.com/modules/blockuserinfo/blockuserinfo.css

 

#header_right #header_user {

clear: both;

float: right;

margin-top: 8px;

z-index: 9;

position: relative;

}