Jump to content
fibo

[SOLVED] How can I center logo in homepage?

Recommended Posts

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

post-1371215-0-43607800-1499410172_thumb.png

Edited by fibo (see edit history)

Share this post


Link to post
Share on other sites

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

post-1371215-0-21367300-1499411740_thumb.png

Share this post


Link to post
Share on other sites

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).

Share this post


Link to post
Share on other sites

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

post-1371215-0-05286500-1499438055_thumb.png

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

post-1371215-0-80411700-1499446909_thumb.png

Share this post


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

 

 

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