[SOLVED] How can I center logo in homepage?

[fibo]

Hi everybody,

 

The screenshot attached is from  Prestashop 1.16.1.14

 

I've moved the search bar in column left, now I need to center the logo.

My logo would be 310x115 px.
 

I tried to shift the blocks inside the "Positions" in the Backoffice, but it doesn't work.

Depending on how i move the blockcart inside the "displaytop", it happens that the cart moves itself under the tab "Popolare".
 

Do I manage this thing through CSS?

 

Thanks

Edited July 7, 2017 by fibo (see edit history)

[selectshop.at]

https://www.prestashop.com/forums/topic/318418-solved-center-logo-in-new-theme-16/

[fibo]

Hi!

 

Thanks for your reply.

 

I've done that change, but I obtain this strange result.

I've no change nothing in CSS, I've also forced the recompilation of template

[selectshop.at]

Seems that you made some changes in the hook sequences of your modules. Therefore your logo is now missed. You should return to the standard configuration (install on a sub-folder of your FTP a new Prestashop and comapare the modules -> hooks configuration with the one you are having in your shop).

[fibo]

Think you're right.

 

If after change I search for "header_logo" through firebug , it doesn't find anythinhg.

 

Try to follow your advice.

Thanks

[selectshop.at]

You're welcome. For to close the topic as "answered", please return with feedback. Thank you.

[fibo]

By "hook configuration" you mean the specific configuration of a certain hook or there is a page for general settings?

[fibo]

Hi

 

If found a solution. 

I changed header.tpl in themes directory like this:

<div class="container">
  <div class="row">
    <div class="col-sm-12 col-centered">
      <div id="logo">
	<a href="{if isset($force_ssl) && $force_ssl}{$base_dir_ssl}{else}{$base_dir}{/if}" title="{$shop_name|escape:'html':'UTF-8'}">
	 <img class="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>
    </div>
   </div>
</div>
<div class="container">
  <div class="row">
    <div class="col-sm-8"></div>
      {if isset($HOOK_TOP)}{$HOOK_TOP}{/if}
    </div>
  </div>
</div>

And in the global.css I've added this rules:

.col-centered {
  float: none;
  margin: 0 auto;
}
#logo a img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

The result is this

[SarahBishop]

https://www.prestashop.com/forums/topic/318418-solved-center-logo-in-new-theme-16/

Thanks for sharing the guide link, I also want to add the logo in homepage.

192.168.1.1

[Zeryk]

On 7/8/2017 at 1:01 AM, fibo said:

Hi

 

If found a solution. 

I changed header.tpl in themes directory like this:

And in the global.css I've added this rules:

.col-centered {
  float: none;
  margin: 0 auto;
}
#logo a img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

where exactly should I paste this part in global.css ?

Thank you!

 

 

[fibo]

Hy.

Sorry for my late reply.

If you hadn't yet resolved; you can insert that snippet just before the beginning of the media query declarations.
Before the first line where you read this instruction: "@media (min-width: 768px)"

[petrmak]

On 7/7/2017 at 10:01 AM, fibo said:

And in the global.css I've added this rules:

.col-centered {
  float: none;
  margin: 0 auto;
}
#logo a img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

This works perfectly. Thanks for providing solution.

 

Edited October 17, 2019 by petrmak (see edit history)

[fibo]

Glad it have been useful.

Good job!

[Zeryk]

On 10/17/2019 at 1:58 AM, petrmak said:

 

I'm not sure if I keep doing something wrong all the time.

I edit only global.css , right? (Nothing else )

"@media (min-width: 768px)" in my global.css shows up 43 times , so I picked the first one and pasted this code in it's brackets .

not doing anything ;-(

still on the left.

Just reminder , my search box block is turned off , and shopping cart is placed into the top nav.bar next to the language and currencies. So no any other elements are active in the header.

"And in the global.css I've added this rules:" ..why "and"? means there is another thing needs to be done?

Can anybody write 1 solution in one article here please? Few people throw info bit by bit, I'm getting confused here .

which file and where edit, and how. All together in one article please. It is also good for the future if anybody has the same problem.

Thank you very much!

 

[fibo]

Hi Zeryk!

Which version do you have installed?

Is possible to visit your website or do you have a local installation?

 

[Zeryk]

20 hours ago, fibo said:

Hi Zeryk!

Which version do you have installed?

Is possible to visit your website or do you have a local installation?

 

1.6.1.24

my site is still not open , working on it. if u can pm me some IP address which you are going to use , I can add it in maintenance mode ( so it will show up to you ) . So if suits you send me a PM please. Thank you very much;-)

[fibo]

Hy!

I'm not connected  through a static IP.

Try to install  "CSS Used" Chrome's extentio: it catchs all the CSS rules for the DOM element selected and shows the CSS files that contain them.
You can post the output here and I try to give you help.

Remember to remove temporarily the cache mode of PS, otherwise the extentions will notice the file of the cache
 

[Zeryk]

On 10/21/2019 at 10:55 PM, fibo said:

Hy!

I'm not connected  through a static IP.

Try to install  "CSS Used" Chrome's extentio: it catchs all the CSS rules for the DOM element selected and shows the CSS files that contain them.
You can post the output here and I try to give you help.

Remember to remove temporarily the cache mode of PS, otherwise the extentions will notice the file of the cache
 

thanks for trying to help. Once I open the site , I will paste the link here. Cheers!

[Zeryk]

Ok.

bold text means to be added

center the block with logo:

header.tpl - line:  105

 <div id="header_logo" style="float:none;margin:0 auto">

center the image inside of this block :

global.css - line: 278

.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
  margin-left:auto;
  margin-right:auto;
   }

Thanks all for participating in thread, hope this will help to others.