Default Theme highlight colour change / custom.css not working

[madpugger]

Hi,

So I have tried a simple change in theme>assets>css>custom.css to change the background colour, but it makes no difference! Should PS (1.7.7.5) just load custom.css by default as an over-ride?

section#Wrapper {background: grey;}
 

However, what I would really like to do is just modify the tint colour for the default theme that is #2fb5d2 (and obviously the hover colour too). So should I just do a find/replace in the theme.css? Or will this just be replaced on the next PS update?

 

Thanks

[ComGrafPL]

4 hours ago, madpugger said:

Hi,

So I have tried a simple change in theme>assets>css>custom.css to change the background colour, but it makes no difference! Should PS (1.7.7.5) just load custom.css by default as an over-ride?

section#Wrapper {background: grey;}
 

However, what I would really like to do is just modify the tint colour for the default theme that is #2fb5d2 (and obviously the hover colour too). So should I just do a find/replace in the theme.css? Or will this just be replaced on the next PS update?

 

Thanks

It should be in themes/classic/assets/css/theme.css ( checked on 1.7.7.3 )

[madpugger]

On 7/5/2021 at 2:56 PM, ComGrafPL said:

It should be in themes/classic/assets/css/theme.css ( checked on 1.7.7.3 )

Thanks, I know where the theme.css is, but I wanted to use the custom.css as an override. It wasn't working, but It was human error. 

section#Wrapper should have been section#wrapper (small w)!

 

I would still like to know which classes and IDs I need to override in custom.css to change the whole theme tint? i.e all the buttons, link highlights etc. Basically everything that is that kinda turquoise colour in the default theme.

 

TIA

[Crezzur.com]

Why don't you use the inspector which comes with your browser (Firefox, Chrome, ...) to find out where each is located ?

This way you can simply identify which CSS classes are used for specific parts.

 

[madpugger]

6 hours ago, Crezzur said:

Why don't you use the inspector which comes with your browser (Firefox, Chrome, ...) to find out where each is located ?

This way you can simply identify which CSS classes are used for specific parts.

 

Thanks, yes, I do use them, however there are A LOT of classes requiring changing just to change the tint colour of the theme and I thought/hoped someone may have done it before and had the list. I know "themes" are a revenue source, but prestashop has enough bugs without adding 3rd party themes to the mix. I'd have thought a lot of people would change the default theme which is acually on the whole pretty good. I'd like to see a global tint colour picker in PS for the default theme! 

Thanks

[SmartDataSoft]

 

@madpugger I am thinking to made a module for user to easily change the brand color of PrestaShop if you have any list what need for user to change a list will help me to build a module and provide for all

 

Thank you

[madpugger]

Hi, thanks for the reply.

I ended up cheating! I duplicated theme.css as a backup, then did a find and replace on the colours in front end. (the BO i attempted too but the colours are a mess there! they are not all the same!)

I will spend more time on it at some point to just override in custom.css but for now i did:

 

Find Replace in themes>classic>assets>css>theme.css

Buttons / links etc: #2fb5d2 with : #your choice - this is the light blue colour of default theme.

Button hover/focus etc: #2592a9 with : #your choice - this is the colour shown when the mouse is over an item

Discount label:#f39d72  with: #your choice (this changes the orange discount flags, price etc)

 

You can see our site here: https://kmsrailtech.co.uk

I have made some further changes to custom.css to made the menu/header wider and changed the colour of the top bar. For info that is:

#header .container{width:90%;}

section#wrapper {background: rgba(65,0,152,0.2);}
.block-social ul li {background-color: #009b7a;}
#header .header-nav{background: #410098;}
#header .header-nav a {color: #fff;}
#header .header-nav{color: #fff;}
#header .header-nav .blockcart {background: #410098;}
#header .header-nav .cart-preview.active {background: #009b7a;}
#header .header-nav .cart-preview .shopping-cart{color: #fff}
.menu#_desktop_top_menu {margin: 0 auto;
	width: 98%;
	max-width: 100%;
}
.top-menu#top-menu {text-align: center;}

Some of this code changes the width of the nav (i've moved the nav down too) but also it changes the social link colours as they are basically invisible in the default theme! It changes the basket colour for inactive and when there are products in the basket, and it sets the header colour, oh, and the basket icon to white.

The Social Share buttons on the product page are a bit more "fiddly" to fix. You have to find them in the theme.css file (eg. facebook-grey url... and modify the "fill" colour in the svg file to match your theme. I don't think there is a way to do this in CSS.

I hope this helps!

[SmartDataSoft]

@madpugger

You can check your site by copy the css code from back office using this module custom css and js module 

Once you are confident that all work fine. You can copy the css from the file and copy in your theme file and disable the file.

Replay the  color via theme.css some time messed up because some color may be gradiend.

 

 

Thank you

 

[madpugger]

I know this is from a while back...

 

But, can someone explain how to over-ride the error.css for the "sore offline" page?

I am trying to do this in a child theme of classic, rather than by changing the error.css itself in the main theme.

Thanks

[JBW]

13 hours ago, madpugger said:

But, can someone explain how to over-ride the error.css for the "sore offline" page?

I am trying to do this in a child theme of classic, rather than by changing the error.css itself in the main theme.

Set your style in your (child) themes custom.css file.

[madpugger]

5 hours ago, JBW said:

Set your style in your (child) themes custom.css file.

Thanks, but this does not appear to make any difference to the error page (the error.css is used on the "store offline" page).

[JBW]

With "store offline" page you mean Maintainance Mode? There is only error.css. As there is usually not much content on this page you could use inline css to avoid error.css be overwritten by upgrades.

[madpugger]

9 minutes ago, JBW said:

With "store offline" page you mean Maintainance Mode? There is only error.css. As there is usually not much content on this page you could use inline css to avoid error.css be overwritten by upgrades.

OK thanks, it's only to set the size of the image to 100% max and also 100% max in the div, without having to specify this each time someone changes the text/image.

Presumably a child theme is not upgraded anyway during an update, so changing the error.css to suit should be okay?

Oh, and yes, the maint mode enabled. 🙂