Kwoon 帮助文档

头部高度 / 滚动偏移

根据您的Logo高度，头部高度可能会发生变化，并影响滚动偏移。您需要同时编辑 style.css 和 style/js/scripts.js 文件。请测量您的头部高度，如果与原始值不同，请替换高亮区域的值。

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

头部样式

共有8种头部选项可用

菜单

基本导航/菜单结构：

      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
	 <li class="current"><a href="index.html"><strong>单个及当前菜单项</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 --> 

视网膜图像

为了在视网膜显示屏的设备上显示高分辨率图像，您需要两个版本的图像。一个为常规尺寸，另一个为其两倍大小。高分辨率版本应使用完全相同的名称，并在末尾加上 @2x 。您还需要在图像标签中添加类 retina 。

使用方法：

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

社交图标 （完整列表）

所有可用样式社交图标列表，用于页脚或其他位置。

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

配色方案

共有14种颜色选项： aqua, blue, brown, gray, green, lime, mint, navy, orange, pink, purple, red, rose 和 yellow 默认颜色为蓝色。要更改默认配色方案，您需要编辑每个HTML页面中的颜色CSS文件名。

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

视差效果

具有视差效果的区块基本结构。

HTML

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

每个视差区块应具有特定的类/ID，以便您可以在其中应用不同的背景图片 style.css.

style.css

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

联系表单

更新 contact/vanilla-form.php 并通过编辑TO_EMAIL常量指定收件人邮箱地址。所有表单咨询/消息将发送至此邮箱地址。

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

更改字体

如果您想使用不同的字体，请复制Google Fonts页面中的字体链接，并将其粘贴到HTML文件中结束head标签之前。

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

然后您需要将字体名称添加到CSS样式中。

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

新闻通讯

该模板兼容Mailchimp新闻通讯。

您可以通过Mailchimp网站创建自己的自定义新闻通讯表单。 Lists - Create a List - Signup Forms - Embedded Forms 将表单操作替换为您生成的新闻通讯代码中的操作，即可个性化模板中的现有表单。

更改字体

如果您想使用不同的Google字体，请复制Google Fonts页面中的字体链接，并将其粘贴到HTML文件中结束head标签之前。

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

谷歌地图

谷歌地图通过以下方式生成 谷歌地图生成器.

如果你喜欢模板中地图的样式，只需更改右侧高亮显示的值（纬度、经度和地址）即可

<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 轮播插件

所有轮播和作品集滑块均使用 Owl Carousel 创建。你可以在 style/js/scripts.js 下的“OWL CAROUSEL”中更改轮播设置。详细信息和选项可在 http://www.owlcarousel.owlgraphic.com

Flickr

要获取你自己的Flickr图片，你需要编辑中输入的"id"值 style/js/scripts.js 在"FLICKR"下

你可以在此处获取你的Flickr ID 此处.

Dribbble

要获取你自己的Dribbble内容，你需要编辑中输入的"username"值 style/js/scripts.js 在"DRIBBBLE"下

Instagram

由于 Instagram API 近期变更，设置 Instagram 动态源的过程变得稍微复杂，但本指南将逐步帮助你完成。本质上，你需要创建一个客户端（以便 Instagram 识别你的身份），然后获取一个访问令牌（用于授权你的网站显示图片）

步骤 1 - 创建客户端

首先，您需要访问 , 您将看到以下界面。

点击“注册您的应用”按钮以继续下一步。在下一个界面（如下所示）中，点击“注册新客户端”。

接下来，您需要填写提供的表单——大部分内容一目了然，关键是要在 有效的重定向URL 字段中输入以下内容

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

好的，第一步已完成，您现在拥有一个客户端，更重要的是，您已获得下一步所需的客户端ID。请将此客户端ID复制到记事本中，稍后您将再次用到它。

第二步 - 编辑客户端

现在您已拥有客户端，需要允许其授权使用您的图片。为此，请点击“编辑”链接开始编辑您的客户端设置。

进入设置后，请前往“安全”选项卡并 取消勾选 勾选 禁用隐式OAuth选项 并点击保存。

第三步 - 整合所有内容

还记得之前的客户端ID吗？你在这里会用到它。

要创建所需的令牌（用于输入主题选项），你需要将此URL复制到任意文本/代码编辑器中。

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

替换 客户端ID在此处 将文本替换为你的实际客户端ID，然后将完整的URL（包含你自己的ID）复制到浏览器中。

接下来，系统会要求你授权访问，只需点击授权按钮并继续到最后一步。

完成后，你将看到此屏幕。

将提供的令牌复制为"accessToken"值 style/js/scripts.js 在"INSTAGRAM"下。

要显示你自己的Instagram照片，你还需要你的"userId"。获得访问令牌后，请访问以下URL（将ACCESS-TOKEN替换为你自己的数字令牌），结果屏幕上的最后一个参数将是你的数字用户ID：  

然后复制你的 数字用户ID作为"userId"值  style/js/scripts.js 在"INSTAGRAM"下。

你可以在轮播中展示最新的 Instagram、Flickr 和 Dribbble 作品。示例可在 social.html

作品集

共有7种不同的布局供你选择。

作品集文章布局

共有12种不同的布局供你选择。当然，你也可以混合和/或修改这些布局，创建自己的布局。