Commerce Pro - Template 1
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;
}
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:
- Colours - you can replace the HEX codes with the required colours.
- URLs - you can upload your images using Image Uploader within Modules > Image Uploader. Use the generated URLs and replace the current image URLs.