Kwoon Help Documentation

Header Height / Scroll Offset

Depending on your logo height, the header height may change and it will effect the scroll offsets. You need to edit both style.css and style/js/scripts.js files. Please measure your header height and if it is different than the original value, replace the values of highlighted areas.

style.css

.offset {
	padding-top: 100px; /* height of header1, header2, header5 and header6 */
}
.offset2 {
	padding-top: 145px; /* height of header3 and header7 */
}
.offset3 {
	padding-top: 159px; /* height of header4 and header8 */
}

style/js/scripts.js

/*-----------------------------------------------------------------------------------*/
/*	SCROLL NAVIGATION HIGHLIGHT
/*-----------------------------------------------------------------------------------*/
$(document).ready(function() {
	headerWrapper		= parseInt($('.navbar').height(), 10);
    
    var header_height = $('.navbar').height();
	var shrinked_header_height = 68; /* sticky header height */
  
...  
  

Header Styles

There are 8 header options available

Menu

Basic Navigation/Menu Structure:

      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
	 <li class="current"><a href="index.html"><strong>Single & Current Menu Item</strong></a></li>
          <li class="dropdown"><a href="#" class="dropdown-toggle js-activated">Menu Item with Dropdown</a>
            <ul class="dropdown-menu">
              <li class="dropdown-submenu"> <a href="#">Submenu Levels</a>
                <ul class="dropdown-menu">
                  <li><a href="#">Second Level</a></li>
                  <li class="dropdown-submenu"> <a href="#">More</a>
                    <ul class="dropdown-menu">
                      <li><a href="#">Third Level</a></li>
                      <li><a href="#">Third Level</a></li>
                    </ul>
                  </li>
                  <li><a href="#">Second Level</a></li>
                  <li><a href="#">Second Level</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li class="dropdown yamm-fullwidth"><a href="#" class="dropdown-toggle js-activated">Mega Menu <span class="caret"></span></a>
            <ul class="dropdown-menu yamm-dropdown-menu">
              <li>
                <div class="yamm-content">
                  Mega Menu Content
                </div>
              </li>
            </ul>
          </li>
        </ul>
        <!-- /.navbar-nav --> 
      </div>
      <!-- /.navbar-collapse --> 

Retina Images

In order to display a high resolution image on devices with retina display, you need two versions of the image. One with regular size and another with twice its size. The high resolution one should have the exact same name with @2x at the end. You will also need to add class retina to the image tag.

Usage:

<img src="style/images/logo.webp" alt="" data-src="style/images/logo.webp" data-ret="style/images/[email protected]" class="retina" />

Social Icons (Complete List)

The list of all available styled social icons to use in the footer or any other place.

<ul class="social">
	<li><a href="#"><i class="icon-s-rss"></i></a></li>
	<li><a href="#"><i class="icon-s-twitter"></i></a></li>
	<li><a href="#"><i class="icon-s-facebook"></i></a></li>
	<li><a href="#"><i class="icon-s-dribbble"></i></a></li>
	<li><a href="#"><i class="icon-s-pinterest"></i></a></li>
	<li><a href="#"><i class="icon-s-flickr"></i></a></li>
	<li><a href="#"><i class="icon-s-vimeo"></i></a></li>
	<li><a href="#"><i class="icon-s-youtube"></i></a></li>
	<li><a href="#"><i class="icon-s-skype"></i></a></li>
	<li><a href="#"><i class="icon-s-tumblr"></i></a></li>
	<li><a href="#"><i class="icon-s-linkedin"></i></a></li>
	<li><a href="#"><i class="icon-s-behance"></i></a></li>
	<li><a href="#"><i class="icon-s-github"></i></a></li>
	<li><a href="#"><i class="icon-s-delicious"></i></a></li>
	<li><a href="#"><i class="icon-s-500px"></i></a></li>
	<li><a href="#"><i class="icon-s-grooveshark"></i></a></li>
	<li><a href="#"><i class="icon-s-forrst"></i></a></li>
	<li><a href="#"><i class="icon-s-digg"></i></a></li>
	<li><a href="#"><i class="icon-s-blogger"></i></a></li>
	<li><a href="#"><i class="icon-s-klout"></i></a></li>
	<li><a href="#"><i class="icon-s-dropbox"></i></a></li>
	<li><a href="#"><i class="icon-s-songkick"></i></a></li>
	<li><a href="#"><i class="icon-s-posterous"></i></a></li>
	<li><a href="#"><i class="icon-s-appnet"></i></a></li>
	<li><a href="#"><i class="icon-s-gplus"></i></a></li>
	<li><a href="#"><i class="icon-s-stumbleupon"></i></a></li>
	<li><a href="#"><i class="icon-s-lastfm"></i></a></li>
	<li><a href="#"><i class="icon-s-spotify"></i></a></li>
	<li><a href="#"><i class="icon-s-instagram"></i></a></li>
	<li><a href="#"><i class="icon-s-evernote"></i></a></li>
	<li><a href="#"><i class="icon-s-paypal"></i></a></li>
	<li><a href="#"><i class="icon-s-picasa"></i></a></li>
	<li><a href="#"><i class="icon-s-soundcloud"></i></a></li>
</ul>

Color Scheme

There are 14 color options: aqua, blue, brown, gray, green, lime, mint, navy, orange, pink, purple, red, rose and yellow the default being blue. To change the default color scheme you will have to edit the color css file name in each HTML page.

<link href="style/css/color/blue.css" rel="stylesheet">

Parallax Effect

The basic structure of the sections that have the parallax effect.

HTML

<div class="parallax parallax1">
  <div class="container inner">
    Parallax Content
  </div>
</div>

Each parallax section should have a specific class/id so you can apply different background images in style.css.

style.css

.parallax1 {
	background-image: url(style/images/art/parallax1.webp);
}

Contact Form

Update contact/vanilla-form.php and point recipients e-mail address by editing TO_EMAIL constant. On to these email address all form inquires/messages will be send.

// If is not empty it sets a header From in e-mail message (sets sender e-mail).
    // Note: some hosting servers can block sending e-mails with custom From field in header.
    //       If so, leave this field as empty.
    define('FROM_EMAIL', '');

    // Recipient's e-mail. To this e-mail messages will be sent.
    // e.g.: [email protected]
    // multiple recipients e.g.: [email protected], [email protected]
    define('TO_EMAIL', '[email protected]');

<label>
	<input type="checkbox" name="example" value="true" required="required">
	<span><!-- fake checkbox --></span>
	<span class="wrapped-label">Checkbox Example</span>
</label>

Changing Fonts

If you would like to use a different font, copy the font link in Google Fonts page and paste it before closing head tag in your HTML files.

<link href='http://fonts.googleapis.com/css?family=Raleway:400,300,500,600,700,800,900' rel='stylesheet' type='text/css'>

Then you need to add the font name to your CSS styles.

body {
    font-family: 'Raleway', sans-serif;
}

Newsletter

The template is compatible with Mailchimp Newsletter.

You can create your own custom newsletter form through Lists - Create a List - Signup Forms - Embedded Forms in Mailchimp website. Replacing the form action with the one in your generated newsletter code should be enough to personalize the existing forms in the template.

Changing Fonts

If you would like to use different Google Fonts, copy the font link in Google Fonts page and paste it before closing head tag in your HTML files.

<link href='http://fonts.googleapis.com/css?family=Raleway:400,300,500,600,700,800,900' rel='stylesheet' type='text/css'>

围绕用户友好界面设计，海星体育持续打磨更优质的服务。

body {
    font-family: 'Raleway', sans-serif;
}

Google Map

Google Map is generated using Google Map Builder.

If you like how the map in the template looks, all you have to do is changing the highlighted values on the right (Latitude,Latitude and address)

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA1xdEVYy8IZdBKJGQp_QpDWaNQT7ZHGhY&sensor=false&extension=.js"></script> 
    <script> google.maps.event.addDomListener(window, 'load', init);
var map;
function init() {
    var mapOptions = {
        center: new google.maps.LatLng(51.211215, 3.226287),
        zoom: 15,
        zoomControl: true,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.DEFAULT,
        },
        disableDoubleClickZoom: false,
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
        },
        scaleControl: true,
        scrollwheel: false,
        streetViewControl: true,
        draggable : true,
        overviewMapControl: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
		styles: [{stylers:[{saturation:-100},{gamma:1}]},{elementType:"labels.text.stroke",stylers:[{visibility:"off"}]},{featureType:"poi.business",elementType:"labels.text",stylers:[{visibility:"off"}]},{featureType:"poi.business",elementType:"labels.icon",stylers:[{visibility:"off"}]},{featureType:"poi.place_of_worship",elementType:"labels.text",stylers:[{visibility:"off"}]},{featureType:"poi.place_of_worship",elementType:"labels.icon",stylers:[{visibility:"off"}]},{featureType:"road",elementType:"geometry",stylers:[{visibility:"simplified"}]},{featureType:"water",stylers:[{visibility:"on"},{saturation:50},{gamma:0},{hue:"#50a5d1"}]},{featureType:"administrative.neighborhood",elementType:"labels.text.fill",stylers:[{color:"#333333"}]},{featureType:"road.local",elementType:"labels.text",stylers:[{weight:0.5},{color:"#333333"}]},{featureType:"transit.station",elementType:"labels.icon",stylers:[{gamma:1},{saturation:50}]}]
		}

    var mapElement = document.getElementById('map');
    var map = new google.maps.Map(mapElement, mapOptions);
    var locations = [
        ['Boudewijn Ostenstraat 2', 51.211215, 3.226287]
    ];
    for (i = 0; i < locations.length; i++) {
        marker = new google.maps.Marker({
            icon: 'style/images/map-pin.png',
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map
        });
    }
}
</script> 

Owl Carousel

Carousels and portfolio sliders are all created using Owl Carousel. You can change the carousel settings in style/js/scripts.js under "OWL CAROUSEL". Detailed information and options can be found in http://www.owlcarousel.owlgraphic.com

You can display your latest Instagram, Flickr and Dribbble shots in carousels. Examples can be found in social.html

Instagram

Due to recent changes in the Instagram API - the process for setting up an instagram feed has become a little trickier, but this guide will help with every step of the way. Essentially you need to create a Client (so Instagram know who you are), and then an access token (the thing that gives your site permission to show images)

Step 1 - Creating A Client

To begin, you will need to visit https://www.instagram.com/developer/, where you will be greeted by the following screen.

Hit the 'Register Your Application' button to continue to the next step. On the next screen (seen below) hit 'Register a New Client'

Next, you need to fill in the form provided - most of it is self-explanatory, the key thing to remember is to enter the following in the Valid Redirect URL field

http://www.tommusrhodus.com/instagram/

Ok, step 1 is done, you now have a client, and more crucially, you now have the Client ID you need for the next part. Copy this Client ID into a notepad, you will need it again soon.

Step 2 - Edit Client

Now you have a client, your going to need to allow it to authorise use of your images. To do this, hit the Edit link to begin editing your clients settings.

Once in the settings, head to the Security tab and Uncheck the Disable Implicit OAuth option and hit save.

Step 3 - Putting It All Together

Remember that Client ID from before? Your going to need it here.

To create the Token needed (to enter into the theme options) you will need to copy this url into whatever text/code editor you wish

https://api.instagram.com/oauth/authorize/?client_id=CLIENT-ID-HERE&redirect_uri=http://www.tommusrhodus.com/instagram/&response_type=token&scope=public_content

Replace the CLIENT-ID-HERE text with your actual client ID and then copy the whole URL (complete with your own ID) into your browser.

Next, you will be asked to Authorise access, just hit the Authorise button and continue to the final step.

Once done, you will be presented with this screen.

Copy the Token provided as the "accessToken" value in style/js/scripts.js under "INSTAGRAM".

To display your own Instagram shots, you also need your "userId".  Once you have an access token, visit the following URL (replacing ACCESS-TOKEN with your own numeric token) and the last parameter on the resulting screen will be your numeric user ID: https://api.instagram.com/v1/users/self/?access_token=ACCESS-TOKEN 

Then copy your numeric user ID as "userId"value in  style/js/scripts.js under "INSTAGRAM".

Flickr

To fetch your own Flickr images, you will need to edit the "id" value entered in style/js/scripts.js under "FLICKR"

You can get your Flickr ID here.

Dribbble

To fetch your own Dribbble, you will need to edit the "username" value entered in style/js/scripts.js under "DRIBBBLE"

Portfolios

There are 7 different layouts available for you to choose from.

Portfolio Post Layouts

There are 12 different layouts available for you to choose from. Of course, you can mix and/or alter these and create your own layouts.