Changing style colors in WooCommerce Settings>General, won't save! « Support Forum | Kriesi.at

Support Forum » Propulsion

Changing style colors in WooCommerce Settings>General, won't save!

9 posts from 3 voices

Started 6 months ago by Brodersen
Latest reply from Devin
This topic is not resolved

Tags:

Brodersen
Member

I'm trying to change the style colors for the WooCommerce products displayed on my site, but when I go to WooCommerce>Settings>General, and pick new colors in the Style section, the colors just reset when I click Save Changes.

The default colors are:
Primary: #ad74a2
Secondary: #f7f6f7
Highlight: #85ad74
Content: #ffffff
Subtext: #777777

I would like to be able to change them so they fit the Propulsion theme better.

Posted 6 months ago #
Devin
Moderator

Hey Brodersen,

As far as I know the theme doesn't use those settings at all. So changing them shouldn't effect the front end of propulsion.

Regards,

Devin

Posted 6 months ago #
Brodersen
Member

Yes, but that's what leads to my question: How do I control the colors of that plugin? At the moment they seem to change randomly depending on what other colors I use in the theme.

How can I control the WooCommerce style font colors?

The current color are horrible and doesn't match the other colors of the theme.

Currently the price of a product is a green/brown'ish color, and the description of a product is light pink, and since the WooCommerce Style color settings doesn't work, I don't know how I change them to match my Propulsion themed website.

Posted 5 months ago #
Ismael
Moderator
Hi,

Can you give us a link to your website? We would like to inspect to give you a CSS solution. To get you started, try to put this on your custom.css
```
.amount {
color: red;
font-size: 20px!important;
}
```
Regards,
Ismael
Posted 5 months ago #
Brodersen
Member

Sure:

(please be aware this is still a test site)

http://www.xotc.dk/testside/

Again, it is the WooCommerce styles (price colors + color of description text over the prices), that I would like to be in control of.

At the time I'm writing this, they are #7e9a47 and #fba0f9 according to color picker, and I have no idea why they are these colors.

Posted 5 months ago #
Brodersen
Member

One more question. If you look at another page like this:

http://www.xotc.dk/testside/smagninger/smagninger/lordag-d-23-feb-kl-19-00-champagnesmagning/

, you can see there are whites boxes, which I also cannot control. This might also be related to WooCommerce?

I would like to be able to change these white boxes to a different darker color to match the theme style.

Posted 5 months ago #
Brodersen
Member

It makes no sense if I'm the first person who ever had this problem. The WooCommerce style colors are awful.
Maybe I missed something?

WooCommerce got the colors Primary, Secondary, Highlight, Content and Subtext in Settings, which I can't edit (or rather I can't save them after editing).
These colors then splits down and controls a large list of css values, including some coding that controls the gradients of buttons.

Here is the CSS for what the WooCommerce 'Primary' color controls:

a.button.alt, button.button.alt, input.button.alt, #respond input#submit.alt, #content input.button.alt {
background: #ff2222;
background: -webkit-gradient(linear, left top, left bottom, from(#ff2222), to(#96588a));
background: -webkit-linear-gradient(#ad74a2, #96588a);
background: -moz-linear-gradient(center top, #ff2222 0, #96588a 100%);
background: -moz-gradient(center top, #ff2222 0, #96588a 100%);
border-color: #76456c;
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,0.6)
}

a.button.alt:hover, button.button.alt:hover, input.button.alt:hover, #respond input#submit.alt:hover, #content input.button.alt:hover {
background: #ff2222;
background: -webkit-gradient(linear, left top, left bottom, from(#ff2222), to(#864f7b));
background: -webkit-linear-gradient(#FF0000, #864f7b);
background: -moz-linear-gradient(center top, #ff2222 0, #864f7b 100%);
background: -moz-gradient(center top, #ff2222 0, #864f7b 100%);
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,0.6)
}

.widget_layered_nav ul li.chosen a {
padding: 0 6px 0 18px;
border: 1px solid #ff2222;
background: #ad74a2 url(../images/cross_white.png) no-repeat 6px center;
box-shadow: inset 0 1px 1px rgba(255,255,255,0.5) #888;
-webkit-box-shadow: inset 0 1px 1px rgba(255,255,255,0.5) #888;
-moz-box-shadow: inset 0 1px 1px rgba(255,255,255,0.5) #888;
color: #fff;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px
}

.widget_price_filter .ui-slider .ui-slider-handle {
position: absolute;
z-index: 2;
width: .9em;
height: .9em;
-webkit-border-radius: 1em;
-moz-border-radius: 1em;
border-radius: 1em;
border: 1px solid #150d14;
cursor: pointer;
background: #ff2222;
background: -webkit-gradient(linear, left top, left bottom, from(#ff2222), to(#96588a));
background: -webkit-linear-gradient(#ff2222, #96588a);
background: -moz-linear-gradient(center top, #ff2222 0, #96588a 100%);
background: -moz-gradient(center top, #ff2222 0, #96588a 100%);
outline: 0;
top: -0.3em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.3), inset 0 0 0 1px rgba(255,255,255,0.65);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.3), inset 0 0 0 1px rgba(255,255,255,0.65);
box-shadow: 0 1px 2px rgba(0,0,0,0.3), inset 0 0 0 1px rgba(255,255,255,0.65)
}

.widget_price_filter .ui-slider .ui-slider-range {
position: absolute;
z-index: 1;
font-size: .7em;
display: block;
border: 0;
background: #ff2222 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAADCAYAAABS3WWCAAAAFUlEQVQIHWP4//9/PRMDA8NzEPEMADLLBU76a5idAAAAAElFTkSuQmCC) top repeat-x;
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 0 0 0 1px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0 0 0 1px rgba(0,0,0,0.5);
-webkit-border-radius: 1em;
-moz-border-radius: 1em;
border-radius: 1em
}

(+ I have to make a gradient as well, which means LOTS of copy/pasting each time I want to try a new color to match my theme).

Posted 5 months ago #
Brodersen
Member

I hope you wont give up on me, because I can't find any help on google either (except one other person with the same problem who also didn't get help) :(

Posted 5 months ago #
Devin
Moderator
Hi Brodersen,

Your site is under construction and we are unable to view it with construction protection on.

Typically, the way you edit specific items on a theme is using something like Firebug for Firefox or Chrome/Safari's Inspect Element feature. You identify the class that has the style and then you can add that class to the custom.css file in your css folder or the quick css in the styling tab of the theme settings.

Since those are added after the theme styling, it takes those values.

If you want to have exact control over all elements of the site, this is the way to go.

Example: Changing the color of the price in the shop/catalog view. I inspect the price and see that it gets its color from the css::
```
#top #wrap_all ins {
color: #7E9A47;
}
```
Adding that to your custom.css or Quick CSS and changing the hex value will change the color for all items inside the ins tag. You could also use:
```
#top .amount {
color: #333;
}
```
Since the class is .amount for that item.

If you can make your site viewable live, and can point to specific items you are having issues with we can try and help provide some additional css to modify it. If you are looking to do a lot of customization and modifications I would definitely recommend looking into a freelance developer. If you have a detailed list of everything you want changed, it should only take a developer comfortable with css a few hours to make the changes.

Regards,

Devin
Posted 5 months ago #