Skip to content

Instantly share code, notes, and snippets.

@GLWalker
Created December 16, 2015 18:51
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save GLWalker/22f7caeb09b268548dff to your computer and use it in GitHub Desktop.
Save GLWalker/22f7caeb09b268548dff to your computer and use it in GitHub Desktop.
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
Copy link

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