Welcome to the tutorial page

Please use this page as a guide line for managing the content and the structure of the site.

File Structure
Navigation
Pages
Layers

File Structure

css folder

where all the styles for the pages, layers are kept. You don’t really have to go into this page to add content, however if you felt like changing some colours, or some sizes, you can go into this folder and tweak a file called ‘main.css’

img folder

holds all the images you see on the page, the layers and background pictures are all kept in this folder, and the images for the plants are kept in the plants folder. If you decide to add another plant add the image into this folder.

views folder

This is where all the content is managed and edited. This folder holds the main files needed for the site:

navigation folder: holds a file called navigation.php where you can change the amount of navigation buttons and the names of the menu’s. Click here to learn more about editing the navigation.php file.
pages folder: holds all the pages you see appear when clicking on the navigation buttons. Click here to learn more about editing the content you see from each navigation.
controller.php: this page holds the layers and also the pages.
layerstructure.php: this page holds all the layers which are holding the plants and allowing the parallax to work, this is where you can change what plants are being shown, and what content for the plants, and also change how many layers, and what background the layer shows. Click here to learn more about layers.
pagestructure.php: this page holds the pages holding the content, you only need to edit this file when adding a new page. Click here to learn more about pages.

Navigation

This page is in charge of the blue navigation. You can change the navigation names on this page, and also which pages they show up.
This code here :

                            <li class="span3">3;
                            <a id="home-nav" href='#home'>Situs Herbalis </a>
                            </li>

The id tag is used to match the page, and must end start with the id tag of the page and end with a ‘-nav’. The href tag is used to also match to the page, however it must be identical to id tag of the page and start with a ‘#’
The middle section ‘Situs Herbalis’ is the name of the menu. Every new menu created must follow this structure.

Note: the li tags which hold a class ‘span3’ is used to make sure that the navigations fit on the width of the screen provided, it is using a useful html framework called bootstrap click here to visit the website to get more information on how it works. But to keep things simple the span classes work in additions of twelve, you will notice that the code uses ‘span3’ and only has 4 li tags to create 4 blue navigation buttons, if you where to add another navigation, you will need to change the number on the class to match an addition of twelve. By adding another li tag with the same class span3 you will end up with 5 navigation buttons which adds up to 15 and you will notice the fifth navigation jumps to the bottom because we are now greater than 12.

To change the links to the right you only have to edit this section:

                            <div class="span3 copyright pull-right">
                                2013 © <a href="http://www.ipeqi.com/" target="_blank">ipeqi</a>
                                 & <a href="http://www.karmava.com/" target="_blank">KarmaVA</a>
                            </div>

Pages

The file ‘pagestructure.php’ – holds all the pages, if a new page is created, you will need to add the page in this file in order for it to be seen.
The code looks like this:

                            <div class="row-fluid pages tab-content">
                                            <?php include('views/pages/home.php'); ?>
                                            <?php include('views/pages/goodtoknow.php'); ?>
                                            <?php include('views/pages/goodtogo.php'); ?>
                                            <?php include('views/pages/googlemap.php'); ?>
                            </div>

At the moment 4 pages are available, and all are added in this tag with the structure:
<?php include('views/pages/nameofpage.php'); ?>
Simply copy that structure and change the ‘nameofpage’ to the new page you have created in the pages folder. Read on to find out about creating pages and making them work with the navigation.

Individual Pages Structure

All pages have the same structure but different id tags.
At the moment there are four pages :

goodtogo.php, goodtoknow.php, googlemap.php, home.php

The pages all have the same html structure:

                            <div id="name-of-page" class="tab-pane page row-fluid box-radius20">
                                <div class="content">
                                    <div class="row-fluid">
                                        <button class="close clearfix">×</button>
                                    </div>
                                    <!-- insert content in this tag -->
                                    <div class="row-fluid">
                                        <div class="span12">
                                            <p>
                                            Insert home content here
                                            </p>
                                       </div>
                                    </div>
                                </div>
                            </div><!-- #name of page -->

Each page is constructed with an id and a set of classes:
<div id="name-of-page" class="tab-pane page row-fluid box-radius20">
To make a new page you simply copy the basic structure, and change the id tag to the name of the page or what name you decide to use, however if you make a new page you must make sure that there is also a navigation created in the navigation.php file. Click here to read about navigation.

To change the content in the page you only need to change what is in the span12 tag, in this example:

                            <div class="row-fluid">
                                <div class="span12">
                                    <p>
                                    Insert home content here
                                    </p>
                                </div>
                            </div>

You can change what you see on the page by changing what is inside this tag:


                            <p>
                                Insert home content here
                            </p>

You can also add whatever html you like in here, it is a good idea to read up on bootstrap, to help you build extra content on these pages and have it also show better on mobile.

Layers

All layers are controlled by one file ‘layerstructure.php’, in the file you will notice that there are 5 layers all commented with:
 nth stands for the order of the layer, the order of the layers determine which layer show’s in front or behind which layer.
Each layer is constructed with this :

                            <div class="span12 floater parallax-layer" style="width:2564px; bottom:0px; z-index:90;">
                                <!-- layer background -->
                                <img class="floater" src="img/sky.png" border="0" style="top:0px;" />

                                <!-- plants -->
                                <img data-toggle="popover" data-placement="right" data-content="This is the tree content" 
                                data-original-title="Beech Tree" class="plant floater" src="img/plants/beech_tree.png" 
                                border="0" style="bottom:277px; left:2%"/>
                            </div><!-- .background-slider -->

The first line:


                            <div class="span12 floater parallax-layer" style="width:2564px; bottom:0px; z-index:90;">

This starts the creation of the layer, all layers take the same class names, and styles, however the only thing that changes is the width of the layer, to make the parallax look good, if the layer is behind another layer that it must be at least wider than the layer in front, and vice versa for layers in front of other layers.

With this line :


                            <img class="floater" src="img/sky.png" border="0" style="top:0px;" />

This is the background image for the layer, in this example it is the sky, when creating a new background image layer it must follow this structure, however you can alter the img tag to what image you would like when making a new layer.

The next few lines :

                        <!-- plants -->
                        <img data-toggle="popover" data-placement="right" data-content="This is the tree content" 
                        data-original-title="Beech Tree" class="plant floater" src="img/plants/beech_tree.png" 
                        border="0" style="bottom:277px; left:2%"/>

This is a plant on the screen, it plant must follow the same structure and just like the layers, you can edit the image shown by altering the img tag’s src to what plant you are looking for all plant images are kept in the plants folder ‘img/plants’.
To change some settings for the plants such as the location of the pop up, the title of the pop up and content there are a 3 tags to look out for:

data-placement: change this to either top, right, left, bottom.
data-content: this is the actual text that appears in the pop up.
data-original-title: this is the title that shows up in the pop up.