Change logo size?

[roundzero]

Hi,

I would like to have a bigger logo on my 1.6 site. In 1.5 I changed the size of the header to fit a larger logo but now since the uppgrade I can not figure out how to do it.

Please help.

 

[vekia]

hello

just upload bigger logo file, have you tried it?

[roundzero]

hello

just upload bigger logo file, have you tried it?

[roundzero]

My file is allredy big. I search the code and found out that in my view logo is att 33% of the row and then comes the search field block. Can I just edit these numbers to make the search field smaller and logo bigger? I tried to and it seems to work but do I have to edit in more than one place becsuse of the different views?

[vekia]

can you share url to your website?

also it's worth to check this topic:
http://www.prestashop.com/forums/topic/321383-solved-header-logo-help/

[roundzero]

Hi again,

Tested different apporouches to the problem. The topic you linked to didn't work for me. Removing the maximum width as descreibed increased the logo but messes up my page. The logo is then to big. If I edit the global.css instead. And increase the

 .col-sm-4, header .row #header_logo {
    width: 50%; }

instead of 33.33% it looks much better. Logo is bigger. However anything above 50% will break the row in two and it looks bad again. The cart will move and it just looks messy. Can't figure out how to edit the files to move things around as I wan't. 1.6 files is maybe to advanced for me :S

[vekia]

hello

can you share url to your website?

it will be much easier to help with possibility to access to it

it's hard to imagine it, the same with solution proposal

[roundzero]

Hi again, and thanks for your help vekia!

Changing what I did wasn't so smart after all now that I read more about how the bootstrap works. Even though it looked good in my view, col-sm-4 is used for when u have 3 columns on one row and should therefore allways be left at 33.33333%.

I acctually want to change more in the layout so I will read more on this topic first.

 

However if someone else just want the bigger logo, vekias solution with removing maximum width seems to works as long as you size your logo correctly for your page.

[Beans]

Hi again, and thanks for your help vekia!

Changing what I did wasn't so smart after all now that I read more about how the bootstrap works. Even though it looked good in my view, col-sm-4 is used for when u have 3 columns on one row and should therefore allways be left at 33.33333%.

I acctually want to change more in the layout so I will read more on this topic first.

 

However if someone else just want the bigger logo, vekias solution with removing maximum width seems to works as long as you size your logo correctly for your page.

 

I tried this, but removing the maximum width messed up some other images on the site (non-responsive?)

 

What finally worked for me was making the image the size I actually wanted in my editing software and uploading that, then adding this code to global.css:

 

#header_logo .img-responsive {
  max-width: 150% !important;
}

I'm hoping this won't have any weird side effects I haven't noticed yet.

Edited May 29, 2014 by Beans (see edit history)

[amcm112]

Have a problem with logo size...

 

I ever try to modify the value in :

 

.col-sm-4, header .row #header_logo {
    width:30.33333%; }

 

when I change from 33 to another value my logo goes bigger and looks great.. but the fotter is a complete mess .. how I can make my logo bigger and my fotter still in good place...!  Pls Help!

[vekia]

dont change it in

.col-sm-4, header .row #header_logo {
    width:30.33333%; }

becayse this class is for col-sm-4

 

just create new code for #header_logo only

[RCP90]

Hi,

 

 

I am experiencing a similar issue with a new store. I uploaded a logo, which is only being displayed as about 60% of original size. I tried changing various parts of global.css but it is still displayed smaller.

 

One strange thing i noticed is that if the browser is minimized to tablet/mobile size it displays the larger logo.

[wanderer72]

 

I tried this, but removing the maximum width messed up some other images on the site (non-responsive?)

 

What finally worked for me was making the image the size I actually wanted in my editing software and uploading that, then adding this code to global.css:

 

#header_logo .img-responsive {
  max-width: 150% !important;
}

I'm hoping this won't have any weird side effects I haven't noticed yet.

 

Unfortunately, it seems to have side effects in the mobile version, as it stretches out of the rest of the page...

 

Any way this can be rectified, as it otherwise does the trick?

 

thanks

[Beans]

Unfortunately, it seems to have side effects in the mobile version, as it stretches out of the rest of the page...

 

Any way this can be rectified, as it otherwise does the trick?

 

thanks

 

You can write CSS code that is specifically for a particular screen size.

 

So you might have something like:

@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*/
  }
}

You could copy this code for all the different screen sizes you want to accommodate.

Edited September 2, 2014 by Beans (see edit history)

[wanderer72]

You can write CSS code that is specifically for a particular screen size.

 

So you might have something like:

@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*/
  }
}

You could copy this code for all the different screen sizes you want to accommodate.

 

Many thanks, this works well!

[jonathbenz]

Unfortunately, the only way you can really do this is by having a higher quality camera/larger file size.

 

Booklet printing Singapore

[wwesps]

Many thanks, this works well!

 

This doesn't work for me. I have tried all solutions in this discussion post & end up with either of following issues:-

 

(1) web version definitely shows the logo increased but then mobile/tablet version gets messed up. Logo stretches out completely.

 

(2) In web version the LOGO increases but it overlaps the nearby SEARCH and CART icons.

 

What is the correct solution for increasing the LOGO size & reduce length size of: SEARCH and CART icons nearby so all 3 fit together in same line.

 

Thanks,

Vick

[Beans]

This doesn't work for me. I have tried all solutions in this discussion post & end up with either of following issues:-

 

(1) web version definitely shows the logo increased but then mobile/tablet version gets messed up. Logo stretches out completely.

 

(2) In web version the LOGO increases but it overlaps the nearby SEARCH and CART icons.

 

What is the correct solution for increasing the LOGO size & reduce length size of: SEARCH and CART icons nearby so all 3 fit together in same line.

 

Thanks,

Vick

 

How well do you know CSS? You can adjust the size of the logo with CSS code for the mobile/tablet versions (based on the screen size) as seen in the above posts. For instance, I use a screen size of 767px for phone-specific code and 1199px and 991px for horizontal and vertical tablet sizes.

 

You can control the size of the search and cart elements the same way.

 

If you don't already have a web developer plug-in for your browser I'd highly recommend it.

[wwesps]

Thanks Beans.

 

(1) So your suggestion is: Simply adding below code to global.css should work & Similarly, keep adding for various max-width sizes... right?

 

@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*/
}
}

 

 

(2) Can  you also point respective code elements for SEARCH and CART too in global.css ?

 

Thanks,

Vick

[Beans]

Thanks Beans.

 

(1) So your suggestion is: Simply adding below code to global.css should work & Similarly, keep adding for various max-width sizes... right?

 

@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*/

}

}

 

 

(2) Can  you also point respective code elements for SEARCH and CART too in global.css ?

 

Thanks,

Vick

 

(1) Yes, that's where I would start.

 

(2) My cart has a class name of "shopping_cart" but it's in the blockcart.css stylesheet. My search has an ID of "search_block_top" and is in blocksearch.css. You can, of course, also wrap these styles in as many @media(max-width) blocks as you need.

 

You are welcome to check out my global stylesheet: https://coffeecityusa.com/themes/ccusa/css/global.css

[wwesps]

Thanks for the pointers. BTW, your store looks awesome!

[Walrus]

Actually, reading thread again, I found following fix by Vekia works:

 

 

.img-responsive {
display: block;
/*max-width: 100%;*/
height: auto;
}

Edited November 24, 2014 by Walrus (see edit history)

[Walrus]

You also need to apply same fix to product.css I found.

 

HTH.

Edited November 25, 2014 by Walrus (see edit history)

[Walrus]

How do I change the size of the hover for jumping to the store home page by clicking on the logo? It still seems to be fixed at 287px, or thereabouts. IOW, I can click on the leading part of the logo, but not the tail (see attached).

 

URL: http://www.examaids.com/examaids/

[Beans]

How do I change the size of the hover for jumping to the store home page by clicking on the logo? It still seems to be fixed at 287px, or thereabouts. IOW, I can click on the leading part of the logo, but not the tail (see attached).

 

URL: http://www.examaids.com/examaids/

 

 

Hi Walrus,

If you use the Web Developer plug-in for Chrome you'll have an easier time. Using it I found out that the "hoverable" part of your logo is a div with an ID of "header_logo". If you can find (or create) a rule for this ID in your CSS stylesheet you should be able to change the size.

[wwesps]

Hi Walrus,

If you use the Web Developer plug-in for Chrome you'll have an easier time. Using it I found out that the "hoverable" part of your logo is a div with an ID of "header_logo". If you can find (or create) a rule for this ID in your CSS stylesheet you should be able to change the size.

 

Hi All- I had the following 2 issues resolved last month: (1) Increase size & Move position of logo (2) Increase/Decrease size of Search-bar/Shopping-cart button on Front Page.

 

For some reason, updates to the CSS are NOT working now...

 

I know following CSS files need to be updated to achieve the above (1) & (2):-

public_html/modules/blocksearch/blocksearch.css

public_html/modules/blocksearch/blockcart.css

 

I already had the following:-

i) Entire CCC was always set to "No"

ii) Cleared Cache (by clicking "clear cache" button on top right corner)

iii) "Force Compilation" is selected

iv) "Cache" is set to --> No

 

What am I missing here?

 

 

Tx