Default theme colors

[phantom13]

Hi everyone,

 

I would like to change my default themes color (add a new color scheme). I have managed so far to insert a new scheme both in the database, and create the neccesary css file for it. However I can't figure out how to change the color of the navigation bar and of the cart.

 

Also, is there any place where I can find the css of the default color scheme?

 

Any solutions or thoughts are more than welcome!

Edited March 18, 2015 by phantom13 (see edit history)

[gr_fenix]

Hi,

 

Use a plugin for firefox like Firebug and find all the CSS. All module has his own CSS (top menu, slide, etc)

[phantom13]

Hi,

 

I know, problem is i can't locate the css files for the default color scheme, that beeing the theme on which I want to relly since it has most of the colors already present. (Example: each color scheme has a css files like theme10.css ... but there is no theme1.css - which is the default - and I can't find it) Perhaps it has a different name/location?

[dioniz]

It's mostly in global.css

[phantom13]

Thanks, I'll take a look tonight

[phantom13]

I have taken a look over global.css but the problem is there is no east way to tell whether an element belongs or not to the default color scheme.

It would take days to analyze each element and see where it belongs to.

 

Is there another solution available to get the css of the default color scheme? (running presta 1.6.0.13)

[secondhand-obchod.sk]

Hi, I think you can find the default theme colours in the module "themeconfigurator". You will find there theme 2 till 9 under css.

 

(at least its like this in 1.6.0.9)

 

I am trying to change this myself at the moment, and need a bit of help with it too.

 

The footer is working right, just in area after a customer loggs into his customer area, the footer shows white.

 

I am using default prestashop theme in 1.6.0.9

 

I would be thankfull if someone could tell me where I can change this footer..

[phantom13]

Hi,

 

Files theme2.css to theme9.css are for theme2 to theme9. The default is theme1 for which there is no css file available.

 

 

If you want to create a new theme you will need to follow these steps:

 

1. Connect to the database

2. Run query

SELECT *
FROM `ps_configuration`
WHERE name LIKE '%ps_tc_themes%'

3. Value will be something like

a:9:{i:0;s:6:"theme1";i:1;s:6:"theme2";i:2;s:6:"theme3";i:3;s:6:"theme4";i:4;s:6:"theme5";i:5;s:6:"theme6";i:6;s:6:"theme7";i:7;s:6:"theme8";i:8;s:6:"theme9";}

4. Replace it with

a:10:{i:0;s:6:"theme1";i:1;s:6:"theme2";i:2;s:6:"theme3";i:3;s:6:"theme4";i:4;s:6:"theme5";i:5;s:6:"theme6";i:6;s:6:"theme7";i:7;s:6:"theme8";i:8;s:6:"theme9";i:9;s:7:"theme10";}

* Notice changes:

 - first a:9 becomes a:10 because you now have 10 themes.

- at the end there is a new record i:9;s:7:"theme10" (i is the index of your theme, s is the length of the theme's name, and theme10 is the name of the theme)

 

5. You need to go inside modules/themeconfigurator/css

6. Open liveconfigurator.css

7. Add the folowing code

#tool_customization #color-box .theme10 .color1{
	border: 13px solid #f1f1f1;
}
#tool_customization #color-box .theme10 .color2{
	background: #317081;
}

*** theme10 is the name of the theme used earlier

*** Also this colors are only the colors displayed in Live Configurator (the little box with colors on it)

 

8. Create new files theme10.css

9. Use FireBug extension from Firefox or Chrome to identify the element you want to change

10. Insert css changes code into theme10.css

 

 

In your case footer is composed from upper footer (a png of 1x71 resolution repeated horizontally - stored somewhere in /modules/themeconfigurator/img - and lower footer section who's background color is set by the background in theme10.css)

 

For the upper footer use inside theme10.css

@media (min-width: 768px) {
  .footer-container {
    background: url(../img/footer-bg.png) repeat-x;
  }
}

* where footer-bg.png is your 1x71 png from /modules/themeconfigurator/img that you want to use

 

For the lower footer use something like

body {
    background: #your_color_rgb_code_here;
}

If that doesn't work you can always override it by using

body {
    background: #your_color_rgb_code_here !important;
}

Goodluck!

Edited March 23, 2015 by phantom13 (see edit history)

[Vinum]

Hi

Or if you use the default boostrap theme for prestashop > 1.6, you can use that module :

http://addons.prestashop.com/en/front-office-features-prestashop-modules/17952-advanced-theme-configurator-theme-maker.html

[secondhand-obchod.sk]

Thank you for the code regarding the footer, but in general all is ok.

 

The only page where this footer color is missing is on the page when a customer logs in to his account.

 

Here is the footer white. Could you tell me where I find the css for this page ? Is it in one of the modules ?

 

The rest of the site is ok.. just this one page ..

 

And when I am asking anyway.. so maybe you could give me another hint. I am trying to change the color of drop down

 

selectors in the left panel menu into white instead of grey. And make the banners in the left panel "search, newsletter,

 

shop adresses or what ever is written there with a transparent colour.

[secondhand-obchod.sk]

Thanks phantom13, I do not know any css, but this did the trick :

 

body {
  background: #333333 !important;
}

.header-container {
  background: url(../img/bg-theme7.jpg) repeat 50% 0;
}

.columns-container {
  background: url(../img/bg-theme7.jpg) repeat 50% 0 !;
}

#left_column {
background: url(../img/bg-theme7.jpg) repeat 50% 0 !;
body: white !important;
}

[secondhand-obchod.sk]

I missed something... the "quick view" has the same color as the footer now. Any way to exclude that too from

 

the code : ?

 

body {
  background: #333333 !important;
}

 

thx

 

Edited March 24, 2015 by secondhand-obchod.sk (see edit history)

[secondhand-obchod.sk]

Regarding the adding of a new theme to prestashop I wanted to share this link with an article by Nemo, although I must admit that I haven't tried the module myself yet.

 

http://nemops.com/new-color-schemes-prestashop-16-theme/#.VRGphY7jfEY