Dark Skin features for Woocommerce product « Support Forum | Kriesi.at

Support Forum » Flashlight

Dark Skin features for Woocommerce product

7 posts from 4 voices

Started 2 months ago by mirzepapa
Latest reply from Ismael
This topic is closed
This topic is resolved

Tags:

mirzepapa
Member

Hi,
i am totally new to WP and came across this beautiful template - wow, cannot tell why i hesitated to switch some projects from joomla to WP.

So, got everything in place with a photograpers site, but woocommerce colors driving me crazy: i want exactly the colors from http://www.kriesi.at/themes/flashlight/shop/donec-quam/ for the Description, Additional Information and Reviews reviews tabs, but there is no effect, no matter what i change, it remains http://oana.muze1.de/shop/advertisment/bild-nr-3/.

first time ever firebug is not that much of help ;-)

Keep up this great work!

Regards Sebastian.

Posted 2 months ago #

xGSTQ
Member

I also noticed these problems using the dark skin in the new v2.1 update and added some CSS to the custom.css

#top div.product .woocommerce-tabs .panel {
    border-color: -moz-use-text-color #333333 #333333!important;

}
#top div.product .woocommerce-tabs ul.tabs {
    background: none repeat scroll 0 0 #333333!important;
    border-color: #333333 #333333 -moz-use-text-color!important;
	display: block!important;
}
#top div.product .woocommerce-tabs ul.tabs li.active a {
    background: none repeat scroll 0 0 #111111!important;
    color: #888888!important;
}

That will style them dark instead of white

Posted 2 months ago #

Dude
Dude

Hey!

Thank you xGSTQ for providing the code and helping us out :)

Best regards,
Peter

Posted 2 months ago #
xGSTQ
Member

Actually it still needs looking at a little, looks fantastic in Firefox, crap in Chrome still ;)

http://www.jamespictures.co.uk/product/peak-district-photography/famous-gate/

Ill try again, but its testing me

Posted 2 months ago #
Dude
Dude

Hey!

Yes, afaik -moz-use-text-color is not supported by all browsers and it's deprecated. I'd rather use: currentcolor - compare http://stackoverflow.com/questions/2283010/what-is-moz-use-text-color and http://css-tricks.com/currentcolor/

Best regards,
Peter

Posted 2 months ago #

xGSTQ
Member

It was actually easier than I thought,

This code works cross browser, I just removed the -moz-use-text-color all together

#top div.product .woocommerce-tabs .panel {
	border-color:#333;
}
#top div.product .woocommerce-tabs ul.tabs {
    background: none repeat scroll 0 0 #333333!important;
	border-color:#333;
	display: block!important;
}
#top div.product .woocommerce-tabs ul.tabs li.active a {
    background: none repeat scroll 0 0 #111111!important;
    color: #888888!important;
}

Posted 1 month ago #