http://www.kriesi.at/support/topic/changing-style-colors-in-woocommerce-settingsgeneral-wont-save Support Forum - Topic: Changing style colors in WooCommerce Settings>General, won't save! en-US Fri, 24 May 2013 12:55:11 +0000 http://bbpress.org/?v=1.0.2 q http://www.kriesi.at/support/search.php http://www.kriesi.at/support/topic/changing-style-colors-in-woocommerce-settingsgeneral-wont-save#post-86526 Tue, 04 Dec 2012 20:15:13 +0000 Devin 86526@http://www.kriesi.at/support/ <p>Hi Brodersen,</p> <p>Your site is under construction and we are unable to view it with construction protection on.</p> <p>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.</p> <p>Since those are added after the theme styling, it takes those values.</p> <p>If you want to have exact control over all elements of the site, this is the way to go. </p> <p>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::<br /> <pre><code>#top #wrap_all ins { color: #7E9A47; }</code></pre> <p>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:<br /> <pre><code>#top .amount { color: #333; }</code></pre> <p>Since the class is .amount for that item.</p> <p>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.</p> <p>Regards,</p> <p>Devin </p> http://www.kriesi.at/support/topic/changing-style-colors-in-woocommerce-settingsgeneral-wont-save#post-86374 Mon, 03 Dec 2012 20:15:23 +0000 Brodersen 86374@http://www.kriesi.at/support/ <p>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) :( </p> http://www.kriesi.at/support/topic/changing-style-colors-in-woocommerce-settingsgeneral-wont-save#post-86373 Mon, 03 Dec 2012 20:14:20 +0000 Brodersen 86373@http://www.kriesi.at/support/ <p>It makes no sense if I'm the first person who ever had this problem. The WooCommerce style colors are awful.<br /> Maybe I missed something?</p> <p>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).<br /> These colors then splits down and controls a large list of css values, including some coding that controls the gradients of buttons.</p> <p>Here is the CSS for what the WooCommerce 'Primary' color controls:</p> <p>a.button.alt, button.button.alt, input.button.alt, #respond input#submit.alt, #content input.button.alt {<br /> background: #ff2222;<br /> background: -webkit-gradient(linear, left top, left bottom, from(#ff2222), to(#96588a));<br /> background: -webkit-linear-gradient(#ad74a2, #96588a);<br /> background: -moz-linear-gradient(center top, #ff2222 0, #96588a 100%);<br /> background: -moz-gradient(center top, #ff2222 0, #96588a 100%);<br /> border-color: #76456c;<br /> color: #fff;<br /> text-shadow: 0 -1px 0 rgba(0,0,0,0.6)<br /> }</p> <p>a.button.alt:hover, button.button.alt:hover, input.button.alt:hover, #respond input#submit.alt:hover, #content input.button.alt:hover {<br /> background: #ff2222;<br /> background: -webkit-gradient(linear, left top, left bottom, from(#ff2222), to(#864f7b));<br /> background: -webkit-linear-gradient(#FF0000, #864f7b);<br /> background: -moz-linear-gradient(center top, #ff2222 0, #864f7b 100%);<br /> background: -moz-gradient(center top, #ff2222 0, #864f7b 100%);<br /> color: #fff;<br /> text-shadow: 0 -1px 0 rgba(0,0,0,0.6)<br /> }</p> <p>.widget_layered_nav ul li.chosen a {<br /> padding: 0 6px 0 18px;<br /> border: 1px solid #ff2222;<br /> background: #ad74a2 url(../images/cross_white.png) no-repeat 6px center;<br /> box-shadow: inset 0 1px 1px rgba(255,255,255,0.5) #888;<br /> -webkit-box-shadow: inset 0 1px 1px rgba(255,255,255,0.5) #888;<br /> -moz-box-shadow: inset 0 1px 1px rgba(255,255,255,0.5) #888;<br /> color: #fff;<br /> -webkit-border-radius: 3px;<br /> -moz-border-radius: 3px;<br /> border-radius: 3px<br /> }</p> <p>.widget_price_filter .ui-slider .ui-slider-handle {<br /> position: absolute;<br /> z-index: 2;<br /> width: .9em;<br /> height: .9em;<br /> -webkit-border-radius: 1em;<br /> -moz-border-radius: 1em;<br /> border-radius: 1em;<br /> border: 1px solid #150d14;<br /> cursor: pointer;<br /> background: #ff2222;<br /> background: -webkit-gradient(linear, left top, left bottom, from(#ff2222), to(#96588a));<br /> background: -webkit-linear-gradient(#ff2222, #96588a);<br /> background: -moz-linear-gradient(center top, #ff2222 0, #96588a 100%);<br /> background: -moz-gradient(center top, #ff2222 0, #96588a 100%);<br /> outline: 0;<br /> top: -0.3em;<br /> -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.3), inset 0 0 0 1px rgba(255,255,255,0.65);<br /> -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.3), inset 0 0 0 1px rgba(255,255,255,0.65);<br /> box-shadow: 0 1px 2px rgba(0,0,0,0.3), inset 0 0 0 1px rgba(255,255,255,0.65)<br /> }</p> <p>.widget_price_filter .ui-slider .ui-slider-range {<br /> position: absolute;<br /> z-index: 1;<br /> font-size: .7em;<br /> display: block;<br /> border: 0;<br /> background: #ff2222 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAADCAYAAABS3WWCAAAAFUlEQVQIHWP4//9/PRMDA8NzEPEMADLLBU76a5idAAAAAElFTkSuQmCC) top repeat-x;<br /> box-shadow: inset 0 0 0 1px rgba(0,0,0,0.5);<br /> -webkit-box-shadow: inset 0 0 0 1px rgba(0,0,0,0.5);<br /> -moz-box-shadow: inset 0 0 0 1px rgba(0,0,0,0.5);<br /> -webkit-border-radius: 1em;<br /> -moz-border-radius: 1em;<br /> border-radius: 1em<br /> }</p> <p>(+ 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). </p> http://www.kriesi.at/support/topic/changing-style-colors-in-woocommerce-settingsgeneral-wont-save#post-86288 Mon, 03 Dec 2012 11:27:45 +0000 Brodersen 86288@http://www.kriesi.at/support/ <p>One more question. If you look at another page like this:</p> <p><a href="http://www.xotc.dk/testside/smagninger/smagninger/lordag-d-23-feb-kl-19-00-champagnesmagning/" rel="nofollow">http://www.xotc.dk/testside/smagninger/smagninger/lordag-d-23-feb-kl-19-00-champagnesmagning/</a></p> <p>, you can see there are whites boxes, which I also cannot control. This might also be related to WooCommerce?</p> <p>I would like to be able to change these white boxes to a different darker color to match the theme style. </p> http://www.kriesi.at/support/topic/changing-style-colors-in-woocommerce-settingsgeneral-wont-save#post-86281 Mon, 03 Dec 2012 10:53:06 +0000 Brodersen 86281@http://www.kriesi.at/support/ <p>Sure:</p> <p>(please be aware this is still a test site)</p> <p><a href="http://www.xotc.dk/testside/" rel="nofollow">http://www.xotc.dk/testside/</a></p> <p>Again, it is the WooCommerce styles (price colors + color of description text over the prices), that I would like to be in control of.</p> <p>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. </p> http://www.kriesi.at/support/topic/changing-style-colors-in-woocommerce-settingsgeneral-wont-save#post-85449 Mon, 26 Nov 2012 21:40:10 +0000 Ismael 85449@http://www.kriesi.at/support/ <p>Hi,</p> <p>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</p> <pre><code>.amount { color: red; font-size: 20px!important; }</code></pre> <p>Regards,<br /> Ismael </p> http://www.kriesi.at/support/topic/changing-style-colors-in-woocommerce-settingsgeneral-wont-save#post-85445 Mon, 26 Nov 2012 20:35:21 +0000 Brodersen 85445@http://www.kriesi.at/support/ <p>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.</p> <p>How can I control the WooCommerce style font colors?</p> <p>The current color are horrible and doesn't match the other colors of the theme.</p> <p>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. </p> http://www.kriesi.at/support/topic/changing-style-colors-in-woocommerce-settingsgeneral-wont-save#post-84326 Fri, 16 Nov 2012 22:12:09 +0000 Devin 84326@http://www.kriesi.at/support/ <p>Hey Brodersen,</p> <p>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.</p> <p>Regards,</p> <p>Devin </p> http://www.kriesi.at/support/topic/changing-style-colors-in-woocommerce-settingsgeneral-wont-save#post-84225 Fri, 16 Nov 2012 13:10:33 +0000 Brodersen 84225@http://www.kriesi.at/support/ <p>I'm trying to change the style colors for the WooCommerce products displayed on my site, but when I go to WooCommerce&gt;Settings&gt;General, and pick new colors in the Style section, the colors just reset when I click Save Changes.</p> <p>The default colors are:<br /> Primary: #ad74a2<br /> Secondary: #f7f6f7<br /> Highlight: #85ad74<br /> Content: #ffffff<br /> Subtext: #777777</p> <p>I would like to be able to change them so they fit the Propulsion theme better. </p>