Subscriber

AZ Design

A how-to guide and general information to help you get the most out of your new theme.


Firstly, a huge thanks for purchasing this Landing page!

This document answers to common problems and issues - I encourage you to read this document thoroughly if you are experiencing any difficulties. If you have any questions that are beyond the scope of this document, feel free to pose them in the dedicated support forum.

Informations about Updates and New Themes are always announced on Twitter and Facebook.


Twitter   Facebook


General Markup

At it's core, SUBSCRIBER is based on the "Foundation" framework, so much of the nuts and bolts are based on the official Foundation documentation

The Foundation Grid is built around two key elements: rows and columns. Rows create a max-width and contain the columns; columns create the actual structure. For layouts to work properly, always put your page content inside a row and a column.

Doctype & Head

We use the HTML doctype declaration to tell the browser what to expect. From there we've used a technique by Paul Irish that attaches classes to the HTML for IE. After that, we set the character set to UTF-8.

Meta Viewport tag

This is used to make sure smaller devices use the device width as the viewport width.

Title Tag

This one is pretty self-explanatory. You're setting the name of the current page with this value.

Here's an example page that includes the basics:


<!DOCTYPE html>

<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
<head>
    <meta charset="utf-8" />

    <!-- Set the viewport width to device width for mobile -->
    <meta name="viewport" content="width=device-width" />

    <title>Page Title</title>
  
    <!-- Included CSS Files -->
    <link rel="stylesheet" href="stylesheets/foundation.css">
    <link rel="stylesheet" href="stylesheets/app.css">

    <!--[if lt IE 9]>
        <link rel="stylesheet" href="stylesheets/ie.css">
    <![endif]-->

    <!-- IE Fix for HTML5 Tags -->
    <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

</head>
<body>

    <!-- container -->
    <div class="container">

        <div class="row">
          <div class="four columns">
            .four.columns
          </div>
          <div class="four columns">
            .four.columns
          </div>
          <div class="four columns">
            .four.columns
          </div>
        </div>
        <div class="row">
          <div class="three columns">
            .three.columns
          </div>
          <div class="six columns">
            .six.columns
          </div>
          <div class="three columns">
            .three.columns
          </div>
        </div>

    </div>
    <!-- container -->


    <!-- Included JS Files -->
    <script src="javascripts/jquery.min.js"></script>
    <script src="javascripts/modernizr.foundation.js"></script>
    <script src="javascripts/foundation.js"></script>
    <script src="javascripts/app.js"></script>

</body>
</html>


Logo

You can easily change the logo of SUBSCRIBER by editing title in the HTML files. For example - in the index.html it would be so:


<!-- BEGIN HEADER 
=========================================================== -->
<div class="header-cover">
  <header class="row">
    <div class="four columns">
      <h1 class="fontface">
        <span>
          <a href="index.html" title="Subscriber">Subscriber</a>
        </span>
      </h1>
    </div>


Social URL

To change the URL of social networks address, put here your own link.


<div id="social">
        <ul class="social_bookmarks">
          <li class="twitter">
            <a href="http://twitter.com/Art_Z_Design" target="_blank">Follow us on Twitter</a>
          </li>
          <li class="facebook">
            <a href="http://www.facebook.com/artemzdesign" target="_blank">Join our Facebook Group</a>
          </li>
          <li class="googleplus">
            <a href="https://plus.google.com/102096724084591045015/posts" target="_blank">Join me 
            on Google Plus</a>
          </li>
          <li class="dribbble">
            <a href="http://dribbble.com/AZ-Design" target="_blank">Follow us on dribbble</a>
          </li>
          <li class="linkedin">
            <a href="http://www.linkedin.com/" target="_blank">Add me on Linkedin</a>
          </li>
          <li class="rss">
            <a href="http://feeds.feedburner.com/" target="_blank">RSS</a>
          </li>
        </ul>
      </div>


Promo Image

You can easily change Promo Image. Just create your image in Photoshop or any other image editor. Set the size of your image 618 by 400 pixels and place this image in the Images folder.


<!-- BEGIN PROMO IMAGE AND SUBSCRIBE 
=========================================================== -->
<div class="row">

  <div class="eight columns promoimg">
    <figure>
      <img src="images/slides/promo.png" alt="Promo" title="Subscriber Landing Page by AZ Design" />
      <figcaption>
        <h3>Heading Goes Here</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.
        </p>
        <p>
          <a href="#">Read more...</a>
        </p>
      </figcaption>
    </figure>
  </div>


Video

You can insert your videos from YouTube, Dailymotion or Vimeo to present your product or service.

Make sure that the code of your video was wrapped tags <div> with the class="flex-video" and then your video will automatically adjust to any size of the user's screen.


<!-- BEGIN VIDEO AND SUBSCRIBE 
=========================================================== -->
<div class="row">
  <div class="eight columns padding-video">
    <div class="flex-video widescreen vimeo">
      <iframe src="http://player.vimeo.com/video/7449107?autoplay=1"></iframe>
    </div>

  </div>


Flex Slider

The Flex Slider is the fully-responsive and touch sensitive slider.

The markup for the slider looks like this:

You can easily change the slide in Flexslider. To do this, you should to create the images in 1000 by 400 pixels and put them in the /Slides/ folder, which is located in the /Images/ folder in the root of your Landing Page.

If you want to add new slides, just add a <li></li> of html tag:

<li>

<img src="images/slides/your-new-images.png" alt="Your New Images" />

</li>


<!-- BEGIN FLEXSLIDER AND SUBSCRIBE
=========================================================== -->
<div class="row">
  <div class="eight columns">

    <div class="flexslider">
      <ul class="slides">
        <li>
          <img src="images/slides/image-1.png" alt="Slide1" />
        </li>
        <li>
          <img src="images/slides/image-2.png" alt="Slide2" />
        </li>
        <li>
          <img src="images/slides/image-3.png" alt="Slide3" />
        </li>
      </ul>
    </div>

  </div>


Google Maps

To add the Google map - click on the address https://maps.google.com/ - enter your address, click on the Link image and select the item - Customize and preview embedded map.

In the opened window, select the option - Custom and enter the necessary size of the map. By default, for our Landing Page map is 910 by 350 pixels. Next step is to copy and paste this HTML code in your html page between
<div class = "google-map"> and </div>.


<div class="google-map">
<iframe src="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=new+york&aq=&sll=36.848857,-119.800415&sspn=0.731889,1.209869&ie=UTF8&hq=&hnear=New+York&t=m&ll=40.714476,-74.005966&spn=0.18216,0.624847&z=11&iwloc=A&output=embed"></iframe>
<br />
<small>
<a href="https://maps.google.com/maps?f=q&source=embed&hl=en&geocode=&q=new+york&aq=&sll=36.848857,-119.800415&sspn=0.731889,1.209869&ie=UTF8&hq=&hnear=New+York&t=m&ll=40.714476,-74.005966&spn=0.18216,0.624847&z=11&iwloc=A" style="color:#0000FF;text-align:left"></a>
</small>
</div>


Note! To make it easy to update your theme, you should edit the styles in custom.css file. If you want to change the styles of the CSS, you need to add them to the custom.css in the folder - Subscriber/stylesheets/custom.css.

Stylesheets

The theme includes a number of CSS files that are used at various times depending on user - controlled options. All CSS files can be found in the theme’s /stylesheets/ folder.

Here's a list of the stylesheet files I'm using with this template, you can find more information opening each file:

File Name Description
foundation.css This is the main CSS file Foundation framework.
subscriber.css The theme’s main stylesheet and determines the majority of the theme’s styling.
flexslider.css FlexSlider core CSS.
prettyPhoto.css This file styles the lightboxes found in the theme. More information can be found at http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/
changer.css Color Switcher styles are here.
custom.css Have fun adding your style here :)
folder "Colors" Contains 12 css files which responsible for changing colors theme.

CSS Structure

SUBSCRIBER.CSS file contains all of the specific stylings for the page.


/* TABLE OF CONTENT - SUBSCRIBER.CSS
==========================================================

   01. IMPORT SECTION .......................... 33
   02. HEADER SECTION .......................... 42
   03. PROMO IMAGE AND SUBSCRIBE SECTION ....... 156
   04. THREE-UP CONTENT BLOCKS SECTION ......... 315
   05. TABS SECTION ............................ 362
   06. FEED SECTION ............................ 373
   07. MANAGED BY...SECTION .................... 383
   08. TABLES SECTION .......................... 394
   09. PRICING TABLES SECTION .................. 412
   10. FOOTER SECTION .......................... 438
   11. MEDIA QUERIES SECTION ................... 516
   12. COLOR SWITCHER .......................... 582
   13. GENERAL FOUNDICONS ...................... 712
   14. FONT-FACE SECTION ....................... 742

========================================================== */

JavaScript Files

The theme imports various Javascript files depending on the page being viewed.

Tag Description
jquery.js Query is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. More information can be found at http://jquery.com/
app.js Using AppJS you don't need to be worry about coding cross-platform or learning new languages and tools.
custom.js This file controls various sections of JS throughout the theme dependant on settings in the theme options.
flexslider.js Flexslider Java Script file.
foundation.min.js All of our plugins and the necessary JavaScript to make Foundation work properly.
jquery.foundation.alerts.js Adds the ability to close alerts.
jquery.foundation.buttons.js Adds dropdown functionality for dropdown buttons and split buttons.
jquery.foundation.forms.js Adds ability to create custom form elements.
jquery.foundation.mediaQueryToggle.js Adds helpful media query viewer tool.
jquery.foundation.tabs.js Adds toggle capability to tabs.
jquery.placeholder.js Adds placeholder functions to forms.
jquery.prettyPhoto.js prettyPhoto is a jQuery lightbox clone that support images, videos, flash and iframes. More information can be found at http://www.no-margin-for-errors.com/projects/ prettyphoto-jquery-lightbox-clone/
modernizr.foundation.js Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.
styleswitch.js This is a "plug & play" style sheet switcher that lets your visitors switch between a list of alternative style sheets.

Customize Slider

If you want to customize the slider, open up the file custom.js and change the following code:


//HOOK UP THE FLEXSLIDER

$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "fade",                //Select your animation type (fade/slide)
      slideshow: true,                //Should the slider animate automatically by default? (true/false)
      slideshowSpeed: 5000,           //Set the speed of the slideshow cycling, in milliseconds
      animationDuration: 700,         //Set the speed of animations, in milliseconds
      directionNav: true,             //Create navigation for previous/next navigation? (true/false)
      controlNav: true,               //Create navigation for paging control of each clide? (true/false)
      keyboardNav: true,              //Allow for keyboard navigation using left/right keys (true/false)
      touchSwipe: true,               //Touch swipe gestures for left/right slide navigation (true/false)
      prevText: "Previous",           //Set the text for the "previous" directionNav item
      nextText: "Next",               //Set the text for the "next" directionNav item
      randomize: false,               //Randomize slide order on page load? (true/false)
      slideToStart: 0,                //The slide that the slider should start on. Array notation (0 = first slide)
      pauseOnAction: true,            //Pause the slideshow when interacting with control elements, highly recommended. (true/false)
      pauseOnHover: false,            //Pause the slideshow when hovering over slider, then resume when no longer hovering (true/false)
      controlsContainer: ".flexslider-container"  //Advanced property: Can declare which container the navigation elements should be appended too. Default container is the flexSlider element. Example use would be ".flexslider-container", "#container", etc. If the given element is not found, the default action will be taken.
  });
});

1. MailChimp Account

If you do not have an account MailChimp - create your account at www.mailchimp.com

How can I create a campaign using the Campaign Builder?



3. Create Embed Code


4. Code Editor

Open your favorite code editor and paste the code. Here we are interested in just three lines of code: Action, Name and Email. Copy and paste this code into the page that you want to use as a Landing Page.


5. HTML

Open your chosen HTML file from the "Subscriber" folder. Find tag <form></form>.

Pay attention for the three selected areas in the picture.


6. Happy End!

Replace the selected lines by which you received from the service MailChimp.

Replace action="#" line to the code from MailChimp.

Then change the name="name" to name="FNAME" (which means First Name) and email="email" to email="EMAIL".

That's all! Now you have a fully customized subscription form. Enjoy it!


Again, thank you for purchasing this theme!

If you have any questions that are beyond the scope of this document,
feel free to pose them in the dedicated support forum.