My easy way to increase logo size and some other css changes for 1.7

[hobbit]

Hi

*If this is not the right place for this post, I sincerely apologize. Can it be moved to a suitable place in the forum if not?

 

I found some posts on this issue (increasing the size of the logo) but none worked the way I wanted, so through trial and error I figured out solutions for what I wanted done and thought I'll share if someone else might be interested. By only making one small change to a .tpl file and working with custom.css for the rest, I got my shop to look the way I wanted (it is still a work in progress).

Let me mention a few thing first:

• I've used this on Prestashop 1.7.5.1 so I'm not sure if it will work on all 1.7.x.x. With my very limited knowledge, I can't see why not though.
• I am NOT a coder and I don't know how to code. However, I do search and read a lot which helps me to figure out (some) things.
• The methods and code used is most probably not 'elegant' nor the absolute right way to do it, but it got done what I wanted.
• You use these at your own risk!
• Please don't ask questions like "i want this over there" or "help me get it to look like that" or similar. I can't. I'm just as clueless LOL. I can only do what I've done so far.

With all that said, let's begin. This is what I've done to easily increase the size of the shop logo to any size you want (if you don't want to resize the logo, skip this part - the rest is mostly css background changes to various areas of the template eg. headers, wrapper (body), footers).

1) Open to edit header.tpl (found here... /your-store/themes/classic/templates/_partials). Please back up the file first!

2) Find and delete only  col-md-2 hidden-sm-down .Keep the " ".

<div class="col-md-2 hidden-sm-down" id="_desktop_logo">

It must look like this when you're finished

<div class="" id="_desktop_logo">

3) Save and and upload the file back.

4) Now open to edit custom.css (found here.. /your-store/themes/classic/assets/css). If you don't have one, simply make one with either Notepad++ or just notepad (windows), and save it as custom.css. Then upload it to the directory mentioned and open it to edit.

5) Important!: The rest of this 'tutorial' carries on inside the attached custom.css. Download it to see what I've done. For those wanting to change logo size, please read from line 39 to 61. If you also want to place your logo in the center like i did, read up to line 70. The rest (before and after lines 39 -70) consists of cosmetic changes like background colours for different areas. I have attached a modified version of my own custom.css file (lots of comments and white space) for you to download and look at. You may even use it for your Prestashop and just delete or change values inside as you please. .

Hope this helps some people! 🙂

PS: I had to 'clear cache' every.single.time I changed something before I could see the changes. So if something doesn't work for you, try to clear the cache first and then open your front end through the back office.

Edit: Changed title to reflect version

Edit 2: Corrected some spelling etc.

 

custom.css

Edited March 22, 2019 by hobbit (see edit history)