Instantly share code, notes, and snippets.

Embed
What would you like to do?
Woocommerce CSS Color Breakdown
/* ==========================================================================
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
}
@GoosePT

This comment has been minimized.

GoosePT commented Jun 21, 2017

THANK YOU!!!!!!!!!!!!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment