NorthStar Online ordering CSS Guide

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 {
background-color: #b50000;

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{
color: blue;

}

.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 {
background-color:blueviolet;

}

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;

}