[SOLVED] Center logo in New Theme 1.6

[j3velez]

Hello, 

 

Im looking the best way to center the logo in the new responsive theme. Could you help me?..

 

The idea is to center the logo between the search bar and the cart, with only CSS if possible to avoid damaging the mobile styles.

 

Thanks!!

 

Jose V.

[dioniz]

I don't think this is possible with just css.

[vekia]

with css styles is not possible, but it's easy to achieve.

 

open header.tpl file (located in your theme dir) and remove this code:

<div id="header_logo">
									<a href="{$base_dir}" title="{$shop_name|escape:'html':'UTF-8'}">
										<img class="logo img-responsive" src="{$logo_url}" alt="{$shop_name|escape:'html':'UTF-8'}"{if $logo_image_width} width="{$logo_image_width}"{/if}{if $logo_image_height} height="{$logo_image_height}"{/if}/>
									</a>
								</div>

then go to /themes/default-bootstrap/modules/blocksearch/blocksearch-top.tpl and paste code that you removed at the end of the file

 

 

effect:

[j3velez]

with css styles is not possible, but it's easy to achieve.

 

open header.tpl file (located in your theme dir) and remove this code:

<div id="header_logo">
									<a href="{$base_dir}" title="{$shop_name|escape:'html':'UTF-8'}">
										<img class="logo img-responsive" src="{$logo_url}" alt="{$shop_name|escape:'html':'UTF-8'}"{if $logo_image_width} width="{$logo_image_width}"{/if}{if $logo_image_height} height="{$logo_image_height}"{/if}/>
									</a>
								</div>

then go to /themes/default-bootstrap/modules/blocksearch/blocksearch-top.tpl and paste code that you removed at the end of the file

 

 

effect:

 

Great, That's what I was planning to do.. I was trying to find another options but I think it is not possible with only CSS.

Thanks for your help!!

[vekia]

yes you've got right

no other way to achieve it exist, unfortunately we have to modify the tpl files

 

i marked topic as solved.

with regards,

Milos

[kamiliok]

Vekia thanks for solution! Saved a lot of time!

[elita2013]

Hello! Im new in prestashop, i do it the things you do and everything ok but..is possible center logo without search bar?

 

Thank you

[vekia]

you mean that you want to remove search bar at all?

[elita2013]

Yes, i want only the logo center and the shopping cart on right...

Thank you!

[elita2013]

And in this case obviously if i remove search bar...my logo delete with the code jejeje where i put the logo code then? Thanku

[vekia]

im confused.

i asked about:
 

 

 

you mean that you want to remove search bar at all?

and you replied

 

 

Yes, i want only the logo center and the shopping cart on right...   
Thank you! 

 

 

so you want to remove search bar, or not?

[elita2013]

Yes sorry for my english!

Yes i want to remove search bar sorry for my english!

[vekia]

now everything is clear,

thank you

 

copy 

<a href="{$base_dir}" title="{$shop_name|escape:'html':'UTF-8'}">
										<img class="logo img-responsive" src="{$logo_url}" alt="{$shop_name|escape:'html':'UTF-8'}"{if $logo_image_width} width="{$logo_image_width}"{/if}{if $logo_image_height} height="{$logo_image_height}"{/if}/>
									</a>

and paste it to the

<div id="search_block_top">
</div>

in search block module .tpl file

[elita2013]

 

IT WORKS!! THANK YOU SO MUCH FOR YOUR HELP!!

Edited April 28, 2014 by elita2013 (see edit history)

[elita2013]

 

Edited April 28, 2014 by elita2013 (see edit history)

[vekia]

you're welcome

if you need any additional assistance regarding to this just let me know.

 

btw. why you don't want to use search tool ? it's fery useful feature

[elita2013]

I want to put search bar in megamenu, on the right. But no in header Its only about design.

 

This will be other chapter jejeje 

[vinaesken]

Help! By following this my store logo is positioned below the search bar - not between the search bar and the cart

 

See attached image

 

What am I doing wrong?

 

[vekia]

any chance to see it live?

[abolfazl-m]

please help me remove logo my theme

[dA3m0n]

Hello ,

 

i'm sorry but...this topic is solved ?

 

In fact, I can't center my logo ! 

 

 

I would like remove Search bar and Put my Block Cart in the header top !

 

 

Can you help me ?

[vekia]

it's solved because for other it worked.

make sure that you did exactly the same steps as i did in "best answer" topic.

[dA3m0n]

Hi, 

 

Ok, i understand...

 

I maked same changes but it doesn't work.  Can you help me please ? 

 

** Center Logo without Search Bar **

______________________________________

1)

open header.tpl file (located in your theme dir) and remove this code:

<div id="header_logo">
                                    <a href="{$base_dir}" title="{$shop_name|escape:'html':'UTF-8'}">
                                        <img class="logo img-responsive" src="{$logo_url}" alt="{$shop_name|escape:'html':'UTF-8'}"{if $logo_image_width} width="{$logo_image_width}"{/if}{if $logo_image_height} height="{$logo_image_height}"{/if}/>
                                    </a>
                                </div>

then go to /themes/default-bootstrap/modules/blocksearch/blocksearch-top.tpl and paste code that you removed at the end of the file

______________________________________

 

2)

copy 

<a href="{$base_dir}" title="{$shop_name|escape:'html':'UTF-8'}">
                                        <img class="logo img-responsive" src="{$logo_url}" alt="{$shop_name|escape:'html':'UTF-8'}"{if $logo_image_width} width="{$logo_image_width}"{/if}{if $logo_image_height} height="{$logo_image_height}"{/if}/>
                                    </a>

and paste it to the

<div id="search_block_top">
</div>

in search block module .tpl file

______________________________________

 

I don"t understand the second part, where must i copy this second code ? 

 

Thank a lot for precision

Edited June 27, 2014 by dA3m0n (see edit history)

[vekia]

hello

the file is:

 

themes/default-bootstrap/modules/blocksearch/blocksearch-top.tpl

[dA3m0n]

thanks. it's solved

[NicePack]

Hey! I'v just found this post and it's been great to me ^^ All these days fighting against header (or top) blocks and at least found a solution to center logo and another to hook search bar block and social block in new places. Yay, thanks a lot!

 

But I have a little issue with this Logo solution, is is responsive (at leat to me) since a determinated screen size, when I look on mobile screen sizes the logo goes big again and its outside of screen from the right.

 

Do you know what's happening? If needed url is lamallorquina.onesixstudio.com and I attach screenshot.

Edited August 14, 2014 by NicePack (see edit history)

[mar.svitkov]

Hi, I was read this topic. I need this change: 
 
Logo fixed in left and shopping cart in right. No search in the middle.

 

 

It´s in attachment. When I delete quick search in the top, the shopping cart move to the middle.

 

Can you help me where I change it??
 
Many thanks.

Edited August 26, 2014 by mar.svitkov (see edit history)

[Australian Logos]

When you make it live?

[mar.svitkov]

When I do it with Live edit, I dont move shopping cart.  I think that this is in css. But I dont know where. Look this:

 

[vekia]

you have to define offset param for block cart

in class="" for block cart add col-sm-offset-4

 

[mar.svitkov]

Thank you for your reply. But when I use it, I see that this change isn´t good for me (web design).

 

I was moved cart to displayNav, but it is in left position. But I need to fix it from right. Anyone can help me?? What and where change it?

 

[gerstavros]

Thank you for your reply. But when I use it, I see that this change isn´t good for me (web design).

 

I was moved cart to displayNav, but it is in left position. But I need to fix it from right. Anyone can help me?? What and where change it?

 

how did u move the cart there?

[gerstavros]

right now i have only the logo at header. How can i add the search form?

Adding the code of search in header.tpl results in a form under the logo, even if i make divs left and right

[donceka]

I have problems after i done what it is said there my logo went down: 

Edited February 6, 2015 by donceka (see edit history)

[donh]

I did exactly what you showed here but logo disappeared. which means code inserted in blocksearch-top.tpl is not working.

What am I doing wrong?

 

Thank you.

 

Don

[vekia]

I did exactly what you showed here but logo disappeared. which means code inserted in blocksearch-top.tpl is not working.

What am I doing wrong?

 

Thank you.

 

Don

 

you have search block active?

[Mr.Orange]

Hi Vekia,

 

I did what you suggested and it did not work. I replaced the header.tpl and the blocksearch-top.tpl with the original files, to at least go back to the logo beeing on the left, but now the Logo has disapperead all together. I also uploaded the Logo again via the Theme configurations. What also happed was, the live Position Edit shows a error now. Please let me know if you have an idea what could have happened and how I can get the Logo back!?

Prestashop Version 1.6.0.11

 

Cheers

Orange