center logo How to center the logo PS.1.6

[Zeryk]

I've gone trough various suggestions and non of them work.

I do not use the search bar and I also have moved my shopping cart module in top dev bar. right beside the changing language. So idea of switching positions ( as presented on one of the solutions ) doesn't work . The logo just disappears.

So I need fully autonomous solution which wouldn't depend or somehow relate to the position of other modules.

Solutions in editing columns etc. caused that all text on page is centered , incl. the product page. Solution from Spanish developer I've found on YT ( adding the code in global .css ) doesn't not work either.

It's kinda progress in 1.7 version that can do the change in BO. I believe the idea of having the logo in the middle wasn't around just a year ago, so why is it so difficult?

 

 

Thank you!

[MichaelEZ]

Edit header.tpl

[Zeryk]

4 hours ago, MichaelEZ said:

Edit header.tpl

thanks for the hint , but what exactly I should type / edit there?

thanks

[MichaelEZ]

ctrl+f logo, u shoud be able to see part of html code wherte logo is located, if u dont have html knowledge, u can past code here   

 

or if u have default theme :

 

<div class="container">
                            <div class="row">
                                <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 isset($logo_image_width) && $logo_image_width} width="{$logo_image_width}"{/if}{if isset($logo_image_height) && $logo_image_height} height="{$logo_image_height}"{/if}/>
                                    </a>
                                </div>
                                {if isset($HOOK_TOP)}{$HOOK_TOP}{/if}
                            </div>
                        </div>

u can use for example

https://codepen.io/aravindio/pen/PJMXbp

[Jeremiah Lee]

7 hours ago, Zeryk said:

I've gone trough various suggestions and non of them work.

I do not use the search bar and I also have moved my shopping cart module in top dev bar. right beside the changing language. So idea of switching positions ( as presented on one of the solutions ) doesn't work . The logo just disappears.

So I need fully autonomous solution which wouldn't depend or somehow relate to the position of other modules.

Solutions in editing columns etc. caused that all text on page is centered , incl. the product page. Solution from Spanish developer I've found on YT ( adding the code in global .css ) doesn't not work either.

It's kinda progress in 1.7 version that can do the change in BO. I believe the idea of having the logo in the middle wasn't around just a year ago, so why is it so difficult result?

 

 

Thank you!

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>

[Zeryk]

2 hours ago, Jeremiah Lee said:

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>

thanks , that's is the one of those solutions which doesn't working for me. I don't know why ;-(  the logo keeps hanging on left.

Edited October 9, 2019 by Zeryk
mistake , the logo actually disappears (see edit history)

[Zeryk]

logo disappears

[MichaelEZ]

well because he told u to delete it  and u did.. as i said u have to edit that part not delete, just make class on global.css for example : https://codepen.io/aravindio/pen/PJMXbp

and then add/change class in header.tpl, or if u dont care about code and what is right then just use center, but i do not recommend it https://www.w3schools.com/tags/tag_center.asp

[Zeryk]

On 10/9/2019 at 10:09 PM, MichaelEZ said:

well because he told u to delete it  and u did.. as i said u have to edit that part not delete, just make class on global.css for example : https://codepen.io/aravindio/pen/PJMXbp

and then add/change class in header.tpl, or if u dont care about code and what is right then just use center, but i do not recommend it https://www.w3schools.com/tags/tag_center.asp

thanks for your patience with me;-)

I have added into the global.css that code ( at the beginning of the file) , not sure if there , should be probably in particular location / row where should I add it?

I have edited the header.tpl ..just made copy-pase as the code u,ve posted coz I have default template. Well, u guess right 😉 nothing changed.

I'm sorry , I'm kinda loosing the string here because all info is scattered all over the thread. Would you be so kind and just paste it in 1,2,3,...points / steps where and how should I edit what?

1) global.css  - add the script you linked ( which row or it doesn't matter ?  )

2) header.tpl  - the particular code before ( default template ) and after change...so I can see what exactly I should type in that code

I know how to search trough the web to inspect the elements and locate things, but not sure what exactly I should be locating?

Thank you very much for your time!;-)

 

[MichaelEZ]

find header_logo in global.css and add      text-align: center;  display: block;

[Zeryk]

On 10/14/2019 at 6:07 AM, MichaelEZ said:

find header_logo in global.css and add      text-align: center;  display: block;

thanks. not working ;-(

there are around 20 lines with header_logo in my global.css. I've picked the one ( the line / row )  which highlights shows up lines of global.css when I hover over the logo in Inspect element mode in Mozilla. That didn't work , so for experiment I added the code to another 13 positions where it hypothetically ( at least for me ) would make a sense. Still nothing.

Let's narrow it down. Do I understand it correctly : I have to edit only global.css if I have default template, nothing else, right?

( I know that I have to position the actual picture of logo in the middle of "logo box" (339x135) to achieve actual centering , I can do it later in PS but for now I 'm struggling with whole box get into the middle )

thanks for your time again!

[karid]

hi guys, I dont want to open new topic with the same so ask here: I have new logo and look very empty I think, how to make it on the middle? where to place contact and cart?

web: https://www.handmadecards.ie