NorthStar Online Ordering
Steps:
On Dashboard/appearance/customize/
On Additional CSS option
Add CSS attributes to custom the plugin components.
Components | Elements | Example |
Locations | 1. Search Bar - Search button color - Search button Text Color Attribute: .searchbtn .btn | .searchbtn .btn{ //Background Background-color: red //Text Color: red } |
2. Separator Attribute: .search-content | .search-content { border-bottom: 5px solid #5a02ab; } | |
3. Location Boxes - Location name Attribute: search-loc-name Options: Font Color Border Color - Number: Attribute: serial-n Option: Background Color Font Color -Circle List: Attribute: fa fa-map-marker-alt Option: Background Color -Time : Attribute: search-loc-time Option: Font Color -Button: Attribute: btn-view1 Option: Background Color Font Color | .search-loc-name { border-bottom: 2px solid #36df0c; } .search-loc-name .serial-n { background: #6b1de7; } .search-loc-addres i { background: #ba04e7; } .search-loc-time { color: #0b35cf; font-weight: 500; } a.btn-view1 { color: blue !important; } | |
Categories | 1.BreadCumbs Attribute: cbs_breadcrumbs Option: Font Color | .cbs_breadcrumbs a:last-child { color: #b34a4a; } |
2. Category Boxes - Box Attribute: .custom-list-item.complete Options: Border Color Background color Text color -Title Attribute: .custom-list-item.complete h3 Options: Font Color -Text Attribute: product-category-description Options: Font Color | .custom-list-item.complete { border-color: red; } .custom-list-item.complete h3{ } .product-category-description { color: red; } |
Menu views | 1. Product Image Attribute: .woocommerce ul.products li.product a img Options: Image size | .woocommerce ul.products li.product a img { height: 200px !important; width: 200px !important; } |
2. Product Title Attribute: woocommerce-loop-product__title Options: Font Size Font Color | .woocommerce ul.products li.product h2.woocommerce-loop-product__title { color: blue; font-size: 25px; } | |
3. Product Description Attribute: product-description Options: Font Size Color | .product-description { color: red; font-size: 28px; } | |
4.Price Attribute: Price | .woocommerce ul.products li.product .price { Color:red } | |
5.Button Attribute: .woocommerce ul.products li.product .button Options Background Color Font Color | .woocommerce ul.products li.product .button { background-color: red; color: black; } | |
Single Product | 1. Categories Menu Attribute: cbs_menu_category | .cbs_menu_category { background-color: #f7f711; } |
2.Product Title Attribute: .woocommerce div.product .product_title | .woocommerce div.product .product_title { font-size: 2.2em; color: red; } | |
3. Prices Attribute: .woocommerce div.product p.price, .woocommerce div.product span.price | .woocommerce div.product p.price, .woocommerce div.product span.price { Color:red !important font-size: 1.25em; } | |
4. Components -Component Category Attributo : - maincomponentcategory Options: Background Color -Font Attributo : - maincomponentcategory h4 Options: Font Color -component elements Attribute: -background Options: Font Color Border Color Background Color | .maincomponentcategory.cbs_InnerHead { background: #f7bcbc; } .maincomponentcategory h4 { color: white; } .componentelement { } | |
5. Add to cart button Attributo : - single_add_to_cart_button Options: Background Color | .woocommerce div.product form.cart .button { background-color: red; } |
Checkout | 1. Checkout Button Attribute: checkout-button Options: Background Color Font Color | . checkout-button{ background-color: #000000; color: #FFF; } |
Usage:
On CSS customizer (Step 1 )
Search the attribute name of the component I.e. change the color of the search button from location component
.searchbtn .btn
...
Color will automatically change
...
Click
...
publish to save changes