Specs & look for web styles, classes, fonts, colors, etc.

Color Code

Click here to find new colors. * denotes colors not used often.

Buy Orange (Pumpkin) #ff8f1c <span class="buy_orange" style="font-weight: bold;">Buy Orange (Pumpkin) #ff8f1c</span>
Primary Red (Cinnabar) #ef4123 <span class="primary_red" style="font-weight: bold;">Primary Red (Cinnabar) #ef4123</span>
Bright Green (Apple) #76a246 <span class="bright_green" style="font-weight: bold;">Bright Green (Apple) #76a246</span>
Light Green (Mantis) #7ac143 * <span class="light_green" style="font-weight: bold;">Light Green (Mantis) #7ac143</span>
Dark Green (Shamrock Green) #009252 * <span class="dark_green" style="font-weight: bold;">Dark Green (Shamrock Green) #009252</span>
Light Teal (Downy) #6fc9c2 * <span class="light_teal" style="font-weight: bold;">Light Teal (Downy) #6fc9c2</span>
Medium Teal (Eastern Blue) #0093a0 <span class="medium_teal" style="font-weight: bold;">Medium Teal (Eastern Blue) #0093a0</span>
Light Brown (Desert Storm) #ece6df <span class="light_brown" style="font-weight: bold;">Light Brown (Desert Storm) #ece6df</span>
Medium Brown (Parchment) #cebfac <span class="medium_brown" style="font-weight: bold;">Medium Brown (Parchment) #cebfac</span>
Dark Brown (Russet) #7e551b <span class="dark_brown" style="font-weight: bold;">Dark Brown (Russet) #7e551b</span>
Orange Brown (Chocolate) #ce7019 * <span class="orange_brown" style="font-weight: bold;">Orange Brown (Chocolate) #ce7019</span>
Dark Grey (Mortar) #565656 <span class="dark_grey" style="font-weight: bold;">Dark Grey (Mortar) #565656</span>

Fonts

Alternate Gothic, Adrianna Extended and Adelle Condensed web font families are used and licensed from TypeKit (Adobe) for 5 million page views a month, in sum, for $100 a month. Login credential currently kevinl@gardeners.com and 9124orKL.

Alternate Gothic <span class="dark_brown" style='font-family: alternate-gothic-no-2-d, sans-serif; font-weight: 100; font-style: normal; font-size: 1.0em;'>Alternate Gothic</span>
Adrianna Extended <span class="dark_brown" style='font-family: adrianna-extended, sans-serif; font-weight: 100; font-style: normal; font-size: 1.0em;'>Adrianna Extended</span>
Adelle Condensed Light <span class="dark_brown" style='font-family: adelle-condensed, sans-serif; font-weight: 300; font-style: normal; font-size: 1.0em; white-space:nowrap'>Adelle Condensed Light </span>
fa-video-camera [] <span class="dark_brown" style='font-family: FontAwesome, sans-serif; font-weight: 300; font-style: normal; font-size: 1.0em; white-space:nowrap'>fa-video-camera [&#xf03d;]</span>

Link to page with full Font-Awesome character set: Font-Awesome.

Button Styles

<button class="button-small">Small button</button>
<button class="button-small">Small button <i class="fa fa-caret-right"></i></button>
<button class="button-small">Small button <i class="fa fa-angle-right"></i></button>
<button class="button-small"><i class="fa fa-angle-left"></i> Small button</button>
<button>Regular button</button>
<button>Regular button <i class="fa fa-caret-right"></i></button>
<button><i class="fa fa-caret-left"></i> Regular button</button>
<button class="button-fancy-large">Large button</button>
<button class="simple">Simple button</button>
<button class="button-green">Green button</button>
<button class="button-green">Green button <i class="fa fa-caret-right"></i></button>
<button class="button-simple-green">Simple green button</button>
<button class="button-simple-green">Simple green button <i class="fa fa-caret-right"></i></button>
<button class="button-simple-green">Simple green button</button>
<button class="button-full-width">Full width button</button>
<button class="button-blue">Blue button <i class="fa fa-angle-right"></i></button>

Links

Remove the space between the '$' and 'url' to make it work.

Content pages <a href="$ url('Page-Show', 'cid', 'WhoWeAre')$">Who we are</a>
Category <a href="$ url('Link-Category','cgid','NewFurniture_Cat')$">New Furniture</a>
Product <a href="$ url('Link-Product','pid','34-507RS')$">Product</a>
Static file <a href="/<path-to-file>/<file-name>?$ staticlink$">File name</a>

Star Ratings

<i class="fa fa-star"></i>
<i class="fa fa-star-half-o"></i>
<i class="fa fa-star-o"></i>

Category Hero Example

Remove the space between the '$' and 'url' to make it work.

<a href="$ url('Page-Popup','cid','8686')$" class="popupdialog2" alt="Watch: Overview of the Snip-n-Drip Soaker System"> <img border="0" alt="Overview of the Snip-n-Drip Soaker System" src="/on/demandware.static/Sites-Gardeners-Site/Sites-Gardeners-Library/default/PRED/category/cat_hero_15B15a.jpg"> <div class="category-hero-footer"> Watch: Growing Tomatoes from Seed <i class="fa fa-play-circle"></i> </div> </a>