changing shop logo position in the home page

[naoufel]

Hi,

I would like to move my shop logo slightly to the left and also slightly down. 

I have prestashop 1.6 theme. any idea on how to do that ?

 

Thank you,

 

Fel,

[ComGrafPL]

2 hours ago, naoufel said:

Hi,

I would like to move my shop logo slightly to the left and also slightly down. 

I have prestashop 1.6 theme. any idea on how to do that ?

 

Thank you,

 

Fel,

Show the store link.

Edited July 15, 2021 by ComGrafPL (see edit history)

[SmartDataSoft]

@naoufel

Are you using PrestaShop default 1.6 theme or any paid theme. If you share the site url , then it will possible for us to check

Thank you

[naoufel]

Thank you for your response. I'm using paid theme . My site url is : https://www.moorisharchitecturaldesign.com/

i'm attaching screen shot of my home page

 

Thank you,

[SmartDataSoft]

Hello, Bellow css will move the logo slightly left and down. you can adjust the value according to your need. 

#header_logo img {

margin-top: 50px;

margin-left: -19px;

}

 

Using this module you can insert js and css to your theme. 

 

https://classydevs.com/free-modules/classy-custom-css-js-module/

 

Thank you

 

[naoufel]

Thank you for your response .  Which file do i need to edit ?

 

 

[SmartDataSoft]

You can edit the theme css file or add the css using any add custom css module .

Inside your themes file you can find style.css file which you can modify

Thank you

 

 

 

 

 

[naoufel]

i do not see  style.css file in my theme . My prestashop version is 1.6.1.9

[SmartDataSoft]

Due to cache enable I do not know which css file. You can check theme css folder also or disable the cache and inspect the css file name via Google chrome.

In this video you will find how to use Google chrome developer tools 

thank you

 

 

 

[naoufel]

Cache is disabled, but not able to find which file or folder do i need to edit in order to edit the shop logo position and size

[SmartDataSoft]

 

Hello, I again check the css file again it is  v_824_fedf1fdcf73a075910071891fed53ebc_all.css which load from cache css file.

 

You can check the template file inside css file inside the theme file theme1224

 

Thank you

[naoufel]

i found file " v_824_fedf1fdcf73a075910071891fed53ebc_all.css" but as soon as i cleared cache it disappeared so i think this file is not permanent file. 

any suggestions which file should i edit . I tried to edit filer header.tpl but nothing changed 

[SmartDataSoft]

Please disable the cache from Performance , css compress then you will find all css file in fronted after that you can modify the css file and then enable smart css cache.

 

Thank you

[naoufel]

i did disable cache for css and looks like that shop logo is under global.css file. could you please let me know in global.css file where do i need to edit 

 

Thank you,

global.css

[SmartDataSoft]

Hello, I saw your site in global.css you can add this code in like 272, their is not specific css for this block. so you can add easily,.

 

Once you add this you need to enable the smartcss features.

 

Thank you

[Ray UK]

Its a 5 second edit.

As above, edit the file /themes/theme1224/css/global.css and just add the code supplied above.

Or if you wish to centre it then add

#header_logo {
    display: block;
    margin: 10px 0 0 0;
    text-align: center;
}

 

[naoufel]

thank you for your response. I do not want to put my shop logo in the center of my home page but i just want to move the logo slightly  approximate 3mm to the right and 3mm down . Can you please advise on how tom achieve that 

Thank you,

 

[SmartDataSoft]

@naoufel

The code I told you insert, will do that. You may need the value to adjust if need.

 

I have test in browser .

 

Thank you

[madpugger]

As mentioned above:

Edit the file /themes/theme1224/css/global.css and just add the code supplied above.

Add:

#header_logo img { margin-top: 50px; margin-left: -19px; }

You can put this basically anywhere in the file as long as it is right after a }

You can change the 50px to suit, that will move the image down

You can change the -19px to suit. that moves it left. to move it right, just use a positive number like 10px.

 

The mention above to "centre" the logo is useful info for others reading this thread and may not be directly aimed at the OP.

#header_logo { display: block; margin: 10px 0 0 0; text-align: center; }

This code moves the image down 10 pixels and centres it on the screen.

 

I hope that clears things up for you.

 

 

Edited July 18, 2021 by madpugger (see edit history)

[naoufel]

I did exactly what you did however the logo is not moving . nothing changes 

I saved the file, cleared cache but nothing changes 

see attached screen shot 

[naoufel]

i got it to work now , smart cach css was turned off that is why it was not saving the modification 

 

Thank you very much for your help

[ComGrafPL]

I have use this code below. I would recommend to use HTML box free module. Place code in head.

#header_logo img {
    margin-top: 20px;
    margin-left: 50px;
}

Edit: You sorted while i post. Cheers

Edited July 18, 2021 by ComGrafPL (see edit history)

[SmartDataSoft]

20 minutes ago, naoufel said:

i got it to work now , smart cach css was turned off that is why it was not saving the modification 

 

Thank you very much for your help

Please mark the post as solved. Do not forget to like our solution. Thank you