How to Change the Big Cartel Buttons

Based on the feedback from my recent survey of readers I decided a Big Cartel css update would be of use to many. So I am working on the big cartel css theme modification and have a simple preview that will give an idea of how to customize your Big Cartel storefront.

Replacing the button images with css

Each of the current buttons on the Sexy theme on Big Cartel is an image replacement. So the css of the button simply puts in a small image. This is great but if you want to change the look of the theme without having the ability to host your images of the button or if you are using a free Big Cartel package you might have less options.

The buttons to replace are the view cart, checkout, send, and add to cart. I almost forgot the checkout and update total buttons from the cart page.

The CSS for your new buttons

I have included the change just for the View Cart link that is on the sidebar. You can see the demo on my playground shop, http://forherfromhim.bigcartel.com/.  I will be using this technique of creating links that appear to be graphic buttons in my free big cartel css modification file to be released in the upcoming days.

Copy and paste the css below the lines

/*============================================================
  Custom Styles - add and override styles below.
============================================================*/

Remember that to change the other links from images to css just find their id and class attributes and reuse this code. Also play with the colors for the gradients.

#minicart .minicart-view {
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#eee));
border: 1px solid #ddd;
border-bottom-left-radius: 3px 3px;
border-bottom-left-radius: 3px 3px;
border-bottom-right-radius: 3px 3px;
border-bottom-right-radius: 3px 3px;
border-top-left-radius: 3px 3px;
border-top-left-radius: 3px 3px;
border-top-right-radius: 3px 3px;
border-top-right-radius: 3px 3px;
cursor: pointer;
display: inline-block;
margin: 0px 2px;
outline: none;
padding: 6px 10px;
text-align: center;
text-decoration: none !important;
vertical-align: baseline;
zoom: 1;
}
 
#minicart .minicart-view:hover {
text-decoration: none;
background: #f1efde;
background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#eee));
background: -moz-linear-gradient(top,  #ddd,  #eee);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ddd', endColorstr='#eee');
}
 
#minicart .minicart-view:active {
position: relative;
top: 1px;
background: #f1efde;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
background: -moz-linear-gradient(top,  #fff,  #eee);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#eee');
}

Feel free to post a link to your store if you have used this css technique.

If you want to be notified of the release of the Free Big Cartel Theme modification please sign up on my email list.