Kwoon 幫助文檔

又一份由 ♥ 精心製作的文件，來自 elemis

感謝您購買我們的主題。如果您有任何超出本幫助文件範圍的問題，請隨時通過我們的用戶頁面聯繫表單或項目討論區發送電子郵件給我們。

聯繫表單

項目支援

更新日誌

致謝

頁首高度 / 滾動偏移

根據您的標誌高度，頁首高度可能會改變，並影響滾動偏移。您需要同時編輯 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 種頁首選項可供選擇

檔案名稱	描述
`header1.html`	深色透明
`header2.html`	深色實心
`header3.html`	深色含詳細資訊
`header4.html`	深色居中
`header5.html`	淺色透明
`header6.html`	淺色實心
`header7.html`	淺色含詳細資訊
`header8.html`	淺色居中

選單

基本導航/選單結構：

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

Retina 圖片

為了在配備 Retina 顯示器的裝置上顯示高解析度圖片，您需要兩個版本的圖片。一個是常規尺寸，另一個是其兩倍大小。高解析度版本應使用完全相同的名稱，並在結尾加上 @2x 。您還需要在圖片標籤中添加類別 retina 。

檔案名稱	描述
`logo.png`	預設標誌（例如：100x100px）
`[email protected]`	高解析度標誌（例如：200x200px）

使用方式：

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

Google 地圖

Google 地圖是使用 Google 地圖產生器.

如果您喜歡模板中地圖的外觀，您只需更改右側高亮的值（緯度、經度和地址）

<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、Flickr 和 Dribbble 作品。範例可以在 social.html

Instagram

由於 Instagram API 最近的變更，設置 Instagram 動態的過程變得稍微複雜，但本指南將逐步協助您完成。基本上，您需要創建一個客戶端（以便 Instagram 知道您是誰），然後獲取一個存取令牌（讓您的網站有權顯示圖片的憑證）。

步驟 1 - 創建客戶端

首先，您需要訪問，您將看到以下畫面。

點擊「註冊您的應用程式」按鈕繼續下一步。在下一個畫面（如下所示）中，點擊「註冊一個新客戶端」

接下來，您需要填寫提供的表單——大部分內容不言自明，關鍵是要記住在有效的重定向 URL 欄位中輸入以下內容

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

好的，步驟 1 完成了，您現在有了一個客戶端，更重要的是，您有了下一步所需的客戶端 ID。將此客戶端 ID 複製到記事本中，您很快就會再次用到它。

步驟 2 - 編輯客戶端

現在您有了一個客戶端，您需要允許它授權使用您的圖片。為此，點擊「編輯」連結開始編輯您的客戶端設定。

進入設定後，前往「安全」標籤頁並取消勾選勾選停用隱含 OAuth 選項然後點擊儲存。

第三步 - 整合所有步驟

還記得之前的客戶端 ID 嗎？您在這裡會需要用到它。

要建立所需的 Token（用於輸入主題選項），您需要將此網址複製到任何文字或程式碼編輯器中。

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

將 CLIENT-ID-HERE 文字替換為您的實際客戶端 ID，然後將完整的網址（包含您自己的 ID）複製到瀏覽器中。

接下來，系統會要求您授權存取，只需點擊「授權」按鈕，然後繼續進行最後一步。

完成後，您會看到這個畫面。

將提供的 Token 複製為「accessToken」的值，放在 style/js/scripts.js 「INSTAGRAM」下方。

要顯示您自己的 Instagram 照片，您還需要「userId」。取得存取權杖後，請造訪以下網址（將 ACCESS-TOKEN 替換為您自己的數值權杖），結果畫面上的最後一個參數就是您的數值使用者 ID：

然後將您的數值使用者 ID 複製為「userId」的值，放在 style/js/scripts.js 「INSTAGRAM」下方。

Flickr

要擷取您自己的 Flickr 圖片，您需要編輯「id」的值，放在 style/js/scripts.js 「FLICKR」下方

您可以取得您的 Flickr ID 這裡.

Dribbble

要擷取您自己的 Dribbble 內容，您需要編輯「username」的值，放在 style/js/scripts.js 「DRIBBBLE」下方

作品集

共有 7 種不同的版面配置供您選擇。

警告： 請注意，由於某些瀏覽器會拒絕本機 AJAX 請求，「載入更多」按鈕在本地端無法運作。請在可運作的網路伺服器上進行測試。

檔案名稱	描述
`portfolio.html`	網格 3 欄
`portfolio2.html`	網格 4 欄
`portfolio3.html`	詳細網格 3 欄
`portfolio4.html`	詳細網格 4 欄
`portfolio5.html`	瀑布流作品集
`portfolio6.html`	經典瀑布流作品集
`portfolio7.html`	全螢幕作品集

作品集文章版面配置

共有 12 種不同的版面配置供您選擇。當然，您可以混合及/或修改這些版面，並建立自己的版面配置。

檔案名稱	描述
`portfolio-post.html`	含圖片的作品集文章
`portfolio-post2.html`	含輪播的作品集文章
`portfolio-post3.html`	含多欄的作品集文章
`portfolio-post4.html`	含半圖片的作品集文章
`portfolio-post5.html`	含影片的作品集文章
`portfolio-post6.html`	含半影片的作品集文章
`portfolio-post7.html`	含全寬滑桿的作品集文章
`portfolio-post8.html`	含滑桿的作品集文章
`portfolio-post9.html`	含半滑桿的作品集文章
`portfolio-post10.html`	含側邊欄的作品集文章
`portfolio-post11.html`	含音訊的作品集文章
`portfolio-post12.html`	含瀑布流畫廊的作品集文章

滑桿元素與選項

您可以在範本套件中的 help/slider-help 檔案中找到關於 Revolution Slider 元素與選項的詳細資訊。

再次感謝您購買此主題。如同開頭所述，如果您對這個主題有任何疑問，我們很樂意提供協助。不保證一定能解決，但我們會盡力協助。如果您對 ThemeForest 上的主題有更一般性的問題，可以考慮造訪論壇，並在「項目討論」區塊中提出您的問題。

Kwoon 幫助文檔

一般樣式自定義與重點提示

頁首高度 / 滾動偏移

style.css

style/js/scripts.js

頁首樣式

選單

Retina 圖片

使用方式：

社交圖示（完整列表）

配色方案

視差效果

HTML

style.css

聯繫表單

更改字型

電子報

更改字型

Google 地圖

Owl Carousel

作品集作品集自訂

作品集

作品集文章版面配置

Revolution Slider 滑桿自訂與重點功能

滑桿元素與選項

Kwoon 幫助文檔

一般 樣式自定義與重點提示

頁首高度 / 滾動偏移

style.css

style/js/scripts.js

頁首樣式

選單

Retina 圖片

使用方式：

社交圖示 （完整列表）

配色方案

視差效果

HTML

style.css

聯繫表單

更改字型

電子報

更改字型

Google 地圖

Owl Carousel

社交動態

Instagram

Flickr

Dribbble

作品集 作品集自訂

作品集

作品集文章版面配置

Revolution Slider 滑桿自訂與重點功能

滑桿元素與選項

一般樣式自定義與重點提示

社交圖示（完整列表）

作品集作品集自訂