Created
December 16, 2015 18:51
-
-
Save GLWalker/22f7caeb09b268548dff to your computer and use it in GitHub Desktop.
Woocommerce CSS Color Breakdown
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* ========================================================================== | |
Snippet Name: WooCommerce Colors | |
Description: This css is all woocommerce things that are colored, text, fonts, buttons, borders, you name it. Use to aid in design. | |
Author: GL Walker | |
Author URI: http://wsfive.com | |
========================================================================== */ | |
.woocommerce form .form-row.woocommerce-invalid .select2-container, .woocommerce form .form-row.woocommerce-invalid input.input-text, .woocommerce form .form-row.woocommerce-invalid select { | |
border-color: #a00 | |
} | |
.woocommerce form .form-row.woocommerce-validated .select2-container, .woocommerce form .form-row.woocommerce-validated input.input-text, .woocommerce form .form-row.woocommerce-validated select { | |
border-color: #69bf29 | |
} | |
.button, | |
a.button, | |
button, | |
html input[type="button"], | |
input[type="reset"], | |
input[type="submit"] { | |
color: rgba(51,51,51,1); | |
border-color: rgba(51,51,51,0.7); | |
background-color: #cdd0d7; | |
text-shadow: rgb(255,255,255) 0px 0px 3px; | |
} | |
.button:hover, | |
a.button:hover, | |
button:hover, | |
html input[type="button"]:hover, | |
input[type="reset"]:hover, | |
input[type="submit"]:hover { | |
box-shadow: inset rgba(255,255,255,1) 0px 1px 1px; | |
color: #fff; | |
text-shadow: none; | |
border-color: rgba(0,0,0,0.3); | |
background-color: transparent; | |
} | |
.button:focus, | |
a.button:focus, | |
button:focus, | |
html input[type="button"]:focus, | |
input[type="reset"]:focus, | |
input[type="submit"]:focus, | |
.button:active, | |
a.button:active, | |
button:active, | |
html input[type="button"]:active, | |
input[type="reset"]:active, | |
input[type="submit"]:active { | |
color: #ffffff; | |
box-shadow: inset rgba(255,255,255,0.4) 0px -30px 15px, | |
inset rgba(255,255,255,0.2) -25px 25px 10px, | |
inset rgba(255,255,255,1) 0px 2px 1px, | |
rgba(0,0,0,0.4) 0px 2px 3px; | |
} | |
.button.alt { | |
color: #f71111; | |
border-width:2px; | |
border-color: #f71111; | |
background: rgba(51,51,51,1); | |
text-shadow: none; | |
box-shadow: none; | |
} | |
.button.alt:hover { | |
background-color: #f71111; | |
color: rgba(51,51,51,1); | |
text-shadow: none; | |
box-shadow: none; | |
} | |
.button.alt:focus, .button.alt:active { | |
} | |
p.demo_store { | |
background-color: #a46497; | |
color: #fff; | |
box-shadow: 0 1px 1em rgba(0,0,0,.2) | |
} | |
p.demo_store a { color: #fff } | |
/*woocommerce alert blocks */ | |
.woocommerce .woocommerce-error, | |
.woocommerce .woocommerce-info, | |
.woocommerce .woocommerce-message { | |
background-color: #f7f6f7; | |
color: #515151; | |
border-top-color: #a46497; | |
} | |
.woocommerce .woocommerce-message { border-top-color: #8fae1b } | |
.woocommerce .woocommerce-message:before { | |
color: #8fae1b | |
} | |
.woocommerce .woocommerce-info { border-top-color: #1e85be } | |
.woocommerce .woocommerce-info:before { color: #1e85be } | |
.woocommerce .woocommerce-error { border-top-color: #b81c23 } | |
.woocommerce .woocommerce-error:before { | |
color: #b81c23 | |
} | |
.woocommerce small.note { | |
color: #777; | |
} | |
.woocommerce .woocommerce-breadcrumb { | |
color: #777 | |
} | |
.woocommerce .woocommerce-breadcrumb a { color: #777 } | |
.woocommerce .product p.price, | |
.woocommerce .product span.price { | |
color: #77a464; | |
} | |
.woocommerce .product .stock { color: #77a464 } | |
.woocommerce .product .out-of-stock { color: red } | |
.woocommerce .product .woocommerce-tabs ul.tabs li { | |
border-color: #d3ced2; | |
background-color: #ebe9eb; | |
} | |
.woocommerce .product .woocommerce-tabs ul.tabs li a { | |
color: #515151; | |
} | |
.woocommerce .product .woocommerce-tabs ul.tabs li a:hover { | |
color: #6b6b6b | |
} | |
.woocommerce .product .woocommerce-tabs ul.tabs li.active { | |
background: #fff; | |
border-bottom-color: #fff | |
} | |
woocommerce .product .woocommerce-tabs ul.tabs li.active:before { box-shadow: 2px 2px 0 #fff } | |
.woocommerce .product .woocommerce-tabs ul.tabs li.active:after { box-shadow: -2px 2px 0 #fff } | |
.woocommerce .product .woocommerce-tabs ul.tabs li:after, | |
.woocommerce .product .woocommerce-tabs ul.tabs li:before { | |
border-color: #d3ced2; | |
} | |
.woocommerce .product .woocommerce-tabs ul.tabs li:before { | |
box-shadow: 2px 2px 0 #ebe9eb | |
} | |
.woocommerce .product .woocommerce-tabs ul.tabs li:after { | |
box-shadow: -2px 2px 0 #ebe9eb | |
} | |
.woocommerce .product .woocommerce-tabs ul.tabs:before { | |
border-bottom-color: #d3ced2; | |
} | |
.woocommerce span.onsale { | |
background-color: #77a464; | |
color: #fff; | |
} | |
.woocommerce ul.products li.product .price { | |
color: #77a464; | |
} | |
.woocommerce ul.products li.product .price .from { | |
color: rgba(132,132,132,.5) | |
} | |
.woocommerce nav.woocommerce-pagination ul { | |
border-color: #d3ced2; | |
} | |
.woocommerce nav.woocommerce-pagination ul li { | |
border-right-color: #d3ced2; | |
} | |
.woocommerce nav.woocommerce-pagination ul li a:focus, | |
.woocommerce nav.woocommerce-pagination ul li a:hover, | |
.woocommerce nav.woocommerce-pagination ul li span.current { | |
background: #ebe9eb; | |
color: #8a7e88 | |
} | |
.woocommerce ul.products li.product a { } | |
.woocommerce table.shop_attributes td, | |
.woocommerce table.shop_attributes th { | |
border-bottom-color: rgba(0,0,0,.1); | |
} | |
.woocommerce table.shop_attributes { | |
border: 0; | |
border-top-color: rgba(0,0,0,.1); | |
} | |
.woocommerce table.shop_attributes .alt th { background: rgba(0,0,0,.025) } | |
.woocommerce table.shop_table { | |
border-color: rgba(0,0,0,.1); | |
} | |
.woocommerce table.shop_table td { | |
border-top-color: rgba(0,0,0,.1); | |
} | |
.woocommerce table.shop_table tbody th, | |
.woocommerce table.shop_table tfoot td, | |
.woocommerce table.shop_table tfoot th { | |
border-top-color: rgba(0,0,0,.1) | |
} | |
.woocommerce ul.cart_list li dl, | |
.woocommerce ul.product_list_widget li dl { | |
border-left-color:rgba(0,0,0,.1) | |
} | |
.woocommerce.widget_shopping_cart .total { | |
border-top-color: #ebe9eb; | |
} | |
.woocommerce .order_details li { | |
border-right-color: #d3ced2; | |
} | |
.woocommerce .widget_layered_nav ul li.chosen a:before, | |
.woocommerce .widget_layered_nav_filters ul li a:before { | |
color: #a00; | |
} | |
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle { | |
background-color: #a46497; | |
} | |
.woocommerce .widget_price_filter .ui-slider .ui-slider-range { | |
background-color: #a46497 | |
} | |
.woocommerce .widget_price_filter .price_slider_wrapper .ui-widget-content { | |
background-color: #602053; | |
} | |
.woocommerce-cart .cart-collaterals .cart_totals p small { | |
color: #777; | |
} | |
.woocommerce-cart .cart-collaterals .cart_totals table small { color: #777 } | |
.woocommerce-cart .cart-collaterals .cart_totals .discount td { color: #77a464 } | |
.woocommerce-cart .cart-collaterals .cart_totals tr td, | |
.woocommerce-cart .cart-collaterals .cart_totals tr th { border-top-color: #ebe9eb } | |
.woocommerce-checkout .checkout .create-account small { | |
color: #777; | |
} | |
.woocommerce-checkout #payment { | |
background: #ebe9eb; | |
} | |
.woocommerce-checkout #payment ul.payment_methods { | |
border-bottom-color: #d3ced2; | |
} | |
.woocommerce-checkout #payment .payment_box { | |
background-color: #dfdcde; | |
color: #515151 | |
} | |
.woocommerce-checkout #payment .payment_box span.help { | |
color: #777; | |
} | |
.woocommerce-checkout #payment .payment_box:before { | |
border: 1em solid #dfdcde; | |
border-right-color: transparent; | |
border-left-color: transparent; | |
border-top-color: transparent; | |
} | |
.woocommerce .star-rating:before, .woocommerce p.stars a { | |
color: #999; | |
} | |
.woocommerce .star-rating span:before, .woocommerce p.stars a:hover, .woocommerce p.stars a.active { | |
color: #F90; | |
} | |
.woocommerce p.stars [class^="star-"], .woocommerce p.stars [class*=" star-"] { | |
border-right-color: #ccc | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
THANK YOU!!!!!!!!!!!!!