how to change homepage themes color?

[zybxtv]

I use the default themes as my online store, but how to change homepage themes color? and how to change the different blocks color on the homepage? is anyone can help me ? thanks.

[Guest aritali]

It would change them globally, but you would need to edit the global.css file.

[tdr170]

If you are speaking of the grey blocks that have the text in them such as Categories, Manufacturers etc, the only way to change them is to create new image files or edit the existing ones.

They are located in ...themes/prestashop/img, here you will fiind image files such as block_header.png, block_header_exclusive.gif as the images are gif or png you will need an image editing program capable of editing such files.

 

The global.css file will not really change any theme colors only background colors, text colors, mouse over colors, or text size.

 

After you look at the images and decide if you really want to take on this task use your FTP program to copy the img folder to your computer than create a folder named new images and save all modified or new images there that way you will have a backup in case things go wrong.

 

Hope this helps.

[Guest aritali]

After you look at the images and decide if you really want to take on this task use your FTP program to copy the img folder to your computer than create a folder named new images and save all modified or new images there that way you will have a backup in case things go wrong.

 

And after you create that new folder with the new images and upload it, nothing i s going to happen, unless you change the linking in the global.css file.

 

But at the same time, if you are trying to edit module headers, you will have to go into the module css files. What I do when I theme a site is just upload the whole modules directory to the themes directory. Then you can edit your modules at will and have your custom edited modules called for your theme.

 

At the same time, if you are just trying to edit the look of you modules on your home page, you can set up if statements in your modules to check what page they are on.

[tdr170]

That is incorrect and why you use the same names as the original files in the img folder.

I have done this and no editing of CSS is required as long as the names are the same.

You will not upload the folder just the images over writing the originals with the new or modified ones.

You will have no reason to edit any CSS files unless you want to change text color.

There is also already a modules folder in the themes folder that contains all CSS files for the Modules with CSS files it is located here

...themes/prestashop/css/modules

 

Follow my directions and all will be OK.

[Guest aritali]

The reason I upload the whole modules folder is to edit the actual modules. Not the css files, I think it is kind of janky to hide things with visibility. Plus at the same time you retain a back up of the original modules on the site, if you ever need to switch to the default theme for testing.

 

Now when you say to upload and overwrite the old images, that doesn't take any css editing.

[ayin]

=============== New Question =================

 

Hello,

 

In version 1.6, can you guys give me a similar hint on how to change the color of the top navigation bar with (Language, Currency, login) to this color: #ec930b?

 

I located the element with Chrome Inspector and it is

"<div class="nav"><div class="container"><div class="row"> <nav><div class="header_user_info"> <a class="login" href=...."

Localting it in the Global,css file, i found:

line 2216:
".nav {
  margin-bottom: 0;
  padding-left: 0;
  list-style: none; }
  .nav:before, .nav:after {
    content: " ";
    /* 1 */
    display: table;
    /* 2 */ }
  .nav:after {
    clear: both; }
  .nav > li {
    position: relative;"

I tried to add the instruction:

".nav {
background-color: #ec930b;
  margin-bottom: 0;
...
"

And it does not change the color. If i change the "Container",  it changes too much (including elements below)

line 557:
".container {
background-color: #ec930b;
  margin-right: auto;
  margin-left: auto;
...
"

Any hints? Thanks

Edited January 10, 2015 by ayin (see edit history)

[cille5]

Hint. Download STYLIZER 6 css editor (free 14 days trial). You can edit your site a lot without knowing anything about css coding, with this program.

[ayin]

But i wish to learn about prestashop..

 

EDIT: i though it would be a module.

I am testing this applications and sounds awesome.

 

Thanks

Edited January 10, 2015 by ayin (see edit history)