Jump to content
ableier

SOLVED 1.6.1 Center and size shop logo?

Recommended Posts

Before I updated I had the shop looking exactly as the client wanted it.  After I updated to 1.6.1 I've had some work to do, but am getting close to the original look.  I cannot figure out how to center the logo and resize it to full width without it messing with the rest of the layout.  I've tried copying the code from header.tpl and inserting into blocksearch-top.tpl to no avail.  Any other ideas would be greatly appreciated.

Edited by ableier (see edit history)

Share this post


Link to post
Share on other sites

There is 'global.css' at ....\prestashop\themes\default-boostrap\css\global.css

 

Line 703

 

  .col-sm-4, header .row #header_logo {
    width: 33.33333%; }
 
The logo is 'forced' to occupy one third of the total space of the page. If you remove 'width:33.33333%', the logo will take on the size of the original image. 
 
If you are going to look at this file, make sure you look at a backup copy. I don't think it is advisable to make too many changes here as things may be affected during upgrades.
 
Once again, backup global.css!
 
I have issues with this myself. I want to have a larger logo and position it where I want but there's a lack of information out there...
Edited by chome4 (see edit history)

Share this post


Link to post
Share on other sites

Hi Chrome4,

 

I originally had changed the row size as you suggest, but it messed with the layout of my product page.  I hope you don't have the same problem.

 

My solution, which seems to have worked perfectly is to add the following to global.css:

 

#header_logo .img-responsive { 

display: block;
  max-width: 800px;
  height: auto;
position: relative;
margin-left: 50%;
margin-top: 40px;
margin-bottom: 40px;
 }
 
@media (max-width: 450px) { /*Change max-width to the maximum mobile screen size*/
#header_logo .img-responsive { 
max-width: 100% !important; /*Change 100% to whatever percent/px size looks good*/
}
}
 
@media (max-width: 750px) { /*Change max-width to the maximum mobile screen size*/
#header_logo .img-responsive { 
max-width: 100% !important; /*Change 100% to whatever percent/px size looks good*/
}
}
 
 
I pieced this together from a few different posts.  Continue to add the @media lines for different screen sizes.
 
I'm going to mark this solved, but let me know if it works for you.
 
Thanks.

Share this post


Link to post
Share on other sites

I added it at line 21 and it's looking better

 

http://www.gibraltaraccountants.eu/prestashop/

 

Obviously I'll have to play around with the logo width and/or the cart/search positions but it's good. It works responsively for smartphones and tablets.

 

My earlier post about removing the width actually messed up the footer. Glad I followed my own advice and backed it up.

 

Thanks for that.

Share this post


Link to post
Share on other sites

Hi Chrome 4,

 

Thanks for your contribution , it has helped me tremendously.

 

Gr. Kuipje

Share this post


Link to post
Share on other sites

Hi,

 

Use margin: 0 auto; instead of margin-left: 50%;

 

Gr. Kuipje

Share this post


Link to post
Share on other sites

Hi I added Ableier's code at line 21, and used margin: 0 auto; instead of margin-left: 50%; as suggested by Kuipje.

 

I see that it did something because there is now slightly more space between the logo and menu bar, but…. my logo stays on the left…

Is there something else I need to do?

Do I need to modify smthg around col-sm-4, header .row #header_logo?

 

Please help ! This logo on the left is killing me….

 

Thanks

Share this post


Link to post
Share on other sites

 

Hi Chrome4,

 

I originally had changed the row size as you suggest, but it messed with the layout of my product page.  I hope you don't have the same problem.

 

My solution, which seems to have worked perfectly is to add the following to global.css:

 

#header_logo .img-responsive { 

display: block;
  max-width: 800px;
  height: auto;
position: relative;
margin-left: 50%;
margin-top: 40px;
margin-bottom: 40px;
 }
 
@media (max-width: 450px) { /*Change max-width to the maximum mobile screen size*/
#header_logo .img-responsive { 
max-width: 100% !important; /*Change 100% to whatever percent/px size looks good*/
}
}
 
@media (max-width: 750px) { /*Change max-width to the maximum mobile screen size*/
#header_logo .img-responsive { 
max-width: 100% !important; /*Change 100% to whatever percent/px size looks good*/
}
}
 
 
I pieced this together from a few different posts.  Continue to add the @media lines for different screen sizes.
 
I'm going to mark this solved, but let me know if it works for you.
 
Thanks.

 

 

Hello, i added this to my global.css and there were no noticeable changes to my site (locally hosted at the moment).

Share this post


Link to post
Share on other sites

×
×
  • Create New...

Important Information

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