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 template!

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, D.Facto is based on the Bootstrap 3 framework, so much of the nuts and bolts are based on the official Bootstrap 3 documentation

The Bootstrap 3 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.

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>
<html lang="en"><head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="../../assets/ico/favicon.png">

    <title>D.Facto is modern one page parallax portfolio theme for agencies, artists and freelancers</title>

    <!-- Bootstrap core CSS -->
    <link href="../../dist/css/bootstrap.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="sticky-footer-navbar.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="../../assets/js/html5shiv.js"></script>
      <script src="../../assets/js/respond.min.js"></script>
    <![endif]-->
  <style type="text/css"></style></head>

  <body style="">

    <!-- Wrap all page content here -->
    <div id="wrap">

      <!-- Fixed navbar -->
      <div class="navbar navbar-default navbar-fixed-top">
        <div class="container">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Project name</a>
          </div>
          <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#contact">Contact</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li class="dropdown-header">Nav header</li>
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
              </li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>

      <!-- Begin page content -->
      <div class="container">
        <div class="page-header">
          <h1>Sticky footer with fixed navbar</h1>
        </div>
        <p class="lead"></p>
      </div>
    </div>

    <div id="footer">
      <div class="container">
        <p class="text-muted credit"><a href="#">Copyright</a></p>
      </div>
    </div>


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="../../assets/js/jquery.js"></script>
    <script src="../../dist/js/bootstrap.min.js"></script>
  

</body></html>






Logo

You can easily change the logo of D.Facto by editing logo.psd in PSD folder.


Social URL

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

     
      <!-- BEGIN SOCIAL -->
            <div class="col-12 col-lg-6 col-xs-12">
                <div class="social-inline">

                    <!-- TWITTER -->
                    <div class="circ-wrap twitter-color">
                        <a href="http://www.mojo-themes.com/user/az-design/"><i class="fi-social-twitter size-36"></i></a>
                    </div>

                    <!-- FACEBOOK -->
                    <div class="circ-wrap facebook-color">
                        <a href="http://www.mojo-themes.com/user/az-design/"><i class="fi-social-facebook size-36"></i></a>
                    </div>

                    <!-- GOOGLE+ -->
                    <div class="circ-wrap google-color">
                        <a href="http://www.mojo-themes.com/user/az-design/"><i class="fi-social-google-plus size-36"></i></a>
                    </div>

                    <!-- DRIBBBLE -->
                    <div class="circ-wrap dribbble-color">
                        <a href="http://www.mojo-themes.com/user/az-design/"><i class="fi-social-dribbble size-36"></i></a>
                    </div>

                    <!-- FLICKR -->
                    <div class="circ-wrap flickr-color">
                        <a href="http://www.mojo-themes.com/user/az-design/"><i class="fi-social-flickr size-36"></i></a>
                    </div>

                </div><!-- END SOCIAL INLINE -->
            </div><!-- END SOCIAL -->


Revolution Slider

All information about the settings of the Revolution Slider you can find in the Documentation_Revolution_Slider folder.


To add your images, text or videos in a slider, you can edit the slider's code. For example, there is the code that is used in the D.Facto theme.

For more information, you can view the documentation of the slider, which comes complete with a theme in the Documentation folder.

<!-- BEGIN SLIDER 
=========================================================== -->
    <div class="fullwidthbanner-container">
        <div class="fullwidthbanner">
            <ul>
                <!-- THE FIRST SLIDE -->
                
                <li data-transition="turnoff" data-slotamount="1" data-masterspeed="300" data-thumb="images/thumbs/thumb3.jpg">
                    <img src="images/slides/slide3_wide1.jpg" alt="D.Facto is modern one page parallax portfolio theme for agencies, artists and freelancers" >

                        <div class="caption large_text fade"
                             data-x="509"
                             data-y="290"
                             data-speed="300"
                             data-start="800"
                             data-easing="easeOutExpo"  ></div>

                             <div class="tp-caption lfl"
                             data-x="-25"
                             data-y="8"
                             data-speed="1000"
                             data-start="800"
                             data-easing="easeOutExpo"  >
                                    <img src="images/slides/woman.png" alt="D.Facto is modern one page parallax portfolio theme for agencies, artists and freelancers"></div>

                        
                             <div class="caption sfb"
                             data-x="580"
                             data-y="223"
                             data-speed="300"
                             data-start="2000"
                             data-easing="easeOutBack"  ><img src="images/slides/tomatoes.png" alt="D.Facto is modern one page parallax portfolio theme for agencies, artists and freelancers"></div>
                             <div class="tp-caption modern_medium_fat sft"
                             data-x="405"
                             data-y="91"
                             data-speed="300"
                             data-start="2000"
                             data-easing="easeOutExpo"  >RESPONSIVE</div>

                                <div class="tp-caption modern_medium_light sft"
                             data-x="570"
                             data-y="91"
                             data-speed="300"
                             data-start="2100"
                             data-easing="easeOutExpo"  >& MODERN TEMPLATE</div>

                                <div class="tp-caption modern_big_bluebg sfl"
                             data-x="406"
                             data-y="126"
                             data-speed="300"
                             data-start="2200"
                             data-easing="easeOutExpo"  >MORE THAN YOU CAN IMAGINE...</div>

                                <div class="tp-caption modern_small_text_dark sfr"
                             data-x="408"
                             data-y="157"
                             data-speed="600"
                             data-start="2300"
                             data-easing="easeOutExpo"  > 
                                    <br/>
                                    Professional support will help you set up a great website and give you a helping 
                                    <br/>
                                    hand with customization.
                                    <br/>       
                                </div>

                </li>

            
                <!-- THE SECOND SLIDE -->
                <li data-transition="slideleft" data-slotamount="1" data-masterspeed="300" data-thumb="images/thumbs/thumb5.jpg">

                    <img src="images/slides/slide4_wide1.jpg" alt="D.Facto is modern one page parallax portfolio theme for agencies, artists and freelancers">
                        <div class="tp-caption modern_big_bluebg sfr"
                             data-x="27"
                             data-y="65"
                             data-speed="700"
                             data-start="800"
                             data-easing="easeOutExpo"  >CLEAN AND MINIMALISTIC</div>

                        <div class="tp-caption modern_big_redbg sfr"
                             data-x="28"
                             data-y="107"
                             data-speed="700"
                             data-start="900"
                             data-easing="easeOutExpo"  >TOUCH ENABLED AND RESPONSIVE</div>

                        <div class="tp-caption lfr"
                             data-x="right" data-hoffset="-1"                                
                             data-y="bottom" data-voffset="10"
                             data-speed="5000"
                             data-start="550"
                             data-easing="easeOutExpo"  >
                                    <img src="images/slides/cloud2.png" alt="D.Facto is modern one page parallax portfolio theme for agencies, artists and freelancers"></div>

                        <div class="caption lfl"
                             data-x="53"
                             data-y="192"
                             data-speed="300"
                             data-start="1400"
                             data-easing="easeOutExpo"  ><img src="images/slides/imac.png" alt="D.Facto is modern one page parallax portfolio theme for agencies, artists and freelancers"></div>

                        <div class="caption lfl"
                             data-x="253"
                             data-y="282"
                             data-speed="300"
                             data-start="1500"
                             data-easing="easeOutExpo"  ><img src="images/slides/ipad.png" alt="D.Facto is modern one page parallax portfolio theme for agencies, artists and freelancers"></div>

                        <div class="caption lfl"
                             data-x="322"
                             data-y="313"
                             data-speed="300"
                             data-start="1600"
                             data-easing="easeOutExpo"  ><img src="images/slides/iphone.png" alt="D.Facto is modern one page parallax portfolio theme for agencies, artists and freelancers"></div>
                            </li>
                            <!-- THE THIRD SLIDE -->
                <li data-transition="slidedown" data-slotamount="7" data-masterspeed="300" data-thumb="images/thumbs/thumb4.jpg">
                        <img src="images/slides/black.jpg" alt="D.Facto is modern one page parallax portfolio theme for agencies, artists and freelancers">

                        <div class="caption fade fullscreenvideo" data-autoplay="false" data-x="0" data-y="0" data-speed="500" data-start="10" data-easing="easeOutBack"><iframe src="http://player.vimeo.com/video/32001208?title=0&byline=0&portrait=0;api=1" ></iframe></div>

                        <div class="tp-caption modern_big_redbg sfr"
                             data-x="300"
                             data-y="25"
                             data-speed="300"
                             data-start="500"
                             data-easing="easeOutExpo" data-end="4000" data-endspeed="300" data-endeasing="easeInSine" >Have Fun Watching the Video</div>
                </li>
                
            </ul>

            <div class="tp-bannertimer"></div>
        </div>
    </div>

Portfolio

You can easily add examples of your work in the portfolio. Create some images 400 by 300 pixels. Put these images in the folder / Images / Portfolio / and change the name of images in the HTML code.

Here we give an example of code that you need to change the names of the pictures on yours.

<!-- ==============================================================
BEGIN SECTION PORTFOLIO
=================================================================== -->
    <section id="Section-products">
        <!-- BEGIN CONTAINER PORTFOLIO -->
        <div class="container">

            <div class="row">
                <div class="page-header text-center col-sm-12 col-lg-12">
                    <h3>OUR WORKS</h3>
                    <p class="lead">Some of Our Best Work Is Featured Below</p>
                </div>
            </div>

        

            <!-- BEGIN FIRST PRODUCT LINE -->
            <div class="row">
                <ul class="grid-hover cs-style-4">
                    <li class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
                    <figure>
                        <img src="images/portfolio/1.jpg" alt="D.Facto is modern one page parallax portfolio theme for agencies, artists and freelancers">
                        <figcaption>
                            <h2>Jack of Hearts</h2>
                            <span>Steve Simpson</span>
                            <a href="http://dribbble.com/shots/1231483-Jack-of-Hearts-kidnapped">Take a look</a>
                        </figcaption>
                    </figure>
                </li>
                <li class="col-xs-12 col-sm-6 col-md-4">
                    <figure>
                        <img src="images/portfolio/2.jpg" alt="D.Facto is modern one page parallax portfolio theme for agencies, artists and freelancers">
                        <figcaption>
                            <h2>Tohajiilee</h2>
                            <span>Jeremy Loyd</span>
                            <a href="http://dribbble.com/shots/1231733-Tohajiilee">Take a look</a>
                        </figcaption>
                    </figure>
                </li>
                <li class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
                    <figure>
                        <img src="images/portfolio/3.jpg" alt="D.Facto is modern one page parallax portfolio theme for agencies, artists and freelancers">
                        <figcaption>
                            <h2>Plucky</h2>
                            <span>Matt Yow</span>
                            <a href="http://dribbble.com/shots/1232076-Plucky">Take a look</a>
                        </figcaption>
                    </figure>
                </li>
                <li class="col-xs-12 col-sm-6 col-md-4">
                    <figure>
                        <img src="images/portfolio/4.jpg" alt="D.Facto is modern one page parallax portfolio theme for agencies, artists and freelancers">
                        <figcaption>
                            <h2>S8 flat</h2>
                            <span>Lionel</span>
                            <a href="http://dribbble.com/shots/1232706-S8-flat-icon">Take a look</a>
                        </figcaption>
                    </figure>
                </li>
                <li class="col-xs-12 col-sm-6 col-md-4">
                    <figure>
                        <img src="images/portfolio/5.jpg" alt="D.Facto is modern one page parallax portfolio theme for agencies, artists and freelancers">
                        <figcaption>
                            <h2>Nacho Average Nacho</h2>
                            <span>Chris Sandlin</span>
                            <a href="http://dribbble.com/shots/1232028-Nacho-Average-Nacho">Take a look</a>
                        </figcaption>
                    </figure>
                </li>
                <li class="col-xs-12 col-sm-6 col-md-4">
                    <figure>
                        <img src="images/portfolio/6.jpg" alt="D.Facto is modern one page parallax portfolio theme for agencies, artists and freelancers">
                        <figcaption>
                            <h2>Space Stuff!</h2>
                            <span>Natalie Smith</span>
                            <a href="http://dribbble.com/shots/1232074-Space-Stuff">Take a look</a>
                        </figcaption>
                    </figure>
                </li>
                <li class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
                    <figure>
                        <img src="images/portfolio/7.jpg" alt="D.Facto is modern one page parallax portfolio theme for agencies, artists and freelancers">
                        <figcaption>
                            <h2>Personal Portfolio</h2>
                            <span>Alex Araujo</span>
                            <a href="http://dribbble.com/shots/1232165-Personal-Portfolio">Take a look</a>
                        </figcaption>
                    </figure>
                </li>
                <li class="col-xs-12 col-sm-6 col-md-4">
                    <figure>
                        <img src="images/portfolio/8.jpg" alt="D.Facto is modern one page parallax portfolio theme for agencies, artists and freelancers">
                        <figcaption>
                            <h2>Safari</h2>
                            <span>Jacob Cummings</span>
                            <a href="http://dribbble.com/shots/1231574-Portfolio">Take a look</a>
                        </figcaption>
                    </figure>
                </li>
                <li class="col-xs-12 col-sm-6 col-md-4">
                    <figure>
                        <img src="images/portfolio/9.jpg" alt="D.Facto is modern one page parallax portfolio theme for agencies, artists and freelancers">
                        <figcaption>
                            <h2>Safari</h2>
                            <span>Jacob Cummings</span>
                            <a href="http://dribbble.com/shots/1232121-Radium-Redesign-Freebie-Sketch">Take a look</a>
                        </figcaption>
                    </figure>
                </li>
                <li class="col-xs-12 col-sm-6 col-md-4">
                    <figure>
                        <img src="images/portfolio/10.jpg" alt="D.Facto is modern one page parallax portfolio theme for agencies, artists and freelancers">
                        <figcaption>
                            <h2>Safari</h2>
                            <span>Jacob Cummings</span>
                            <a href="http://dribbble.com/shots/1232174-Treepoly">Take a look</a>
                        </figcaption>
                    </figure>
                </li>
                <li class="col-xs-12 col-sm-6 col-md-4">
                    <figure>
                        <img src="images/portfolio/11.jpg" alt="D.Facto is modern one page parallax portfolio theme for agencies, artists and freelancers">
                        <figcaption>
                            <h2>Safari</h2>
                            <span>Jacob Cummings</span>
                            <a href="http://dribbble.com/shots/1232004-Shiva">Take a look</a>
                        </figcaption>
                    </figure>
                </li>
                <li class="col-xs-12 col-sm-6 col-md-4">
                    <figure>
                        <img src="images/portfolio/12.jpg" alt="D.Facto is modern one page parallax portfolio theme for agencies, artists and freelancers">
                        <figcaption>
                            <h2>Safari</h2>
                            <span>Jacob Cummings</span>
                            <a href="http://dribbble.com/shots/1231517-Ponche-Loco">Take a look</a>
                        </figcaption>
                    </figure>
                </li>
                </ul>
            <hr>

            <div class="row">
                <div class="page-header text-center col-sm-12 col-lg-12 margin-top">
                    <hr>
                    <h3>Our awesome products</h3>
                    <p class="lead">Amazing Tools To Build Awesome Websites</p>
                </div>
            </div>

            
            <div class="row">

                <div id="cbp-so-scroller" class="cbp-so-scroller">

                    <section class="cbp-so-section top-padding">
                        <div class="col-sm-6 col-lg-8">
                            <figure class="cbp-so-side cbp-so-side-left">
                                <img src="images/img/dfacto_bootstrap3_promo.png" alt="D.Facto Premium Theme" class="img-responsive">
                            </figure>
                        </div>
                        <div class="col-sm-6 col-lg-4 promo-title">
                            <article class="cbp-so-side cbp-so-side-right">
                                <h2>ULTRA RESPONSIVE</h2>
                                <p>Lectores legere me lius quod ii legunt saepius claritas est etiam processus dynamicus qui sequitur mutationem! </p><p>Iusto odio dignissim qui blandit praesent. Quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea. Lorem ipsum dolor sit amet consectetuer adipiscing elit sed diam nonummy nibh euismod tincidunt ut.</p>
                            </article>
                        </div>
            
                    </section>
                </div>
            </div>

        </div><!-- END ROW -->
    </div><!-- END CONTAINER  -->


</section>

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. 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 - D.Facto/assets/css/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 /css/ 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
bootstrap.min.css This is the main CSS file Bootstrap 3 framework.
style.css The theme’s main stylesheet and determines the majority of the theme’s styling.
settings.css Revolution slider core CSS.
custom.css Have fun adding your style here :)

CSS Structure

style.css file contains all of the specific stylings for the page.


/* 
==========================================================
    THEME NAME:  D.FACTO
    THEME URI:   http://www.mojo-themes.com/user/az-design/
    DESCRIPTION: D.Facto is modern one page parallax portfolio theme for agencies, artists and freelancers.
    Author:      RedFatCat Design
    Author:      URI:http://www.mojo-themes.com/user/az-design/
    VERSION:     1.2.0
    LICENSE:     GNU General Public License
    LICENSE URI: license.txt
========================================================== */


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/
custom.js This file controls various sections of JS throughout the theme dependant on settings in the theme options.
bootstrap.min.js All of our plugins and the necessary JavaScript to make Bootstrap 3 work properly.
tweetable.jquery.min.js Tweetable - A jQuery plugin for displaying twitter feeds.
cbpScroller.js jQuery plugin for displaying scroll effect layout.
jquery.easing.1.3.js A jQuery plugin from GSGD to give advanced easing options.
jquery.parallax-1.1.3.js jQuery Parallax is a script that simulates the parallax effect.
jquery.themepunch.revolution.min.js Slider Revolution Responsive jQuery Plugin.
toucheffects.js A jQuery plugin for stylish hover effects for image captions.
jquery.scrollTo.min.js A very light and highly customizable jQuery plugin, to scroll overflowed elements or the window itself.
jquery.nicescroll.min.js Nicescroll plugin for jquery - scrollbars like iphone/ipad
jquery.timeago.js Timeago is a jQuery plugin that makes it easy to support automatically updating fuzzy timestamps (e.g. "4 minutes ago" or "about 1 day ago")
modernizr.custom.js Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.

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 one line of code: form action. Copy and paste this code into the page.

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

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



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.