Background color | LightBox - Documentation | JoomShaper

LightBox

Updated Last: 20 March 2023

Background color

1) Section background color:

Two(2) types of Section background color used in this template.
We used it as a class name into main "row setting" from sp page builder (Anyone can change it).

These are class name for Section background color:
-> .primary-section-bgcolor
-> .secondary-section-bgcolor

These are variables name for Section background color:
-> @primary_section_bgcolor
-> @secondary_section_bgcolor



2) Curve Border:

Four(4) types of curve border used in this template. So, we manage it with 4 types of classes.
We added this classes in "row setting" from sp page builder (Anyone can change it).
Notes: "primary curve border" for "primary seciton bgcolor"
      "secondary curve border" for "secondary seciton bgcolor"

i)   .section-curve-border-left-primary
ii)  .section-curve-border-right-primary
iii) .section-curve-border-left-secondary  
iv)  .section-curve-border-right-secondary



3) responsive margin & padding :
Decrease Section margin & padding, when windows size less than 992px & 768px.

These are for less than 992px:
.sm-sppb-res-m-b{ margin-bottom: 50px;}
.sm-sppb-res-m-t{ margin-top: 50px;}


These are for less than 768px:
.sppb-res-m-0{ margin: 0;}
.sppb-res-m{ margin: 50px 0;}
.sppb-res-m-t{ margin-top: 50px;}
.sppb-res-m-b{ margin-bottom: 50px;}
.sppb-res-p-0{ padding: 0}
.sppb-res-p{ padding: 50px 0}
.sppb-res-p-t{ padding-top: 50px}
.sppb-res-p-b{ padding-bottom: 50px}
.sppb-res-p-b100{ padding-bottom: 100px}
.sppb-res-mixed-p{ padding: 50px 0 100px}