How to change the blue color of the Classic theme

[brice36]

Hi all,

I'd like to change the blue color of the Classic theme - please see the pciture attached.

What would be the best way to do it?

Many thanks

 

[jgamio]

The easy way depends on how much you know about building the theme

 

if these is your case ( I dont sure if from the zip you dont load came these data but is on the github)

inside the theme you see a _dev/css/partials/_variables.scss

$gray-darker: #232323;
$gray: #7A7A7A;
$gray-light: #F1F1F1;
$gray-lighter: #f6f6f6;
$brand-primary: #2fb5d2;
$brand-secondary: #f39d72;
$brand-success: #4cbb6c;
$brand-warning: #ff9a52;
$brand-danger: #ff4c4c;
$label-color: $gray-darker;
$btn-primary-color: #fff;
$btn-primary-bg: $brand-primary;
$btn-primary-border: transparent;
$btn-secondary-color: $gray-darker;
$btn-secondary-bg: $gray-lighter;
$btn-secondary-border: transparent;
$btn-border-radius: 0;
$input-border-color: rgba(0, 0, 0, 0.25);
$headings-font-weight: 700;
$tooltip-bg: $brand-danger;
$border-radius: 0;
$extra-small-space: 0.3125rem;
$small-space: 0.625rem;
$medium-space: 1.25rem;
$large-space: 1.875rem;
$extra-large-space: 2.5rem;
$warning: #FF9A52;
$warning-hover: #FDE7BB;
$alert-warning-bg: rgba(255,154,82,0.3);
$alert-warning-border: $warning;
$alert-warning-text: $gray-darker;
$btn-warning-bg: $warning;
$btn-warning-color: white;
$btn-tertiary-color: #6C868E;
$btn-tertiary-hover: #BBCDD2;

you changes your colors then need compile the file to create the new theme.css ( you are going to need use node ) that it

 

if you no able to do these you are going to go

 

assets/css/theme.css and look each time the color show to change for your colors

you should maybe make the custom changes on the custom.css

 

I havent try yet but you can create a child theme and make the changes

 

 

 

 

 

 

 

 

 

 

 

[ltty]

Hola buenas tardes, por favor  me podrían decir cual es la hoja de estilos principal de prestashop 1.7 por lo que he visto es la llamada  theme.css pero no realiza los cambios, otros dicen que es la custom.css más sin embargo la segunda esta en blanco ambas ubicadas en Tienda\themes\classic\assets\css. ayuda por favor...

[jgamio]

The theme.css is the main css, The custom.css if to override the style without change the main by default custom.css if empty because there go your changes.

Maybe you need to clear the cache to be able to see the changes

 

La theme.css es la principal , la custom.css es para realizar cambios de la principal sin modificarla, por esi esta vacia porque al principio no has realizado ningun cambio

Tal vez los cambios no se reflejan porque tienes el cache activado, prueba borrando el cache primero antes de ver si refleja los cambios

 

[brice36]

If I understand properly, I have to go to Theme.css and change the color one by one and check the result on the screen.

When/if I find the color to change, I should use the Custom.css

Is this correct?

[TristanBellosta]

Here's a css file overriding all rules implying the default blue and hover blue.

You just have to change colors on lines 2-3 (in my example blue becomes some red) and copy / paste to your custom.css in theme folder.

Hope it helps !

Based on PS 1.7.7..4

prestashop-change-color.css

[NixxxoN]

On 7/30/2021 at 11:22 AM, TristanBellosta said:

Here's a css file overriding all rules implying the default blue and hover blue.

You just have to change colors on lines 2-3 (in my example blue becomes some red) and copy / paste to your custom.css in theme folder.

Hope it helps !

Based on PS 1.7.7..4

prestashop-change-color.css 4.6 kB · 33 downloads

Hello, I know it's a very old post but... I tried your solution and it works on 1.7.8.7, however, when I try to place a custom color instead of those reds, nothing changes.... Why?? And yes I tried clearing cache, no change still. Those things really drive me crazy.

Edited November 23, 2022 by NixxxoN (see edit history)

[ComGrafPL]

21 godzin temu, NixxxoN napisał:

Hello, I know it's a very old post but... I tried your solution and it works on 1.7.8.7, however, when I try to place a custom color instead of those reds, nothing changes.... Why?? And yes I tried clearing cache, no change still. Those things really drive me crazy.

Share url and which part you want to change.

[rthakur]

20 hours ago, NixxxoN said:

Hello, I know it's a very old post but... I tried your solution and it works on 1.7.8.7, however, when I try to place a custom color instead of those reds, nothing changes.... Why?? And yes I tried clearing cache, no change still. Those things really drive me crazy.

You can create a custom.css under themes/classic/assets/css/ 
After creating css clear cache then refresh your site
Then you can write own custom css this is working fine i have already done this. 

[NixxxoN]

11 hours ago, ComGrafPL said:

Share url and which part you want to change.

 

11 hours ago, rthakur said:

You can create a custom.css under themes/classic/assets/css/ 
After creating css clear cache then refresh your site
Then you can write own custom css this is working fine i have already done this. 

 

Nevermind guys, It was something about the browser cache. Already solved. Thanks.

Edited November 24, 2022 by NixxxoN (see edit history)

[madpugger]

On 7/30/2021 at 10:22 AM, TristanBellosta said:

Here's a css file overriding all rules implying the default blue and hover blue.

You just have to change colors on lines 2-3 (in my example blue becomes some red) and copy / paste to your custom.css in theme folder.

Hope it helps !

Based on PS 1.7.7..4

prestashop-change-color.css 4.6 kB · 46 downloads

Hi all, I know this is from a while back, but is there a version of this custom.css or a child theme of classic anywhere that anyone has already done that just allows us to customise the default theme colours by setting the variable?

Surely someone has already done this and wouldn't mind sharing!

[NixxxoN]

On 7/30/2021 at 11:22 AM, TristanBellosta said:

Here's a css file overriding all rules implying the default blue and hover blue.

You just have to change colors on lines 2-3 (in my example blue becomes some red) and copy / paste to your custom.css in theme folder.

Hope it helps !

Based on PS 1.7.7..4

prestashop-change-color.css 4.6 kB · 56 downloads

 

Hey there, now I remember you posted this solution I used (Thanks for that)

But there is something that the color is not ideal.

www.sansluthier.com the social network buttons in the top bar are light grey almost non visible, how can I change their color? I tried a lot of things, nothing worked.

 

Thanks a lot again!