Monetize

Introduction

Thank you for purchasing Monetize and the confidence you have placed in Dart Simple Solutions.

In this document, you will find an in-depth description of all Monetize features and functions. If you have any questions not attended to by our template documentation, please contact us so our team can assist you. If you like our template, please leave your feedback and join us on Facebook or your other favorite social network! We are looking forward to hearing back from you, and to improving further this and many other templates in our portfolio.

Online documentation is updated regularly and is available online for you free of charge on our website at http://doc.dartsimple.com

Developer website: http://dartsimple.com

Forum: http://talk.dartsimple.com

Customer service: http://dartsimple.com/contact-us/

 

 

Features

  • 6 Different Color Page
  • 6 Different Pages
  • 9 Single Project Pages
  • Easy to customize: color schemes, content
  • Fully responsive
  • Powered with Bootstrap
  • Browser compatibility (IE11+, Chrome, Safari, Firefox, Opera)
  • Well documented
  • Clear & Neat design
  • Accurate HTML code with comments
  • Layered PSD files included
  • FAQ Included

 

About the theme

Monetize is a diverse set of multipurpose, conversion-centric landing pages. Monetize is not simply one customizable template, but a set of 18 standalone unique funnels specially tailored to maximize sales. Every page features clean, modern design that is as pleasant to the eyes of your customers, as it is functional in delivering key messages about your products or promotions. Diversity of available layouts and styles makes the set a true one-stop-shop and an ultimate collection of funnels to help you address any business need in any market niche across a great number of desirable user actions.

The template set also boasts a number of brilliant color schemes well-balanced to match different products you may need to advertise. Choose from 18 different layouts and combine elements for an even greater number of unique designs. Its code is optimized for fast loading in accordance with best SEO practices and is 100% W3C compliant. Design is 100% responsive and compatible with all popular browsers, including legacy versions of Internet Explorer.

 

Files Structure

Project structure was carefully thought all throughout early on in the planning stage to ensure  logical flow of all parts. Complete list of all project-related folders, files and documents can be found below.

.
├── blue-desktop
│   ├── css
│   ├── fonts
│   ├── images
│   └── js
├── blue-showcase
│   ├── css
│   ├── fonts
│   ├── images
│   └── js
├── blue-turquoise
│   ├── css
│   ├── fonts
│   ├── images
│   └── js
├── callback
│   ├── css
│   ├── fonts
│   ├── images
│   └── js
├── callback-new
│   ├── css
│   ├── fonts
│   ├── images
│   └── js
├── dark
│   ├── css
│   ├── fonts
│   ├── images
│   └── js
├── green
│   ├── css
│   ├── fonts
│   ├── images
│   └── js
├── login
│   ├── css
│   ├── fonts
│   ├── images
│   └── js
├── login-new
│   ├── css
│   ├── fonts
│   ├── images
│   └── js
├── minimal
│   ├── css
│   ├── fonts
│   ├── images
│   └── js
├── minimal-new
│   ├── css
│   ├── fonts
│   ├── images
│   └── js
├── orange
│   ├── css
│   ├── fonts
│   ├── images
│   └── js
├── purple
│   ├── css
│   ├── fonts
│   ├── images
│   └── js
├── red
│   ├── css
│   ├── fonts
│   ├── images
│   └── js
├── signup
│   ├── css
│   ├── fonts
│   ├── images
│   └── js
├── subscribe
│   ├── css
│   ├── fonts
│   ├── images
│   └── js
├── subscribe-new
│   ├── css
│   ├── fonts
│   ├── images
│   └── js
└── video
    ├── css
    ├── fonts
    ├── images
    └── js

 

Project Folders

Folder Name

Description

css

Folder with style files

fonts

Folder with fonts files

images

Folder with images

js

Folder with JavaScript files

blue-desktop, blue-showcase, callback, dark...

Different folders with one page demos

 

HTML Structure

Markup Customization And Highlights

The HTML structure of all our projects is split in logically organized sections that are easy to navigate. Below you will find listed each HTML section, starting from Header and ending with Footer, referencing the list of customizable settings available for each of them. In cases where additional options or settings are not provided by any given section's customization concept - HTML code and its structure is somewhat simplified. Given intuitive and logical flow of our code, you will be able to further adjust and customize it further with basic knowledge of HTML, CSS, JS.

Template mostly relies on Bootstrap grid system with a few exceptions across sections as discussed below.

How to edit a HTML file

We have included 9 custom HTML templates like gallery styles, blog styles etc. Please open any HTML files with a text editor like Dreamweaver, Notepad or Notepad++ and edit any lines what you want.

CSSCustomization

You are often able to further customize the template by enabling or disabling many of Monetize's stylesheets as necessary. You can do so by commenting out the code or deleting relevant lines altogether. List of stylesheets available in Monetize follows below:

<!-- Styles-->
<link href="css/main.css"rel="stylesheet">


Plugins are initialized in the <head> tag

<link href="css/base-sizing.css"rel="stylesheet">

Customizing Logo

To change the logo in the navigation panel, please locate the image saved under images/logo.png and replace it with your own logo.

Note: to retain Retina-ready display of your images, the dimensions (width and height) of your images should be double the values specified in HTML attributes of width and height. By default, logo's size attributes are set to 118x27, whereas actual image size is 236x54px.

 

IE Compatibility

Our projects are designed to accommodate large audiences with varied preferences, so we adapt every template to ensure correct display even in older browser versions, such as IE9 and others. To ensure proper display of your website in older browsers, please check that the below snippet of code to facilitate compatibility with older browsers:

<!--[if IE]>
<meta http-equiv="X-UA-Compatible"content="IE=edge,chrome=1">
<![endif]>

<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->

 

Metatags

In each page’s head section you will see a comprehensive list of meta tags that may come in handy down the road in helping Google crawlers make sense of your web-pages, thus improving your pages' relevance and consequently helping your website rank better in search results. Please uncomment those meta tags that you deem relevant and applicable to your website.

<!-- Personal Meta tags-->

<meta charset="UTF-8">
<meta name="title"content="">
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]-->

<meta name="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1">

<!-- Meta descriptions-->

<meta name="keywords"content="premium template, ds template, dart simple">

<meta name="description"content="Dart Simple Solutions - Premium template">

<!-- Restrict google from scanning info from Dmoz or YahooDir-->

<meta name="robots"content="noodp,noydir">

<!-- Author markup-->

<meta name="author"content="Dart Simple Solutions - Premium Wordpress template">
<meta name="copyright"content="Dart Simple Solutions">

 

Grid Markup

To ensure our templates are 100% responsive, we use Bootstrap grid and framework (http://getbootstrap.com/css/).

 

CSS Structure

Files

Our projects maintain extended file structure with intuitive hierarchy of CSS documents and Monetize is no exception to this rule. Full list of stylesheet files is available below for your review.

 

Stylesheets Listing

File Name

Description

base-sizing.css

This stylesheet holds preset classes that are duplicated for each main media resolution breakpoint (xs , sm , md , lg). This offers immense customization power with just a few classes added to a certain block or element

main.css

The main stylesheet which contains almost everything that the template is styled upon

 

Base-sizing.css stylesheet

This stylesheet holds preset classes that are duplicated for each main media resolution breakpoint (xs , sm , md , lg). This offers immense customization power with just a few classes added to a certain block or element.

A brief list of class groups inside:

  • Margin classes

Example: mt-20 (margin-top:20px), ml-40 (margin-left:40px), mr-60 (margin-right:60px), mb-80 (margin-bottom:80px)

Example for small screens: mt-sm-20 (margin-top:20px), ml-sm-40 (margin-left:40px), mr-sm-60 (margin-right:60px), mb-sm-80 (margin-bottom:80px)

  • Negative Margin classes (left, right, top, bottom)

These classes are named “mnl-10” or “mnl-md-10” (margin negative left or margin negative top etc.)

  • Padding Classes (left, right, top, bottom)

Named “pb-10” or “pb-xs-10” (padding bottom)

  • Font-sizes-presets (fs-small, fs-xxl etc.)

For smaller screens: fs-sm-small, fs-sm-xxl .

  • Height Sizing Presets

These are height values from 10 to 10 to set responsive height to a block.

Example: hsize-110 or hsize-160 etc.

Example for smaller screens: hsize-md-110 or hsize-sm-110 or hsize-xs-110

  • Float & Float Clearing Presets
  • Width presets

Please refer to section Miscellaneous Classes for detailed description of these classes.

  • Button Padding classes

Please refer to section Miscellaneous Classes for detailed description of these classes.

  • Column list reset class

Please refer to section Miscellaneous Classes for detailed description of these classes.

  • Text align class

Please refer to section Miscellaneous Classes for detailed description of these classes.

We highly recommend you to have a thorough review of the stylesheet file while keeping in mind what’s inside and what you can use from it.

 

Use of these presets is demonstrated below for your convenience.

<div class="mt-100 mt-sm-50">
	This block will have a 100px margin-top (on any resolution)
	Also because mt-sm-50 is added, the top margin becomes 50px on resolutions smaller than 992px
</div>


or

<h3 class="fs-xxl fs-xs-small">
	This heading has 36px by default (because of the fs-xxl class) but on mobile devices (767px and smaller) the font-size will become 16px. We solved both mobile layout problems and also reduced several lines of code.
</h3>

 

Main.css Stylesheet

This is the main stylesheet which contains almost everything that the template is styled upon. Please keep in mind that Ii will surely update the template so, so we highly recommend that you don't edit this file. instead, please add your own CSS code into custom.css stylesheet. It’s very important not to overwrite your work.

The template itself serves as a database of examples of HTML markup and CSS styles applied. In the styles menu pages you can see there is a number of examples of the classes and styles added to the page elements. Please review the file extensively to gain a thorough understanding of its contents before making changes. If you don’t time for such review, you may opt in favor of a simpler copy/paste of the code from existing HTML files and then debugging styles using the Chrome Developer Tools.

 

Miscellaneous Classes

Style Modifications

We regularly update and expand our templates with additional useful CSS classes. Bouton includes base-sizing.css file, which contains many useful features to help you customize your website and even create additional HTML blocks.

 

Height class presets

These height classes are all in pixels and they can be adjusted in increments of 10, beginning with 0 and ending with 700px. These heights are generally added to the page-header block, which will use your predefined height.

The classes are:

.hsize-reset {height:0 !important;} /* height zero */
.hsize-10 {height:10px;}
.hsize-20 {height:20px;}
 ... 
.hsize-100 {height:100px;}
.hsize-110 {height:110px;}
.hsize-120 {height:120px;}
 ... 
.hsize-200 {height:200px;}
.hsize-210 {height:210px;}
.hsize-220 {height:220px;}
 ... 
.hsize-300 {height:300px;}
.hsize-310 {height:310px;}
.hsize-320 {height:320px;}
 ... 
.hsize-400 {height:400px;}
.hsize-410 {height:410px;}
.hsize-420 {height:420px;}
 ... 
.hsize-500 {height:500px;}
.hsize-510 {height:510px;}
.hsize-520 {height:520px;}
 ... 
.hsize-600 {height:600px;}
.hsize-610 {height:610px;}
.hsize-620 {height:620px;}
... 
.hsize-700 {height:700px;}

 

Breakpoint classes listed below are being used to facilitate valid responsive layout on smaller devices:

.hsize-md-10 or hsize-md-190 or hsize-md-380 for medium screens (1200px) and below, (covering both small and extra small.)

.hsize-sm-10 or hsize-sm-90 or hsize-sm-380 for small screens (991px) and below,  (covering extra small too.)

.hsize-xs-10 or hsize-xs-90 or hsize-xs-380 for extra small screens (767px) and below.

You can thus enjoy different heights for each breakpoint (and for each different device), like class=”hize-290 hsize-md-150″, meaning it’s 290px in height on large desktops and 150px on medium and smaller screens.

 

Width classes presets

Width classes presets are only added as percentages and range from 10 to 100% until full width. The classes are:

The classes are:

.w-10 {width:10% !important;}
.w-20 {width:20% !important;}
.w-30 {width:30% !important;}
.w-40 {width:40% !important;}
.w-50 {width:50% !important;}
.w-60 {width:60% !important;}
.w-70 {width:70% !important;}
.w-80 {width:80% !important;}
.w-90 {width:90% !important;}
.w-100 {width:100% !important;} /* full width */

 

Additional breakpoint classes are available for smaller devices. For example:

.w-md-10 or w-md-90 for medium screens (1200px) and below, covering both small and extra small.

.w-sm-10 or w-sm-90 for small screens (991px) and below, covering extra small too.

.w-xs-10 or w-xs-90 for extra small screens (767px) and below

Please recall that you can have different widths for each breakpoint, such as,class=”w-90 w-md-50″ which means it’s 90% in width on large desktops and 50% (half) on medium and smaller screens.

 

Text align presets

Text align presets are left, right and center

The classes are:

.text-center {text-align: center;}
.text-right {text-align: right;}
.text-left {text-align: left;}

 

Further breakpoint classes are available for small and extra-small devices. For example:

.text-xs-center {text-align: center;}
.text-xs-right {text-align: right;}
.text-xs-left {text-align: left;}

 

Positions presets

Positions presets can be used to set element’s position.

The classes are:

.pos-init {position: initial !important;}
.pos-fixed {position: fixed !important;}
.pos-abs {position: absolute !important;}
.pos-rel {position: relative !important;}

 

You can also set positions even on responsive breakpoints as you’ll see below.

.pos-xs-fixed {position: fixed !important;}
.pos-sm-abs {position: absolute !important;}
.pos-md-rel {position: relative !important;}

 

Lists with columns

A list can be divided into multiple columns by simply adding the attribute data-columns=”#”. For example a list with 3 columns looks like this:

<ul data-columns="3">
<li>...</li>
....
</ul>

 

Now, if you want to reset the list on smaller screens in a responsive solution, the list can be reset with the classes .list-col-reset-md .list-col-reset-sm .list-col-reset-xs

For example:

<ul class="list-col-reset-sm" data-columns="3">
<li>...</li>
  ....
</ul>

 

In the example above, the list will reset itself (no columns) when the screen width reaches the sm breakpoint which is 991px.

 

Float & Float clearing classes

The following codes are from Bootstrap library but they are very useful to know.

.pull-left {float:left}
.pull-right {float:right}
.pull-none {float:none !important;} /* not in bootstrap, added in this template */

 

Example for small device breakpoint:

.pull-none-sm {float:none !important;}

 

You can also clear the floats even on responsive breakpoints:

.cleft-sm {clear:left;}
.cright-sm {clear:right;}
.cboth-sm {clear:both;}

 

And, for example, on medium breakpoint see below.

.cleft-md {clear:left;}
.cright-md {clear:right;}
.cboth-md {clear:both;}

 

Button paddings

There are 3 padding classes for buttons: .mid-padding .big-padding and .long-padding. They’re commonly used whenever a button should break the pattern of standard button.

.btn.mid-padding-md {padding: 10px 20px; line-height:1;}
.btn.big-padding-md {padding: 15px 30px; line-height:1;}
.btn.long-padding-md {padding-left: 30px; padding-right:30px;}

 

Border radius

There are border radius classes for all elements: .br.

For example:

.br-md-0 {border-radius:0 !important;}
.br-md-1 {border-radius:1px !important;}
.br-md-2 {border-radius:2px !important;}
.br-md-3 {border-radius:3px !important;}
.br-md-4 {border-radius:4px !important;}
.br-md-5 {border-radius:5px !important;}


They go from 0 to 20 and 30, 40, 50 after. You can use them with responsive classes.

 

Opacity

This class set opacity as follows:

.op-md-0 {opacity:0 !important;}
.op-md-1 {opacity:0.1 !important;}
.op-md-2 {opacity:0.2 !important;}
.op-md-3 {opacity:0.3 !important;}
.op-md-4 {opacity:0.4 !important;}
.op-md-5 {opacity:0.5 !important;}
.op-md-6 {opacity:0.6 !important;}
.op-md-7 {opacity:0.7 !important;}
.op-md-8 {opacity:0.8 !important;}
.op-md-9 {opacity:0.9 !important;}
.op-md-10 {opacity:1 !important;}

 

Z-index classes

Z-index classes set z-index

.z-md-0 {z-index: 0 !important;}
.z-md-1 {z-index: 1 !important;}
.z-md-2 {z-index: 2 !important;}
.z-md-3 {z-index: 3 !important;}

 

Resets classes

Resets classes are being used to reset different styles:

/* Resets */
.bd-md-0 {border:0 !important;}
.bg-trans-md {background:transparent !important;}
.l-md-0 {left:0 !important;}
.r-md-0 {right:0 !important;}
.b-md-0 {bottom:0 !important;}
.t-md-0 {top:0 !important;}
.lower-case-md{text-transform: initial !important;}

 

Margins and paddings

Inside css/base-sizing.css you will find a number of predefined classes. Below we describe margins and paddings.

Predefined classes for margins and paddings are necessary to ensure consistency in spacing while providing customers with sufficient flexibility.

 

Settings for left/right margins, paddings and negative margins are available in the following increments:

5px, 10px, 15px, 20px, 25px, 30px, 35px, 40px, 45px, 50px

60px, 70px, 80px, 90px, 100px, 110px, 120px, 130px, 140px, 150px

 

In addition to the above values, top and bottom margins and paddings can be also set to 200px and 250px.

 

Sample code for margins:

Top: mt-##, example classes: mt-20, mt-40, mt-100 etc.

Bottom: mb-##, eg: mb-20, mb-40, mb-100 etc.

Left: ml-##, eg: ml-20, ml-40, ml-100 etc.

Right: mr-##, eg: mr-20, mr-40, mr-100 etc.

 

Sample code for paddings:

Top: pt-##, example classes: pt-20 , pt-40, pt-100 etc.

Bottom: pb-##, eg: pb-20, pb-40, pb-100 etc.

Left: ml-##, eg: pl-20, pl-40, pl-100 etc.

Right: pr-##, eg: pr-20, pr-40, pr-100 etc.

 

Negative margins can be used for extra complex structures and layouts. As follows from their name, these negative margins will add spaces reversely.

 

Sample code for negative margins:

Top: mnt-##, example classes: mnt-20 , mnt-40, mnt-100 etc.

Bottom: mnb-##, eg: mnb-20, mnb-40, mnb-100 etc.

Left: mnl-##, eg: mnl-20, mnl-40, mnl-100 etc.

Right: mnr-##, eg: mnr-20, mnr-40, mnr-100 etc.

 

Responsive Layout

To facilitate fully adaptive layout, we've introduced extra breakpoint classes that will take over when pages are viewed in certain resolutions.

For example, with large screens just leave the default class, eg: class="mt-100", which will add a top margin of 100px automatically.

For other screens, add the screen’s breakpoint classes, which are: md (medium devices), sm (small devices), xs (extra small devices), which can be combined for greater flexibility:

For medium screens and below: use mt-md-100, for example, class="mt-100 mt-md-60", which means that a 60px top margin will take over the default 100px margin whenever browser width is set to 1200px.

For small screens and below: use mt-sm-100, for example class="mt-100 mt-md-60 mt-sm-40", which means that a 40px top margin will take over the default 100px margin whenever browser width is set to 991px.

For extra small screens and below (eg smartphones): use mt-xs-100, for example class="mt-100 mt-md-60 mt-sm-40 mt-xs-20", which means that a 20px top margin will take over the default 100px margin whenever browser width is set to 767px.

In a nutshell, you are able to control each margin for each browser resolution in a very flexible manner to achieve responsive layout.

The list of all preset classes follows below for your convenience:

Classes

Description

hsize-(number)

Change height custom code

w-(number)

Change with custom code

pos-(init/fixed/abs/rel)

Change position custom code

pull-(left/none/right)

Pull element to side

cleft

Clear everything left sided from element

cright

Clear everything right sided from element

cboth

Clear everything both sided from element

zoom-image

Make image zooming on hover

op-(number)

Change opacity custom code

br-(number)

Change border radius custom code

z-(0/1/2/3)

Change z-index custom code

 

Typography Classes

We pay special attention to typography. In our opinion, it is one of the key qualities of an effective template. Monetize comes with a truly impressive package of typography elements, which we cover below.

A number of predefined classes can be found inside the CSS/base-sizing.css stylesheet.

 

Font sizing:

Because there’s a wide variety of popular headings and custom font sizes, we've added predefined sizing classes as follows.

.fs-micro {font-size:9px;}
.fs-xsmall {font-size:11px;}
.fs-normal {font-size:13px;}
.fs-smaller {font-size:15px;}
.fs-small {font-size:16px;}
.fs-m {font-size:18px;}
.fs-l {font-size:20px;}
.fs-xl {font-size:24px;}
.fs-xxl {font-size:32px;}
.fs-larger {font-size:42px;}
.fs-xxxl {font-size:56px;}
.fs-xxxxl {font-size:75px;}
.fs-jumbo {font-size:80px;}
.fs-huge {font-size:120px;}
.fs-crazy {font-size:200px;}


These classes can be used as follows:

<h4 class="fs-xxl">I'm a heading and I'm 32px sized </h4>


To facilitate responsive layout and eliminate display errors between various screen sizes, we also introduced breakpoint naming as follows:

.fs-smaller {font-size:15px;}
.fs-md-smaller --//--
.fs-sm-smaller --//--
.fs-xs-smaller --//--

.fs-m {font-size:18px;}
.fs-md-m --//--
.fs-sm-m --//--
.fs-xs-m --//--

.fs-xxl {font-size:32px;}
.fs-md-xxl --//--
.fs-sm-xxl --//--
.fs-xs-xxl --//--

.fs-jumbo {font-size:80px;}
.fs-md-jumbo --//-- 
.fs-sm-jumbo --//--
.fs-xs-jumbo --//--


This ensures consistency of font sizes relative to screen sizes, while maintaining responsive typography.

For example:

<h4 class="fs-xxl fs-md-l fs-sm-small fs-xs-micro">In'm a heading, Ii normally have 32px on desktops, 20px on medium screens like big tablets, then 16px on small screens like small tablets, and 9px on tiny screens like smartphones. I'm so flexible!! </h4>

 

Frameworks Used

Twitter Bootstrap v3

http://getbootstrap.com/

jQuery

http://jquery.com/

 

JavaScript Structure

When creating the project, we rely both on our own code, as well as on open-source plugins developed by third-parties. In this section, you will find detailed information on relevant plugins and their functions.


Js folder structure

…
├── js/
├── html5shiv.min.js
    ├── main.js
└── reposnd.min.js
…

 

All Plugins

jQuery

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

https://jquery.com/

Bootstrap

Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.

http://getbootstrap.com/

Bx Slider

Touch enabled jQuery plugin that lets you create a beautiful, responsive carousel slider.

http://bxslider.com

HTML5shiv

This script is the defacto way to enable use of HTML5 sectioning elements in legacy Internet Explorer

https://github.com/aFarkas/HTML5shiv

Respond JS

A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)

https://github.com/scottjehl/Respond

 

Credits

All the photos used in this template are intended only to illustrate the template and all the rights on them belong to their legal owners.