District Lines - Desktop Layouts

*NOTE* This reference is only for standard DL stores and how they look on computers, not mobile.

The key to a fast and effective layout design is being given solid creative assets. To keep things moving quickly, we stick to three layout options laid out below.

Here are some examples based on layered album art for Nirvana’s Nevermind.

transparent - Dark

Preview: districtlines.com/template-dark

Custom CSS

Background CSS

/* Background image is dynamically filling the entire browser window all the way */

background-size:cover;

background-repeat:no;

/* Kill the heading box background colors */

DIV#menu DIV.box, DIV#menu DIV.box A, DIV#menu DIV.box STRONG, DIV#menu DIV.box Ag, DIV#content DIV#main_content DIV.box {

background: none !important;

}

/* Change price link color */

DIV DIV#product_cart FORM > A.add_to_cart DIV#footer, DIV#footer A, DIV#footer UL LI A, DIV#footer A#footer_tagline, DIV#product_cart SPAN.soldout, DIV.checkout_block LABEL, DIV.checkout_block A, DIV#buttons INPUT, DIV#buttons A, TR.cart_row TD A, DIV#cart H4, TABLE TR.cart_row TD, DIV#cart TABLE TR TH, DIV.browse_thumb DIV.browse_price, DIV.browse_thumb DIV.browse_price A, DIV#pagination A, DIV#pagination SPAN, DIV#cart H3 A, DIV#cart H2, .storeBox A {

color: #ffffff !important;

}

/* Green Add to cart buttons */
 
  DIV DIV#product_cart FORM > A.add_to_cart, .load-in-sizes h3  {
  
  border-radius: 5px;
  background-color: #008200;
  color: #ffffff;

}

Transparent - Light

Preview: districtlines.com/template-light

CUSTOM CSS

BACKGROUND CSS

/* Background image is dynamically filling the entire browser window all the way */

background-size:cover;
background-repeat: no;
  

/* Kill the heading box background colors */

DIV#menu DIV.box, DIV#menu DIV.box A, DIV#menu DIV.box STRONG, DIV#menu DIV.box Ag, DIV#content DIV#main_content DIV.box {

background: none !important;

}

/* Change price link color */

DIV DIV#product_cart FORM > A.add_to_cart DIV#footer, DIV#footer A, DIV#footer UL LI A, DIV#footer A#footer_tagline, DIV#product_cart SPAN.soldout, DIV.checkout_block LABEL, DIV.checkout_block A, DIV#buttons INPUT, DIV#buttons A, TR.cart_row TD A, DIV#cart H4, TABLE TR.cart_row TD, DIV#cart TABLE TR TH, DIV.browse_thumb DIV.browse_price, DIV.browse_thumb DIV.browse_price A, DIV#pagination A, DIV#pagination SPAN, DIV#cart H3 A, DIV#cart H2, .storeBox A {

color: #000000 !important;

}

/* Green Add to cart buttons */
 
  DIV DIV#product_cart FORM > A.add_to_cart, .load-in-sizes h3  {
  
  border-radius: 5px;
  background-color: #008200;
  color: #ffffff;

}

/* Change DL footer link color */

DIV#footer > .container > .footer-navigation a {

color: #ffffff !important;

}

white Content

Custom CSS

Background CSS

/* Background image is dynamically filling the entire browser window all the way */

background-size:cover;
  background-repeat:no;

/* Kill the heading box background colors */

DIV#menu DIV.box, DIV#menu DIV.box A, DIV#menu DIV.box STRONG, DIV#menu DIV.box Ag, DIV#content DIV#main_content DIV.box {

background: none !important;

}

/* Change price link color */

DIV DIV#product_cart FORM > A.add_to_cart DIV#footer, DIV#footer A, DIV#footer UL LI A, DIV#footer A#footer_tagline, DIV#product_cart SPAN.soldout, DIV.checkout_block LABEL, DIV.checkout_block A, DIV#buttons INPUT, DIV#buttons A, TR.cart_row TD A, DIV#cart H4, TABLE TR.cart_row TD, DIV#cart TABLE TR TH, DIV.browse_thumb DIV.browse_price, DIV.browse_thumb DIV.browse_price A, DIV#pagination A, DIV#pagination SPAN, DIV#cart H3 A, DIV#cart H2, .storeBox A {

color: #000000 !important;

}

/* Change DL footer link color */

DIV#footer > .container > .footer-navigation a {

color: #000000 !important;

}
 
/* Green Add to cart buttons */
 
  DIV DIV#product_cart FORM > A.add_to_cart, .load-in-sizes h3  {
  
  border-radius: 5px;
  background-color: #008200;
  color: #ffffff;

}