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.

Home Page:

The home page features an iThemes Plugin, called Slideshow. It makes it super easy to create beautiful slideshow presentations for your images. Here, we’ve just placed the slideshow shortcode in a widget area.

Below the slideshow, we’ve linked to several other slideshows with 3 separate images (Landscape, Lifestyle, Miscellaneous). These are widget content areas linking to the correct page.

Email Newsletter in Sidebar (Various Layouts):

The CSS:

/* Email Newsletter Box CSS */
#text-2-background-wrapper,
#text-5-background-wrapper {
	background: #EBEBEB;
	padding: 1.5em;
}
#text-2 input[type="text"],
#text-5 input[type="text"] {
	width: 100%;
}
#text-2 input[type="submit"],
#text-5 input[type="submit"] {
	width: 100%;
	margin-top: .5em;
}

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-12-23 at 9.05.00 AM

Email Newsletter Bar (on “Top Widget Bar” layout):

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

/* Email Newsletter Bar CSS */
#builder-module-549201d2b8034-background-wrapper {
	background: #EBEBEB;
}
#builder-module-549201d2b8034-outer-wrapper {
	border-bottom: 0;
}
#builder-module-549201d2b8034 p {
	font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
	font-size: 1em;
	text-align: center;
}
#builder-module-549201d2b8034 input[type="text"] {
	width: 73%;
	float: left;
	margin-right: 2%;
}
#builder-module-549201d2b8034 input[type="submit"] {
	width: 25%;
	float: left;
}

You’ll need to swap out the #builder-module-#### with the appropriate module ID for your site. You can use Firebug to find the appropriate module.

Here’s a screenshot of the widget. Again, you could apply these styles to a Gravity Forms widget or other things, but keep in mind to change your selectors to match.

Screen Shot 2014-12-23 at 9.10.35 AM

Notification Area (Prints Layout)

You probably noticed the “notification” at the top of the store/prints page. This is just a Builder HTML module that has a bit of custom styling. Here’s the CSS:

/* HTML Module Explainer */
#builder-module-54906b1992a4c {
	font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 1em;
	padding: 1.5em;
	background: #E8E8E8;
	color: #797979;
	border: 1px solid #C2C2C2;
	border-bottom-width: 4px;
	border-radius: 3px;
}

Please change the module selector as needed. Here’s a screenshot of the HTML module:

Screen Shot 2014-12-23 at 9.14.23 AM