CSS

Bootstrap Utility Example

p-4 m-auto position-relative overflow-hidden w-76

Css

Custom CSS Example

custom-image mx-auto w-75

Css

.custom-image {
}

Custom Callout Example

callout

Css

.callout {
width: 100%;
max-width: 850px;
}
.callout > * {
max-width: 65ch;
z-index:1;
}
.callout::after {
       content: "";
    background: url(data:image/svg+xml;base64,PCEtLT94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/LS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9InJnYmEoODUsIDAsIDI1NSwgMSkiIGNsYXNzPSJiaSBiaS1hc3RlcmlzayIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBkPSJNOCAwYTEgMSAwIDAgMSAxIDF2NS4yNjhsNC41NjItMi42MzRhMSAxIDAgMSAxIDEgMS43MzJMMTAgOGw0LjU2MiAyLjYzNGExIDEgMCAxIDEtMSAxLjczMkw5IDkuNzMyVjE1YTEgMSAwIDEgMS0yIDBWOS43MzJsLTQuNTYyIDIuNjM0YTEgMSAwIDEgMS0xLTEuNzMyTDYgOCAxLjQzOCA1LjM2NmExIDEgMCAwIDEgMS0xLjczMkw3IDYuMjY4VjFhMSAxIDAgMCAxIDEtMXoiLz4KPC9zdmc+);
    position: absolute;
    height: 200px;
    background-position: center;
    right: 0;
    top: 0;
    background-size: 100%;
    z-index: 0;
    transform: translate(20%, -20%) rotate(45deg);
    background-repeat: no-repeat;
    aspect-ratio: 1/1;
    opacity: 0.6;
}

Subheader border

orange_border

Css

.orange_border{
  border-bottom-style: solid;
  border-color: orange;
  border-width: thick;
 border-height: 5px;
}

Header borders

blue_border logo

Css

.blue_border{
  border-bottom-style: solid;
  border-color: #0073bd ;
  border-width: thick;
  border-height: 5px;
}
.logo{
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
}

Header Gradient

headerSection

Css

.headerSection{
background: radial-gradient(circle at top left,#0073bd,#003976 80%);
background-width: 100%;
                }

Thumbnails

img-thumbnail

Css

Footer border

footer_orange_border

Css

.footer_orange_border{
  border-top-style: solid;
  border-color: orange;
  border-width: thick;
 border-height: 5px;
}

Footer Border white

footer_white_border

Css

.footer_white_border{
  border-top-style: solid;
  border-color: white;
  border-width: 1px ;
 border-height: 5px;
}

products_headers

productheader

Css

 .productheader{
                color: #003976;
                 background: linear-gradient(to bottom, #f8eb61, #efab00);
width:100%;
font-weight: 600;
                }

stripeblue

stripeblue

Css

.stripeblue{
                    background-color: #0073bd !important;
                    height: 4px;
                    width: 100%;
                }

about_us_border

about_us_border

Css

.about_us_border{
  border-border-2
  border-bottom-style: solid;
  border-bottom-color: #0073bd ;
  border-bottom-width: thick;
}

loginmodal-container

loginmodal-container

Css

@media only screen and (min-width: 1401px) {
  .loginmodal-container {
      max-width: 750px;
  }
}
.loginmodal-container {
  padding: 30px;
  width: 100% !important;
  background-color: #F7F7F7;
  margin: 0px auto;
  border-radius: 2px;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

career

career

Css

.callout {
width: 100%;
max-width: 850px;
}
.callout > * {
max-width: 65ch;
z-index:1;
}
.callout::after {
     content: "";
    position: absolute;
    height: 200px;
    background-position: center;
    right: 0;
    top: 0;
    background-size: 100%;
    z-index: 0;
    transform: translate(20%, -20%) rotate(45deg);
    background-repeat: no-repeat;
    aspect-ratio: 1/1;
    opacity: 0.6;
}

container

col-md-12 col-sm-12 col-xs-12

Css

Headings

yellowBgHeading

Css

.yellowBgHeading {
    background: linear-gradient(to bottom, #f8eb61, #efab00);
    width: 100%;
}
.yellowBgHeading h4 {
    font-weight: 600;
background: linear-gradient(to bottom, #f8eb61, #efab00);
    width: 100%;
}

Mighty Subheader border

red_border

Css

.red_border{
  border-bottom-style: solid;
  border-color: #ff3c00;
  border-width: thick;
}

Red background heading

red-bg

Css

.red-bg {
    background: linear-gradient(to bottom, #f5928f, #c60400);  
    width: 100%;
}
.red-bg h4 {
    color: white;
    margin: 7px 0;
    font-weight: 600;
    word-spacing: 0.08rem;
}

Full width footer

fullWidthFooter

Css

.fullWidthFooter {
    padding-top: 0 !Important;
    padding-bottom: 0 !Important;
    width: 100%;
}
.fullWidthFooter div.mw-75ch {
    max-width: unset !Important;
    width: 100%;
}

Mighty footer border

red_footer_border

Css

.red_footer_border {
  border-top-style: solid;
  border-color: #ff3c00;
  border-width: thick;
}

Might OffCanvas

mightyOffCanvas

Css

.cus-offcanvas__container .offcanvas-navigation .nav, .cus-offcanvas__container {
    background-color: var(--swift-background-color) !Important;
}

Industries Title

industriesContainer w-100

Css

.industriesContainer  {
    background: radial-gradient(circle at top left, #0073bd, #003976 80%);
}
.industriesContainer #topRow .itemTitle {
    font-size: 24px;
    text-transform: uppercase;
}
    .industriesContainer .mb-lg-4 {
        margin-bottom: 0 !important;
    }

border card

mx-auto border-start border-bottom border-end border-success  border-5 rounded-bottom rounded-4 rounded-end-0 rounded-start-0 px-4 py-4 w-75

Css

card headings

border-success border-5 border-top border-start border-end w-75 mx-auto card-headings rounded-5

Css

.card-headings{
border-radius:8px;
}

Container Box Shadow

container-box-shadow

Css

.container-box-shadow .grid{
    box-shadow: 0 2px 5px 1px rgba(64,60,67,.16);
    padding: 40px;
    border-radius: 15px;
    position: relative;
}

Column Primary Border

column-border-primary g-col

Css

.column-border-primary .g-col > div {
    padding: 20px !important;
    border: 1px solid #61C250 !important;
    border-radius: 30px !important;
}

Products - Series Banner

Css

Shop button fix

Css

div.new {
position: absolute; 
bottom: 8px;
}

Sale Icon

feather feather-sun

Css

svg.feather.feather-sun {
color:#fe651e;
}

Tabs

tab-pane cus-ccpdetail__feature mw-100 mh-100

Css

.cus-ccpdetail__feature {
line-height: 1.6;
}
#shipping.tab-pane.active {
line-height: 1.6;
}
img.mw-100.mh-100 {
    border: 1px solid #ddd;
    box-shadow: none;
    will-change: transform;
    transition: transform 0.3s ease-in-out;
    max-width: 100%;
    height: auto;
    border-radius: 0px!important;
    width: auto!important;
}

Product Image

dw-main-imag swipe-img dw-thumb-video-bg dw-main-media mw-100 mh-100

Css

div.dw-main-imag.position-relative {
    border: 1px solid #ddd;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    will-change: transform;
    transition: transform 0.3s ease-in-out;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    /*width: 500px;*/
}
img#dw-main-img-36797.swipe-img.dw-main-media {
    border: 1px solid #ddd;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    will-change: transform;
    transition: transform 0.3s ease-in-out;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    /*width: 500px;*/
}
span.dw-thumb-video-bg:hover, .dw-thumb-video-bg:active{
    border-color: #6fc34c;
}
img.dw-thumb:hover, .dw-thumb:active {
    border-color: #6fc34c;
}
img.mw-100.mh-100 {
    border: 1px solid #ddd;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    will-change: transform;
    transition: transform 0.3s ease-in-out;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    /*width: 500px;*/
}

Related products fields

js-add-to-cart-button btn-primary

Css

btn.btn-primary.js-add-to-cart-button {
display:none;
}

Hide quantity - Gloves

input-group input-primary-button-group

Css

.input-group.input-primary-button-group.flex-nowrap {
display:none;
}
table th:nth-child(8) {
display:none;
}
#RelatedProductsListContainer_36211 > div > div > div > div > div > div.grid.h-100.p-2.p-md-3 > div.table-responsive.w-100.g-col-12 > table > thead > tr > th:nth-child(8) {
display:none;
}
table td:nth-child(8) {
display:none;
}
table th:nth-child(7) {
display:none;
}
#RelatedProductsListContainer_36211 > div > div > div > div > div > div.grid.h-100.p-2.p-md-3 > div.table-responsive.w-100.g-col-12 > table > thead > tr > th:nth-child(7) {
display:none;
}
table td:nth-child(7) {
display:none;
}
table th:nth-child(9) {
display:none;
}
#RelatedProductsListContainer_36211 > div > div > div > div > div > div.grid.h-100.p-2.p-md-3 > div.table-responsive.w-100.g-col-12 > table > thead > tr > th:nth-child(9) {
display:none;
}
table td:nth-child(9) {
display:none;
}
table th:nth-child(6) {
display:none;
}
#RelatedProductsListContainer_36211 > div > div > div > div > div > div.grid.h-100.p-2.p-md-3 > div.table-responsive.w-100.g-col-12 > table > thead > tr > th:nth-child(6) {
display:none;
}
table td:nth-child(6) {
display:none;
}

Hide quantity - Textiles

input-group input-primary-button-group

Css

.input-group.input-primary-button-group.flex-nowrap {
display:none;
}
#RelatedProductsListContainer_36228 > div > div > div > div > div > div.grid.h-100.p-2.p-md-3 > div.table-responsive.w-100.g-col-12 > table > thead > tr > th:nth-child(9) {
display:none;
}
table th:nth-child(9) {
display:none;
}
table th:nth-child(9){
display:none;
}
#RelatedProductsListContainer_36228 > div > div > div > div > div > div.grid.h-100.p-2.p-md-3 > div.table-responsive.w-100.g-col-12 > table > thead > tr > th:nth-child(8) {
display:none;
}
table th:nth-child(8) {
display:none;
}
table td:nth-child(8) {
display:none;
}
#RelatedProductsListContainer_36228 > div > div > div > div > div > div.grid.h-100.p-2.p-md-3 > div.table-responsive.w-100.g-col-12 > table > thead > tr > th:nth-child(10) {
display:none;
}
table th:nth-child(10) {
display:none;
}
table th:nth-child(10){
display:none;
}

Product description margin

Css

ComponentSliderProducts_36445 > div > div.none.w-100 > div > div:nth-child(22) > div.theme.product-headersmt-auto.item_swift_1columncomponentedit > div > div {
margin-top: 0px!important;
}
ComponentSliderProducts_36445 > div > div.none.w-100 > div > div:nth-child(2) > div.theme.black.item_swift_1columncomponentedit > div > div > div > div > dl{ 
margin-bottom: 0px;
}

Product description margin blog

mt-3

Css

.mt-3 {
margin-top: 0px!important;
}
#ComponentSliderProducts_36526 > div > div.none.w-100 > div > div:nth-child(1) > div:nth-child(3) > div > div > div > div > dl{
margin-bottom: 0rem!important;
}
#ComponentSliderProducts_36526 > div > div.none.w-100 > div > div:nth-child(2) > div:nth-child(3) > div > div > div > div > dl{
margin-bottom: 0rem!important;
}
#ComponentSliderProducts_36526 > div > div.none.w-100 > div > div:nth-child(3) > div:nth-child(3) > div > div > div > div > dl{
margin-bottom: 0rem!important;
}
#ComponentSliderProducts_36526 > div > div.none.w-100 > div > div:nth-child(4) > div:nth-child(3) > div > div > div > div > dl{
margin-bottom: 0rem!important;
}
#ComponentSliderProducts_36526 > div > div.none.w-100 > div > div:nth-child(5) > div:nth-child(3) > div > div > div > div > dl{
margin-bottom: 0rem!important;
}
#ComponentSliderProducts_36526 > div > div.none.w-100 > div > div:nth-child(6) > div:nth-child(3) > div > div > div > div > dl{
margin-bottom: 0rem!important;
}

Hide quantity - Fragrances

input-group input-primary-button-group

Css

.input-group.input-primary-button-group.flex-nowrap {
display:none;
}
#RelatedProductsListContainer_36535 > div > div > div > div > div > div.grid.h-100.p-2.p-md-3 > div.table-responsive.w-100.g-col-12 > table > thead > tr > th:nth-child(7) {
display:none;
}
table th:nth-child(7) {
display:none;
}
table td:nth-child(7) {
display:none;
}
#RelatedProductsListContainer_36535 > div > div > div > div > div > div.grid.h-100.p-2.p-md-3 > div.table-responsive.w-100.g-col-12 > table > thead > tr > th:nth-child(8) {
display:none;
}
table th:nth-child(8) {
display:none;
}
table td:nth-child(8) {
display:none;
}
#RelatedProductsListContainer_36535 > div > div > div > div > div > div.grid.h-100.p-2.p-md-3 > div.table-responsive.w-100.g-col-12 > table > thead > tr > th:nth-child(9) {
display:none;
}
table th:nth-child(9) {
display:none;
}
table td:nth-child(9) {
display:none;
}

Scrolling area

cusccp-prolist__facetcontainer cusccp-facet__container cusccp-facet__content cusccp-prolist__facetcontainer cusccp-prolist__selfacets cusccp-prolist__selfacettitle cusccp-prolist__selectfacet cusccp-facet__chkbox form-check-input cusccp-prolist__facetcount cusccp-prolist__selfacets

Css

@media (min-width: 760px) {
.cusccp-prolist__facetcontainer::-webkit-scrollbar {
  width: 10px;
}
.cusccp-prolist__facetcontainer::-webkit-scrollbar-track {
  -webkit-box-shadow: 5px 5px 5px -5px rgba(34, 60, 80, 0.2) inset;
  background-color: #f9f9fd;
  border-radius: 10px;
}
.cusccp-prolist__facetcontainer::-webkit-scrollbar-thumb {
  border-radius: 10px;
  /*background: linear-gradient(45deg, rgb(55, 114,180), rgb(239, 239, 239));*/
background: #73bf50;
}
.cusccp-prolist__facetcontainer.__item_swift_app {  
  overflow-y: visible;
  height: 100%;
  width: 100%;
}
}
.cusccp-prolist__facetcontainer{
    background-color: #fff;
}
.cusccp-prolist__selectfacet {
background-color: #73bf50;
}
.cusccp-prolist__selfacettitle {
background-color: #0d0e10;
}
.cusccp-prolist__facetcount {
background-color: #f7f7f7;
}
.cusccp-facet__chkbox.form-check-input:checked[type=checkbox] {
background-color: #73bf50;
}
.cusccp-prolist__selfacets {
    border: 1px solid #0d0e10;
   box-shadow: none;
}
.cusccp-prolist__facetcontainer.__item_swift_app {  
  overflow-y: visible;
  height: 100%;
  width: 100%;
}
.cusccp-facet__container {
    margin: 10px;
    border: 1px solid #999;
    border-color: #909091;
    box-shadow: none;
    background-color: #FFF;
}
.cusccp-facet__content {
    background-color: #4c4f4b;
    border-color: #eee;
    color: #fff;
}
/*.cusccp-prolist__facetcontainer  {
  width: auto;
  height: 320px;
}
.cusccp-prolist__facetcontainer {  
  overflow-y: visible;
  height: auto;
  width: auto;
}*/
.cusccp-prolist__facetcontainer{
    background-color: #fff;
}
.cusccp-prolist__selectfacet {
background-color: #73bf50;
}
.cusccp-prolist__selfacettitle {
background-color: #0d0e10;
}
.cusccp-facet__chkbox.form-check-input:checked[type=checkbox] {
background-color: #73bf50;
}
.cusccp-prolist__facetcount {
background-color: #f7f7f7;
}
.cusccp-prolist__selfacets {
    border: 1px solid #0d0e10;
   box-shadow: none;
}

Realated Slider background

d-flex flex-column

Css

li.d-flex.flex-column.theme.theme-new.p-2.p-xl-3 {
background-color:#f7f7f7;
}
div.d-flex.flex-column.g-col-6.g-col-lg-3 .theme.theme-new .p-2.p-xl-3.position-relative {
background-color:#f7f7f7;
}

Product description margin blog mops

mt-3

Css

.mt-3 {
margin-top: 0px!important;
}
#ComponentSliderProducts_36583 > div > div.none.w-100 > div > div:nth-child(1) > div:nth-child(3) > div > div > div > div > dl{
margin-bottom:  0rem!important;
}
#ComponentSliderProducts_36583 > div > div.none.w-100 > div > div:nth-child(2) > div:nth-child(3) > div > div > div > div > dl{
margin-bottom:  0rem!important;
}
#ComponentSliderProducts_36583 > div > div.none.w-100 > div > div:nth-child(3) > div:nth-child(3) > div > div > div > div > dl{
margin-bottom: 0rem!important;
}
#ComponentSliderProducts_36583 > div > div.none.w-100 > div > div:nth-child(4) > div:nth-child(3) > div > div > div > div > dl{
margin-bottom: 0rem!important;
}
#ComponentSliderProducts_36583 > div > div.none.w-100 > div > div:nth-child(6) > div:nth-child(3) > div > div > div > div > dl{
margin-bottom:  0rem!important;
}

Product Image Gallery

dw-main-imag swipe-img

Css

div.dw-main-imag.position-relative {
    border: 1px solid #ddd;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    will-change: transform;
    transition: transform 0.3s ease-in-out;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    width: 500px;
}
img#dw-main-img-36806.swipe-img.dw-main-media {
    border: 1px solid #ddd;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    will-change: transform;
    transition: transform 0.3s ease-in-out;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    width: 500px;
}
span.dw-thumb-video-bg:hover {
    border-color: #6fc34c;
}
span.dw-thumb-video-bg:active {
    border-color: #6fc34c;
}
img.dw-thumb:hover {
    border-color: #6fc34c;
}
img.dw-thumb:active {
    border-color: #6fc34c;
}
button.dw-thumb.dw-thumb-video:hover {
    border-color: #6fc34c;
}
button.dw-thumb.dw-thumb-video:active {
    border-color: #6fc34c;
}

Product Image Gallery - Textiles

dw-main-imag swipe-img

Css

div.dw-main-imag.position-relative {
    border: 1px solid #ddd;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    will-change: transform;
    transition: transform 0.3s ease-in-out;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    width: 500px;
}
img#dw-main-img-36802.swipe-img.dw-main-media {
    border: 1px solid #ddd;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    will-change: transform;
    transition: transform 0.3s ease-in-out;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    width: 500px;
}
span.dw-thumb-video-bg:hover {
    border-color: #6fc34c;
}
span.dw-thumb-video-bg:active {
    border-color: #6fc34c;
}
img.dw-thumb:hover {
    border-color: #6fc34c;
}
img.dw-thumb:active {
    border-color: #6fc34c;
}
button.dw-thumb.dw-thumb-video:hover {
    border-color: #6fc34c;
}
button.dw-thumb.dw-thumb-video:active {
    border-color: #6fc34c;
}

Checkout

Css

#ordersubmit > div.col-md-12.col-sm-12.mt-3 > button {
margin-top: 10px;
}

Product Image Gallery - Fragrances

swipe-img dw-main-imag

Css

div.dw-main-imag.position-relative {
    border: 1px solid #ddd;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    will-change: transform;
    transition: transform 0.3s ease-in-out;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    width: 500px;
}
img#dw-main-img-36796.swipe-img.dw-main-media {
    border: 1px solid #ddd;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    will-change: transform;
    transition: transform 0.3s ease-in-out;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    width: 500px;
}
span.dw-thumb-video-bg:hover {
    border-color: #6fc34c;
}
span.dw-thumb-video-bg:active {
    border-color: #6fc34c;
}
img.dw-thumb:hover {
    border-color: #6fc34c;
}
img.dw-thumb:active {
    border-color: #6fc34c;
}
button.dw-thumb.dw-thumb-video:hover {
    border-color: #6fc34c;
}
button.dw-thumb.dw-thumb-video:active {
    border-color: #6fc34c;
}

Product Image Gallery - Gloves

dw-main-imag swipe-img

Css

div.dw-main-imag.position-relative {
    border: 1px solid #ddd;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    will-change: transform;
    transition: transform 0.3s ease-in-out;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    width: 500px;
}
img#dw-main-img-36799.swipe-img.dw-main-media {
    border: 1px solid #ddd;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    will-change: transform;
    transition: transform 0.3s ease-in-out;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    width: 500px;
}
span.dw-thumb-video-bg:hover {
    border-color: #6fc34c;
}
span.dw-thumb-video-bg:active {
    border-color: #6fc34c;
}
img.dw-thumb:hover {
    border-color: #6fc34c;
}
img.dw-thumb:active {
    border-color: #6fc34c;
}
button.dw-thumb.dw-thumb-video:hover {
    border-color: #6fc34c;
}
button.dw-thumb.dw-thumb-video:active {
    border-color: #6fc34c;
}

Product Image Gallery - Color and Size

dw-main-imag swipe-img flex-column

Css

div.dw-main-imag.position-relative {
    border: 1px solid #ddd;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    will-change: transform;
    transition: transform 0.3s ease-in-out;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    width: 500px;
}
img#dw-main-img-36805.swipe-img.dw-main-media {
    border: 1px solid #ddd;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    will-change: transform;
    transition: transform 0.3s ease-in-out;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    width: 500px;
}
span.dw-thumb-video-bg:hover {
    border-color: #6fc34c;
}
span.dw-thumb-video-bg:active {
    border-color: #6fc34c;
}
img.dw-thumb:hover {
    border-color: #6fc34c;
}
img.dw-thumb:active {
    border-color: #6fc34c;
}
button.dw-thumb.dw-thumb-video:hover {
    border-color: #6fc34c;
}
button.dw-thumb.dw-thumb-video:active {
    border-color: #6fc34c;
}
div.d-flex.flex-column.g-col-6.g-col-lg-3.theme.theme-new.p-2.p-xl-3.position-relative {
background-color: #f7f7f7;
}
div.d-flex.flex-column.g-col-6.g-col-lg-2.theme.theme-new.p-2.p-xl-3.position-relative {
background-color: #f7f7f7;
}