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新闻通讯。

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

更改字体

如果您想使用不同的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

Instagram

由于Instagram API近期的更改，设置Instagram动态的过程变得稍微复杂了一些，但本指南将逐步帮助您完成。本质上，您需要创建一个客户端（以便Instagram知道您是谁），然后获取一个访问令牌（允许您的网站显示图片的凭证）。

步骤1 - 创建客户端

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

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

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

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

好了，第一步完成，您现在有了一个客户端，更重要的是，您拥有了下一步所需的客户端ID。将此客户端ID复制到记事本中，您很快会再次用到它。

步骤2 - 编辑客户端

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

进入设置后，前往“安全”选项卡并 取消勾选 勾选 禁用隐式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

Dribbble

要获取您自己的Dribbble内容，您需要编辑"username"值，该值位于 style/js/scripts.js "DRIBBBLE"下

Flickr

要获取您自己的Flickr图片，您需要编辑"id"值，该值位于 style/js/scripts.js "FLICKR"下

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

作品集

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

作品集文章布局

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