Cart Styling for Older Customers

Last Updated on Jan 30, 2013
If you were with Virb prior to May 2012 and made advanced CSS changes to your site, there may be some CSS missing that affects your Big Cartel cart styling. To fix the issue, we've assembled the CSS you need in this article. Find your Theme below, copy the code, and add it to your Theme CSS area. We're sorry for the trouble.

If you joined after May 2012 or haven't touched your Advanced Code area, then your cart will is ready to go!


 
Apollo
 .cart-widget {
  width: 75px;
  text-align: center;
  position: fixed;
  top: 100px;
  right: 0;
  z-index: 2000;
}

  .cart-widget .cart {
    background: <virb get="customize.colors.line_page" />;
    font-family: <virb get="customize.fonts.body_family" />;
    font-size: <virb get="customize.fonts.body_size" />;
    color: <virb get="customize.colors.text" />;
    padding: 10px;
  }

    .cart-widget .cart span {
      display: block;
    }

    .cart-widget .cart span.label {
      font-size: .65em;
      text-transform: uppercase;
    }

    .cart-widget .cart span.cart-total {
      font-weight: bold;
    }

  .cart-widget .checkout {
    background: <virb get="customize.colors.link_hover" />;
    padding: 5px 10px;
    text-transform: uppercase;
    color: <virb get="customize.colors.background_page" />;
    font-size: 9px;
    display: block;
    margin-top: 1px;
    -webkit-transition: all .2s linear;
       -moz-transition: all .2s linear;
         -o-transition: all .2s linear;
            transition: all .2s linear;
  }
    .cart-widget .checkout:hover {
      background: <virb get="customize.colors.link" />;
    } 
 
 
 
Atlantis
 .cart-widget {
  width: 75px;
  text-align: center;
  position: fixed;
  right: 0;
  top: 245px;
  z-index: 2000;
}


  .cart-widget .cart {
    background: <virb get="customize.colors.background_content" />;
    font-family: <virb get="customize.fonts.body_family" />;
    font-size: <virb get="customize.fonts.body_size" />;
    color: <virb get="customize.colors.text" />;
    padding: 10px;
  }
    .cart-widget .cart a {
      text-decoration: none;
    }
      .cart-widget .cart a:hover {
        text-decoration: underline;
      }
    .cart-widget .cart span {
      display: block;
    }
    .cart-widget .cart span.label {
      font-size: .5em;
      text-transform: uppercase;
    }
    .cart-widget .cart span.cart-total {
      font-size: .9em;
    }

  .cart-widget .checkout {
    background: <virb get="customize.colors.text" />;
    padding: 5px 10px;
    text-transform: uppercase;
    color: <virb get="customize.colors.background_page" />;
    font-size: 9px;
    display: block;
    margin-top: 1px;
    text-decoration: none;
  }
    .cart-widget .checkout:hover {
      text-decoration: underline;
    }
 
 
 
Copenhagen
 .cart-widget {
  width: 75px;
  text-align: center;
  position: fixed;
  right: 0;
  top: 245px;
  z-index: 2000;
}

  .cart-widget .cart {
    background: #eee;
    font-family: <virb get="customize.fonts.body_family" />;
    font-size: <virb get="customize.fonts.body_size" />;
    color: <virb get="customize.colors.text" />;
    padding: 10px;
  }

    .cart-widget .cart a {
      color: <virb get="customize.colors.text" />;
    }
      .cart-widget .cart a:hover {
        color:  <virb get="customize.colors.nav_hover" />;
      }
    .cart-widget .cart span {
      display: block;
    }
    .cart-widget .cart span.label {
      font-size: .75em;
      line-height: 2em;
      text-transform: uppercase;
    }
    .cart-widget .cart span.cart-total {
      font-weight: bold;
    }

  .cart-widget .checkout {
    background: <virb get="customize.colors.nav_hover" />;
    padding: 5px 10px;
    text-transform: uppercase;
    color: <virb get="customize.colors.background" />;
    font-size: 9px;
    display: block;
    margin-top: 1px;
    text-decoration: none;
    -webkit-transition: all .2s linear;
       -moz-transition: all .2s linear;
         -o-transition: all .2s linear;
            transition: all .2s linear;
  }
    .cart-widget .checkout:hover {
      background: <virb get="customize.colors.link_hover" />;
    } 
 
 
 
Grace
 .cart-widget {
  width: 75px;
  text-align: center;
  position: fixed;
  top: 35px;
  right: 0;
  z-index: 2000;
}

  .cart-widget .cart {
    background: <virb get="customize.colors.border" />;
    font-family: <virb get="customize.fonts.body_family" />;
    font-size: <virb get="customize.fonts.body_size" />;
    color: <virb get="customize.colors.link" />;
    padding: 10px;
  }
    .cart-widget .cart span {
      display: block;
    }
    .cart-widget .cart span.label {
      font-size: .65em;
      line-height: 1em;
      margin: 5px 0;
      text-transform: uppercase;
    }
    .cart-widget .cart span.cart-total {
      font-weight: bold;
    }

  .cart-widget .checkout {
    background: <virb get="customize.colors.link" />;
    padding: 5px 10px;
    text-transform: uppercase;
    color: <virb get="customize.colors.background" />;
    font-size: 9px;
    display: block;
    margin-top: 1px;
    text-decoration: none;
    -webkit-transition: all .2s linear;
       -moz-transition: all .2s linear;
         -o-transition: all .2s linear;
            transition: all .2s linear;
  }
    .cart-widget .checkout:hover {
      background: <virb get="customize.colors.link_hover" />;
    } 
 
 
 
HD
 .cart-widget {
  width: 75px;
  text-align: center;
  position: fixed;
  top: 240px;
  left: 0;
}
  .cart-widget .cart {
    background: <virb get="customize.colors.accent" />;
    font-family: <virb get="customize.fonts.body_family" />;
    color: <virb get="customize.colors.text" />;
    padding: 10px;
  }
    .cart-widget .cart a {
      color: <virb get="customize.colors.text" />;
      text-decoration: none;
      line-height: 18px;
    }
      .cart-widget .cart a:hover {
        text-decoration: underline;
      }
    .cart-widget .cart span {
      display: block;
    }
    .cart-widget .cart span.label {
      font-size: 8px;
      text-transform: uppercase;
    }
    .cart-widget .cart span.cart-total {
      font-weight: bold;
      font-size: 12px;
    }

  .cart-widget .checkout {
    background: <virb get="customize.colors.highlight" />;
    padding: 5px 10px;
    text-transform: uppercase;
    color: <virb get="customize.colors.link" />;
    font-size: 9px;
    display: block;
    margin-top: 1px;
    text-decoration: none;
  }
    .cart-widget .checkout:hover {
      text-decoration: underline;
    } 
 
 
 
Manhattan
 .cart-widget {
  width: 75px;
  text-align: center;
  position: fixed;
  top: 245px;
  right: 0;
  z-index: 2000;
  border: 1px solid <virb get="customize.colors.background" />;
  border-right: none;
}

  .cart-widget .cart {
    background: <virb get="customize.colors.header_bg" />;
    font-family: <virb get="customize.fonts.body_family" />;
    font-size: <virb get="customize.fonts.body_size" />;
    color: <virb get="customize.colors.text" />;
    padding: 10px;
  }
    .cart-widget .cart span {
      display: block;
    }
    .cart-widget .cart span.label {
      font-size: .65em;
      margin: 5px 0;
      text-transform: uppercase;
    }
    .cart-widget .cart span.cart-total {
      font-weight: bold;
    }

  .cart-widget .checkout {
    background: <virb get="customize.colors.link" />;
    padding: 5px 10px;
    text-transform: uppercase;
    color: <virb get="customize.colors.background" />;
    font-size: 9px;
    display: block;
    margin-top: 1px;
    -webkit-transition: all .2s linear;
       -moz-transition: all .2s linear;
         -o-transition: all .2s linear;
            transition: all .2s linear;
  }
    .cart-widget .checkout:hover {
      background: <virb get="customize.colors.link_hover" />;
    } 
 
 
 
Milan
 .cart-widget {
  width: 75px;
  text-align: center;
  position: fixed;
  top: 35px;
  right: 0;
  z-index: 2000;
}

  .cart-widget .cart {
    background: rgba(40,40,40,0.10);
    font-family: <virb get="customize.fonts.body_family" />;
    font-size: <virb get="customize.fonts.body_size" />;
    color: <virb get="customize.colors.text" />;
    padding: 10px 5px;
  }
    .cart-widget .cart span {
      display: block;
    }
    .cart-widget .cart span.label {
      font-size: .75em;
      font-style: italic;
      margin: 5px 0;
      text-transform: uppercase;
    }
    .cart-widget .cart span.cart-total {
      font-weight: bold;
    }
  
  .cart-widget .checkout {
    background: <virb get="customize.colors.link" />;
    padding: 5px 10px;
    text-transform: uppercase;
    color: <virb get="customize.colors.background" />;
    font-size: 9px;
    display: block;
    margin-top: 1px;
    -webkit-transition: all .2s linear;
       -moz-transition: all .2s linear;
         -o-transition: all .2s linear;
            transition: all .2s linear;
  }
    .cart-widget .checkout:hover {
      background: <virb get="customize.colors.border" />;
    } 
 
 
 
Montreal
 .cart-widget {
  width: 75px;
  text-align: center;
  position: fixed;
  top: 35px;
  right: 0;
  z-index: 2000;
}

  .cart-widget .cart {
    background: <virb get="customize.colors.line_page" />;
    font-family: <virb get="customize.fonts.body_family" />;
    font-size: <virb get="customize.fonts.body_size" />;
    color: <virb get="customize.colors.heading" />;
    padding: 10px 5px;
  }
    .cart-widget .cart a {
      color: <virb get="customize.colors.heading" />;
    }
      .cart-widget .cart a:hover {
        color: <virb get="customize.colors.link" />;
      }
    .cart-widget .cart span {
      display: block;
    }
    .cart-widget .cart span.label {
      font-size: .65em;
      margin: 5px 0;
      text-transform: uppercase;
    }
    .cart-widget .cart span.cart-total {
      font-weight: bold;
    }
  
  .cart-widget .checkout {
    background: <virb get="customize.colors.link" />;
    padding: 5px 10px;
    text-transform: uppercase;
    color: #fff;
    font-size: 9px;
    display: block;
    margin-top: 1px;
    -webkit-transition: all .2s linear;
       -moz-transition: all .2s linear;
         -o-transition: all .2s linear;
            transition: all .2s linear;
  }
    .cart-widget .checkout:hover {
      background: <virb get="customize.colors.link_hover" />;
    } 
 
 
 
Nautilus
 .cart-widget {
  width: 75px;
  text-align: center;
  position: fixed;
  right: 0;
  top: 150px;
  z-index: 2000;
  border: 1px solid <virb get="customize.colors.content_background" />;
}

  .cart-widget .cart {
    background: <virb get="customize.colors.borders_alt" />;
    font-family: <virb get="customize.fonts.body_family" />;
    font-size: <virb get="customize.fonts.body_size" />;
    color: <virb get="customize.colors.text" />;
    padding: 10px 5px;
  }
    .cart-widget .cart span {
      display: block;
    }
    .cart-widget .cart span.label {
      font-size: .5em;
      margin: 5px 0;
      text-transform: uppercase;
    }
    .cart-widget .cart span.cart-total {
      font-weight: bold;
    }
  
  .cart-widget .checkout {
    background: <virb get="customize.colors.links" />;
    padding: 5px 10px;
    text-transform: uppercase;
    color: <virb get="customize.colors.content_background" />;
    font-size: 9px;
    display: block;
    margin-top: 1px;
  }
    .cart-widget .checkout:hover {
      text-decoration: underline;
    }
 
 
 
Oxford
 .cart-widget {
  width: 75px;
  text-align: center;
  position: fixed;
  top: 245px;
  right: 0;
  z-index: 2000;
}

  .cart-widget .cart {
    background: <virb get="customize.colors.sidebar_bg" />;
    font-family: <virb get="customize.fonts.body_family" />;
    font-size: <virb get="customize.fonts.body_size" />;
    color: <virb get="customize.colors.text" />;
    padding: 10px 5px;
  }
    .cart-widget .cart span {
      display: block;
    }
    .cart-widget .cart span.label {
      font-size: .65em;
      margin: 5px 0;
      text-transform: uppercase;
    }
    .cart-widget .cart span.cart-total {
      font-weight: bold;
    }
  
  .cart-widget .checkout {
    background: <virb get="customize.colors.link" />;
    padding: 5px 10px;
    text-transform: uppercase;
    color: <virb get="customize.colors.content_bg" />;
    font-size: 9px;
    display: block;
    margin-top: 1px;
    -webkit-transition: all .2s linear;
       -moz-transition: all .2s linear;
         -o-transition: all .2s linear;
            transition: all .2s linear;
  }
    .cart-widget .checkout:hover {
      background: <virb get="customize.colors.link_hover" />;
    } 
 
 
 
Pearl
 .cart-widget {
  width: 75px;
  text-align: center;
  position: fixed;
  top: 150px;
  right: 0;
  z-index: 2000;
  border: 1px solid <virb get="customize.colors.content_background" />;
  border-right: none;
}

  .cart-widget .cart {
    background: <virb get="customize.colors.borders_alt" />;
    font-family: <virb get="customize.fonts.body_family" />;
    font-size: <virb get="customize.fonts.body_size" />;
    color: <virb get="customize.colors.text" />;
    padding: 10px 5px;
  }
    .cart-widget .cart a {
      color: <virb get="customize.colors.text" />;
      text-decoration: none;
    }
      .cart-widget .cart a:hover {
        text-decoration: underline;
      }
    .cart-widget .cart span {
      display: block;
    }
    .cart-widget .cart span.label {
      font-size: .5em;
      margin: 5px 0;
      text-transform: uppercase;
    }
    .cart-widget .cart span.cart-total {
      font-weight: bold;
    }
  
  .cart-widget .checkout {
    background: <virb get="customize.colors.links" />;
    padding: 5px 10px;
    text-transform: uppercase;
    color: <virb get="customize.colors.content_background" />;
    font-size: 9px;
    display: block;
    margin-top: 1px;
  }
    .cart-widget .checkout:hover {
      text-decoration: underline;
    } 
 
 
 
Promo
 .cart-widget {
  width: 75px;
  text-align: center;
  position: fixed;
  top: 35px;
  right: 0;
  z-index: 2000;
}

  .cart-widget .cart {
    background: #eaeaec; /*old browsers*/
    background: rgba(255, 255, 255, .85);
    font-family: <virb get="customize.fonts.body_family" />;
    font-size: <virb get="customize.fonts.body_size" />;
    color: <virb get="customize.colors.text" />;
    padding: 10px 5px;
  }
    .cart-widget .cart a {
      color: <virb get="customize.colors.text" />;
      text-decoration: none;
    }
      .cart-widget .cart a:hover {
        text-decoration: underline;
      }
    .cart-widget .cart span {
      display: block;
    }
    .cart-widget .cart span.label {
      font-size: 1em;
      line-height: 1em;
      margin: 5px 0;
      text-transform: uppercase;
    }
    .cart-widget .cart span.cart-total {
      font-weight: bold;
      font-size: 1.2em;
    }

  .cart-widget .checkout {
    background: <virb get="customize.colors.link" />;
    padding: 5px 10px;
    text-transform: uppercase;
    color: <virb get="customize.colors.section" />;
    font-size: 9px;
    display: block;
    margin-top: 1px;
    -webkit-transition: all .2s linear;
       -moz-transition: all .2s linear;
         -o-transition: all .2s linear;
            transition: all .2s linear;
  }
    .cart-widget .checkout:hover {
      text-decoration: underline;
    } 
 
 
 
Spotlight
 .cart-widget {
  width: 75px;
  text-align: center;
  position: fixed;
  right: 0;
  top: 100px;
  z-index: 2000;
}

  .cart-widget .cart {
    background: <virb get="customize.colors.container" />;
    font-family: <virb get="customize.fonts.body_family" />;
    color: <virb get="customize.colors.text" />;
    padding: 10px 5px;
  }
    .cart-widget .cart a {
      color: <virb get="customize.colors.text" />;
      text-decoration: none;
    }
      .cart-widget .cart a:hover {
        text-decoration: underline;
      }
    .cart-widget .cart span {
      display: block;
    }
    .cart-widget .cart span.label {
      font-size: .85em;
      line-height: 1em;
      margin: 5px 0;
      text-transform: uppercase;
    }
    .cart-widget .cart span.cart-total {
      font-weight: bold;
      font-size: 1.2em;
    }

  .cart-widget .checkout {
    background: <virb get="customize.colors.link" />;
    padding: 5px 10px;
    text-transform: uppercase;
    color: <virb get="customize.colors.link_hover" />;
    font-size: 9px;
    display: block;
    margin-top: 1px;
    text-decoration: none;
  }
    .cart-widget .checkout:hover {
      text-decoration: underline;
    } 
 
 
 
Stockholm
 .cart-widget {
  width: 75px;
  text-align: center;
  position: fixed;
  z-index: 2000;
  right: 0;
  top: 150px;
}

  .cart-widget .cart {
    background: url(<virb get="theme.assets.url" />black_70.png) repeat;
    font-family: <virb get="customize.fonts.body_family" />;
    color: <virb get="customize.colors.text" />;
    padding: 10px 5px;
  }
    .cart-widget .cart a {
      color: <virb get="customize.colors.text" />;
    }
    .cart-widget .cart span {
      display: block;
    }
    .cart-widget .cart span.label {
      font-size: .7em;
      margin: 5px 0;
      text-transform: uppercase;
    }
    .cart-widget .cart span.cart-total {
      font-weight: bold;
    }

  .cart-widget .checkout {
    background: <virb get="customize.colors.link" />;
    padding: 5px 10px;
    text-transform: uppercase;
    color: <virb get="customize.colors.link_hover" />;
    font-size: 9px;
    display: block;
    margin-top: 1px;
    text-decoration: none;
  }
    .cart-widget .checkout:hover {
      text-decoration: underline;
    } 
 
 
 
Wichita
 .cart-widget {
  width: 75px;
  text-align: center;
  position: fixed;
  right: 0;
  top: 245px;
  z-index: 2000;
}

  .cart-widget .cart {
    background: <virb get="customize.colors.border" />;
    font-family: <virb get="customize.fonts.body_family" />;
    color: <virb get="customize.colors.text" />;
    padding: 10px 5px;
  }
    .cart-widget .cart a {
      color: <virb get="customize.colors.primary" />;
    }
      .cart-widget .cart a:hover {
        text-decoration: underline;
      }
    .cart-widget .cart span {
      display: block;
    }
    .cart-widget .cart span.label {
      font-size: .7em;
      margin: 5px 0;
      text-transform: uppercase;
    }
    .cart-widget .cart span.cart-total {
      font-weight: bold;
    }

  .cart-widget .checkout {
    background: <virb get="customize.colors.action" />;
    padding: 5px 10px;
    text-transform: uppercase;
    color: <virb get="customize.colors.background" />;
    font-size: 9px;
    display: block;
    margin-top: 1px;
    text-decoration: none;
  }
    .cart-widget .checkout:hover {
      text-decoration: underline;
    }
 
 
 
York
 .cart-widget {
  width: 75px;
  text-align: center;
  position: fixed;
  right: 0;
  top: 35px;
  z-index: 2000;
}

  .cart-widget .cart {
    background: <virb get="customize.colors.line" />;
    font-family: <virb get="customize.fonts.body_family" />;
    font-size: <virb get="customize.fonts.body_size" />;
    color: <virb get="customize.colors.text" />;
  }
    .cart-widget .cart a {
        padding: 10px 5px;
        display: block;
        color: <virb get="customize.colors.text" />;
    } 
      .cart-widget .cart a:hover {
        text-decoration: underline;
      }
    .cart-widget .cart span {
      display: block;
    }
    .cart-widget .cart span.label {
      font-size: .65em;
      margin: 5px 0;
      text-transform: uppercase;
    }
    .cart-widget .cart span.cart-total {
      font-weight: bold;
    }

  .cart-widget .checkout {
    background: <virb get="customize.colors.link" />;
    padding: 5px 10px;
    text-transform: uppercase;
    color: <virb get="customize.colors.background_r" />;
    font-size: 9px;
    display: block;
    margin-top: 1px;
    -webkit-transition: all .2s linear;
       -moz-transition: all .2s linear;
         -o-transition: all .2s linear;
            transition: all .2s linear;
  }
    .cart-widget .checkout:hover {
      background: <virb get="customize.colors.link_hover" />;
    } 

Virb Support

Can't find your answer in these articles? Don't fret. We're here to help.

 

Community Discussions

You can also ask a question in our community discussion to get answers from other Virb customers.

Psst! Not seeing a feature listed in these articles? You'll need to upgrade to the new Virb Platform.