Footer Elements

Footer Newsletter Signup

Description: Basic Newsletter styling

Example Site:

http://gelmaxxusa.com

Screenshot Example:

HTML:

Sign Up
	
Get Exclusive Deals »
	
COMPANYNAME is ready to release all kinds of news, sales and events. Collect them all! It's easy, sign up now and get started!

Special Notes/Instructions: Make sure to update site link to newsletter signup inquiry form and replace COMPANYNAME.

CSS:

/**Email Capture**/
.wsm_box_email_capture {color:#fff; display:block; float:left; width: 194px; margin-right:20px;}
.wsm_box_email_capture p {font-size:11px; line-height:15px;}
.wsm_box_email_capture h4 {font-size:14px; position:relative;}
.wsm_box_email_capture h4:before {background-image:url(/files/theme-1/images/sprite-social.png); background-repeat: no-repeat !important; background-position: 0 0; content:''; display:block; float:left; height:25px; margin:0 5px 0 0; width:38px;}

Special Notes/Instructions:

---

Connect - Social Media Horizontal Presentation with Newsletter Signup Link Beneath

Example Site:

http://dap.webshopmanager.net/

Screenshot Example:

HTML:

	
Tune In
	

		{{ if $facebook_url }}
Facebook
{{ /if }}
		{{ if $twitter_url }}
Twitter
{{ /if }}
		{{ if $googleplus_url }}
Google+
{{ /if }}
		{{ if $youtube_url }}
YouTube
{{ /if }}
		{{ if $hubgarage_url }}
HubGarage
{{ /if }}
		{{ if $pinterest_url }}
Pinterest
{{ /if }}
		{{ if $yelp_url }}
Yelp
{{ /if }}
		{{ if $rss_feed == 'true' }}
RSS
{{ /if }}
	

	
		

		
Sign Up
			
Sign up & Get Exclusive Deals »
			
COMPANYNAME is ready to release all kinds of news, sales and events. Collect them all! It’s easy, sign up now and get started!
		
		

Special Notes/Instructions:

CSS:

/**Connect Section**/
.wsm_footer_connect, .wsm_connect {float:left;margin-right:20px;margin:0 0 0 5px;padding:0; list-style:none;}
.wsm_connect {float:none;}
.wsm_footer_connect li, .wsm_connect li  {display:block; float:left; margin:0 0 3px 0;}
.wsm_footer_connect li a, .wsm_connect li a {display:block; float:left; margin:0 5px 0 0; height:33px; background-image: url(/files/theme-1/images/sprite-icons.png); background-repeat:no-repeat; font-weight:normal; overflow:hidden; text-indent:-1000em; width:33px;}
.wsm_footer_connect li.social-facebook a, .wsm_connect li.social-facebook a {background-position: -51px -23px; width:29px;}
.wsm_footer_connect li.social-twitter a, .wsm_connect li.social-twitter a {background-position: -85px -23px; width: 30px;}
.wsm_footer_connect li.social-rss a, .wsm_connect li.social-rss a  {background-position: -11px -25px;}
.wsm_footer_connect li.social-youtube a, .wsm_connect li.social-youtube a {background-position: -129px -23px; width:29px;}
.wsm_footer_connect li.social-googleplus a, .wsm_connect li.social-googleplus a {background-position: -102px 0;}

/**Newsletter Signup**/
.dap_box_email_capture {clear:both; margin:20px 0 0 0;}
.dap_box_email_capture h4 {background:url(/files/theme-1/images/sprite-icons.png) 0 -156px no-repeat; font-size:14px; font-size:1.4rem; line-height:14px; line-height:1.4rem; margin:0 0 3px 0;padding-left:40px; width:110px;}
.dap_box_email_capture p {font-size:12px; margin:0 0 40px 0;}

Special Notes/Instructions: Some styling is already in place via the framework. Adjust parent container width and placement accordingly.

headers use shared class for headers in footer.

---