Custom Styles

This theme has a few “custom” styles, in that they aren’t built in to the theme for you. However, it’s super easy to add these additional styles to parts of the theme that you’d like to. Let’s get started.

Top HTML Notification (Free Shipping Notice)

The CSS:

/* Coupon/Top Notification Styles */
.top-notification {
 text-align: center;
 padding: 1em;
 font-size: 1.25em;
 text-transform: uppercase;
 letter-spacing: 3px;
 font-weight: bold;
 border: 4px solid #2F373C;
}
.top-notification span {
 font-weight: normal;
}

Here’s a screenshot of the HTML module used:

Screen Shot 2014-11-20 at 10.29.42 AM

Email Newsletter in the Right Sidebar (and other) Layouts

You’ve probably noticed the “Email Subscription” widget in the right sidebar of some layouts. Here’s how you can recreate that in your theme:

First, the CSS:

/* Subscribe Box in the Right Sidebar for Demo - Text-3 is the right sidebar, Text-6 is the left sidebar in the Split Sidebars Layout */
#text-3-background-wrapper,
#text-6-background-wrapper {
 background: #2F373C;
 border: 0;
}
#text-3,
#text-6 {
 color: #FFFFFF;
}
#text-3 h4.widget-title,
#text-6 h4.widget-title {
 color: #FFFFFF;
}
#text-3 input[type="text"]:first-child,
#text-6 input[type="text"]:first-child {
 margin-top: 1em;
}
#text-3 input[type="text"],
#text-6 input[type="text"] {
 margin-bottom: .5em;
 width: 100%;
}

Next, here’s a screenshot of the widget. It’s just a simple text widget. You could add a Gravity Forms widget or apply these styles to other widgets, but realize that you may need to change some of the selectors to match.

Screen Shot 2014-11-20 at 9.11.04 AM

Email Subscription/Newsletter Box Below the Main Content on the Home Page

Below the main content area on the home page, you’ll find another, full-width email subscription box/form. Here’s the CSS used to style that section:

/* Email Subscribe Area Above Footer/Below Content */
.email-subscribe {
 border: 4px solid #2F373C;
 padding: 1.5em;
 text-align: center;
}
.email-subscribe h4 {
 border-bottom: 2px solid #87B94B;
 font-size: 1.25em;
 font-weight: bold;
 line-height: 1.3;
 letter-spacing: 2px;
 margin: 0 0 1em 0;
 padding: 0;
 -webkit-font-smoothing: antialiased;
 text-transform: uppercase;
 display: inline-block;
}
.email-subscribe p {
 margin-top: 0;
 font-size: 1.5em;
 color: #6B747A;
}
.email-subscribe input[type="email"] {
 background: #FFF;
 border: 1px solid #4A545A;
}
.email-subscribe input[type="submit"] {
 padding: .75em 1.5em;
 margin-left: .5em;
}

This particular section is an HTML module in the layout for the page. Being able to use different techniques, be it widget areas, HTML modules, or other features, makes Builder super flexible.

Here’s a screenshot of the HTML module, along with the code used:

Screen Shot 2014-11-20 at 9.46.33 AM