Logo space size - PS 1.7.1

[justoneweek]

Hello,

the only way to increase the logo space is change the header.tpl file (themes / classic / templates / _partials)?

This allows changing the menu bootstrap wraps, someone knows other way?

Many thanks!

 

[shacker]

you have the file

 

themes/classic/assets/css/theme.css

 

you can set the logo dimmensions here

 

#header .logo {

1. max-width: 100%;
2. width: 408px;

}

 

and make the font size smaller

 

.top-menu a[data-depth=0] {

1. font-weight: 400;
2. padding: .1875rem .625rem .375rem;
3. font-size: 12px;

}

 

 

[justoneweek]

Hi Ambassadors,

I did exactly what you told me, just with 300px width:

 

1. max-width: 100%;

2. width: 300px;

 

But if I upload a logo image width 300px the result is this: http://sunglasses.land/ :/

 

 

 

Many thanks!!

[catalin.scaesteanu]

Hi Ambassadors,

I did exactly what you told me, just with 300px width:

 

1. max-width: 100%;

2. width: 300px;

 

But if I upload a logo image width 300px the result is this: http://sunglasses.land/ :/

 

 

 

Many thanks!!

 

Hi,

 

You forgot to add a semicolon after "max-width: 100%"

 

This is how it looks:

 

 

#header .logo {

  max-width: 100% width: 300px;

}

 

And this is how it should be:

 

#header .logo {

  max-width: 100%;

  width: 300px;

}

Edited April 11, 2017 by catalin.scaesteanu (see edit history)

[justoneweek]

I think I have some problems with the editor. With notepad++ I do not see the code indented: http://imgur.com/a/V8Ean

do you think is normal? do you any tips for to see .css indented?

 

Many many thanks!

[catalin.scaesteanu]

 

I think I have some problems with the editor. With notepad++ I do not see the code indented: http://imgur.com/a/V8Ean

do you think is normal? do you any tips for to see .css indented?

 

Many many thanks!

 

 

Hi,

 

There's nothing wrong with your editor. What you're seeing there is a minified version of the file, meaning the file is stripped of spaces to reduce it's file size. In short it's a good thing.

The developers at Prestashop now use a tool called webpack, which among other things, compiles multiple scss files into one file called "theme.css", which in the end gets minified to reduce file size.

The correct way to change the css would be to change the development version of the scss file and then compile everything again using webpack. You might want to do some reading about this if you want to follow this path.

 

However there are other ways you can do this.

One way would be by downloading the theme.css file from your server, and using a tool such as this: http://tools.bin63.com/javascript-minifier-unminifier you can upload it and unminify it, then edit it locally and once you've finished, upload it again to minify it. Once you're done upload the minified version back to your server.

 

Hope this helps.

[justoneweek]

Many thanks!

[justoneweek]

First of all thanks for your support!
I have done the procedure you suggested, I also checked that everything was ok doing the reverse process but now nothing happens, inceredibile!

Many thanks!

[shacker]

you must  go to performance, and disable ccc for css and clear the cache to se the changes and not minimized files

[justoneweek]

If that's what you see in attached it was already set that way 

 

Many thanks!

[catalin.scaesteanu]

If that's what you see in attached it was already set that way 

 

Many thanks!

 

Did you press the "Clear cache" (Pulisci la cache) button from the top right corner?

Also you should clear your browser's cache, or try opening your website in incognito mode.

 

LE: Just checked your website and it shows width: 300px; so it works

Edited April 13, 2017 by catalin.scaesteanu (see edit history)

[justoneweek]

I cleaned PS cache and Chrome cache but I still see the little logo, this is absurd! 

Now I changed the width of the logo, can you see 408 px?

 

Many many thanks!

[shacker]

i see. remove the max-width line

[justoneweek]

I did but still do not works. I cleaned PS cache and Chrome cache... 

[imachine]

Likewise, still the same after adding the width: whateverpx; line

 

Tried setting height: as well. no difference.

 

cleaned cache etc.

Edited April 13, 2017 by imachine (see edit history)

[shacker]

you must remove the 

 max-width: 100%;

#header .logo {
 /*max-width: 100%; */
width: 408px;
}

[justoneweek]

I did and this is the result, logo go on the menu: http://sunglasses.land 

[shacker]

you must edit the header of the template and change the logo class from class="col-md-2 to class="col-md-5 or something more bigger

[justoneweek]

I did and this is the result, menu go down the logo: http://sunglasses.land

 

I tried with col-md-5, col-md-9m col-md-3... the result is the same 

[justoneweek]

No solution for this problem? Impossible to change logo dimension on PS 

[tubeman]

 

you have the file

 

themes/classic/assets/css/theme.css

 

you can set the logo dimmensions here

 

#header .logo {

1. max-width: 100%;
2. width: 408px;

}

 

and make the font size smaller

 

.top-menu a[data-depth=0] {

1. font-weight: 400;
2. padding: .1875rem .625rem .375rem;
3. font-size: 12px;

}

 

 

 

Thanks PrestaShop Legend. Works like a charm