Canna HTML Tempalte Documentation
Posted by GanjaParker

Thank you for purchasing our template. If you have any questions regarding our product feel free to visit our support forum

Getting Started

Unzip files from archive and you will find Html folder. Inside you'll find following files and folders:

/css - folder with css files
/fonts - folder with icon fonts
/img - folder with all images
/js - folder with jQuery script files
/revolution - folder with Slider Revolution plugin
contact.php - file for contact form

Note: Contact form will not work offline. You must upload your website on a server with support of PHP and PHP mail() function.

Color Scheme

We've included predefined color schemes into the package. Find css styles in the head of the html document and paste this line of css code. Change it to other color, depending on prefered color scheme. Ex: /colors/turquoise.css, /colors/violet.css


    <!-- Css -->
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/magnific-popup.css" />
    <link rel="stylesheet" href="revolution/css/settings.css" />
    <link rel="stylesheet" href="css/font-icons.css" />
    <link rel="stylesheet" href="css/rev-slider.css" />
    <link rel="stylesheet" href="css/sliders.css" />
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/responsive.css" />
    <link rel="stylesheet" href="css/spacings.css" />
    <link rel="stylesheet" href="css/animate.min.css" />
    <link rel="stylesheet" href="css/colors/red.css" />

Navigation

Basic navigation structure consist of the following code. To change the style from transparent to solid color you need to remove transparent class and remove light logo from the markup.


      <header class="nav-type-1 transparent">

        <div class="search-wrap">
          ...
        </div>
      
        <nav class="navbar navbar-static-top">
          <div class="navigation">
            <div class="container-fluid semi-fluid relative">
              <div class="row">

                <div class="navbar-header">
                  <!-- Logo -->
                  <div class="logo-container">
                    ...
                  </div>
                </div> <!-- end navbar-header -->

                <div class="col-md-12 nav-wrap">
                  <div class="collapse navbar-collapse text-center" id="navbar-collapse">
                    
                    <ul class="nav navbar-nav">
                      ...          
                    </ul> 
                  </div>
                </div> <!-- end nav-wrap -->

                <ul class="nav-right hidden-sm hidden-xs">
                  ...                      
                </ul>           
            
              </div>
            </div>
          </div>
        </nav>
      </header>

Contact Form

Open contact.php with any text editor and paste your email address in line 4. Save it.

$to = "testemail@gmail.com"; // Your email here

Note: Contact form will not work offline. You must upload your website on a server with support of PHP and PHP mail() function.

For DreamHost users

If you can't receive email, open contact.php and remove line 46:

$headers = 'From: ' . $mail .''. "\r\n".

Google Map

Paste your address in data-address attribute in the Google map div


      <div id="google-map" class="gmap" data-address="V Tytana St, Manila, Philippines"></div>

API key

Starting from July 2016, Google maps API will require a key, which you can get free. Just follow the instructions - here
When you have your key, paste it in Google maps script


      <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=PASTE-YOUR-KEY-HERE"></script>

Google map script

The Google map code is located after all other scripts in the bottom part of html.


    <!-- jQuery Scripts -->
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js"></script>
    <script type="text/javascript" src="js/gmap3.js"></script>
    <script type="text/javascript" src="js/plugins.js"></script>
    <script type="text/javascript" src="js/twitterFetcher_min.js"></script>
    <script type="text/javascript" src="revolution/js/jquery.themepunch.tools.min.js"></script>
    <script type="text/javascript" src="revolution/js/jquery.themepunch.revolution.min.js"></script>
    <script type="text/javascript" src="js/rev-slider.js"></script>
    <script type="text/javascript" src="js/scripts.js"></script>

    <!-- Google Map -->
    <script type="text/javascript">
      $(document).ready( function(){

        var gmapDiv = $("#google-map");
        var gmapMarker = gmapDiv.attr("data-address");

        gmapDiv.gmap3({
          zoom: 16,
          address: gmapMarker,
          oomControl: true,
          navigationControl: true,
          scrollwheel: false,
          styles: [
            {
            "featureType":"all",
            "elementType":"all",
              "stylers":[
                { "saturation":"0" }
              ]
          }]
        })
        .marker({
          address: gmapMarker,
          icon: "img/map_pin.png"
        })
        .infowindow({
          content: "V Tytana St, Manila, Philippines"
        })
        .then(function (infowindow) {
          var map = this.get(0);
          var marker = this.get(1);
          marker.addListener('click', function() {
            infowindow.open(map, marker);
          });
        });
      });
    </script>

To get Lat/Long, here is the - great service

Full list of features can be found - here

Credits

Support

If you have any question feel free to visit our Support Forum