Jump to content
Zeryk

How to center the logo PS.1.6

Recommended Posts

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!

Share this post


Link to post
Share on other sites
4 hours ago, MichaelEZ said:

Edit header.tpl

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

thanks

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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>

Share this post


Link to post
Share on other sites
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 by Zeryk
mistake , the logo actually disappears (see edit history)

Share this post


Link to post
Share on other sites

well because he told u to delete it :D 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

Share this post


Link to post
Share on other sites
On 10/9/2019 at 10:09 PM, MichaelEZ said:

well because he told u to delete it :D 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!;-)

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More