Commerce Pro - Template 1(Classic CMS)

Give your Calendar Feature a stylish, different look.

Please be advised that we are not able to customise or adjust this CSS for you, however the input process is straight forward - please copy and paste the following code at the bottom of the Colours section (at the very bottom of that page):

__________________________________________________________________________________

/***** START: Commerce Pro CSS *****/
/* Start: Variables - You can customize here color codes & Image URL */
$cpro-gradient-color1: #7537E7; 
$cpro-gradient-color2: #35C9FF;
$cpro-text-color: #FFFFFF !important;
$cpro-all-categories-icon: "https://i.imgur.com/bDetckO.png";
$cpro-store-details-bg-color: #F5F5F5;
$cpro-product-description-bg-color: #F5F5F5;
$cpro-total-amount-bg-color: #F5F5F5;
/* End: Variables */



/*** Start: List View - Product List / Category List ***/
/* This CSS is for Product List / Category List as a List View configuration in Settings > Manage User Fields */

/* Products List / Categories List */
ion-view[state="commercepro-category-list"] .new-design .stor-list,
ion-view[state="commercepro-subcategory-list"] .card.stor-list {
  border-radius: 15px;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
  border-color: transparent !important;
}

/* Product Price / Category Subtitle */
ion-view[state="commercepro-category-list"] .card .item.item-custom p.three-lines,
ion-view[state="commercepro-subcategory-list"] .card .item.item-custom p.three-lines {
  background: $cpro-store-details-bg-color;
  border-radius: 20px; 
  box-shadow: 0 0 1px #333;
  border-color: transparent !important; 
}


/* Search */
ion-view[state="commercepro-category-list"] .new-design .list .item-input,
ion-view[state="commercepro-subcategory-list"] .new-design .list .item-input {
  margin: 10px 5px 0;
  border-radius: 20px; 
  box-shadow: 0 0 1px #333; 
}



/* Main Category Title */
ion-view[state="commercepro-category-list"] .main-category-tit h2,
ion-view[state="commercepro-subcategory-list"] .main-category-tit h2 {
  font-weight: bold; 
}

/*** End: List View - Product List / Category List ***/


/*** Start: Main Stores Categories Page & Store Products Categories Page ***/
/* This CSS is for Store List as a List View configuration in Settings > Manage User Fields */
/* Gradient Section Divider Title for Main Stores Categories & Store Products Categories Page */
ion-view[state="commercepro-category-list"] .item.item-custom.store-cat h2,
ion-view[state="commercepro-category-list"] .list.all-stores > ion-item > h2,
ion-view[state="commercepro-store-product-list"] .list.store-category .item.item-custom h2 {
  padding: 5px;
  margin-bottom: 5px; 
  border-radius: 15px !important;
  border-color: transparent !important; 
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16), 0 1px 2px rgba(0, 0, 0, 0.23);
  color: $cpro-text-color; 
  background: $cpro-gradient-color1;
  background: -moz-linear-gradient(45deg, $cpro-gradient-color1 0%, $cpro-gradient-color2 100%);
  background: -webkit-linear-gradient(45deg, $cpro-gradient-color1 0%, $cpro-gradient-color2 100%);
  background: linear-gradient(45deg, $cpro-gradient-color1 0%, $cpro-gradient-color2 100%);  
}

/* Main Stores Categories Page - Search Input Shadow */
ion-view[state="commercepro-category-list"] .item-input {
  box-shadow: 0 0 1px #333;
}
/* Main Stores Categories Page - Search Bar Shadow */
ion-view[state="commercepro-category-list"] .search-bar.item.item-custom {
  margin: 5px;
  border-radius: 15px;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
  border-color: transparent !important;
}

/* Stores List - Main Stores Categories Page*/
ion-view[state="commercepro-category-list"] .card.stor-list {
  text-align: left;
  border-radius: 15px;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
  border-color: transparent !important;
}
ion-view[state="commercepro-category-list"] .list.all-stores .item.item-custom {
  border-color: transparent !important; 
}
ion-view[state="commercepro-category-list"] .col-90 p { padding-left: 5px; }

/* Hide the Default Icon Image for Categories - All */
ion-view[state="commercepro-category-list"] div[ng-click="filterCategoryStores('')"] .category-image img,
ion-view[state="commercepro-store-product-list"] div[ng-click="filterCategoryStores('')"] .category-image img {
  visibility: hidden;  
}
/* Replace the Default Icon Image for Categories - All */
ion-view[state="commercepro-category-list"] div[ng-click="filterCategoryStores('')"] .category-image,
ion-view[state="commercepro-store-product-list"] div[ng-click="filterCategoryStores('')"] .category-image {
  background: url($cpro-all-categories-icon);
}

/* Categories - Stores & Products */ 
ion-view[state="commercepro-category-list"] .pro-categories .category-image,
ion-view[state="commercepro-store-product-list"] .pro-categories .category-image {
  box-shadow: 0 0px 3px rgba(0, 0, 0, 0.16), 0 0px 3px rgba(0, 0, 0, 0.23);
  border-radius: 10px;  
}
/* Store Products Categories Images */ 
ion-view[state="commercepro-store-product-list"] .pro-categories .category-image img {
  border-radius: 10px;
}
/* Sticky Categories Top Margin */
ion-view[state="commercepro-store-product-list"] #prod_cat_list {
  margin-top: 5px;
}
/* Store Products Categories Page */
ion-view[state="commercepro-store-product-list"] .list.store-category .item.item-custom {
  border-color: transparent !important; 
  border-radius: 15px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16), 0 1px 2px rgba(0, 0, 0, 0.23);
}
/* Store Products Categories Page - Store Details */
ion-view[state="commercepro-store-product-list"]  .rectangle-card {
  background: $cpro-store-details-bg-color; 
  margin-bottom: 10px; 
}
/* Store Products Categories Page - Store Sub-title */
ion-view[state="commercepro-store-product-list"] p[ng-bind-html="cover.subtitle"] {
  margin-bottom: 5px;
  border-radius: 15px; 
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
  border-color: transparent !important;
}
/* Store Products Categories Page - Search Bar */
ion-view[state="commercepro-store-product-list"] .item.item-input {
  margin: 5px;
  border-radius: 20px; 
  box-shadow: 0 0 3px #333;
  border-color: transparent !important;
}
/** Sub-Start: Products Section - Store Products Categories Page **/
/* Gradient Section Divider for Products Title - Store Products Categories Page */
ion-view[state="commercepro-store-product-list"] .product-title {
  text-align: center;
  margin-bottom: 10px;
  border-radius: 15px; 
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16), 0 1px 2px rgba(0, 0, 0, 0.23);
  border-color: transparent !important;
  background: $cpro-gradient-color1;
  background: -moz-linear-gradient(45deg, $cpro-gradient-color1 0%, $cpro-gradient-color2 100%);
  background: -webkit-linear-gradient(45deg, $cpro-gradient-color1 0%, $cpro-gradient-color2 100%);
  background: linear-gradient(45deg, $cpro-gradient-color1 0%, $cpro-gradient-color2 100%);
}
/* Products Section Divider Title Full Width */
ion-view[state="commercepro-store-product-list"] .col-90 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 100%;
  -moz-box-flex: 0;
  -moz-flex: 0 0 100%;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}
/* Products Section Divider Title Text Color */
ion-view[state="commercepro-store-product-list"] .product-title h4 {
  color: $cpro-text-color;
}
ion-view[state="commercepro-store-product-list"] .list.store-products .col.product-body.item > div:nth-child(3) {
  margin-top: 0;
}
ion-view[state="commercepro-store-product-list"] .rectangle-card .col.p-0 {
  margin: 3px;
}
/* Hide Product Description */
ion-view[state="commercepro-store-product-list"] .list.store-products .col.product-body.item > div:nth-child(2) {
  display: none; 
}
/* Product Head */
ion-view[state="commercepro-store-product-list"] .product-head {
  border-radius: 10px 10px 0 0;
  box-shadow: 0 0 1px #333;
}
/* Product Image */
ion-view[state="commercepro-store-product-list"] .product-img {
  border-radius: 10px 10px 0 0;
}
/* Product Body */
ion-view[state="commercepro-store-product-list"] .product-body { 
  border-radius: 0 0 10px 10px;
  text-align: center;
  height: 60px; 
  border-color: transparent !important;
  box-shadow: 0 0 1px #333;
}
/** Sub-End: Products Section - Store Products Categories Page **/
/*** End: Main Stores Categories Page & Store Products Categories Page ***/
/*** Start: Products View Page ***/
ion-view[state="commercepro-product-view"] .card {
  border-radius: 15px;
  box-shadow: 0 0px 3px rgba(0, 0, 0, 0.16), 0 0px 3px rgba(0, 0, 0, 0.23);
  border-color: transparent !important;
}
/* Products View - Product Title */
ion-view[state="commercepro-product-view"] .card .item.item-text-wrap.text-center.item-custom h2 {
  color: $cpro-text-color;
}
ion-view[state="commercepro-product-view"] .card .item.item-text-wrap.text-center.item-custom {
  margin-bottom: 5px; 
  border-radius: 0 0 50% 50% !important;
  border-color: transparent !important; 
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16), 0 1px 2px rgba(0, 0, 0, 0.23);
  background: $cpro-gradient-color1;
  background: -moz-linear-gradient(45deg, $cpro-gradient-color1 0%, $cpro-gradient-color2 100%);
  background: -webkit-linear-gradient(45deg, $cpro-gradient-color1 0%, $cpro-gradient-color2 100%);
  background: linear-gradient(45deg, $cpro-gradient-color1 0%, $cpro-gradient-color2 100%); 
}
/* Products View - Add to Cart */
ion-view[state="commercepro-product-view"] div[ng-click="addProduct()"] { 
  text-align: center; 
  color: $cpro-text-color;
  background: $cpro-gradient-color1;
  background: -moz-linear-gradient(45deg, $cpro-gradient-color1 0%, $cpro-gradient-color2 100%);
  background: -webkit-linear-gradient(45deg, $cpro-gradient-color1 0%, $cpro-gradient-color2 100%);
  background: linear-gradient(45deg, $cpro-gradient-color1 0%, $cpro-gradient-color2 100%);
}
/* Products View - Description */
ion-view[state="commercepro-product-view"] .card .item-divider.item-divider-custom {
  background: $cpro-product-description-bg-color;
  text-align: center;
}
/*** End: Products View Page ***/



/*** Start: Cart View Page ***/
ion-view[state="commercepro-cart-view"] .card {
  border-radius: 15px;
  box-shadow: 0 0px 3px rgba(0, 0, 0, 0.16), 0 0px 3px rgba(0, 0, 0, 0.23);
  border-color: transparent !important;
}
ion-view[state="commercepro-cart-view"]  .item-note { color: $card-item-custom-text; }
/* Gradient Section Divider Title Background */
ion-view[state="commercepro-cart-view"] .card .item-divider.item-divider-custom {
  background: $cpro-gradient-color1;
  background: -moz-linear-gradient(45deg, $cpro-gradient-color1 0%, $cpro-gradient-color2 100%);
  background: -webkit-linear-gradient(45deg, $cpro-gradient-color1 0%, $cpro-gradient-color2 100%);
  background: linear-gradient(45deg, $cpro-gradient-color1 0%, $cpro-gradient-color2 100%);
}

/* Gradient Section Divider Title Color */
ion-view[state="commercepro-cart-view"] .card .item-divider.item-divider-custom p {
  text-align: center; 
  color: $cpro-text-color;
}
/* Total Background Color */
ion-view[state="commercepro-cart-view"] div.card:nth-child(2) > div:last-child { 
  background: $cpro-total-amount-bg-color !important; 
}
/*** End: Cart View Page ***/

/*** Start: Choose Store Page ***/
/* Gradient Section Divider Title */
ion-view[state="commercepro-sales-store"] .list .item-divider.item-divider-custom {
  text-align: center;
  border-radius: 15px 15px 0 0;
  background: $cpro-gradient-color1;
  background: -moz-linear-gradient(45deg, $cpro-gradient-color1 0%, $cpro-gradient-color2 100%);
  background: -webkit-linear-gradient(45deg, $cpro-gradient-color1 0%, $cpro-gradient-color2 100%);
  background: linear-gradient(45deg, $cpro-gradient-color1 0%, $cpro-gradient-color2 100%); 
}
ion-view[state="commercepro-sales-store"] .list {
  border-radius: 15px;
  box-shadow: 0 0px 3px rgba(0, 0, 0, 0.16), 0 0px 3px rgba(0, 0, 0, 0.23);
  border-color: transparent !important;
  margin: 10px;
}
ion-view[state="commercepro-sales-store"] .item-radio.radio-custom:last-child {
  border-radius: 0 0 15px 15px;
}
/*** End: Choose Store Page ***/



/*** Start: My Information Page ***/
ion-view[state="commercepro-sales-customer"] .list {
  border-radius: 15px;
  box-shadow: 0 0px 3px rgba(0, 0, 0, 0.16), 0 0px 3px rgba(0, 0, 0, 0.23);
  border-color: transparent !important;
  margin: 10px;
}
/* Gradient Section Divider Title */
ion-view[state="commercepro-sales-customer"] .list .item-divider.item-divider-custom {
  text-align: center;
  margin-bottom: 10px;
  border-radius: 15px 15px 0 0;
  background: $cpro-gradient-color1;
  background: -moz-linear-gradient(45deg, $cpro-gradient-color1 0%, $cpro-gradient-color2 100%);
  background: -webkit-linear-gradient(45deg, $cpro-gradient-color1 0%, $cpro-gradient-color2 100%);
  background: linear-gradient(45deg, $cpro-gradient-color1 0%, $cpro-gradient-color2 100%);
}
ion-view[state="commercepro-sales-customer"] .list .item.item-custom{
  margin: 10px;
  border-color: transparent !important;
}



/* My Info. Login / Sign up Buttons */
ion-view[state="commercepro-sales-customer"] .list .item-custom.item-icon-left.item {
  border-radius: 20px;
  margin: 10px;
  border-color: transparent !important;
  color: $cpro-text-color;
  background: $cpro-gradient-color1;
  background: -moz-linear-gradient(45deg, $cpro-gradient-color1 0%, $cpro-gradient-color2 100%);
  background: -webkit-linear-gradient(45deg, $cpro-gradient-color1 0%, $cpro-gradient-color2 100%);
  background: linear-gradient(45deg, $cpro-gradient-color1 0%, $cpro-gradient-color2 100%);
} 


/* My Info. Form Inputs */
ion-view[state="commercepro-sales-customer"] .item.item-input.item-custom {
  margin: 5px;
  border-radius: 12px;
  border-color: transparent !important;
  box-shadow: 0 0 2px #333;
}
/*** End: My Information Page ***/



/*** Start: Choose Delivery Method Page ***/
ion-view[state="commercepro-sales-delivery"] .list {
  border-radius: 15px;
  box-shadow: 0 0px 3px rgba(0, 0, 0, 0.16), 0 0px 3px rgba(0, 0, 0, 0.23);
  border-color: transparent !important;
  margin: 10px;
}

/* Gradient Section Divider Title */
ion-view[state="commercepro-sales-delivery"] .list .item-divider.item-divider-custom {
  text-align: center;
  border-radius: 15px 15px 0 0;
  background: $cpro-gradient-color1;
  background: -moz-linear-gradient(45deg, $cpro-gradient-color1 0%, $cpro-gradient-color2 100%);
  background: -webkit-linear-gradient(45deg, $cpro-gradient-color1 0%, $cpro-gradient-color2 100%);
  background: linear-gradient(45deg, $cpro-gradient-color1 0%, $cpro-gradient-color2 100%); 
}
ion-view[state="commercepro-sales-delivery"] .list .item.item-custom {
  border-radius: 0 0 15px 15px;
  box-shadow: 0 0px 3px rgba(0, 0, 0, 0.16), 0 0px 3px rgba(0, 0, 0, 0.23);
  border-color: transparent !important;
}
/*** End: Choose Delivery Method Page ***/



/*** Start: Choose Payment Method Page ***/
ion-view[state="commercepro-sales-payment"] .list {
  border-radius: 15px;
  box-shadow: 0 0px 3px rgba(0, 0, 0, 0.16), 0 0px 3px rgba(0, 0, 0, 0.23);
  border-color: transparent !important;
  margin: 10px;
}
/* Gradient Section Divider Title */
ion-view[state="commercepro-sales-payment"] .list .item-divider.item-divider-custom {
  text-align: center;
  border-radius: 15px 15px 0 0;
  background: $cpro-gradient-color1;
  background: -moz-linear-gradient(45deg, $cpro-gradient-color1 0%, $cpro-gradient-color2 100%);
  background: -webkit-linear-gradient(45deg, $cpro-gradient-color1 0%, $cpro-gradient-color2 100%);
  background: linear-gradient(45deg, $cpro-gradient-color1 0%, $cpro-gradient-color2 100%); 
}
ion-view[state="commercepro-sales-payment"] .item-radio.radio-custom:last-child {
  border-radius: 0 0 15px 15px;
}
/*** End: Choose Payment Method Page ***/




/*** Start: Review Page ***/
ion-view[state="commercepro-sales-confirmation"] .card {
  border-radius: 15px;
  box-shadow: 0 0px 3px rgba(0, 0, 0, 0.16), 0 0px 3px rgba(0, 0, 0, 0.23);
  border-color: transparent !important;
}
/* Gradient Section Divider Title Background */
ion-view[state="commercepro-sales-confirmation"] .card .item-divider.item-divider-custom {
  border-radius: 15px 15px 0 0;
  background: $cpro-gradient-color1;
  background: -moz-linear-gradient(45deg, $cpro-gradient-color1 0%, $cpro-gradient-color2 100%);
  background: -webkit-linear-gradient(45deg, $cpro-gradient-color1 0%, $cpro-gradient-color2 100%);
  background: linear-gradient(45deg, $cpro-gradient-color1 0%, $cpro-gradient-color2 100%); 
}
/* Gradient Section Divider Title Color */
ion-view[state="commercepro-sales-confirmation"] .card .item-divider.item-divider-custom p {
  text-align: center; 
  color: $cpro-text-color;
}
ion-view[state="commercepro-sales-confirmation"] .item-note { color: $card-item-custom-text; }
/*** End: Review Page ***/



/*** Start: Order History Page ***/
/* Orders List */
ion-view[state="commercepro-sales-history"] .list .item.item-custom {
  margin: 10px;
  border-radius: 15px;
  box-shadow: 0 0px 3px rgba(0, 0, 0, 0.16), 0 0px 3px rgba(0, 0, 0, 0.23);
  border-color: transparent !important;
}
ion-view[state="commercepro-sales-history-details"] .list .item.item-custom {
  margin: 5px;
  border-radius: 10px; 
  border-color: transparent !important;
  box-shadow: 0 0 2px #333; 
}



/* Gradient Section Divider Title */
ion-view[state="commercepro-sales-history-details"]  .list .item-divider.item-divider-custom {
  background: $cpro-gradient-color1;
  background: -moz-linear-gradient(45deg, $cpro-gradient-color1 0%, $cpro-gradient-color2 100%);
  background: -webkit-linear-gradient(45deg, $cpro-gradient-color1 0%, $cpro-gradient-color2 100%);
  background: linear-gradient(45deg, $cpro-gradient-color1 0%, $cpro-gradient-color2 100%); 
  border-radius: 15px; 
}
ion-view[state="commercepro-sales-history-details"] .item.item-divider.item-custom h2 {
  text-align: center;
  color: $cpro-text-color;
}
/* Total Background Color */
ion-view[state="commercepro-sales-history-details"] .list > div:last-child { 
  background: $cpro-total-amount-bg-color !important; 
}
/*** End: Order History Page ***/
/***** END: Commerce Pro CSS *****/

__________________________________________________________________________________

NOTES:

  1. Colours - you can replace the HEX codes with the required colours. 
  2. URLs - you can upload your images using Image Uploader within Modules > Image Uploader. Use the generated URLs and replace the current image URLs.