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

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

Share this post


Link to post
Share on other sites
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 by petrmak (see edit history)

Share this post


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

 

Share this post


Link to post
Share on other sites

Hi Zeryk!

Which version do you have installed?

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

 

Share this post


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

Share this post


Link to post
Share on other sites

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
 

Share this post


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

Share this post


Link to post
Share on other sites

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.

 

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.
Note: Your post will require moderator approval before it will be visible.

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