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="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)

开云体育下载以稳定流畅的操作体验为核心，带来高效便捷的体验。

<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

想了解更多安全可靠的数字资产保障相关内容，尽在开云体育下载。

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

开云体育下载围绕开云体育不断创新，回应用户的真实需求。

<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;
}

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

围绕海量热门赛事一手掌握，开云体育下载持续打磨更优质的服务。

<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.

开云体育下载深耕实时数据更新，精准预测领域，用心服务每一位用户。

<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

Instagram

开云体育下载深耕实时数据更新，精准预测领域，用心服务每一位用户。

Step 1 - Creating A Client

To begin, you will need to visit , where you will be greeted by the following screen.

在互动游戏与精彩内容无缝融合方面，开云体育下载提供贴心周到的支持。

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/

开云体育下载以稳定流畅的操作体验为核心，带来高效便捷的体验。

Step 2 - Edit Client

想了解更多安全可靠的数字资产保障相关内容，尽在开云体育下载。

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

开云体育下载围绕开云体育不断创新，回应用户的真实需求。

精选开运内容，开云体育下载与你一同发现更多精彩。

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.

开云体育下载专注开云官网，为用户提供专业可靠的体验。

围绕海量热门赛事一手掌握，开云体育下载持续打磨更优质的服务。

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:  

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

Dribbble

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

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

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.

Portfolios

开云体育下载深耕实时数据更新，精准预测领域，用心服务每一位用户。

Portfolio Post Layouts

在互动游戏与精彩内容无缝融合方面，开云体育下载提供贴心周到的支持。