Custom CSS Reference Guide

This page is a collection of common CSS selectors that you can use to customize the look and feel of your InkSoft Store.

This file is designed to give you a basic structure to work from and does not include all available selectors that can be targeted within the application. Be advised that we cannot offer support for custom coding and customization of your page. This resource is intended to be used by individuals who have experience with custom coding and web development. 

PRO TIP: Being as specific as possible is key!

The #body prefix is used to enforce a more specific selector and to ensure that your custom styles are applied. However, in some scenarios, you may have to use !important to override default element attributes. Keeping this in mind can save some headaches down the road. 

TABLE OF CONTENTS

1. Buttons                                                                                      8. Component: Featured Products
2. Modals                                                                                       9. Sign In / Create Account
3. Header                                                                                      10. Product Catalog
4. Footer                                                                                        11. Product Detail Page
5. Component: Promo Bar                                                  12. Designer           
6. Component: Fundraiser                                                  13. Shopping Cart
7. Component: Countdown                                                14. Checkout

1.  BUTTONS

/* Shared Button Styles */
#body button.mat-button,
#body button.mat-fab,
#body button.mat-flat-button,
#body button.mat-icon-button,
#body button.mat-mini-fab,
#body button.mat-raised-button,
#body button.mat-stroked-button {

/*
border-radius: 100px;
font-size: 14px;
font-weight: bold;
font-style: normal;
line-height: 40px;
*/
}

/* Primary Buttons */
#body button.mat-raised-button {}


2.  MODALS

/* Shared Styles */
#body .mat-dialog-title {}
#body .mat-dialog-content {}
#body .mat-dialog-actions {}

/* Page Overlay that displays behind the modal when open */
#body .cdk-overlay-dark-backdrop {}

/* Default Modal */
#genericConfirmDialog {}

/* Bulk Order Dialog */
#bulkOrderDialog {}

/* Contact Us Modal */
#contactUsModal {}

/* Report a Problem Modal */
#cartFeedbackModal {}

/* Item Added to Cart Modal */
#itemAddedDialog {}

3.  HEADER

#StoreHeader-component {}

/* Header Links */
#StoreHeader-component a {}

/* Only applies when a logo image is uploaded */
#storeLogo .logo-image {}

/* Store Name will show when there is no logo uploaded */
#storeLogo .store-name {}

/* Mobile Nav Drawer */

#mobileHeaderWrap {}
.mobile-header--close-icon {}
ul.mobile-menu {}
li.mobile-menu-item {}
a.mobile-menu-link {}
a.mobile-menu-link:hover {}
.mobile-header-title {}

4.  FOOTER

/* Shared Footer Styles */

#StoreFooter-component {}

#StoreFooter-component .main-footer-wrap {}

#StoreFooter-component .column h5 {}
#StoreFooter-component .column ul {}
#StoreFooter-component .column li {}
#StoreFooter-component .column a {}

/* Layout 4 */

#StoreFooter-component .footer-layout-4 ul.navigation-wrap {}
#StoreFooter-component .footer-layout-4 ul.navigation-wrap li {}
#StoreFooter-component .footer-layout-4 ul.navigation-wrap a {}

#StoreFooter-component .footer-layout-4 ul.social-networks-wrap {}
#StoreFooter-component .footer-layout-4 ul.social-networks-wrap li {}
#StoreFooter-component .footer-layout-4 ul.social-networks-wrap a {}

5.  COMPONENT: PROMO BAR

#body promo-bar-wrapper {}
#body promo-bar-wrapper span {}

6.  COMPONENT: FUNDRAISER

/* Fundraiser Shared */

#body .fundraiser-block {}

/* Fundraiser Layout 1 */

#body .fundraiser-block .count-down-number {}
#body .fundraiser-block .raised-amount {}
#body .fundraiser-block .raised-label {}
#body .fundraiser-block .goal-progress {}
#body .fundraiser-block .mat-progress-bar {}
#body .fundraiser-block .end-date-description {}

/* Fundraiser Layout 2 */

#body .fundraiser-block .background-description {}
#body .fundraiser-block .goal-information {}
#body .fundraiser-block .towards-goal {}
#body .fundraiser-block .days-left {}
#body .fundraiser-block .ends-at {}

7.  COMPONENT: COUNTDOWN

#body .countdown-block {}
#body .countdown-block .headline h1 {}
#body .countdown-block .countdown-container {}

/* Countdown Layout 1 */
#body .countdown-block .flip-clock-wrapper {}
#body .countdown-block .flip-clock-wrapper div.inn {
/* The numbers displayed within the flip cards */

/*
color: #ccc;
text-shadow: 0 1px 2px #000;
background-color: #333;
font-size: 60px;
*/
}

8.  COMPONENT: FEATURED PRODUCT

#body .store-products-wrap {}
#body .store-products-wrap .product-list-wrap {}
#body .store-products-wrap .product-list-wrap .product-list-header h2 {}
#body .store-products-wrap .product-list-wrap .product-list-header span {}

#body .store-products-wrap .product-card {}
#body .store-products-wrap .product-card:hover {}
#body .store-products-wrap .product-color-wrap {}
#body .store-products-wrap .product-name {}
#body .store-products-wrap .product-manufacturer {}
#body .store-products-wrap .product-price {}
#body .store-products-wrap .mat-raised-button {}

9.  SIGN IN / CREATE ACCOUNT

account-login .store-page {
/*
background: inherit;
color: rgba(0,0,0,.87);
*/
}

create-account .store-page {
/*
background: inherit;
color: rgba(0,0,0,.87);
*/
}

#body .login-container-wrap {}
#body .create-acct-container-wrap {}

#body .login-container-wrap .store-logo-wrap,
#body .create-acct-container-wrap .store-logo-wrap {}

#body .login-container-wrap .store-logo-link .logo-image,
#body .create-acct-container-wrap .store-logo-link .logo-image {}

#body .login-container-wrap .store-logo-link h1.text-wrap,
#body .create-acct-container-wrap .store-logo-link h1.text-wrap {}

#body .login-container-wrap .card {}
#body .login-container-wrap .card h1 {}

10.  PRODUCT CATALOG

product-category .store-page {
/*
background: inherit;
color: rgba(0,0,0,.87);
*/
}

/* Category List */
#body a.category-view-all {}
#body ul.category-list {}
#body ul.category-list li {}

/* Product List Wrap */
#body .product-list-wrap {}

#body .product-list-wrap .actual-category-info {
/* Category header above product grid */
}

#body .product-list-wrap .actual-category-info p {
/* Select Category Name */
}

#body .product-list-wrap .category-path {
/* Selected Category Breadcrumps, ex. All Products / Long Sleeve */
}

#body .product-list-wrap .category-path span {
/* Current Category */
}

#body #sortByContainer {}

/* Product Card */
.product-card {}
.product-card:hover {}

.product-card .product-list-img-wrap {}
.product-card .product-list-img-wrap .product-list-img {}

.product-card .product-info {}
.product-card .product-info .product-color-wrap {}

.product-card .product-info .product-meta-wrap {}
.product-card .product-info .product-name {}
.product-card .product-info .product-manufacturer {}
.product-card .product-info .product-price {}

11.  PRODUCT DETAIL PAGE

product-detail .store-page { 
/*
background: inherit;
color: rgba(0,0,0,.87);
*/
}

/* Product Preview Carousel */
#body .product-carousel-wrap {
/*
background: #fff;
border: 1px solid #eee;
*/
}

/* Product Detail Panel */
#body .product-detail-panel {
/*
background: #fff;
border: 1px solid #eee;
border-radius: 2px;
*/
}

#body .product-panel-group-item {
/*
border-bottom: 1px solid #eee;
padding: 24px;
*/
}

#body .product-panel-group-item.has-background {
/*
background: #f5f5f5;
*/
}

/* Product Info */
#body .product-detail-panel .product-title {}
#body .product-detail-panel .product-manuf {}
#body .product-detail-panel .product-price {}

/* Color Select */
#body .product-detail-panel #productStyleSelect {}
#body .product-detail-panel #productStyleSelect .color-swatch {}

/* Size Select and Size Chart Link */
#body .product-detail-panel #product-size-select-row {}
#body .product-detail-panel a#sizeChart {}

/* Quantiy Select and Dropdown */
#body .product-detail-panel button#quantityDropdownTrigger {}
#body .product-detail-panel .quantity-dropdown-menu {}
#body .product-detail-panel .quantity-dropdown-menu .quantity-option {}

12.  DESIGNER

/* Catalog Header */
#body .ds-select-product-container .product-catalog-wrap {}
#body .ds-select-product-container .header-and-filters {}

#body .ds-select-product-container .product-catalog-header {}
#body .ds-select-product-container .product-catalog-header h1 {}
#body .ds-select-product-container .product-catalog-header p {}

/* Filter Options */
#body .ds-select-product-container #categoryFilterContainer {}
#body .ds-select-product-container #filterByContainer {}
#body .ds-select-product-container #sortByContainer {}

/* Product Card */
#body .ds-select-product-container .product-card-wrap {}
#body .ds-select-product-container .product-card-wrap:hover {}
#body .ds-select-product-container .product-card-wrap.selected-state {}
#body .ds-select-product-container .product-card-wrap .product-img {}

/* Product Detail Panel */
#body .ds-select-product-container .product-detail-container {}
#body .ds-select-product-container .product-detail-container #productName {}
#body .ds-select-product-container .product-detail-container #productManufacturer {}
#body .ds-select-product-container .product-detail-container #productManufacturerSku {}
#body .ds-select-product-container .product-detail-container .product-image-container {}
#body .ds-select-product-container .product-detail-container #designNowBtn {}
#body .ds-select-product-container .product-detail-container #descriptionLabel {}
#body .ds-select-product-container .product-detail-container #productLongDescription {}

13.  SHOPPING CART

store-cart .store-page ,
store-cart .cart-page {
/*
background: inherit;
color: rgba(0,0,0,.87);
*/
}

/* Secure Checkout Callout */
store-cart security-component {}

/* Cart Item Cards */
#body .cart-items {}
#body .cart-items .card {}

14.  CHECKOUT

#body .checkout-wrap {
/*
background: inherit;
color: rgba(0,0,0,.87);
*/
}

#body #checkout-progress-nav {}
#body #checkout-progress-nav ul.breadcrumb {}
#body #checkout-progress-nav li {}
#body #checkout-progress-nav a {}

#body #checkout-progress-nav li.active a {
/*
background: #3491c8;
*/
}

#body #checkout-progress-nav li.active a:after {
/*
border-left-color: #3491c8;
*/
}

Please take a moment to visit our Developer Settings guide. This will give you a brief introduction to Developer Settings where your CSS code will live in the store.