CouponDay - Responsive Coupons and Promo Template

Version 1.1

Thank you very much for purchasing our template. This document will guide you through the setup process of this template. If you have questions about anything about this template that isn't covered in this documentation, please post your question here.

Getting started

  1. Using a text editor
  2. The robots tag
  3. File structure

Using a text editor

First of all, you might want to use a text-editor like Notepad++ (Windows) or TextWrangler (Mac OS) for editing the files so you're more able to see what kind of code you're editing.

Download Notepad++
Download TextWrangler

The robots tag

Please always make sure to check the robots tag in your HTML files. If you want to learn more about the robots tag, read this guide at Yoast.com.

MegaDrupal is not responsible for your site not being indexed by search engines.

File structure

This is file tructure in the package.

css/
font/
images/
js/
index.html
blog.html
blog-detail.html
brand-list.html
brand-detail-1.html
brand-detail-2.html
brand-detail-3.html
brand-detail-4.html
brand-detail-5.html
coupon.html
coupon-code.html
coupon-code-2.html
coupon-detail.html
login.html
register.html
my-coupon.html

Choose style

Couponday comes with 3 style: Light (default), Gray and Dark. You can simply switch 3 styles by adding style css file before style.css link:

<link rel="stylesheet" href="css/style-dark.css">

and add class to body tag:

<body class="dark">

HTML Structure

Basic HTML Markup for index file

<div class="container-page">
  <div class="mp-pusher" id="mp-pusher">
    <header class="mod-header">
      <div class="grid_frame">
        <div class="container_grid clearfix">
          <div class="grid_12">
            <div class="header-content clearfix">
              {LOGO}
              {MAIN NAVIGATION}
            </div>
          </div>
        </div>
      </div>
      <div id="sys_pop_login" class="pop-login">
        {POPUP LOGIN}
      </div>
    </header><!--end: header.mod-header -->
    <nav id="mp-menu" class="mp-menu alternate-menu">
      <div class="mp-level">
        {RESPONSIVE MENU}
      </div>
    </nav><!--end: .mp-menu -->
    <div class="top-area">
      <div class="mod-head-slide">
        <div class="grid_frame">
          {MAIN SLIDER}
        </div>
      </div>
    </div>
    <div id="sys_mod_filter" class="mod-filter">
      <div class="grid_frame">
        <div class="container_grid clearfix">
          {FILTER BAR}
        </div>
      </div>
    </div><!--end: .mod-filter -->
    <div class="grid_frame page-content">
      <div class="container_grid">
        <div class="mod-grp-coupon block clearfix">
          {NEW COUPONS}
        </div><!--end block: New Coupons-->
        <div class="mod-grp-coupon block clearfix">
        	{FEATURED COUPONS}
        </div><!--end block: Featured Coupons-->
        <div class="mod-email-newsletter clearfix">
          {NEWSLETTER}
        </div><!--end: .mod-email-newsletter-->
        <div class="mod-brands block clearfix">
          {POPULAR BRANDS}
        </div><!--end: .mod-brand -->
      </div>
    </div>
    <footer class="mod-footer">
      <div class="footer-top">
        <div class="grid_frame">
          {FOOTER BLOCKS}
        </div>
      </div><!--end: .foot-top-->
      <div class="foot-copyright">
        <div class="grid_frame">
          {COPYRIGHT TEXT}
        </div>
      </div>
    </footer>
  </div>
</div>

CSS Structure

The organization of the CSS is one of our priorities.
These are the CSS files we're using in the template:

- style.css - (The basic layout structure styles, elements such as boxes, titles, etc)						

- responsive.css - (Template reponsive define)

- res-menu.css - (Responsive for main menu)

- normalize.css - (reset HTML5/CSS3)

- font-awesome.css - (icon library)

- font.css - (Site main font - import from Google font)

- flexslider.css - (site main slider)

- jquery.nouislider.css - (slider)

- jquery.popupcommon.css - (popup for video footer)

- ie8.css - (IE CSS fix)

- ie9.css - (IE CSS fix)

Javascript

jQuery - is a Javascript library that greatly reduces the amount of code that you must write.
For more information, please visit http://www.jquery.com/

The initialization of the elements, libs and features is made by the file script.js, in the JS folder.

Typography

How to change text

  1. Open the HTML file with a text editor (for example coupon.html).
  2. Find the text that you want to edit, for example: 456 Coupons are waiting for you!, you will see
    <h2 class="page-title">456 Coupons are waiting for you!</h2>
    

    change it to

    <h2 class="page-title">Your dynamic page title</h2>
    
  3. Save the file and view it in your browser to see the result.

How to change the font

  1. Open the style.css file in the css folder with a text editor.
  2. Search for the following text:
    font-family: "Viga", sans-serif;
    
  3. Enter the fontname you wish to use. For example:
    font-family: Georgia, Times, serif;
    
  4. 4. Save the file and view the result in your browser.

For more information about font families, visit w3schools.com.

Make sure to delete the @import code from the fonts.css file if you're not planning on using the Viga font. See also the Using Google Webfonts how to.

Using Google Webfonts

1. Visit https://www.google.com/fonts/.
2. Choose your favourite font, for example 'Droid Sans'.
3. Click the 'Quick use' button. (This is the grey button in the middle. You'll find it at the left of the blue 'Add to Collection' button.)

google font 1

4. Select the styles of the font you wish to use, for example Normal 400 and Bold 700.
5. Copy the code you'll find at the thrid point and the second tab (the @import function) of the Google Webfonts page.

google font 2

Example given:


@import url(http://fonts.googleapis.com/css?family=Droid+Sans:400,700);

6. Open your fonts.css file and add this code on the first line of the document.
7. Copy the font-family code given at point 4 of the Google Fonts instructions. Don't forget to add a fallback font after the Google Font:


font-family: 'Droid Sans', Helvetica, Arial, sans-serif;

8. Follow the instructions given in How to change the font.

Using the uppercase class

In the CouponDay template you'll find some headings displayed in UPPERCASE. You can use the uppercase and no-uppercase class to easily switch styles.

<p class="uppercase">Coupon day</p>

You can also add the bold class to the uppercase class instead of using the <b> tags. (other available classes: thin italic)

How to align text

By default almost every text on the website is aligned left. If you want to set a specific text to the center or right, simply add aligncenter or alignright inside a row or column. For example:

<div class="twelve columns alignright">
	<p>Everything in this div is aligned to the right.</p>
</div>

Using margins

To give you more control over margins and create less or more whitespace between elements, you can apply the following classes to elements:

.no-margin {
margin-top: 0;
margin-bottom: 0;
}

.margin-all {
margin: 25px;
}

.margin {
margin-top: 25px;
margin-bottom: 25px;
}

.margin-top {
margin-top: 25px;
}

.margin-bottom {
margin-bottom: 25px;
}

.margin-big {
margin-top: 50px;
margin-bottom: 50px;
}

.margin-all-big {
margin: 50px;
}

.margin-top-big {
margin-top: 50px;
}

.margin-bottom-big {
margin-bottom: 50px;
}

.margin-small {
margin-top: 10px;
margin-bottom: 10px;
}

.margin-all-small {
margin: 10px;
}

.margin-top-small {
margin-top: 10px;
}

.margin-bottom-small {
margin-bottom: 10px;
}

See also the Common css part in the style.css file.

Links & Buttons

How to create a button

There are three different sizes of buttons in this template: a small sized button, a normal sized button and a large sized button:

Dismiss Coupon Take Coupon Take Coupon

Calling these buttons is simple:

<a href="#yourlink" class="btn btn-red btn-small">Click me</a>

Small blue button:

<a href="#yourlink" class="btn btn-blue">Click me</a>

Big orange button:

<a href="#yourlink" class="btn btn-orange btn-big">Click me</a>

You can use classes for button color: btn-blue btn-orange btn-green btn-gray btn-yellow

How to use the grid

The grid is divided by twelve columns and based on the 960 grid system. For a normal use of the grid, you can create a column in a row as following:

<div class="container_grid">
  <div class="grid_4">
    <p>Your content here</p>
  </div>
</div>

This means that the area of the row is one-third of the entire width: 12 / 4 = 3. Example:

Your content here

Four columns

Four columns

Another example: If you write six columns, this means the width of that area is half of the entire width of the document.

Your content here

Six columns

General information

Need help?

If you need help with setting up the template, please post your question here. There are a few notes:

  • Before you ask a question please make sure to scan the menu and read the specific section of your question.
  • If it's a specific HTML question, Google (or any other search engine) is your friend and probably a hundred times faster in replying.
  • If it's possible, please provide a link to your (demo) website so our stuff are able to quickly scan for possible issues.

Report a bug

If you found a bug, please send us an e-mail with a (small) description of the issue. Your help is always apreciated.

Credits

Fonts

Codes & Plugins