Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

NorthStar Online Ordering

...

  • On Dashboard/appearance/customize/

  • On Additional CSS option

  • Add CSS attributes to custom the plugin components.

Components

Elements

Example

Locations

Image RemovedImage Added

1. Search Bar

- Search button color

- Search button Text Color

Attribute:

.searchbtn .btn

.searchbtn .btn{

//Background

Background-color: red

//Text

Color: red

}

Image RemovedImage Added

2. Separator

Attribute:

.search-content

Image RemovedImage Added

.search-content {

border-bottom: 5px solid #5a02ab;

}

Image RemovedImage Added

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

Image RemovedImage Added

.search-loc-name {

border-bottom: 2px solid #36df0c;

}

Image RemovedImage Added

.search-loc-name .serial-n {

background: #6b1de7;

}

Image RemovedImage Added

.search-loc-addres i {

background: #ba04e7;

}

Image RemovedImage Added

.search-loc-time {

color: #0b35cf;

font-weight: 500;

}

Image RemovedImage Added

a.btn-view1 {
background-color: #b50000;

color: blue !important;

}

Image RemovedImage Added

Categories

Image RemovedImage Added

1.BreadCumbs

Attribute:

cbs_breadcrumbs

Option:

Font Color

Image RemovedImage Added

.cbs_breadcrumbs a:last-child {

color: #b34a4a;

}

Image RemovedImage Added

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

Image RemovedImage Added

.custom-list-item.complete {

border-color: red;

}

Image RemovedImage Added

.custom-list-item.complete h3{
color: blue;

}

Image RemovedImage Added

.product-category-description {

color: red;

}

Image RemovedImage Added

Menu views

Image RemovedImage Added

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;

}

Image RemovedImage Added

3. Product Description

Attribute:

product-description

Options:

Font Size

Color

.product-description {

color: red;

font-size: 28px;

}

Image RemovedImage Added

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;

}

Image RemovedImage Added

Single Product

Image RemovedImage Added

1. Categories Menu

Attribute:

cbs_menu_category

Image RemovedImage Added

.cbs_menu_category {

background-color: #f7f711;

}

Image RemovedImage Added

2.Product Title

Attribute:

.woocommerce div.product .product_title

.woocommerce div.product .product_title {

font-size: 2.2em;

color: red;

}

Image RemovedImage Added

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;

}

Image RemovedImage Added

.maincomponentcategory h4 {

color: white;

}

Image RemovedImage Added

.componentelement {
background-color:blueviolet;

}

Image RemovedImage Added

5. Add to cart button

Attributo :

- single_add_to_cart_button

Options:

Background Color

.woocommerce div.product form.cart .button {

background-color: red;

}

Image RemovedImage Added

Checkout

1. Checkout Button

Attribute:

checkout-button

Options:

Background Color

Font Color

. checkout-button{

background-color: #000000;

color: #FFF;

}

Image RemovedImage Added

Usage:

  1. On CSS customizer (Step 1 )

  2. Search the attribute name of the component I.e. change the color of the search button from location component

  3. .searchbtn .btn

  4. It Color will automatically change to the color

  5. Click on publish to save changes