安裝

按照以下的步驟來開始安裝你的網頁版型:

  1. 開啟 Package/HTML 資料夾來找到所有版型檔案
  2. 你需要利用FTP上傳這些檔案到你的網頁伺服器以便能在網頁上使用。
  3. 確保你上傳所需要的這些資料/資料夾如下,如果是Laravel專案請放到public資料夾內:
    • HTML/css - 額外的樣式表資料夾
    • HTML/include - 必須的PHP函式資料夾
    • HTML/images - 圖檔資料夾
    • HTML/js - Javacripts資料夾
    • HTML/style.css - 主要的樣式表檔案
    • HTML/index.html - 主頁/Homepage
    其他檔案可以根據你的喜好來使用。
  4. 導入css或js等檔案應該使用asset Helper Function,才能正確生成檔案路徑,以下為範例:
    <link rel="stylesheet" href="{{asset('css/bootstrap.css')}}" type="text/css" />
  5. 你現在可以準備開始囉!開始加上你的內容並且展現出你全新風格的美麗網站。

HTML 結構

Canvas按照一個簡單的編碼結構。這裡是他的範例:

<!DOCTYPE html>
<html dir="ltr" lang="zh-TW">
<head>

	<!-- 你的樣式表,Scripts & 標題
	============================================= -->
	...

</head>
<body>

	<!-- 主要包裝(The Main Wrapper)
	============================================= -->
	<div id="wrapper" class="clearfix">

		<!-- 標頭(Header)
		============================================= -->
		<header id="header">

			...

		</header>

		<!-- 網頁內容
		============================================= -->
		<section id="content">

			<div class="content-wrap">

				<div class="container clearfix">

					...

				</div>

			</div>

		</section>

		<!-- 頁尾(Footer)
		============================================= -->
		<footer id="footer" class="dark">

			<div class="container">

				...

			</div>

			<!-- 版權宣告(Copyrights)
			============================================= -->
			<div id="copyrights">

				<div class="container clearfix">

					...

				</div>

			</div>

		</footer>

	</div>

</body>
</html>

佈局設定(Layout Settings)

這些主題同時支援 Boxed & Wide Layout,詳情可參考這裡.加上class.stretched<body>將會讓你的網站變成Wide Layout:

<body class="stretched">

平滑滾動(Smooth Scrolling)

Canvas啟動平滑滾動在 Windows 桌機上以求有更好的體驗.如需關閉你只需要加入.no-smooth-scroll Class到<body>標籤。

Favicons & Apple Touch Icons

你可以加入 Favicon 到你的網站使用以下的程式碼:

<link rel="icon" href="favicon.png" type="image/png" sizes="16x16">

你可以加入Apple Touch Icons(顯示在iPhone/iPad桌面上的網頁icon) 到你的網站使用以下的程式碼:

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">

頁面載入切換(Page Loading Transitions)

你能夠顯示互動的載入切換來提示使用者當你的網頁仍在背景載入的時候,載入完後在利用CSS3 Transitions來揭示你的頁面。頁面載入動畫預設是開啟的,如果需要關閉的話,你只需要加入.no-transition Class到<body>標籤。

<body class="no-transition">

你可以客製你頁面載入的動畫使用以下屬性值:

  • data-animation-in -頁面載入動畫風格。例如 fadeIn
  • data-animation-out - 頁面跳出動畫風格。例如 fadeOut
  • data-speed-in - 頁面載入動畫速度,單位是微秒。 例如 1500
  • data-speed-out - 頁面跳出動畫速度,單位是微秒。 例如 800
  • data-loader - 載入動畫風格. 例如 2。 選項有 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13 and 14
  • data-loader-color - 載入動畫的HEX顏色。 例如 #FF0000
  • data-loader-timeout - 載入動畫TimeOut以結束未完成的動畫,單位是微秒。 例如 4000
  • data-loader-html - 加入客製HTML碼到載入動畫。
<body data-loader="2" data-animation-in="fadeIn" data-speed-in="1500" data-animation-out="fadeOut" data-speed-out="800">

配色方案(Color Schemes)

你可以快速變更你網站的配色方案,只需要變更HEX Color碼,就在 css/colors.css 檔 & 準備試看看吧。 透過以下幾個簡單步驟:

  1. 確保你加入了 css/colors.css 樣式表在你的head標籤內,就在responsive樣式表後.

    <head>
    
    	...
    
    	<link rel="stylesheet" href="css/responsive.css" type="text/css" />
    	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    	<!--[if lt IE 9]>
    		<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
    	<![endif]-->
    
    	<!-- 這裡加入你的colors.css
    	============================================= -->
    	<link rel="stylesheet" href="css/colors.css" type="text/css" />
    
    	...
    
    </head>
  2. 現在僅需根據你的需要來改變HEX Codes。

暗版方案(Dark Scheme)

你也能夠完全改變網站的配色風格到極端的暗系,只需加入.dark class到body標籤。

你也能夠加入.dark Class 到某些元素像是 #header, #primary-menu, .section, Slides, #footer & 還有很多其他元素, 這將會幫助你試驗出不同的配色方案。 這個 .dark Class 對於將容器內的文字變成亮色也非常有用!

改變字體(Changing Fonts)

為了讓你快速的變更字體我們包含了一個 css/fonts.css 檔案來方便管理你包進來的自定字體。 預設上, Canvas使用3種字體,那就是: Raleway. Lato & Crete Round 源於 Google字體庫. 你能夠找到字體檔案連結在head 標籤,散布於所有.html檔案。

<link href="http://fonts.googleapis.com/css?family=Lato:300,400,400italic,600,700|Raleway:300,400,500,600,700|Crete+Round:400italic" rel="stylesheet" type="text/css" />

為了要改變字體,你將需要編輯上方的連結用你自定義的字體,假如你想要使用一個Google字體又或是完全移除它改用本地字體檔。 這裡是一個例子使用 本地端字體.

你現在能夠改變Font Namescss/fonts.css 檔案內。

自定義主題(Theme Customization)

我們包含了一個自定義CSS檔案在css 資料夾內讓你能更好的處理你的自定義當更新Canvas到最新版本時。只需要加入所有你自定義CSS碼在css/custom.css檔案並將之連結到文件<head>css/responsive.css 連結之後. 而且要確定這是文件<head>最後連結的CSS檔案,這樣你的自定義CSS才能正常的覆蓋屬性。

範例:
<head>

	...

	<link rel="stylesheet" href="css/responsive.css" type="text/css" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
	<!--[if lt IE 9]>
		<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
	<![endif]-->

	<!-- 這裡擺放你的自定義custom.css
	============================================= -->
	<link rel="stylesheet" href="css/custom.css" type="text/css" />

</head>

RTL設定

我們包含了所有工具來讓你的網站能夠完全RTL化。 只需要按照以下步驟:

  1. 加入 dir="rtl"<html> 標籤。 範例:
    <html dir="rtl" lang="ar">
  2. 加入RTL相關的 CSS到文件 <head>範例:
    <head>
    
    	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    	<meta name="author" content="SemiColonWeb" />
    
    	<!-- Stylesheets
    	============================================= -->
    	<link href="http://fonts.googleapis.com/css?family=Lato:300,400,400italic,600,700|Raleway:300,400,500,600,700|Crete+Round:400italic" rel="stylesheet" type="text/css" />
    	<link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
    	<link rel="stylesheet" href="css/bootstrap-rtl.css" type="text/css" />
    	<link rel="stylesheet" href="style.css" type="text/css" />
    	<link rel="stylesheet" href="style-rtl.css" type="text/css" />
    	<link rel="stylesheet" href="css/dark.css" type="text/css" />
    	<link rel="stylesheet" href="css/dark-rtl.css" type="text/css" />
    	<link rel="stylesheet" href="css/font-icons.css" type="text/css" />
    	<link rel="stylesheet" href="css/font-icons-rtl.css" type="text/css" />
    	<link rel="stylesheet" href="css/animate.css" type="text/css" />
    	<link rel="stylesheet" href="css/magnific-popup.css" type="text/css" />
    
    	<link rel="stylesheet" href="css/responsive.css" type="text/css" />
    	<link rel="stylesheet" href="css/responsive-rtl.css" type="text/css" />
    	<meta name="viewport" content="width=device-width, initial-scale=1" />
    	<!--[if lt IE 9]>
    		<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
    	<![endif]-->
    
    	<!-- Document Title
    	============================================= -->
    	<title>Page | Canvas</title>
    
    </head>
  3. 加入 .rtl Class 到 <body> 標籤。 範例:
    <body class="stretched rtl">

LESS設定

  • 步驟 1:

    改變所有在你<head>標籤的以下CSS連結 :

    1. <link rel="stylesheet" href="style.css" type="text/css" />
    2. <link rel="stylesheet" href="css/dark.css" type="text/css" />
    3. <link rel="stylesheet" href="css/responsive.css" type="text/css" />

    到他們相對應的LESS連結:

    1. <link rel="stylesheet/less" href="style.less" type="text/less" />
    2. <link rel="stylesheet/less" href="less/dark.less" type="text/less" />
    3. <link rel="stylesheet/less" href="less/responsive.less" type="text/less" />
  • 步驟 2:

    js/plugins.js Script後面加入LESS Script連結在你的<head>標籤:

    <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.1.0/less.min.js"></script>
  • 步驟 3:

    開啟 less/variables.less 並根據需要編輯設定值。假如你需要更多進階設定你可以自己編輯對應的檔案,它們都位於less資料夾內。你應該只包含所需要使用的LESS檔案來最小化CSS數量,只包含所需要的Styles規格。這個能夠在你的style.less 檔案內去設定。

注意: LESS將能在編譯後完美運行,但它仍能夠被進行更多延伸。假如你有任何建議或需求要加入新功能到LESS檔案內,請 從這聯繫官方

網站優化秘訣

一個快速且優化過的網站有幾個重點需要被處理才能達到想要的結果,這裡有幾個優化技術絕對能夠正向的影響你的網站表現 & 我們想要分享其中一些給你:

  • gZip壓縮(gZip Compression) & 瀏覽器快取(Browser Caching)

    這應該是其中最重要的技術你絕對應該要執行從而快速提升你網站的載入速度。 gZip Compression 被用來壓縮當載入網站時被傳送的檔案。它包含了 HTML, CSS, Javascript & Font 檔案以及其他雜項文字檔, 而 Browser Caching 也包括圖片(Images) & 影像(Videos)除了包含以上檔案.這被用來儲存靜態資料在瀏覽器內。如此一來當你再次開啟相同的網站,內容將不需要重複下載,載入速度也就變得更快。

    gZip Compression & Browser Caching能夠啟用使用,透過編輯Apache網頁伺服器的.htaccess檔案.你能夠使用這裡的程式碼: https://github.com/h5bp/html5-boilerplate/blob/master/dist/.htaccess 來啟用你伺服器的這些模組。

  • 圖片壓縮與優化(Image Compression & Optimization)

    我們傾向使用大量的圖片在我們的網頁上但常常沒有做好壓縮與優畫的工作。記得,圖片越大的話就需要花月多的時間來下載,因此導致網頁載入時間變長且用戶體驗變差。你的用戶將會離開你的網站如果沒辦法在3-5秒內載入完畢的話,而這對你的銷售是不利的。因此,縮圖.優化.以及壓縮圖片在將它們放上你的網頁之前。這裡有一些秘訣也許在優化圖片上可以派上用場:

    • 縮圖: 在將圖放上網頁前先縮小你的圖片,不要只是下載圖片後就直接放上你網頁的<img>標籤卻忽略要進行縮圖。圖片的尺寸和解析度部分不推薦使用1200px x 800px大小的圖片到300px x 200px的圖片內容裡頭,這是沒有必要的,應該縮到300px x 200px
    • 圖片格式:總共有3種常用的圖檔類型用在網頁圖片上,分別是JPEG. GIF. & PNG。對於一般的單純背景圖可使用 JPEG 圖檔, 對於包含透明背景的圖片使用PNG 圖檔,而有動畫效果的圖片需使用 GIF圖檔。
    • 壓縮圖片: 圖片壓縮重要在能減少圖片的大小卻無損解析度,這裡有一些免費的圖片優化工具供你下載。
      給MAC 使用 ImageOptim
      給Windows 使用 Riot 如壓縮 JPEG 圖檔 & PNG Gauntlet 如壓縮 PNG 圖檔。
  • CSS & jQuery 壓縮

    也建議你結合 & 壓縮 所有你的CSS檔到單一檔案 & 所有Javascript檔案到單一JS檔案因為Minification減少檔案的大小而Combining所有檔案能助於減少對於伺服器的HTTP請求數量。這也是能提升網頁速度的一個重要因素。有幾個線上工具能幫你壓縮 CSS & JS 檔案,我們推薦使用:
    針對 CSS 使用 CSS Minifier針對 Javascript 使用 Javascript Minifier

  • 內容傳遞網路(CDN)

    你能夠使用 CDN來再次提升網站速度。你能夠使用CND來傳遞網站內的靜態檔案比如 CSS. JS .圖檔 & 字體檔案。有好幾個在網路上的CDN主機可用,但我們會推薦 MaxCDNCloudFlare. 注意: CDN設定需要額外的月費,所以這完全是根據你的需要在選購的。

  • 快速的網頁主機伺服器

    網頁主機供應商非常多,所以推薦你選擇伺服器廠商時應評估能否提供可信賴 & 快速的主機服務。你能夠在這裡找到一些推薦的主機服務: http://themeforest.net/get_hosting.

Upgrading Canvas: v3.x to v4.0

Canvas v4.0 is a Big Update and requires Changes to the CSS, JS, PHP and HTML Files. We have dramatically Improved Performance in this Version and making some changes were really necessary in order to Increase Flexibility and Stability. We have actually decreased the Size of the CSS Files to some extent without compromising on the Designs and Layouts allowing you more control on the Type of Content you want to Create with Canvas. We definitely understand that Upgrading Canvas from v3.x to v4.0 can be quite a task because of the Multipurpose Nature of Canvas and so we have included the Archived Version of Canvas v3.1.1 in the Package if in any case somethign goes wrong so that you can Rollback. The Full List of Changes are mentioned below:

Note: Always make sure that you have a Complete Backup of your Website before starting to Upgrade Canvas so that you Content is Safe and can be rolled back in case of any issues with Canvas 4.

CSS Files:

  • #primary-menu

    We have updated the Primary Menu and Mega Menus to ensure more Flexibility and Less Code. The Mega Menus now uses the Bootstrap Grid allowing to create Mixed Columns and Widgets. It is recommended that you change the Entire Primary Menu related Code Blocks. If you have made any changes to the Original Code then keep a Backup of the Old Code and change the Codes accordingly comparing the New Codes.
    Files Affected: style.css, css/responsive.css, css/dark.css, css/colors.css, css/colors.php

  • #page-menu

    We have updated the Page Menu Codes to handle the Dots Menu more efficiently on Responsive Devices. It is recommended that you change the Entire Page Menu related Code Blocks.
    Files Affected: style.css, css/responsive.css, css/dark.css, css/colors.css, css/colors.php

  • .slider-parallax

    We have updated the Slider Parallax Codes to address the flickr issue on Mac OS. It is recommended that you change the Entire Slider Parallax related Code Blocks.
    Files Affected: style.css, css/responsive.css

  • Swiper Slider Base CSS

    We have removed the Swiper Slider Base CSS Codes and moved it to a Separate CSS File named css/swiper.css for better handling of Swiper Plugin Updates. It is recommended that you remove this entire Code Blocks. Search for the following code in the style.css File:

    .swiper-container {
    	margin:0 auto;
    	position:relative;
    	overflow:hidden;
    	-webkit-backface-visibility:hidden;
    	-moz-backface-visibility:hidden;
    	-ms-backface-visibility:hidden;
    	-o-backface-visibility:hidden;
    	backface-visibility:hidden;
    	/* Fix of Webkit flickering */
    	z-index:1;
    }
    
    ...

    Files Affected: style.css

  • #portfolio

    We have updated the Entire Portfolio Code Block including the #portfolio-filter, #portfolio-shuffle and #portfolio. All the IDs has been changed to Classes to allow Unlimited Portfolio Grids and Filters on a Single Page. We have also decreased the CSS Size. It is recommended that you change the Entire Portfolio related Code Blocks.
    Files Affected: style.css, css/responsive.css, css/dark.css, css/colors.css, css/colors.php

  • #shop

    We have updated the Entire Shop & Products Code Blocks including the #shop and .product. All the IDs has been changed to Classes to allow Unlimited Shop Grids on a Single Page. We have also decreased the CSS Size. It is recommended that you change the Entire Shop related Code Blocks.
    Files Affected: style.css, css/responsive.css

  • All other Minor Changes has been described in the Changelog Section

PHP Files:

  • Form Processing and Subscription Files

    We have upgraded the PHP Files in the include Folder that handles the Form Email and Subscriptions to allow advanced handling of Data and better SPAM Protection. It now supports JSON Output so now the response shows Message Specific Alerts. It is recommended that you change the Form Processing and Mailchimp Subscription related Files. If you have made any changes to the Original Code then keep a Backup of the Old Code and change the Codes accordingly comparing the New Codes.
    Files Affected: All PHP Files in the include Folder.

HTML Files:

  • JS Files Linking moved to Footer

    Keeping performance in mind and Page Loading Speed, we have moved all the JS File Linking to the Footer of the HTML Files just before the js/functions.js linking. This helps in better Page Speed Performance and preventing in Render-Blocking Javascripts. Additionally, do make sure that now all the Inline JS Scripts used for JS Plugin Initialization have to be moved at the bottom too just after the js/functions.js linking.
    Files Affected: All HTML Files.

    Example:
    JS Linking in Canvas v3.x

    JS Linking in Canvas v4.x
  • Mega Menu Content

    Mega Menu is now more Flexible than ever before as you can now add Widgets and use Mixed Width Columns powered by the Bootstrap Grid inside the Mega Menu Content.
    Files Affected: All HTML Files with Mega Menu.

    Example:
    Mega Menu in Canvas v3.x

    Mega Menu in Canvas v4.0
  • Slider Parallax

    We have fixed the issue with the Shaky and Flickering Slider Parallax on Safari on Mac OS. In order to fix this we will have to wrap the Slider Content inside another Container .slider-parallax-inner which has Fixed Position and thus this fixes the Flicker. However, currently not all the Headers & Sliders are supported due to the Fixed Position nature of the .slider-parallax-inner Container. It is best supported with Canvas Slider Templates at the moment.
    Files Affected: Slider Templates with Transparent Header and Headers without Top Bars. Additionally, Headers with .sticky-style-2 Class is not supported.

    Example:
    Slider Parallax in Canvas v3.x

    Slider Parallax in Canvas v4.0
  • Canvas/Swiper Slider

    You will now need to add css/swiper.css in the Document <head> on all the Pages with Canvas/Swiper Slider. Also, the Canvas/Swiper Slider Javascript Initialization Code is not required anymore on the Page since it gets initialized using a Global Function. Please check the Slider > Canvas Slider Section for Full Documeentation.
    Files Affected: All HTML Files with Canvas/Swiper Slider.

  • Page Menu

    We have updated the Page Menu Link Item Markup slightly to handle the Dots Menu more efficiently on Responsive Devices. All the Link Item Texts inside the Page Menu are now enclosed inside a <div>.
    Files Affected: All the HTML Pages with #page-menu.

    Before:
    <!-- Page Sub Menu
    ============================================= -->
    <div id="page-menu">
    
    	<div id="page-menu-wrap">
    
    		<div class="container clearfix">
    
    			<div class="menu-title">Explore <span>CANVAS</span></div>
    
    			<nav>
    				<ul>
    					<li class="current"><a href="#">Gallery</a></li>
    					<li><a href="#">Features</a></li>
    					<li><a href="#">Models</a>
    						<ul>
    							<li><a href="#">Small Size</a></li>
    							<li><a href="#">Normal Size</a></li>
    							<li><a href="#">Large Size</a></li>
    						</ul>
    					</li>
    					<li><a href="#">Reviews</a>
    						<ul>
    							<li><a href="#">Expert Reviews</a></li>
    							<li><a href="#">User Reviews</a></li>
    						</ul>
    					</li>
    					<li><a href="#">Compare</a></li>
    					<li><a href="#">Build</a></li>
    					<li><a href="#">Order</a></li>
    				</ul>
    			</nav>
    
    		<div id="page-submenu-trigger"><i class="icon-reorder"></i></div>
    
    		</div>
    
    	</div>
    
    </div><!-- #page-menu end -->
    After:
    <!-- Page Sub Menu
    ============================================= -->
    <div id="page-menu">
    
    	<div id="page-menu-wrap">
    
    		<div class="container clearfix">
    
    			<div class="menu-title">Explore <span>CANVAS</span></div>
    
    			<nav>
    				<ul>
    					<li class="current"><a href="#"><div>Gallery</div></a></li>
    					<li><a href="#"><div>Features</div></a></li>
    					<li><a href="#"><div>Models</div></a>
    						<ul>
    							<li><a href="#"><div>Small Size</div></a></li>
    							<li><a href="#"><div>Normal Size</div></a></li>
    							<li><a href="#"><div>Large Size</div></a></li>
    						</ul>
    					</li>
    					<li><a href="#"><div>Reviews</div></a>
    						<ul>
    							<li><a href="#"><div>Expert Reviews</div></a></li>
    							<li><a href="#"><div>User Reviews</div></a></li>
    						</ul>
    					</li>
    					<li><a href="#"><div>Compare</div></a></li>
    					<li><a href="#"><div>Build</div></a></li>
    					<li><a href="#"><div>Order</div></a></li>
    				</ul>
    			</nav>
    
    		<div id="page-submenu-trigger"><i class="icon-reorder"></i></div>
    
    		</div>
    
    	</div>
    
    </div><!-- #page-menu end -->
  • Isotope Grids

    To simplify things and to initilaize the Isotope on any Grid, you will simply need to add the .grid-container Class to the Container. So, the Isotope Javascript Initialization Code is not required anymore on the Page.
    Files Affected: All HTML Files with a Masonry Grid.

    Additional Options:
    • data-transition - Transition Speed of the Isotope Grid in seconds. Eg. 0.65
    • data-layout - Layout of the Isotope Grid. Eg. masonry . More Layout Options
  • Portfolio

    Portfolio Grid now needs the .portfolio Class which allows Unlimited Portfolio Grids on a Single Page. To initilaize the Isotope on the Portfolio Grid, you will simply need to add the .grid-container Class to the .portfolio Container. So, the Isotope Javascript Initialization Code is not required anymore on the Page.
    Files Affected: All HTML Files with Portfolio Grid.

    Before:
    <div id="portfolio" class="clearfix">
    After:
    <div id="portfolio" class="portfolio grid-container clearfix">
  • Portfolio Filter

    Portfolio Filter now needs the .portfolio-filter Class which allows Unlimited Portfolio Filters on a Single Page. To activate the Filter on a Portfolio Grid, you will simply need to add the data-container="#portfolio" Attribute to the .portfolio-filter Element. So, the Isotope Filter Javascript Code is not required anymore on the Page.
    Files Affected: All HTML Files with Portfolio Filter.

    Example:
    <ul class="portfolio-filter clearfix" data-container="#portfolio">
  • Portfolio Shuffle

    Portfolio Shuffle now needs the .portfolio-shuffle Class which allows Unlimited Portfolio Shuffles on a Single Page. To activate the Shuffle Functionality on a Portfolio Grid, you will simply need to add the data-container="#portfolio" Attribute to the .portfolio-shuffle Element. So, the Isotope Shuffle Javascript Code is not required anymore on the Page.
    Files Affected: All HTML Files with Portfolio Shuffle.

    Example:
    <div class="portfolio-shuffle" data-container="#portfolio">
  • Shop

    Shop Grid now needs the .shop Class which allows Unlimited Shop Grids on a Single Page. To initilaize the Isotope on the Shop Grid, you will simply need to add the .grid-container Class to the .shop Container. So, the Isotope Javascript Initialization Code is not required on the Page.
    Files Affected: All HTML Files with Shop Grid.

    Before:
    <div id="shop" class="clearfix">
    After:
    <div id="shop" class="shop grid-container clearfix" data-layout="fitRows">
  • Blog Grid

    To initilaize the Isotope on the Blog Grid, you will simply need to add the .grid-container Class to the #posts Container. So, the Isotope Javascript Initialization Code is not required anymore on the Page.
    Files Affected: All HTML Files with Blog Grid.

    Before:
    <div id="posts" class="post-grid clearfix">
    After:
    <div id="posts" class="post-grid grid-container clearfix" data-layout="fitRows">
  • Blog Masonry Grid

    To initilaize the Isotope on the Blog Masonry Grid, you will simply need to add the .grid-container Class to the #posts Container. So, the Isotope Javascript Initialization Code is not required anymore on the Page.
    Files Affected: All HTML Files with Blog Masonry Grid.

    Before:
    <div id="posts" class="post-grid post-masonry clearfix">
    After:
    <div id="posts" class="post-grid post-masonry grid-container clearfix">
  • Contact Forms

    Contact Form markup has been changed slightly to allow unlimited Contact Forms on a Single Page without the hassle of Adding Additional JS Codes for each Contact Form. The Entire Contact Form is now enclosed within the .contact-widget Container and the Contact Form Results container has been replaced.

    Before:
    <div id="contact-form-result" data-notify-type="success" data-notify-msg="<i class=icon-ok-sign></i> Message Sent Successfully!"></div>
    After:
    <div class="contact-form-result"></div>

    The Contact Form Javascript Initialization Code is not required anymore on the Page.
    Files Affected: All HTML Files with Contact Forms.

  • Quick Contact Forms

    Quick Contact Form markup has been changed slightly to allow unlimited Quick Contact Forms on a Single Page without the hassle of Adding Additional JS Codes for each Quick Contact Form. The Quick Contact Form Results container has been replaced.

    Before:
    <div id="quick-contact-form-result" data-notify-type="success" data-notify-msg="<i class=icon-ok-sign></i> Message Sent Successfully!"></div>
    After:
    <div class="quick-contact-form-result"></div>

    The Quick Contact Form Javascript Initialization Code is not required anymore on the Page.
    Files Affected: All HTML Files with Quick Contact Forms.

  • Subscription Forms

    Subscription Form markup has been changed slightly to allow unlimited Subscription Forms on a Single Page without the hassle of Adding Additional JS Codes for each Subscription Form. The Subscription Form Results container has been replaced.

    Before:
    <div id="widget-subscribe-form-result" data-notify-type="success" data-notify-msg=""></div>
    After:
    <div class="widget-subscribe-form-result"></div>

    The Subscription Form Javascript Initialization Code is not required anymore on the Page.
    Files Affected: All HTML Files with Subscription Forms.

  • Canvas Slider Javascript

    Canvas Slider Initialization Javascript is no Longer required on the Page, so please remove it. To initilaize the Canvas Slider please refer to the Documentation > Sliders > Canvas Slider Section.
    Files Affected: All HTML Files with Canvas Slider.

  • Owl Carousel Javascript

    Owl Carousel Initialization Javascript is no Longer required on the Page, so please remove it. To initilaize the Owl Carousel please refer to the Documentation > Shortcodes > Owl Carousel Section.
    Files Affected: All HTML Files with Owl Carousel.

標頭類型(Header Types)

你能夠選擇 7 種類 的標頭來建立你的頁面。僅需加入Header Type CSS class到Header元素就能啟動Header類型,下方是 Header Type Classes & 描述 列表供作參考:

類型 Class 特色 程式範例
Default 預設標頭帶白色背景 & 暗色文字。
<header id="header">
	...
</header>
.dark 標頭帶暗色背景 & 亮色文字。
<header id="header" class="dark">
	...
</header>
.transparent-header 標頭帶透明背景,這樣的標頭很適合用來在頂部呈現 Sliders或其他類型的大型Banner圖片搭配透明Logo & 選單。你能加入 dark class 來呈現亮色文字。
<header id="header" class="transparent-header">
	...
</header>
.semi-transparent 標頭帶半透明背景,你能加入 dark class 來呈現亮色文字 & 暗色背景。
<header id="header" class="transparent-header semi-transparent">
	...
</header>
.floating-header 這會啟動漂浮/固定Header,你能加入 dark class 來呈現亮色文字 & 暗色背景。
<header id="header" class="transparent-header floating-header">
	...
</header>
.side-header 靠左側邊標頭。不像是上方的非側邊標頭,這個class 應該被加入 body
<body class="stretched side-header">
	<header id="header">
		...
	</header>

	...

</body>
.open-header 這是一種靠左側邊標頭預設是隱藏 & 透過觸發器來開啟。不像是上方的那些非側邊標頭, 這個class 應該被加入 body。 這個class只能被使用在側邊標頭。假如你想在滑動頁面時關閉側邊標頭,請加入.close-header-on-scroll class到body標籤。
<body class="stretched side-header open-header">
	<header id="header">
		...
	</header>

	...

</body>
.push-wrapper 這是一種靠左側邊標頭預設是隱藏 & 透過觸發器來開啟。當標頭開啟時,它也會將wrapper推到右邊。 不像是上方的那些非側邊標頭, 這個class 應該被加入 body。 這個class只能被使用在側邊標頭。假如你想在滑動頁面時關閉側邊標頭,請加入.close-header-on-scroll class到body標籤。
<body class="stretched side-header open-header push-wrapper">
	<header id="header">
		...
	</header>

	...

</body>
.side-header-right 這是一種靠右側邊標頭。不像是上方的那些非側邊標頭, 這個class 應該被加入 body。 你能夠輕易的加上 .open-header & .push-wrapper classes 到 body 標籤來讓側邊標頭依循以上行為。
<body class="stretched side-header side-header-right">
	<header id="header">
		...
	</header>

	...

</body>

巨型選單(Mega Menus)

你可以用Bootstrap Columns來使用巨型選單。試著使用以下程式碼:

<nav id="primary-menu">
	<ul>
		<li><a href="index.html"><div>Home</div></a></li>
		<li class="mega-menu"><a href="link.html"><div>Mega Menu</div></a>
			<div class="mega-menu-content style-2 clearfix">
				<ul class="mega-menu-column col-md-3">
					...
				</ul>
				<ul class="mega-menu-column col-md-3">
					...
				</ul>
				<ul class="mega-menu-column col-md-3">
					...
				</ul>
				<ul class="mega-menu-column col-md-3">
					...
				</ul>
			</div>
		</li>
	</ul>
</nav>

注意: 目前只有支援 .col-lg-*.col-md-*

在巨型選單內的元件(Widgets in Mega Menu)

你現在能在巨型選單加入一些選定的元件。試著使用以下程式碼:

<ul class="mega-menu-column col-md-3">
	<li>
		<div class="widget clearfix">

			<h4>Our Location</h4>

			<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d201717.45988409253!2d144.81557611671303!3d-37.81732634202082!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad65d4c2b349649%3A0xb6899234e561db11!2sEnvato!5e0!3m2!1sen!2sin!4v1456564509271" width="600" height="400" frameborder="0" style="border:0" allowfullscreen></iframe>

		</div>
	</li>
</ul>

注意: 執行在Javascript的Widgets/Shortcodes尚未支援,除非在mega-menu.html版型上有提供的,官方將在未來的版本持續加入支持。

較小的巨型選單(Smaller Mega Menu)

.mega-menu-small Class 替換 li.mega-menu Class 來顯示較小的巨型選單。

選單風格(Menu Styles)

你能夠使用一系列共8種選單風格。

風格 Class 描述 程式範例
Default 預設選單風格,靠右對齊。
<nav id="primary-menu">
	...
</nav>
.style-2 選單靠著Logo對齊-
<nav id="primary-menu" class="style-2">
	...
</nav>
Menu aligns below the Logo Area.
<header id="header" class="sticky-style-2">

	...

	<div id="header-wrap">
		<nav id="primary-menu" class="style-2">
			...
		</nav>
	</header-wrap>
</header>
.style-3 指標移到選單項目會出現主題背景配色。
<nav id="primary-menu" class="style-3">
	...
</nav>
.style-4 指標移到選單項目會出現主題邊框配色。
<nav id="primary-menu" class="style-4">
	...
</nav>
.style-5 選單項目上方帶有大Icons。
<nav id="primary-menu" class="style-5">
	...
</nav>
.style-6 指標移到選單項目上方會出現動畫邊條。
<nav id="primary-menu" class="style-6">
	...
</nav>
.sub-title 選單項目帶次標題。
<nav id="primary-menu" class="sub-title">
	<ul>
		<li class="current"><a href="index.html"><div>Home</div><span>Lets Start</span></a>
	...
</nav>
選單對齊Logo底部區域 & 選單項目帶次標題。
<header id="header" class="sticky-style-3">

	...

	<div id="header-wrap">
		<nav id="primary-menu" class="style-2 sub-title">
			...
		</nav>
	</header-wrap>
</header>
.with-arrows 選單項目帶箭頭以暗示帶下層選單。
<nav id="primary-menu" class="with-arrows">
	...
</nav>
.on-click 點擊選單項目才會開啟下層選單而非指標滑過(Hover)。
<nav id="primary-menu" class="on-click">
	...
</nav>

手機替代選單(Alternate Mobile Menu)

你能夠加上一個手機替代選單用以顯示在手機裝置上。只要加入一個新選單程式碼在主選單導航器內帶.mobile-primary-menu Class 並伴隨著原先的一般選單。 範例:

<!-- Primary Navigation
============================================= -->
<nav id="primary-menu">

	<ul>
		....
	</ul>

	<ul class="mobile-primary-menu">
		....
	</ul>

	....

頁面次選單(Page Sub Menu)

你可以使用一個額外的次選單在任何頁面作為內部的導航用途。

<div id="page-menu">

	<div id="page-menu-wrap">

		<div class="container clearfix">

			<div class="menu-title">Explore <span>CANVAS</span></div>

			<nav class="one-page-menu">
				<ul>
					<li><a href="#" data-href="#header"><div>Start</div></a></li>
					<li><a href="#" data-href="#section-about"><div>About</div></a></li>
					...
				</ul>
			</nav>

			<div id="page-submenu-trigger"><i class="icon-reorder"></i></div>

		</div>

	</div>

</div>

注意:建議你將頁面次選單放在緊鄰標頭之下。

點點次選單(Dots Sub Menu)

你可以使用點點次選單在任何頁面作為內部導航使用。

<div id="page-menu" class="dots-menu">

	<div id="page-menu-wrap">

		<div class="container clearfix">

			<div class="menu-title">Explore <span>CANVAS</span></div>

			<nav>
				<ul>
					<li><a href="#" data-href="#header"></a><div class="dots-menu-caption">Home</div></li>
					<li><a href="#" data-href="#section-about"></a><div class="dots-menu-caption">About</div></li>
					...
				</ul>
			</nav>

			<div id="page-submenu-trigger"><i class="icon-reorder"></i></div>

		</div>

	</div>

</div>

注意: 建議你將頁面次選單放在緊鄰標頭之下。

幫助類別(Helper Classes)

使用這些便利的幫助類別在標頭上能帶給你超越想像的彈性。

Helper Class 描述
.no-sticky 取消標頭的黏性,使其不會常駐於畫面上。使用在header標籤上。
.static-sticky 當標頭具黏性(頁面滑動導致標頭需黏於頂部才能繼續顯示)時,取消變更大小效果,使標頭大小維持一致。使用在header標籤上。
data-sticky-class 當標頭具黏性時使用不同的標頭風格。這看起來將會像這樣:

<header class="dark" data-sticky-class="not-dark">
你能使用這些 classes: .dark, .not-dark, .semi-transparent。 記得,假如你使用 .semi-transparent Class, 那你也需要包含 .transparent Class。
.not-dark 這是一個便利的 Class, 假如你想要用 Mixins。假設,你想要用暗色標頭風格,但不想要下層選單也是暗色風格,那你只需將這個 class 加到主要選單(Primary Menu)就可以了。

範例:
<nav id="primary-menu" class="not-dark">
data-sticky-offset 這個屬性定義當頁面滑動多少像素之後標頭才會啟動沾黏,顯示在畫面上。

範例:
<header data-sticky-offset="100">
這將會讓標頭在滑動100px之後啟動沾黏。 你也可以設為 full 值當你想要標頭在滑動一個畫面高之後啟動沾黏。


修改標頭高度(Modifying Header Height)

使用這個 標頭高度CSS生成器來生成自定義標頭 & 沾粘標頭高。

頁面標題

Class 描述 範例
Default 預設頁面標題風格,文字置左對齊 & 導航路徑標示(Breadcrumbs)靠右。
<section id="page-title">

		<div class="container clearfix">
			<h1>Page Title</h1>
			<span>A Short Page Title Tagline</span>
			<ol class="breadcrumb">
				<li><a href="#">Home</a></li>
				<li><a href="#">Shortcodes</a></li>
				<li class="active">Page Titles</li>
			</ol>
		</div>

	</section>
.page-title-right 文字靠右 & 導航路徑標示(Breadcrumbs)靠左的頁面標題風格,與預設相反。
<section id="page-title" class="page-title-right">

		<div class="container clearfix">
			<h1>Page Title Right</h1>
			<span>A Short Page Title Tagline</span>
			<ol class="breadcrumb">
				<li><a href="#">Home</a></li>
				<li><a href="#">Shortcodes</a></li>
				<li class="active">Page Titles</li>
			</ol>
		</div>

	</section>
.page-title-center 文字 & 導航路徑標示(Breadcrumbs)置中的頁面標題風格。
<section id="page-title" class="page-title-center">

		<div class="container clearfix">
			<h1>Page Title Center</h1>
			<span>A Short Page Title Tagline</span>
			<ol class="breadcrumb">
				<li><a href="#">Home</a></li>
				<li><a href="#">Shortcodes</a></li>
				<li class="active">Page Titles</li>
			</ol>
		</div>

	</section>
.page-title-mini 迷你文字 & 導航路徑標示(Breadcrumbs)的頁面標題風格,放置位置與預設相同,文字靠左 &導航路徑標示靠右。
<section id="page-title" class="page-title-mini">

		<div class="container clearfix">
			<h1>Page Title Mini</h1>
			<span>A Short Page Title Tagline</span>
			<ol class="breadcrumb">
				<li><a href="#">Home</a></li>
				<li><a href="#">Shortcodes</a></li>
				<li class="active">Page Titles</li>
			</ol>
		</div>

	</section>
.page-title-dark 帶暗系背景色的頁面標題風格,文字會以亮色呈現。
<section id="page-title" class="page-title-dark">

		<div class="container clearfix">
			<h1>Page Title Dark</h1>
			<span>A Short Page Title Tagline</span>
			<ol class="breadcrumb">
				<li><a href="#">Home</a></li>
				<li><a href="#">Shortcodes</a></li>
				<li class="active">Page Titles</li>
			</ol>
		</div>

	</section>
.page-title-nobg 帶透明背景色的頁面標題風格。
<section id="page-title" class="page-title-nobg">

		<div class="container clearfix">
			<h1>Page Title No BG</h1>
			<span>A Short Page Title Tagline</span>
			<ol class="breadcrumb">
				<li><a href="#">Home</a></li>
				<li><a href="#">Shortcodes</a></li>
				<li class="active">Page Titles</li>
			</ol>
		</div>

	</section>
.page-title-pattern 帶背景樣式的頁面標題風格。
<section id="page-title" class="page-title-pattern">

		<div class="container clearfix">
			<h1>Page Title with Pattern</h1>
			<span>A Short Page Title Tagline</span>
			<ol class="breadcrumb">
				<li><a href="#">Home</a></li>
				<li><a href="#">Shortcodes</a></li>
				<li class="active">Page Titles</li>
			</ol>
		</div>

	</section>
.page-title-parallax 帶視差圖片的頁面標題風格。
<section id="page-title" class="page-title-parallax page-title-dark" style="background-image: url('');"
	data-stellar-background-ratio="0.3">

		<div class="container clearfix">
			<h1>Page Title Parallax</h1>
			<span>A Short Page Title Tagline</span>
			<ol class="breadcrumb">
				<li><a href="#">Home</a></li>
				<li><a href="#">Shortcodes</a></li>
				<li class="active">Page Titles</li>
			</ol>
		</div>

	</section>
.page-title-video 帶HTML5影片的頁面標題風格。
<section id="page-title" class="page-title-parallax page-title-dark page-title-video">

		<div class="video-wrap">
			<video width="100%" src="images/videos/deskwork.mp4" preload="auto" loop autoplay muted></video>
			<div class="video-overlay"></div>
		</div>

		<div class="container clearfix">
			<h1>Page Title Video</h1>
			<span>A Short Page Title Tagline</span>
			<ol class="breadcrumb">
				<li><a href="#">Home</a></li>
				<li><a href="#">Shortcodes</a></li>
				<li class="active">Page Titles</li>
			</ol>
		</div>

	</section>

欄位 & 格線系統

注意:show-gridclass 可用來顯示格線

Canvas 格線系統

.col_full
.col_half
.col_half .col_last
.col_one_third
.col_two_third .col_last
.col_one_fourth
.col_three_fourth .col_last
.col_one_fifth
.col_four_fifth .col_last
.col_two_fifth
.col_three_fifth .col_last
.col_one_sixth
.col_five_sixth .col_last

Bootstrap Grid

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-3
.col-md-3
.col-md-3
.col-md-3
.col-md-4
.col-md-4
.col-md-4
.col-md-5
.col-md-5
.col-md-2
.col-md-6
.col-md-6
.col-md-1
.col-md-11
.col-md-2
.col-md-10
.col-md-3
.col-md-9
.col-md-4
.col-md-8
.col-md-5
.col-md-7

Isotope Initialization

You can initialize Isotope on any Grid Container by simply adding the .grid-container Class on the Container that holds the Grid. This is Best Effective on the Portfolio, Blog & Shop Grids.

範例:
<!-- Portfolio Items
============================================= -->
<div id="portfolio" class="portfolio grid-container clearfix">
	...
</div>
設定:
  • data-transition - Transition Speed of the Isotope Grid in seconds. Eg. 0.65
  • data-layout - Layout of the Isotope Grid. Eg. masonry . More Layout Options
  • data-stagger - Stagger Animation offset in Milliseconds. Eg. 30

側面版(Side Panel)

你可以在網頁上加入側邊欄以提供額外資訊,而這側邊欄可任意顯示/隱藏。只需使用以下程式碼:

<div class="body-overlay"></div>

<div id="side-panel" class="dark">

	<div id="side-panel-trigger-close" class="side-panel-trigger"><a href="#"><i class="icon-line-cross"></i></a></div>

	<div class="side-panel-wrap">

		... Your Content

	</div>

</div>

注意:確保你加入的側邊欄程式碼就在#wrapper開始之後

側邊欄位置(Side Panel Position)

一個側邊欄可被顯示在左或右側,預設側邊欄會顯示在右邊。如果你想要變更它的位置到Left,那你僅需要加入.side-panel-left Class 到 <body>標籤內。

<body class="stretched side-panel-left">

側邊欄顯示風格(Side Panel Reveal Style)

側邊欄預設顯示風格是Overlay(頁面內容不會移動)。如果你想要變更為Push,那你僅需要加上.side-push-panel Class 到 <body>標籤。

<body class="stretched side-push-panel">

側邊欄沾粘(Sticky Sidebar)

你可以輕易的將你已有的側邊欄內容加入沾粘效果,只需簡單的設置:

  1. 加入 .sticky-sidebar-wrap Class 到你的 .sidebar Container。
  2. 建立一個 .sticky-sidebar Container 就在 .sidebar-widgets-wrap Container裡面。
  3. 閉鎖好所有在你的.sticky-sidebar Container裡頭的元件。
<div class="sidebar sticky-sidebar-wrap nobottommargin clearfix">
	<div class="sidebar-widgets-wrap">
		<div class="sticky-sidebar">

			... Your Sidebar Widgets

		</div>
	</div>
</div>

注意: 沾粘側邊欄外掛目前在側邊欄.sidebar Containers 以及 Bootstrap Columns系統運作的最好。

設定:
  • data-offset-top - 沾粘側邊欄距頂方的位移值,單位為像素。 例如 110
  • data-offset-bottom - 沾粘側邊欄距底方的位移值,單位為像素。 例如 50

到頂部(Go To Top)

你能加入一個到頂部觸發器到你的頁面去允許你的使用者隨時都能回到頁面頂部。只要加入下方的程式碼在頁面的底部就在</wrapper>的後面:

<div id="gotoTop" class="icon-angle-up"></div>
設定:
  • data-offset - 你希望從頂部位移多少像素之後能觸發Trigger,顯示到頂部按鈕。 例如 300
  • data-mobile - 在手機上要啟動/關閉到頂部功能。 例如 true/false
  • data-speed - 滑到頂部的速度,單位是微秒。 例如 800
  • data-easing - 滑到頂部的速度變化模式。 例如 easeInQuad

幫助類別(Helper Classes)

官方建立了一些非常有用的幫助類別給你。這是其中一部分:

  • .allmargin - Margin 為 50px 在每一邊。
  • .topmargin - Margin 為 50px 在頂部。
  • .bottommargin - Margin 為 50px 在底部。
  • .leftmargin - Margin 為 50px 在左邊。
  • .rightmargin - Margin 為 50px 在右邊。
  • .allmargin-sm - Margin 為 30px 在每一邊。
  • .topmargin-sm - Margin of 30px 在頂部。
  • .bottommargin-sm - Margin of 30px 在底部。
  • .leftmargin-sm - Margin of 30px 在左邊。
  • .rightmargin-sm - Margin of 30px 在右邊。
  • .allmargin-lg - Margin of 80px 在每一邊。
  • .topmargin-lg - Margin of 80px 在頂部。
  • .bottommargin-lg - Margin of 80px 在底部。
  • .leftmargin-lg - Margin of 80px 在左邊。
  • .rightmargin-lg - Margin of 80px 在右邊。
  • .nomargin - 每一邊都沒 Margin。
  • .notopmargin - 頂部沒 Margin。
  • .nobottommargin - 底部沒 Margin。
  • .noleftmargin - 左邊沒 Margin。
  • .norightmargin - 右邊沒 Margin。
  • .header-stick - 內容和標頭黏在一起。
  • .footer-stick - 內容和Footer黏在一起。
  • .noborder - 每一邊都沒 Border。
  • .notopborder - 頂部沒 Border。
  • .nobottomborder - 底部沒 Border。
  • .noleftborder - 左邊沒 Border。
  • .norightborder - 右邊沒 Border。
  • .nopadding - 每一邊都沒 Padding。
  • .notoppadding - 頂部沒 Padding。
  • .nobottompadding - 底部沒 Padding。
  • .noleftpadding - 左邊沒 Padding。
  • .norightpadding - 右邊沒 Padding。
  • .col-padding - Padding 為 60px 在每一邊。
  • .noradius - No Border Radius.
  • .noshadow - No Box Shadows.
  • .nobg - 沒有背景。
  • .nobgcolor - 沒有背景色。
  • .noabsolute - 強制相對位置。
  • .hidden - Hidden Blocks.
  • .nothidden - No Hidden Blocks.
  • .inline-block - Inline Blocks.
  • .center - 文字置中對齊。
  • .tright - 文字靠右對齊。
  • .divcenter - DIVs 置中對齊。
  • .fleft - DIVs 靠左對齊。
  • .fright - DIVs 靠右對齊。
  • .color - 主題文字顏色。
  • .bgcolor - 主題背景顏色。
  • .border-color - 主題 Border 顏色。
  • .bgicon - 背景 Icon。
  • .bganimate - Animates Background Vertically.
  • .grayscale - 當指標滑過加上一個灰階濾鏡到圖片和顏色上。
  • .imagescale - 當指標滑過加上一個Zoom Out效果到圖片上。
  • .t300 - 改變字體 Weight 到 Light。
  • .t400 - 改變字體 Weight 到 Normal。
  • .t500 - 改變字體 Weight 到 Medium。
  • .t600 - 改變字體 Weight 到 Semi Bold。
  • .t700 - 改變字體 Weight 到 Bold。
  • .ls1 - 加上一個字母間隔為 1px
  • .ls2 - 加上一個字母間隔為 2px
  • .ls3 - 加上一個字母間隔為 3px
  • .ls4 - 加上一個字母間隔為 4px
  • .ls5 - 加上一個字母間隔為 5px
  • .noheight - 改變元素的高到 0px
  • .nolineheight - Changes the Line Height of the Element to 0px.
  • .font-body - Changes the Font Family of the Element equal to the one used for the Body Text.
  • .font-primary - Changes the Font Family of the Element equal to the one used for the Primary Text.
  • .font-secondary - Changes the Font Family of the Element equal to the one used for the Secondary Text.

有用的小工具(Useful Snippets)

我們創造了一些相當有用的功能絕對能讓你的網站變得更具互動性。這是其中的一部分:

平滑滾動到指定的頁面Sections

在 Canvas 你能夠將幾乎所有頁面轉換成一頁式網站,就靠這聰明的功能。你能夠指定任何頁面上的連結或按鈕在觸發後滑到指定ID元素所在的位置。

要使用這個功能,透過加入 data-scrollto="#html-element-ID" 屬性到一個按鈕或連結。只需要使用下面範例碼就能使用這個功能:

<a href="#header" data-scrollto="#header" class="button button-3d">Scroll to Header</a>
設定:
  • data-offset - 當畫面移動到指定ID的HTML元件時,從頂部算要留多少的距離,單位是像素。 例如 100
  • data-speed - 滑到指定位置的速度,單位是微秒。 例如 800
  • data-easing - 滑到指定位置的速度變化。 例如 easeInQuad
  • data-highlight - 滑到指定位置後該目標Section要用哪種高亮顏色顯示,值為HEX顏色碼。例如 #FFFF00。確保 .highlight-me Class 被加入到你想要高亮顯示的Section中。

注意: 你應該有一個有效 & 唯一的元素 ID 在頁面上當你準備使用 ScrollTo 功能時。

響應式工具

Canvas是完全響應式且包含令人驚喜的響應式功能,等著你去探索。

使用 Touch Class

定義你特別針對觸碰裝置的自定義樣式透過 .device-touch Class。

.device-touch img { display: none; }

響應式絕對高度

定義響應式絕對高度是非常有趣的功能。但建議只用在絕對位置元素(Absolutely positioned elements)當相對位置元素設定為"auto-heights"。你能設定元素的響應式高度透過使用data-height 屬性:

  • data-height-lg - 此高度適合大型裝置 >=1200px
  • data-height-md - 此高度適合中型裝置 >=992px to 1199px
  • data-height-sm - 此高度適合平板
  • data-height-xs - 此高度適合橫擺的手機或平板手機
  • data-height-xxs - 此高度適合直立的手機

範例碼:

<div style="position: relative; margin-bottom: -60px;" class="ohidden" data-height-lg="426" data-height-md="567" data-height-sm="470" data-height-xs="287" data-height-xxs="183">
	<img src="images/services/main-fbrowser.png" style="position: absolute; top: 0; left: 0;" data-animate="fadeInUp" data-delay="100" alt="Chrome">
	<img src="images/services/main-fmobile.png" style="position: absolute; top: 0; left: 0;" data-animate="fadeInUp" data-delay="400" alt="iPad">
</div>

Note: 圖片寬度會根據所處容器而調整。現在,大型裝置會按照圖片的預設高度來呈現,而其他裝置則會根據瀏覽器來縮小圖片高度。我們想這樣肯定能滿足你的需求。

響應式 Classes

現在你可以加入響應式 Classes 到元素上來對應不同的裝置。定義元素上的響應式Classes為 data-class 屬性:

  • data-class-lg - Classes 針對大型裝置 >=1200px
  • data-class-md - Classes 針對中型裝置 >=992px to 1199px
  • data-class-sm - Classes 針對平板
  • data-class-xs - Classes 針對橫置手機裝置和平板手機
  • data-class-xxs - Classes 針對直立的手機

範例碼:

<a href="#" class="button" data-class-lg="button-large" data-class-md="" data-class-sm="button-xlarge" data-class-xs="button-small" data-class-xxs="button-mini">Button</a>

注意: 當你確定要使用響應式 Classes功能時,那麼你就需要針對所有類型裝置來加入data-class-* 屬性,因為這樣才能確保能支援所有類型的裝置。

滑塊種類與選項(Slider Types & their Options)

Canvas 包含7種獨特的滑塊 & 20種以上已建置好的滑塊版型讓你用在任何頁面上,還提供近百個選項。以下是這七種滑塊的列表:

  • Revolution Slider
  • Canvas Swiper Slider
  • Flex Slider
  • Owl Slider
  • Camera Slider
  • Elastic Slider
  • Nivo Slider

Revolution Slider

你可以在這裡找到Revolution Slider的相關文件。

閱讀 Revolution Slider 文件

支援滑動手勢的滑塊(Canvas Swiper Slider)

用法:

這裡是Canvas Swiper Slider的HTML程式碼:

<section id="slider" class="slider-parallax swiper_wrapper full-screen clearfix">
	<div class="swiper-container">
		<div class="swiper-wrapper">
			<!--First Slide-->
			<div class="swiper-slide">
			<!-- Any HTML content of the first slide goes here -->
			</div>

			<!--Second Slide-->
			<div class="swiper-slide">
			<!-- Any HTML content of the second slide goes here -->
			</div>

			<!--Third Slide-->
			<div class="swiper-slide">
			<!-- Any HTML content of the third slide goes here -->
			</div>
			<!--Etc..-->
		</div>
	</div>
</section>

注意: 你可以使用 "dark" class 在 .swiper-slide 元素上, 以確保 Caption Content & Header Scheme(只有在透明標頭) "Dark".

設定滑塊高度:

<div id="slider" class="slider-parallax swiper_wrapper clearfix" style="height: 400px;">
	...
</div>

設定:

  • data-direction - 滑塊動畫方向。 例如 horizontal/vertical
  • data-speed - 滑塊動畫速度,單位是微秒。 例如 500
  • data-autoplay - 滑塊自動播放的切換間隔,單位是微秒。 例如 5000
  • data-loop - 開啟/關閉滑塊迴圈。 例如 true/false
  • data-effect - 滑動效果。 例如 slide/fade/cube/coverflow/flip
  • data-grab - 開啟/關閉抓取指標。 例如 true/false
  • data-video-autoplay - 開啟/關閉影片自動播放。 例如 true/false

要取消分頁,拿掉滑塊下一個/上一個箭頭等,只需要移除相關HTML程式碼。

Example:
<section id="slider" class="slider-parallax swiper_wrapper full-screen clearfix" data-speed="600" data-loop="true">
	<div class="swiper-container">
		<div class="swiper-wrapper">
			<!--First Slide-->
			<div class="swiper-slide">
			<!-- Any HTML content of the first slide goes here -->
			</div>

			<!--Second Slide-->
			<div class="swiper-slide">
			<!-- Any HTML content of the second slide goes here -->
			</div>

			<!--Third Slide-->
			<div class="swiper-slide">
			<!-- Any HTML content of the third slide goes here -->
			</div>
			<!--Etc..-->
		</div>
	</div>
</section>

使用自定義Javascript來初始化Canvas Swiper Slider

預設Canvas Swiper Sliders使用標準最小功能來進行初始化,但有時候你也許會需要創造一個自定義功能。要做到這個你只需要加入.customjs Class 到 #slider 容器,預設功能將被終止而你則可以擴展自定義的功能。

你可以在這裡找到更多關於自定義初始化 Canvas Swiper Slider JS的相關設定。

Canvas Swiper Slider 文件

滑塊標題(Slider Captions)

你能加入並設定標題到你的滑塊內透過下面的Classes:

Caption Class 描述 運用在
.slider-caption 建立一個標題在 Canvas Slider 上 Canvas Swiper Slider
.flex-caption 建立一個標題在 Flex Slider, Owl Slider & Camera Slider 上 Flex Slider
Owl Slider
Camera Slider with .camera-caption
.nivo-caption 建立一個標題在 Nivo Slider 上 Nivo Slider
.ei-title 建立一個標題在 Elastic Slider 上 Elastic Slider
.slider-caption-right 定位標題在 Canvas Swiper Slider 的右邊 Canvas Swiper Slider
.slider-caption-center 定位標題在 Canvas Swiper Slider 的中間 Canvas Swiper Slider
.slider-caption-top-left 定位標題在 Flex Slider & Owl Slider 的左上角 Flex Slider
Owl Slider
.slider-caption-top-right 定位標題在 Flex Slider & Owl Slider 的右上角 Flex Slider
Owl Slider
.slider-caption-bottom-right 定位標題在 Flex Slider & Owl Slider 的右下角 Flex Slider
Owl Slider
.slider-caption-bg 提供一個暗色背景給 Flex Slider, Owl Slider & Camera Slider 上的標題 Flex Slider
Owl Slider
Camera Slider with .camera-caption
.slider-caption-bg
.slider-caption-bg-light
提供一個亮色背景給 Flex Slider, Owl Slider & Camera Slider 上的標題 Flex Slider
Owl Slider
Camera Slider with .camera-caption

滑塊幫助類別(Slider Helper Classes)

我們創造了一些針對滑塊的幫助類別。這裡是其中一部分:

  • .slider-parallax - 啟動滑塊元素的視差功能。
  • .boxed-slider - Makes the Slider Boxed within the Container.
  • .full-screen - 調整滑塊的尺寸變成全螢幕。
  • .with-header - Makes the Slider Full Screen with Header Height included. .full-screen class should also be included.

Blog 設定

文章使用簡單的標記,使用以下的程式碼:

<div id="posts">

	<div class="entry clearfix">

		<!-- Post Image -->
		<div class="entry-image">
			<a href="image.jpg" data-lightbox="image"><img class="image_fade" src="image.jpg" alt="Standard Post with Image"></a>
		</div>

		<!-- Post Title -->
		<div class="entry-title">
			<h2><a href="blog-single.html">This is a Standard post with a Preview Image</a></h2>
		</div>

		<!-- Post Meta -->
		<ul class="entry-meta clearfix">
			<li><i class="icon-calendar3"></i> 10th February 2014</li>
			<li><a href="#"><i class="icon-user"></i> admin</a></li>
			<li><i class="icon-folder-open"></i> <a href="#">General</a>, <a href="#">Media</a></li>
			<li><a href="blog-single.html#comments"><i class="icon-comments"></i> 13 Comments</a></li>
			<li><a href="#"><i class="icon-camera-retro"></i></a></li>
		</ul>

		<!-- Post Content -->
		<div class="entry-content">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, asperiores quod est tenetur in. Eligendi, deserunt, blanditiis est quisquam doloribus voluptate id aperiam ea ipsum magni aut perspiciatis rem voluptatibus officia eos rerum deleniti quae nihil facilis repellat atque vitae voluptatem libero at eveniet veritatis ab facere.</p>
			<a href="blog-single.html">Read More →</a>
		</div>

	</div>

	...

</div>

文章類型

你能夠使用各異的八種文章類型:

  • Image
  • Embedded Video
  • Slider Gallery
  • Gallery Thumbs
  • Blockquotes
  • Link
  • Status
  • Embedded Audio

留言類型(Comment Types)

你能在單一文章頁面上使用三種不同的留言類型:

  • Default
  • Facebook
  • Disqus

臉書留言(Facebook Comments)

臉書留言範例碼:

<div id="comments" class="clearfix">

	<h3 id="comments-title"><span><fb:comments-count href="your-post-full-url"></fb:comments-count></span> Comments</h3>

	<!-- Facebook Comments
	============================================= -->
	<div class="fb-comments" data-width="100%" data-href="your-post-full-url" data-numposts="5" data-colorscheme="light"></div>
	<!-- Facebook Comments end -->

</div>

注意: 你將需要放入以下程式碼在HTML文件裡的 body 標籤之後。

<div id="fb-root"></div>
<script>(function(d, s, id) {
	var js, fjs = d.getElementsByTagName(s)[0];
	if (d.getElementById(id)) return;
	js = d.createElement(s); js.id = id;
	js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId={your-app-id}&version=v2.0";
	fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Disqus 留言

Disqus 留言範例碼:

<div id="comments" class="clearfix">

	<h3 id="comments-title">Comments</h3>

	<!-- Disqus Comments
	============================================= -->
	<div id="disqus_thread"></div>
	<script type="text/javascript">
		/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
		var disqus_shortname = 'your-disqus-shortname'; // required: replace example with your forum shortname

		/* * * DON'T EDIT BELOW THIS LINE * * */
		(function() {
			var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
			dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
			(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
		})();
	</script>
	<!-- Disqus Comments end -->

</div>

作品集設定(Portfolio Setup)

Canvas 提供非常出色的方式來展示你的作品。設定作品集(Portfolio)很簡單,請使用以下程式碼:

設定作品集過濾器:

<ul class="portfolio-filter clearfix" data-container="#portfolio">

	<li class="activeFilter"><a href="#" data-filter="*">Show All</a></li>
	<li><a href="#" data-filter=".pf-icons">Icons</a></li>
	<li><a href="#" data-filter=".pf-illustrations">Illustrations</a></li>
	<li><a href="#" data-filter=".pf-uielements">UI Elements</a></li>
	<li><a href="#" data-filter=".pf-media">Media</a></li>
	<li><a href="#" data-filter=".pf-graphics">Graphics</a></li>

</ul>

<div class="portfolio-shuffle" data-container="#portfolio">
	<i class="icon-random"></i>
</div>

設定作品項目:

<div id="portfolio" class="portfolio grid-container clearfix">

	<article class="portfolio-item pf-media pf-icons">

		<!-- Portfolio Image -->
		<div class="portfolio-image">
			<a href="portfolio-single.html">
				<img src="images.jpg" alt="Portfolio Title">
			</a>
			<div class="portfolio-overlay">
				<a href="images/portfolio/full/1.jpg" class="left-icon" data-lightbox="image"><i class="icon-line-plus"></i></a>
				<a href="portfolio-single.html" class="right-icon"><i class="icon-line-ellipsis"></i></a>
			</div>
		</div>

		<!-- Portfolio Description -->
		<div class="portfolio-desc">
			<h3><a href="portfolio-single.html">Portfolio Title</a></h3>
			<span><a href="#">Media</a>, <a href="#">Icons</a></span>
		</div>

	</article>

	...

</div>

頁面 AJAX

你能夠在同一個頁面載入作品細節利用 AJAX技術,這讓使用者經驗更加流暢。

設定 AJAX 作品集容器:

<div id="portfolio-ajax-wrap">
	<div id="portfolio-ajax-container"></div>
</div>

<div id="portfolio-ajax-loader"><img src="images/preloader-dark.gif" alt="Preloader"></div>

注意: 將此程式碼放在作品集程式碼開始之前。

設定AJAX 作品集項目

<article id="portfolio-item-1" data-loader="include/ajax/portfolio-ajax-image.php" class="portfolio-item pf-media pf-icons">
	<div class="portfolio-image">
		<a href="portfolio-single.html">
			<img src="images.jpg" alt="Portfolio Title">
		</a>
		<div class="portfolio-overlay">
			<a href="#" class="center-icon"><i class="icon-line-expand"></i></a>
		</div>
	</div>
	<div class="portfolio-desc">
		<h3><a href="portfolio-single.html">Portfolio Title</a></h3>
		<span><a href="#">Media</a>, <a href="#">Icons</a></span>
	</div>
</article>

AJAX 項目細節的程式碼可以在此檔案找到: PACKAGE/HTML/include/ajax,經測試無法完美貼合Laravel架構

Modal AJAX

你能載入作品集細節以Modal(跳出視窗)來呈現利用AJAX技術來讓使用者經驗更為流暢。

設定作品集項目的Modal AJAX效果

<article class="portfolio-item pf-media pf-icons">
	<div class="portfolio-image">
		<a href="portfolio-single.html">
			<img src="images.jpg" alt="Portfolio Title">
		</a>
		<div class="portfolio-overlay">
			<a href="images/portfolio/full/1.jpg" class="left-icon" data-lightbox="image"><i class="icon-line-plus"></i></a>
			<!-- This is where the Modal AJAX works -->
			<a href="include/ajax/portfolio-single-image.html" data-lightbox="ajax" class="right-icon"><i class="icon-line-expand"></i></a>
		</div>
	</div>
	<div class="portfolio-desc">
		<h3><a href="portfolio-single.html">Portfolio Title</a></h3>
		<span><a href="#">Media</a>, <a href="#">Icons</a></span>
	</div>
</article>

關於項目細節的 Modal AJAX 程式碼可以在此檔案找到: PACKAGE/HTML/include/ajax,經過測試與Laravel能夠完美結合。

無限滾動(Infinity Scroll)

透過無限滾動,你不需要分頁,只要一個頁面就能夠顯示無盡的作品集項目。

加入以下程式碼在作品集 #portfolio 容器之後:

<div id="load-next-posts" class="center">
	<a href="portfolio-infinity-scroll-2.html" class="button button-full button-dark button-rounded">Load more...</a>
</div>

注意: 確保你創造一個頁面,命名為 portfolio-infinity-scroll-2.html & 把下一批的作品集項目放進去。再接著下一批放進名稱為 portfolio-infinity-scroll-3.html 的頁面,就這樣做下去。此作法較適合形象網站,與Laravel較不合貼。

無限滾動的JS程式碼:

<script type="text/javascript">

	jQuery(window).load(function(){

		var $container = $('#portfolio');

		$container.isotope({ transitionDuration: '0.65s' });

		$('#portfolio-filter a').click(function(){
			$('#portfolio-filter li').removeClass('activeFilter');
			$(this).parent('li').addClass('activeFilter');
			var selector = $(this).attr('data-filter');
			$container.isotope({ filter: selector });
			return false;
		});

		$('#portfolio-shuffle').click(function(){
			$container.isotope('updateSortData').isotope({
				sortBy: 'random'
			});
		});

		$(window).resize(function() {
			$container.isotope('layout');
		});

		$container.infinitescroll({
			loading: {
				finishedMsg: '<i class="icon-line-check"></i>',
				msgText: '<i class="icon-line-loader icon-spin"></i>',
				img: "images/preloader-dark.gif",
				speed: 'normal'
			},
			state: {
				isDone: false
			},
			nextSelector: "#load-next-posts a",
			navSelector: "#load-next-posts",
			itemSelector: "article.portfolio-item"
		},
		function( newElements ) {
			$container.isotope( 'appended', $( newElements ) );
			var t = setTimeout( function(){ $container.isotope('layout'); }, 2000 );
			SEMICOLON.widget.loadFlexSlider();
			SEMICOLON.portfolio.arrange();
		});

	});

</script>

介紹

Canvas 提供大量的小程式,它們不但強大.彈性.具備功能性且容易使用。設定這些小程式很簡單 & 直覺。這裡是被包含在Canvas裡頭的小程式列表:

  • Animations
  • Buttons
  • Carousels
  • Charts
  • Clients
  • Columns
  • Counters
  • Dividers
  • Icon Boxes
  • Galleries
  • Heading Styles
  • Icon Lists
  • Labels
  • Lightboxs
  • Lists & Panels
  • Maps
  • Media Embeds
  • Modal Boxes
  • Navigations
  • Paginations
  • Pies & Skills
  • Pricing Boxes
  • Process Steps
  • Promo Boxes
  • Blockquotes
  • Responsive
  • Sections
  • Social Icons
  • Alert Boxes
  • Styled Icons
  • Tables
  • Tabs
  • Testimonials
  • Thumbnails
  • Toggles

上述所列的這些小程式都很容易擴展且易用。你能夠在他們相對應的檔案裡找到範例碼。我們會解釋其中一部分供你參考。

動畫(Animations)

滾動出現時顯露動畫是最近的趨勢,在Canvas裡頭你也能夠做到。你能夠將動畫用在任何你想要的元素上。這裡是範例碼:

<div data-animate="fadeInLeft"></div>

你也能夠在動畫上加入延時:

<div data-animate="fadeInLeft" data-delay="500"></div>

注意: 延時長度是以 微秒為單位。

這裡是你能夠用的動畫列表:

  • bounce
  • flash
  • pulse
  • rubberBand
  • shake
  • swing
  • tada
  • wobble
  • bounceIn
  • bounceInDown
  • bounceInLeft
  • bounceInRight
  • bounceInUp
  • bounceOut
  • bounceOutDown
  • bounceOutLeft
  • bounceOutRight
  • bounceOutUp
  • fadeIn
  • fadeInDown
  • fadeInDownBig
  • fadeInLeft
  • fadeInLeftBig
  • fadeInRight
  • fadeInRightBig
  • fadeInUp
  • fadeInUpBig
  • fadeOut
  • fadeOutDown
  • fadeOutDownBig
  • fadeOutLeft
  • fadeOutLeftBig
  • fadeOutRight
  • fadeOutRightBig
  • fadeOutUp
  • fadeOutUpBig
  • flip
  • flipInX
  • flipInY
  • flipOutX
  • flipOutY
  • lightSpeedIn
  • lightSpeedOut
  • rotateIn
  • rotateInDownLeft
  • rotateInDownRight
  • rotateInUpLeft
  • rotateInUpRight
  • rotateOut
  • rotateOutDownLeft
  • rotateOutDownRight
  • rotateOutUpLeft
  • rotateOutUpRight
  • hinge
  • rollIn
  • rollOut
  • zoomIn
  • zoomInDown
  • zoomInLeft
  • zoomInRight
  • zoomInUp
  • zoomOut
  • zoomOutDown
  • zoomOutLeft
  • zoomOutRight
  • zoomOutUp

區塊 & 視差(Sections & Parallax)

想讓某區塊凸顯出來。你可以使用亮色 & 暗色區塊.視差圖片或者是HTML5影片。

設定區塊:

.container 元素的外面去設置區塊(Section).

Light Section:

<div class="section">
	<div class="container clearfix">

		...

	</div>
</div>

Dark Section:

<div class="section dark">
	<div class="container clearfix">

		...

	</div>
</div>

設置視差區塊:

確保你的視差圖片大小有足夠的 Width & Height, 最好為 1920x1080 或更大

<div class="section parallax" style="background: url('images/parallax/3.jpg') center center; background-size:cover; padding: 100px 0;" data-stellar-background-ratio="0.3">
	<div class="container clearfix">

		...

	</div>
</div>

注意: 假如你發現視差區塊有背景圖片重複的情況,那麼你應該使用 data-stellar-vertical-offset="150" 來避免。你能夠根據需要來改動 150 這個值。

設定 HTML5 影片區塊:

你將需要一個高清的 .mp4 & .webm 影片。

<div class="section dark" style="height: 550px;">

	<div class="container clearfix">

		...

	</div>

	<div class="video-wrap">
		<video poster="images/videos/deskwork.jpg" preload="auto" loop autoplay muted>
			<source src='images/videos/deskwork.mp4' type='video/mp4' />
			<source src='images/videos/deskwork.webm' type='video/webm' />
		</video>
		<div class="video-overlay"></div>
	</div>

</div>

現在在iOS 10的裝置自動播放 HTML5 影片是可行的。請依照以下步驟來啟動:

  1. 加入 playsinline 屬性到 <video> 標籤. 例如:
    <video id="slide-video" poster="images/videos/explore.jpg" preload="auto" loop autoplay muted playsinline>
    	...
    </video>
  2. 然後加入 .no-placeholder Class 到 .video-wrap 容器,此容器包住<video> 標籤。 例如:
    <div class="video-wrap no-placeholder">
    	<video id="slide-video" poster="images/videos/explore.jpg" preload="auto" loop autoplay muted playsinline>
    		...
    	</video>
    	<div class="video-overlay" style="background-color: rgba(0,0,0,0.55);"></div>
    </div>

設定 Youtube 背景影片區塊:

你現在可以加入 Youtube 影片作為背景區塊就像是 HTML5 影片區塊。

<div class="section yt-bg-player nomargin dark" data-quality="hd1080" data-start="20" data-stop="40" data-video="http://youtu.be/A3PDXmYoF5U" style="height: 600px;">
	<div class="container clearfix">

		...

	</div>
</div>
Youtube 背景影片選項列表:
  • data-video - Youtube 影片分享網址。 例如: http://youtu.be/BCqJGoCMlVc
  • data-mute - 是否靜音。 例如: true or false
  • data-ratio - 影片解析度(寬高比)。 例如: "4/3" or "16/9"
  • data-quality - 影像品質。 例如: "default" or "small", "medium", "large", "hd720", "hd1080", "highres"
  • data-opacity - 影片不透明度。 例如:
  • data-container - 設定想作為影片背景的DOM元素之 CSS selector, 假如沒特定的話將會是 "self"。
  • data-optimize - 將會讓影片大小根據視窗大小來進行適應來優化顯示。 例如: true or false
  • data-loop - 影片是否重複播放。 例如: true or false
  • data-volume - 音量。 例如: 1 to 100
  • data-start - 設定影片需從第幾秒開始播放。 例如: 10
  • data-stop - 設定影片應在第幾秒停止。 例如: 30。 (假如設為 0, 影片將會播放到最後)
  • data-autoplay - 自動播放影片。 例如: true or false
  • data-fullscreen - 啟動新 HTML5 全螢幕行為。 例如: true or false

Tabs, Toggles & Accordions

你能使用 Tabs, Toggles & Accordions 採用多樣的風格與選項來顯示折疊內容。

Tabs

使用下列程式碼來顯示 Tabs:

<div class="tabs clearfix" id="tabs">

	<ul class="tab-nav clearfix">
		<li><a href="#tab-1">Tab 1</a></li>
		<li><a href="#tab-2">Tab 2</a></li>
		<li><a href="#tab-3">Tab 3</a></li>
	</ul>

	<div class="tab-container">

		<div class="tab-content clearfix" id="tab-1">
			This is Tab 1 Content
		</div>
		<div class="tab-content clearfix" id="tab-2">
			This is Tab 2 Content
		</div>
		<div class="tab-content clearfix" id="tab-3">
			This is Tab 3 Content
		</div>

	</div>

</div>

注意: 確保你加入了 唯一的 IDs 給每一個 Tab 容器和 Tab 項目。

選項:

  • data-speed - 在 Tabs 間切換的 Fade 效果速度,單位為微秒。 例如 400 代表 0.4 秒
  • data-active - 第幾個Tab初始時希望被啟動。 例如 2 代表第2個Tab為預設啟動
範例:
<div class="tabs clearfix" id="tabs" data-speed="700" data-active="2">

	<ul class="tab-nav clearfix">
		<li><a href="#tab-1">Tab 1</a></li>
		<li><a href="#tab-2">Tab 2</a></li>
		<li><a href="#tab-3">Tab 3</a></li>
	</ul>

	<div class="tab-container">

		<div class="tab-content clearfix" id="tab-1">
			This is Tab 1 Content
		</div>
		<div class="tab-content clearfix" id="tab-2">
			This is Tab 2 Content
		</div>
		<div class="tab-content clearfix" id="tab-3">
			This is Tab 3 Content
		</div>

	</div>

</div>

使用自定義JS來初始化 Tabs

Tabs 的初始化預設使用標準最小功能,但有時候你會希望建立自定義功能來讓 Tabs 使用 jQuery UI Tabs Plugin的更多選項。為此你只需加入 .customjs Class 到 .tabs 容器內。這將會讓它停止使用預設功能而允許你去建立自定義功能來擴展 Tabs。這裡是範例:

<div class="tabs customjs clearfix" id="tabs">

	<ul class="tab-nav clearfix">
		<li><a href="#tab-1">Tab 1</a></li>
		<li><a href="#tab-2">Tab 2</a></li>
		<li><a href="#tab-3">Tab 3</a></li>
	</ul>

	<div class="tab-container">

		<div class="tab-content clearfix" id="tab-1">
			This is Tab 1 Content
		</div>
		<div class="tab-content clearfix" id="tab-2">
			This is Tab 2 Content
		</div>
		<div class="tab-content clearfix" id="tab-3">
			This is Tab 3 Content
		</div>

	</div>

</div>

<script>
	jQuery(document).ready( function($){
		$( "#tabs" ).tabs({
			collapsible: true,
			event: 'mouseover',
			show: {
				effect: "fade",
				duration: 400
			}
		});
	});
</script>

完整的自定義選項列表可以在這裡找到 jQuery UI Tabs API.

讓 Tabs 支援響應式

讓 Tabs 支援響應式並將其轉化成 accordion 只需要加入 .tabs-responsive Class 到 .tabs 元素內。

Toggles

你能夠使用以下程式碼加入一個 Toggle:

<div class="toggle">
	<div class="togglet"><i class="toggle-closed icon-ok-circle"></i><i class="toggle-open icon-remove-circle"></i>This is a Toggle Title</div>
	<div class="togglec">This is a Toggle Content</div>
</div>

選項:

  • data-state - Toggle 的狀態 例如 open 去保持 Toggle 預設是開啟的

風格:

你可以為 Toggles 選擇2種風格 例如 .toggle-bg.toggle-border

範例:
<div class="toggle toggle-border" data-state="open">
	<div class="togglet"><i class="toggle-closed icon-ok-circle"></i><i class="toggle-open icon-remove-circle"></i>This is a Toggle Title</div>
	<div class="togglec">This is a Toggle Content</div>
</div>

Accordions

你能夠使用以下程式碼加入一個 Accordion:

<div class="accordion clearfix">

	<div class="acctitle"><i class="acc-closed icon-ok-circle"></i><i class="acc-open icon-remove-circle"></i>This is Accordion Title</div>
	<div class="acc_content clearfix">This is Accordion Content</div>

	<div class="acctitle"><i class="acc-closed icon-ok-circle"></i><i class="acc-open icon-remove-circle"></i>This is Accordion Title</div>
	<div class="acc_content clearfix">This is Accordion Content</div>

	<div class="acctitle"><i class="acc-closed icon-ok-circle"></i><i class="acc-open icon-remove-circle"></i>This is Accordion Title</div>
	<div class="acc_content clearfix">This is Accordion Content</div>

</div>

選項:

  • data-state - 此 Accordions 的狀態 Eg. closed 去保持所有的 Accordions 預設為關閉
  • data-active - 第幾個 Accordion 你希望初始時是開啟的。 例如 2 初始時讓第2個 Accordion 開啟

風格:

你能夠為 Accordions 選擇2種風格。 例如 .accordion-bg.accordion-border

範例:
<div class="accordion accordion-border clearfix" data-active="2">

	<div class="acctitle"><i class="acc-closed icon-ok-circle"></i><i class="acc-open icon-remove-circle"></i>This is Accordion Title</div>
	<div class="acc_content clearfix">This is Accordion Content</div>

	<div class="acctitle"><i class="acc-closed icon-ok-circle"></i><i class="acc-open icon-remove-circle"></i>This is Accordion Title</div>
	<div class="acc_content clearfix">This is Accordion Content</div>

	<div class="acctitle"><i class="acc-closed icon-ok-circle"></i><i class="acc-open icon-remove-circle"></i>This is Accordion Title</div>
	<div class="acc_content clearfix">This is Accordion Content</div>

</div>

響應式滑塊(Responsive Slider)

你可以加入響應式滑塊在任何頁面的容器內,使用以下程式碼:

<div class="fslider">
	<div class="flexslider">
		<div class="slider-wrap">
			<div class="slide"><img src="slide-image.jpg" alt="Slide 1"></div>
			<div class="slide"><img src="slide-image.jpg" alt="Slide 2"></div>
			<div class="slide"><img src="slide-image.jpg" alt="Slide 3"></div>
		</div>
	</div>
</div>

這裡有可定義的選項,能讓你改變滑塊的樣貌 & 感覺:

  • data-animation - 定義滑塊動畫風格。使用 slidefade
  • data-easing - 滑塊動畫的Easing(速度變化)。 例如 easeInQuad
  • data-direction - 滑塊動畫方向。使用 horizontalvertical
  • data-slideshow - 開啟/關閉自動滑塊播放。設定為 truefalse
  • data-pause - 當啟動滑塊自動播放時的播放間隔,單位為微秒。 例如 5000 為 5 Seconds
  • data-speed - 滑塊動畫的速度,單位為微秒。 例如 600 為 0.6 Seconds
  • data-video - 假如滑塊有包含一個內嵌影片時需設定為 true
  • data-reverse - 假如你希望滑塊動畫為反方向需設定為 true
  • data-touch - 開啟/關閉手持裝置的觸碰功能。設為 truefalse
  • data-smooth-height - 開啟/關閉滑塊的平滑高度功能,設為 truefalse
  • data-pagi - 開啟/關閉滑塊的分頁功能。設為 truefalse
  • data-arrows - 開啟/關閉滑塊的導航箭頭。設為 truefalse
  • data-thumbs - 開啟/關閉滑塊的導航縮圖(Thumb Navigation)。 設為 truefalse注意: 假如此選項設為 true,那麼你將需要在每一個滑塊加入 data-thumb 屬性。 例如 data-thumb="your-slide-thumb-image.jpg"
使用縮圖縮放(Thumbs Scaling)

你能夠使用縮圖縮放功能來根據滑塊寬度與Grid欄位數來縮放縮圖寬度。例如假如你的滑塊寬度為 800px , 那麼放在4欄格線(Grid)的縮圖寬度將是 200px ,而假如是8欄Grid的話就是 100px ,以此類推...

<div class="fslider flex-thumb-grid grid-6" data-arrows="false" data-animation="fade" data-thumbs="true">
	<div class="flexslider">
		<div class="slider-wrap">
			<div class="slide" data-thumb="slide-thumb-image.jpg"><img src="slide-image.jpg" alt="Slide Image"></div>
			<div class="slide" data-thumb="slide-thumb-image.jpg"><img src="slide-image.jpg" alt="Slide Image"></div>
			<div class="slide" data-thumb="slide-thumb-image.jpg"><img src="slide-image.jpg" alt="Slide Image"></div>
			<div class="slide" data-thumb="slide-thumb-image.jpg"><img src="slide-image.jpg" alt="Slide Image"></div>
			<div class="slide" data-thumb="slide-thumb-image.jpg"><img src="slide-image.jpg" alt="Slide Image"></div>
			<div class="slide" data-thumb="slide-thumb-image.jpg"><img src="slide-image.jpg" alt="Slide Image"></div>
		</div>
	</div>
</div>

你能使用 grid-3, grid-5, grid-6, grid-8, grid-10, grid-12 為你的縮圖 Grid 。

注意: 你將需要加入 .flex-thumb-grid Class 到 .fslider 元素伴隨著 Grid 的 Class。 另外,你不需要使用任何 Class 到 4欄 Grid 因為這是預設值。

加入 Flex Sliders 到容器內

你能加入任何寬度的 Flex Slider 到容器或 Grid 之內,而圖片也會以此作適應。例如 :

<div class="col-md-6">
	<div class="fslider">
		<div class="flexslider">
			<div class="slider-wrap">
				<div class="slide"><img src="slide-image.jpg" alt="Slide 1"></div>
				<div class="slide"><img src="slide-image.jpg" alt="Slide 2"></div>
				<div class="slide"><img src="slide-image.jpg" alt="Slide 3"></div>
			</div>
		</div>
	</div>
</div>
With Custom Width DIV
<div style="max-width: 300px;">
	<div class="fslider">
		<div class="flexslider">
			<div class="slider-wrap">
				<div class="slide"><img src="slide-image.jpg" alt="Slide 1"></div>
				<div class="slide"><img src="slide-image.jpg" alt="Slide 2"></div>
				<div class="slide"><img src="slide-image.jpg" alt="Slide 3"></div>
			</div>
		</div>
	</div>
</div>

Owl Carousel 圖片輪播

你能夠加入一個 Owl Carousel 到任何頁面使用以下的程式碼:

<div class="owl-carousel image-carousel carousel-widget" data-margin="20" data-nav="true" data-pagi="false" data-items-xxs="2" data-items-xs="3" data-items-sm="4" data-items-md="5">

	<div class="oc-item">
		<a href="#"><img src="images.jpg" alt="Image 1"></a>
	</div>
	<div class="oc-item">
		<a href="#"><img src="images.jpg" alt="Image 2"></a>
	</div>
	<div class="oc-item">
		<a href="#"><img src="images.jpg" alt="Image 3"></a>
	</div>
	<div class="oc-item">
		<a href="#"><img src="images.jpg" alt="Image 4"></a>
	</div>
	<div class="oc-item">
		<a href="#"><img src="images.jpg" alt="Image 5"></a>
	</div>
	<div class="oc-item">
		<a href="#"><img src="images.jpg" alt="Image 6"></a>
	</div>
	<div class="oc-item">
		<a href="#"><img src="images1.jpg" alt="Image 7"></a>
	</div>

</div>
設定:
  • data-items - 要顯示在 Carousel 裡的項目數量。 例如 5
  • data-items-lg - 在桌機或筆電上要顯示在 Carousel 裡的項目數量。例如 5
  • data-items-md - 在Netbooks上要顯示在 Carousel 裡的項目數量。例如 5
  • data-items-sm - 在iPad或平板上要顯示在 Carousel 裡的項目數量。例如 4
  • data-items-xs - 在橫置手機上要顯示在 Carousel 裡的項目數量。例如 3
  • data-items-xxs - 在直立手機上要顯示在 Carousel 裡的項目數量。例如 2
  • data-loop - 開啟/關閉循環功能。 例如 true/false
  • data-autoplay - 自動播放時間,單位是微秒。例如 5000
  • data-speed - Carousel 動畫速度,單位是微秒。例如 700
  • data-nav - 開啟/關閉導航箭頭。例如 true/false
  • data-pagi - 開啟/關閉分頁點點。例如 true/false
  • data-margin - Carousel 項目間的 Margin,單位是像素。例如 15
  • data-stage-padding Carousel 容器邊緣的 Padding,單位是像素。例如 20
  • data-merge - 開啟/關閉項目 Merging。例如 true/false
  • data-start - Carousel 從哪一個項目開始。例如 3
  • data-rewind - 開啟/關閉 Carousel 回放(Rewind)。 例如 true/false
  • data-slideby - 一次要在 Slider 上顯示幾個項目。例如 2
  • data-center - 開啟/關閉置中。例如 true/false
  • data-lazyload - 開啟/關閉延遲載入。例如 true/false
  • data-video - 開啟/關閉影片 Carousel 項目。例如 true/false

使用自定義Javascript來初始化 Owl Carousel

Owl Carousels 預設是使用標準最小功能來初始化,但有時你也許想要建立自定義功能來進行。為此你只需加入 .customjs Class 到 .carousel-widget 容器,這將會終止預設功能而允許你用自定義功能去擴展 Owl Carousel。

你能夠在這裡找到更多 Owl Carousel 自定義初始化相關的設定。

Owl Carousel 文件

燈箱效果與通知(Lightbox & Notifications)

設定燈箱效果:

加入一個 data-lightbox 屬性到任何連結或按鈕將會將之轉換成一個燈箱元素。你能夠使用不同類型的燈箱透過簡單的設定:

單一圖片:
<a href="link-to-lightbox-image.jpg" data-lightbox="image"><img src="link-to-small-thumb.jpg" alt="Lightbox Image"></a>
Iframe:
<a href="http://yourwebsite.com" data-lightbox="iframe">Your Website in a Lightbox</a>
影片:
<a href="http://www.youtube.com/watch?v=kuceVNBTJio" data-lightbox="iframe">Lightbox Video</a>

Note: 建議你只使用這樣的網址格式 http://www.youtube.com/watch?v=kuceVNBTJio 來呈現 Youtube 影片。

AJAX:
<a href="link-to-ajax-content.html" data-lightbox="ajax">在燈箱裡面呈現 AJAX 內容</a>

Note: 建議你使用 .portfolio-ajax-modal Class 來包裝 AJAX 內容以讓它能正常顯示。你也能夠隨意地利用自訂CSS設計你的 AJAX內容。

如需透過jQuery關閉lightbox視窗,可使用$.magnificPopup.close();指令,更多資訊可參考這裡

Gallery:
<div data-lightbox="gallery">
	<a href="link-to-lightbox-image.jpg" data-lightbox="gallery-item"><img src="link-to-small-thumb.jpg" alt="Lightbox Image"></a>
	<a href="link-to-lightbox-image.jpg" data-lightbox="gallery-item"><img src="link-to-small-thumb.jpg" alt="Lightbox Image"></a>
	<a href="link-to-lightbox-image.jpg" data-lightbox="gallery-item"><img src="link-to-small-thumb.jpg" alt="Lightbox Image"></a>
	<a href="link-to-lightbox-image.jpg" data-lightbox="gallery-item"><img src="link-to-small-thumb.jpg" alt="Lightbox Image"></a>
	<a href="link-to-lightbox-image.jpg" data-lightbox="gallery-item"><img src="link-to-small-thumb.jpg" alt="Lightbox Image"></a>
</div>
混合 Gallery:
<div data-lightbox="gallery">
	<a href="link-to-lightbox-image.jpg" data-lightbox="gallery-item"><img src="link-to-small-thumb.jpg" alt="Lightbox Image"></a>
	<a href="link-to-lightbox-image.jpg" data-lightbox="gallery-item"><img src="link-to-small-thumb.jpg" alt="Lightbox Image"></a>
	<a href="http://www.youtube.com/watch?v=kuceVNBTJio" class="mfp-iframe" data-lightbox="gallery-item"><img src="link-to-small-thumb.jpg" alt="Lightbox Image"></a>
	<a href="link-to-lightbox-image.jpg" data-lightbox="gallery-item"><img src="link-to-small-thumb.jpg" alt="Lightbox Image"></a>
	<a href="link-to-lightbox-image.jpg" data-lightbox="gallery-item"><img src="link-to-small-thumb.jpg" alt="Lightbox Image"></a>
</div>
AJAX Gallery:
<div data-lightbox="ajax-gallery">
	<a href="link-to-ajax-content.html" data-lightbox="ajax-gallery-item">AJAX Content in a Lightbox</a>
	<a href="link-to-ajax-content.html" data-lightbox="ajax-gallery-item">AJAX Content in a Lightbox</a>
	<a href="link-to-ajax-content.html" data-lightbox="ajax-gallery-item">AJAX Content in a Lightbox</a>
	<a href="link-to-ajax-content.html" data-lightbox="ajax-gallery-item">AJAX Content in a Lightbox</a>
	<a href="link-to-ajax-content.html" data-lightbox="ajax-gallery-item">AJAX Content in a Lightbox</a>
</div>

顯示燈箱標題:

要為你的燈箱圖片顯示標題,你將需要加入 title 屬性到你的燈箱連結上:

<a href="link-to-lightbox-image.jpg" data-lightbox="image" title="Lightbox Image"><img src="link-to-small-thumb.jpg" alt="Lightbox Image"></a>

設定通知:

你能夠為你的網站設定自定義通知來引起訪客的注意。一個簡單觸發通知的範例碼:

<a href="#" class="btn btn-info" data-notify-type="info" data-notify-msg="<i class=icon-info-sign></i> Welcome to Canvas Demo!" onclick="SEMICOLON.widget.notifications(this); return false;">Show Info</a>

通知的小程式具有以下自定義選項:

  • data-notify-position - 定義通知訊息的位置。可設定位置包含以下:
    • top-right - 顯示通知訊息在螢幕的 右上角
    • top-left - 顯示通知訊息在螢幕的 左上角
    • bottom-right - 顯示通知訊息在螢幕的 右下角
    • bottom-left - 顯示通知訊息在螢幕的 左下角
    • top-full-width - 顯示通知訊息在螢幕 頂部全寬 版型
    • bottom-full-width - 顯示通知訊息在螢幕 底部全寬 版型
  • data-notify-type - 定義通知訊息的類型/顏色。可選項有以下:
    • info
    • error
    • success
    • warning
  • data-notify-msg - 設定通知訊息內容,格式為HTML。 例如 <i class=icon-info-sign></i> Welcome to Canvas Demo!
  • data-notify-close - 是否在通知方塊上顯示關閉按鈕。使用 truefalse

你也能夠觸發自定義通知在你自定義的動作上例如送出表單或載入視窗。這裡是實現範例碼:

<div id="custom-notification-message" data-notify-position="top-right" data-notify-type="info" data-notify-msg="<i class="icon-info-sign"></i> Welcome to Canvas Demo!"></div>

<script type="text/javascript">
	jQuery(window).load( function(){
		SEMICOLON.widget.notifications( jQuery('#custom-notification-message') );
	});
</script>

注意: 記得, SEMICOLON.widget.notifications(); 函式只接受 jQuery 選擇器 才能正常運作。所以你能夠將任何帶唯一 ID 的HTML元素轉變成通知元素。透過上面的程式碼根據 HTML ID Selector去呼叫該元素的通知函式。

Modal on Load

你能夠加入一個Modal,它在載入任何頁面時顯示在頁面上,透過以下設定:

<div class="modal-on-load" data-target="#myModal1"></div>

<!-- Modal -->
<div class="modal1 mfp-hide" id="myModal1">
	<div class="block divcenter" style="background-color: #FFF; max-width: 500px;">
		<div class="center" style="padding: 50px;">
			<h3>A Simple Example of a Text Modal</h3>
			<p class="nobottommargin">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum delectus, tenetur obcaecati porro! Expedita nostrum tempora quia provident perspiciatis inventore, autem eaque, quod explicabo, ipsum, facilis aliquid! Sapiente, possimus quo!</p>
		</div>
		<div class="section center nomargin" style="padding: 30px;">
			<a href="#" class="button" onClick="$.magnificPopup.close();return false;">Close this Modal</a>
		</div>
	</div>
</div>

Modal on Load 具有以下自定義選項:

  • data-target - 你的目標 Modal ID。 例如: #myModal1
  • data-delay - 載入後顯示此Modal的延時長度,單位是微秒。
  • data-timeout - 顯示此Modal多久會自行關閉,單位是微秒。
  • data-animation-in - 當顯示Modal時所呈現的動畫效果,參考 這裡
  • data-animation-out - 當關閉Modal時所呈現的動畫效果,參考 這裡

注意: 要在 Modal 上啟動 Cookies ,只需要加入 .enable-cookie Class 到 .modal-on-load 元素。

程式範例:
<div class="modal-on-load enable-cookie" data-target="#myModal1" data-delay="5000" data-timeout="7000"></div>

<!-- Modal -->
<div class="modal1 mfp-hide" id="myModal1">
	<div class="block divcenter" style="background-color: #FFF; max-width: 500px;">
		<div class="center" style="padding: 50px;">
			<h3>A Simple Example of a Text Modal</h3>
			<p class="nobottommargin">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum delectus, tenetur obcaecati porro! Expedita nostrum tempora quia provident perspiciatis inventore, autem eaque, quod explicabo, ipsum, facilis aliquid! Sapiente, possimus quo!</p>
		</div>
		<div class="section center nomargin" style="padding: 30px;">
			<a href="#" class="button" onClick="$.magnificPopup.close();return false;">Close this Modal</a>
		</div>
	</div>
</div>

圖表(Charts)

超過50種以上的圖表範本被包含在Canvas裡頭,使用的是 ChartJS 外掛。

完整文件

Google 地圖(Google Maps)

你能夠加入內嵌 Google 地圖到任何頁面使用以下設定:

  • 步驟 1:

    加入 Google Maps 相關 script 到頁面底部就在 js/plugins.js script 連結之後:

    <script type="text/javascript" src="https://maps.google.com/maps/api/js?key=YOUR_API_KEY"></script>
    <script type="text/javascript" src="js/jquery.gmap.js"></script>

    你能夠產生你的 API Key (Browser Key) 供 Google Maps 使用,透過 此網站 然後點標頭的 Get a Key 按鈕。確保你將上方的程式碼用你生成的API Key替換了 YOUR_API_KEY

  • 步驟 2:

    加入一個 div ,它將包含你的 Google Map:

    <div id="google-map1" style="height: 250px;" class="gmap"></div>
  • 步驟 3:

    加入 Google Maps script 以及你需要的選項,就在你的 Google Map div 之下來初始化你的Google Maps:

    <script type="text/javascript">
    
    	$('#google-map1').gMap({
    
    		 address: 'Melbourne, Australia',
    		 maptype: 'ROADMAP',
    		 zoom: 14,
    		 markers: [
    			{
    				address: "Melbourne, Australia"
    			}
    		 ],
    		 doubleclickzoom: false,
    		 controls: {
    			 panControl: true,
    			 zoomControl: true,
    			 mapTypeControl: true,
    			 scaleControl: false,
    			 streetViewControl: false,
    			 overviewMapControl: false
    		 }
    
    	});
    
    </script>

加入自定義風格的地圖:

你可以加入自定義又美觀的Google地圖到你的網頁上只需要在你的Google地圖 Script裡設定 styles: []:

<script type="text/javascript">

	$('#google-map1').gMap({

		 address: 'Melbourne, Australia',
		 maptype: 'ROADMAP',
		 zoom: 14,
		 markers: [
			{
				address: "Melbourne, Australia"
			}
		 ],
		 doubleclickzoom: false,
		 controls: {
			 panControl: true,
			 zoomControl: true,
			 mapTypeControl: true,
			 scaleControl: false,
			 streetViewControl: false,
			 overviewMapControl: false
		 },
		 styles: [{"featureType":"landscape","stylers":[{"saturation":-100},{"lightness":65},{"visibility":"on"}]},{"featureType":"poi","stylers":[{"saturation":-100},{"lightness":51},{"visibility":"simplified"}]},{"featureType":"road.highway","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"road.arterial","stylers":[{"saturation":-100},{"lightness":30},{"visibility":"on"}]},{"featureType":"road.local","stylers":[{"saturation":-100},{"lightness":40},{"visibility":"on"}]},{"featureType":"transit","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"administrative.province","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":-25},{"saturation":-100}]},{"featureType":"water","elementType":"geometry","stylers":[{"hue":"#ffff00"},{"lightness":-25},{"saturation":-97}]}]

	});

</script>

提示: 你可以在這裡找到一些驚人的風格地圖 Snazzy Maps

加入多個地圖指示(Markers)

你可以加入多個地圖指示,Google允許你放置高達10個指示,使用以下程式碼:

<script type="text/javascript">

	$('#google-map1').gMap({

		 address: 'Melbourne, Australia',
		 maptype: 'ROADMAP',
		 zoom: 14,
		 markers: [
			{
				address: "Melbourne, Australia"
			},
			{
				address: "Sydney, Australia"
			},
			{
				address: "Perth, Australia"
			}
		 ],
		 doubleclickzoom: false,
		 controls: {
			 panControl: true,
			 zoomControl: true,
			 mapTypeControl: true,
			 scaleControl: false,
			 streetViewControl: false,
			 overviewMapControl: false
		 },
		 styles: [{"featureType":"landscape","stylers":[{"saturation":-100},{"lightness":65},{"visibility":"on"}]},{"featureType":"poi","stylers":[{"saturation":-100},{"lightness":51},{"visibility":"simplified"}]},{"featureType":"road.highway","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"road.arterial","stylers":[{"saturation":-100},{"lightness":30},{"visibility":"on"}]},{"featureType":"road.local","stylers":[{"saturation":-100},{"lightness":40},{"visibility":"on"}]},{"featureType":"transit","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"administrative.province","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":-25},{"saturation":-100}]},{"featureType":"water","elementType":"geometry","stylers":[{"hue":"#ffff00"},{"lightness":-25},{"saturation":-97}]}]

	});

</script>
所有你可以設置的選項列表:
var options = {
	controls: {
			 panControl: true,
			 zoomControl: true,
			 mapTypeControl: true,
			 scaleControl: true,
			 streetViewControl: true,
			 overviewMapControl: true
		 },
	scrollwheel: false,
	maptype: 'TERRAIN',
	markers: [
		{
			latitude: -2.2014,
			longitude: -80.9763,
		},
		{
			address: "Guayaquil, Ecuador",
			html: "My Hometown",
			icon: {
				image: "images/gmap_pin_grey.png",
				iconsize: [26, 46],
				iconanchor: [12,46]
			}
		}
	],
	icon: {
		image: "http://www.google.com/mapfiles/marker.png",
		shadow: "http://www.google.com/mapfiles/shadow50.png",
		iconsize: [20, 34],
		shadowsize: [37, 34],
		iconanchor: [9, 34],
		shadowanchor: [19, 34]
	},
	latitude: -2.282,
	longitude: -80.272,
	zoom: 10,
	styles: []
}

計時器(Countdown)

你能夠加入一個計時器到任何頁面,使用以下設定:

<div id="countdown-example"></div>

<script>
	jQuery(document).ready( function($){
		var newDate = new Date(2015, 5, 15);
		$('#countdown-example').countdown({until: newDate});
	});
</script>

另外,日期是採用 Javascript 格式: (YYYY, M, DD) ,而月份的格式如下:

  • 0 as January
  • 1 as February
  • 2 as March
  • 3 as April
  • 4 as May
  • 5 as June
  • 6 as July
  • 7 as August
  • 8 as September
  • 9 as October
  • 10 as November
  • 11 as December

所以假如你想要讓你的計時日期設定為2015年5月15日,那麼你的計時 Javascript 格式將會是 Date(2015, 5, 15)

圖示(Icons)

Canvas 包含非常多圖示可用在你的網站上呈現互動內容。下面的CSS連結碼可在文件的<head>找到,包含了所有來源於Canvas的基礎圖示:

<link rel="stylesheet" href="css/font-icons.css" type="text/css" />

然而,要加入更多的圖示你需要加入對應的圖示樣式表(Icon Stylesheets)在文件的 <head>。就在 css/font-icons.css CSS文字連結之下。

  • ET Line Icons:
    <link rel="stylesheet" href="one-page/css/et-line.css" type="text/css" />
  • Medical Icons:
    <link rel="stylesheet" href="demos/medical/css/medical-icons.css" type="text/css" />
  • Real Estate Icons:
    <link rel="stylesheet" href="demos/real-estate/css/font-icons.css" type="text/css" />

搜尋圖示

  • icon-line-eye
  • icon-line-paper-clip
  • icon-line-mail
  • icon-line-toggle
  • icon-line-layout
  • icon-line-link
  • icon-line-bell
  • icon-line-lock
  • icon-line-unlock
  • icon-line-ribbon
  • icon-line-image
  • icon-line-signal
  • icon-line-target
  • icon-line-clipboard
  • icon-line-clock
  • icon-line-watch
  • icon-line-air-play
  • icon-line-camera
  • icon-line-video
  • icon-line-disc
  • icon-line-printer
  • icon-line-monitor
  • icon-line-server
  • icon-line-cog
  • icon-line-heart
  • icon-line-paragraph
  • icon-line-align-justify
  • icon-line-align-left
  • icon-line-align-center
  • icon-line-align-right
  • icon-line-book
  • icon-line-layers
  • icon-line-stack
  • icon-line-stack-2
  • icon-line-paper
  • icon-line-paper-stack
  • icon-line-search
  • icon-line-zoom-in
  • icon-line-zoom-out
  • icon-line-reply
  • icon-line-circle-plus
  • icon-line-circle-minus
  • icon-line-circle-check
  • icon-line-circle-cross
  • icon-line-square-plus
  • icon-line-square-minus
  • icon-line-square-check
  • icon-line-square-cross
  • icon-line-microphone
  • icon-line-record
  • icon-line-skip-back
  • icon-line-rewind
  • icon-line-play
  • icon-line-pause
  • icon-line-stop
  • icon-line-fast-forward
  • icon-line-skip-forward
  • icon-line-shuffle
  • icon-line-repeat
  • icon-line-folder
  • icon-line-umbrella
  • icon-line-moon
  • icon-line-thermometer
  • icon-line-drop
  • icon-line-sun
  • icon-line-cloud
  • icon-line-cloud-upload
  • icon-line-cloud-download
  • icon-line-upload
  • icon-line-download
  • icon-line-location
  • icon-line-location-2
  • icon-line-map
  • icon-line-battery
  • icon-line-head
  • icon-line-briefcase
  • icon-line-speech-bubble
  • icon-line-anchor
  • icon-line-globe
  • icon-line-box
  • icon-line-reload
  • icon-line-share
  • icon-line-marquee
  • icon-line-marquee-plus
  • icon-line-marquee-minus
  • icon-line-tag
  • icon-line-power
  • icon-line-command
  • icon-line-alt
  • icon-line-esc
  • icon-line-bar-graph
  • icon-line-bar-graph-2
  • icon-line-pie-graph
  • icon-line-star
  • icon-line-arrow-left
  • icon-line-arrow-right
  • icon-line-arrow-up
  • icon-line-arrow-down
  • icon-line-volume
  • icon-line-mute
  • icon-line-content-right
  • icon-line-content-left
  • icon-line-grid
  • icon-line-grid-2
  • icon-line-columns
  • icon-line-loader
  • icon-line-bag
  • icon-line-ban
  • icon-line-flag
  • icon-line-trash
  • icon-line-expand
  • icon-line-contract
  • icon-line-maximize
  • icon-line-minimize
  • icon-line-plus
  • icon-line-minus
  • icon-line-check
  • icon-line-cross
  • icon-line-move
  • icon-line-delete
  • icon-line-menu
  • icon-line-archive
  • icon-line-inbox
  • icon-line-outbox
  • icon-line-file
  • icon-line-file-add
  • icon-line-file-subtract
  • icon-line-help
  • icon-line-open
  • icon-line-ellipsis
  • icon-type
  • icon-box
  • icon-archive
  • icon-envelope
  • icon-email
  • icon-files
  • icon-printer2
  • icon-folder-add
  • icon-folder-settings
  • icon-folder-check
  • icon-wifi-low
  • icon-wifi-mid
  • icon-wifi-full
  • icon-connection-empty
  • icon-battery-full
  • icon-settings
  • icon-arrow-left
  • icon-arrow-up
  • icon-arrow-down
  • icon-arrow-right
  • icon-reload
  • icon-download
  • icon-tag
  • icon-trashcan
  • icon-search
  • icon-zoom-in
  • icon-zoom-out
  • icon-chat
  • icon-clock
  • icon-printer
  • icon-home
  • icon-flag
  • icon-meter
  • icon-switch
  • icon-forbidden
  • icon-phone-landscape
  • icon-tablet
  • icon-tablet-landscape
  • icon-laptop
  • icon-camera
  • icon-microwave-oven
  • icon-credit-cards
  • icon-map-marker
  • icon-map
  • icon-support
  • icon-newspaper2
  • icon-barbell
  • icon-stopwatch
  • icon-atom
  • icon-image
  • icon-cube
  • icon-bars
  • icon-chart
  • icon-pencil
  • icon-measure
  • icon-eyedropper
  • icon-file-settings
  • icon-file-add
  • icon-file
  • icon-align-left
  • icon-align-right
  • icon-align-center
  • icon-align-justify
  • icon-file-broken
  • icon-browser
  • icon-windows
  • icon-window
  • icon-folder
  • icon-connection-25
  • icon-connection-50
  • icon-connection-75
  • icon-connection-full
  • icon-list
  • icon-grid
  • icon-stack3
  • icon-battery-charging
  • icon-battery-empty
  • icon-battery-25
  • icon-battery-50
  • icon-battery-75
  • icon-refresh
  • icon-volume
  • icon-volume-increase
  • icon-volume-decrease
  • icon-mute
  • icon-microphone
  • icon-microphone-off
  • icon-book
  • icon-checkmark
  • icon-checkbox-checked
  • icon-checkbox
  • icon-paperclip
  • icon-chat-1
  • icon-chat-2
  • icon-chat-3
  • icon-comment
  • icon-calendar
  • icon-bookmark
  • icon-email2
  • icon-heart
  • icon-enter
  • icon-cloud
  • icon-book2
  • icon-star
  • icon-lock
  • icon-unlocked
  • icon-unlocked2
  • icon-users
  • icon-user
  • icon-users2
  • icon-user2
  • icon-bullhorn
  • icon-share
  • icon-screen
  • icon-phone
  • icon-phone-portrait
  • icon-calculator
  • icon-bag
  • icon-diamond
  • icon-drink
  • icon-shorts
  • icon-vcard
  • icon-sun
  • icon-bill
  • icon-coffee
  • icon-tv2
  • icon-newspaper
  • icon-stack
  • icon-syringe
  • icon-health
  • icon-bolt
  • icon-pill
  • icon-bones
  • icon-lab
  • icon-clipboard
  • icon-mug
  • icon-bucket
  • icon-select
  • icon-graph
  • icon-crop
  • icon-heart2
  • icon-cloud2
  • icon-star2
  • icon-pen
  • icon-diamond2
  • icon-display
  • icon-paperplane
  • icon-params
  • icon-banknote
  • icon-vynil
  • icon-truck
  • icon-world
  • icon-tv
  • icon-sound
  • icon-video
  • icon-trash
  • icon-user3
  • icon-key
  • icon-search2
  • icon-settings2
  • icon-camera2
  • icon-tag2
  • icon-lock2
  • icon-bulb
  • icon-location
  • icon-eye
  • icon-bubble
  • icon-stack2
  • icon-cup
  • icon-phone2
  • icon-news
  • icon-mail
  • icon-like
  • icon-photo
  • icon-note
  • icon-clock2
  • icon-data
  • icon-music
  • icon-megaphone
  • icon-study
  • icon-lab2
  • icon-food
  • icon-t-shirt
  • icon-fire
  • icon-clip
  • icon-shop
  • icon-calendar2
  • icon-wallet
  • icon-duckduckgo
  • icon-lkdto
  • icon-delicious
  • icon-paypal
  • icon-flattr
  • icon-android
  • icon-eventful
  • icon-smashmag
  • icon-gplus
  • icon-wikipedia
  • icon-lanyrd
  • icon-calendar-1
  • icon-stumbleupon
  • icon-bitcoin
  • icon-w3c
  • icon-foursquare
  • icon-html5
  • icon-ie
  • icon-call
  • icon-grooveshark
  • icon-ninetyninedesigns
  • icon-forrst
  • icon-digg
  • icon-spotify
  • icon-reddit
  • icon-guest
  • icon-blogger
  • icon-cc
  • icon-dribbble
  • icon-evernote
  • icon-flickr
  • icon-google
  • icon-viadeo
  • icon-instapaper
  • icon-weibo
  • icon-klout
  • icon-linkedin
  • icon-meetup
  • icon-vk
  • icon-rss
  • icon-skype
  • icon-twitter
  • icon-youtube
  • icon-vimeo
  • icon-windows2
  • icon-aim
  • icon-yahoo
  • icon-chrome
  • icon-email3
  • icon-macstore
  • icon-myspace
  • icon-podcast
  • icon-cloudapp
  • icon-dropbox
  • icon-ebay
  • icon-facebook
  • icon-github
  • icon-github-circled
  • icon-googleplay
  • icon-itunes
  • icon-plurk
  • icon-songkick
  • icon-lastfm
  • icon-gmail
  • icon-pinboard
  • icon-soundcloud
  • icon-tumblr
  • icon-eventasaurus
  • icon-wordpress
  • icon-yelp
  • icon-intensedebate
  • icon-eventbrite
  • icon-scribd
  • icon-posterous
  • icon-stripe
  • icon-opentable
  • icon-cart
  • icon-print
  • icon-dwolla
  • icon-appnet
  • icon-statusnet
  • icon-acrobat
  • icon-drupal
  • icon-buffer
  • icon-pocket
  • icon-bitbucket
  • icon-lego
  • icon-login
  • icon-stackoverflow
  • icon-hackernews
  • icon-xing
  • icon-instagram
  • icon-angellist
  • icon-quora
  • icon-openid
  • icon-steam
  • icon-amazon
  • icon-disqus
  • icon-plancast
  • icon-appstore
  • icon-gowalla
  • icon-pinterest
  • icon-fivehundredpx
  • icon-glass
  • icon-music2
  • icon-search3
  • icon-envelope2
  • icon-heart3
  • icon-star3
  • icon-star-empty
  • icon-user4
  • icon-film
  • icon-th-large
  • icon-th
  • icon-th-list
  • icon-ok
  • icon-remove
  • icon-zoom-in2
  • icon-zoom-out2
  • icon-off
  • icon-signal
  • icon-cog
  • icon-trash2
  • icon-home2
  • icon-file2
  • icon-time
  • icon-road
  • icon-download-alt
  • icon-download2
  • icon-upload
  • icon-inbox
  • icon-play-circle
  • icon-repeat
  • icon-refresh2
  • icon-list-alt
  • icon-lock3
  • icon-flag2
  • icon-headphones
  • icon-volume-off
  • icon-volume-down
  • icon-volume-up
  • icon-qrcode
  • icon-barcode
  • icon-tag3
  • icon-tags
  • icon-book3
  • icon-bookmark2
  • icon-print2
  • icon-camera3
  • icon-font
  • icon-bold
  • icon-italic
  • icon-text-height
  • icon-text-width
  • icon-align-left2
  • icon-align-center2
  • icon-align-right2
  • icon-align-justify2
  • icon-list2
  • icon-indent-left
  • icon-indent-right
  • icon-facetime-video
  • icon-picture
  • icon-pencil2
  • icon-map-marker2
  • icon-adjust
  • icon-tint
  • icon-edit
  • icon-share2
  • icon-check
  • icon-move
  • icon-step-backward
  • icon-fast-backward
  • icon-backward
  • icon-play
  • icon-pause
  • icon-stop
  • icon-forward
  • icon-fast-forward
  • icon-step-forward
  • icon-eject
  • icon-chevron-left
  • icon-chevron-right
  • icon-plus-sign
  • icon-minus-sign
  • icon-remove-sign
  • icon-ok-sign
  • icon-question-sign
  • icon-info-sign
  • icon-screenshot
  • icon-remove-circle
  • icon-ok-circle
  • icon-ban-circle
  • icon-arrow-left2
  • icon-arrow-right2
  • icon-arrow-up2
  • icon-arrow-down2
  • icon-share-alt
  • icon-resize-full
  • icon-resize-small
  • icon-plus
  • icon-minus
  • icon-asterisk
  • icon-exclamation-sign
  • icon-gift
  • icon-leaf
  • icon-fire2
  • icon-eye-open
  • icon-eye-close
  • icon-warning-sign
  • icon-plane
  • icon-calendar3
  • icon-random
  • icon-comment2
  • icon-magnet
  • icon-chevron-up
  • icon-chevron-down
  • icon-retweet
  • icon-shopping-cart
  • icon-folder-close
  • icon-folder-open
  • icon-resize-vertical
  • icon-resize-horizontal
  • icon-bar-chart
  • icon-twitter-sign
  • icon-facebook-sign
  • icon-camera-retro
  • icon-key2
  • icon-cogs
  • icon-comments
  • icon-thumbs-up
  • icon-thumbs-down
  • icon-star-half
  • icon-heart-empty
  • icon-signout
  • icon-linkedin-sign
  • icon-pushpin
  • icon-external-link
  • icon-signin
  • icon-trophy
  • icon-github-sign
  • icon-upload-alt
  • icon-lemon
  • icon-phone3
  • icon-check-empty
  • icon-bookmark-empty
  • icon-phone-sign
  • icon-twitter2
  • icon-facebook2
  • icon-github2
  • icon-unlock
  • icon-credit
  • icon-rss2
  • icon-hdd
  • icon-bullhorn2
  • icon-bell
  • icon-certificate
  • icon-hand-right
  • icon-hand-left
  • icon-hand-up
  • icon-hand-down
  • icon-circle-arrow-left
  • icon-circle-arrow-right
  • icon-circle-arrow-up
  • icon-circle-arrow-down
  • icon-globe
  • icon-wrench
  • icon-tasks
  • icon-filter
  • icon-briefcase
  • icon-fullscreen
  • icon-group
  • icon-link
  • icon-cloud3
  • icon-beaker
  • icon-cut
  • icon-copy
  • icon-paper-clip
  • icon-save
  • icon-sign-blank
  • icon-reorder
  • icon-list-ul
  • icon-list-ol
  • icon-strikethrough
  • icon-underline
  • icon-table
  • icon-magic
  • icon-truck2
  • icon-pinterest2
  • icon-pinterest-sign
  • icon-google-plus-sign
  • icon-google-plus
  • icon-money
  • icon-caret-down
  • icon-caret-up
  • icon-caret-left
  • icon-caret-right
  • icon-columns
  • icon-sort
  • icon-sort-down
  • icon-sort-up
  • icon-envelope-alt
  • icon-linkedin2
  • icon-undo
  • icon-legal
  • icon-dashboard
  • icon-comment-alt
  • icon-comments-alt
  • icon-bolt2
  • icon-sitemap
  • icon-umbrella
  • icon-paste
  • icon-lightbulb
  • icon-exchange
  • icon-cloud-download
  • icon-cloud-upload
  • icon-user-md
  • icon-stethoscope
  • icon-suitcase
  • icon-bell-alt
  • icon-coffee2
  • icon-food2
  • icon-file-alt
  • icon-building
  • icon-hospital
  • icon-ambulance
  • icon-medkit
  • icon-fighter-jet
  • icon-beer
  • icon-h-sign
  • icon-plus-sign2
  • icon-double-angle-left
  • icon-double-angle-right
  • icon-double-angle-up
  • icon-double-angle-down
  • icon-angle-left
  • icon-angle-right
  • icon-angle-up
  • icon-angle-down
  • icon-desktop
  • icon-laptop2
  • icon-tablet2
  • icon-mobile
  • icon-circle-blank
  • icon-quote-left
  • icon-quote-right
  • icon-spinner
  • icon-circle
  • icon-reply
  • icon-github-alt
  • icon-folder-close-alt
  • icon-folder-open-alt
  • icon-expand-alt
  • icon-collapse-alt
  • icon-smile
  • icon-frown
  • icon-meh
  • icon-gamepad
  • icon-keyboard
  • icon-flag-alt
  • icon-flag-checkered
  • icon-terminal
  • icon-code
  • icon-reply-all
  • icon-star-half-full
  • icon-location-arrow
  • icon-crop2
  • icon-code-fork
  • icon-unlink
  • icon-question
  • icon-info
  • icon-exclamation
  • icon-superscript
  • icon-subscript
  • icon-eraser
  • icon-puzzle
  • icon-microphone2
  • icon-microphone-off2
  • icon-shield
  • icon-calendar-empty
  • icon-fire-extinguisher
  • icon-rocket
  • icon-maxcdn
  • icon-chevron-sign-left
  • icon-chevron-sign-right
  • icon-chevron-sign-up
  • icon-chevron-sign-down
  • icon-html52
  • icon-css3
  • icon-anchor
  • icon-unlock-alt
  • icon-bullseye
  • icon-ellipsis-horizontal
  • icon-ellipsis-vertical
  • icon-rss-sign
  • icon-play-sign
  • icon-ticket
  • icon-minus-sign-alt
  • icon-check-minus
  • icon-level-up
  • icon-level-down
  • icon-check-sign
  • icon-edit-sign
  • icon-external-link-sign
  • icon-share-sign
  • icon-compass
  • icon-collapse
  • icon-collapse-top
  • icon-expand
  • icon-euro
  • icon-gbp
  • icon-dollar
  • icon-rupee
  • icon-yen
  • icon-renminbi
  • icon-won
  • icon-bitcoin2
  • icon-file3
  • icon-file-text
  • icon-sort-by-alphabet
  • icon-sort-by-alphabet-alt
  • icon-sort-by-attributes
  • icon-sort-by-attributes-alt
  • icon-sort-by-order
  • icon-sort-by-order-alt
  • icon-thumbs-up2
  • icon-thumbs-down2
  • icon-youtube-sign
  • icon-youtube2
  • icon-xing2
  • icon-xing-sign
  • icon-youtube-play
  • icon-dropbox2
  • icon-stackexchange
  • icon-instagram2
  • icon-flickr2
  • icon-adn
  • icon-bitbucket2
  • icon-bitbucket-sign
  • icon-tumblr2
  • icon-tumblr-sign
  • icon-long-arrow-down
  • icon-long-arrow-up
  • icon-long-arrow-left
  • icon-long-arrow-right
  • icon-apple
  • icon-windows3
  • icon-android2
  • icon-linux
  • icon-dribbble2
  • icon-skype2
  • icon-foursquare2
  • icon-trello
  • icon-female
  • icon-male
  • icon-gittip
  • icon-sun2
  • icon-moon
  • icon-archive2
  • icon-bug
  • icon-renren
  • icon-weibo2
  • icon-vk2
  • icon-line2-user-female
  • icon-line2-user-follow
  • icon-line2-user-following
  • icon-line2-user-unfollow
  • icon-line2-trophy
  • icon-line2-screen-smartphone
  • icon-line2-screen-desktop
  • icon-line2-plane
  • icon-line2-notebook
  • icon-line2-moustache
  • icon-line2-mouse
  • icon-line2-magnet
  • icon-line2-energy
  • icon-line2-emoticon-smile
  • icon-line2-disc
  • icon-line2-cursor-move
  • icon-line2-crop
  • icon-line2-credit-card
  • icon-line2-chemistry
  • icon-line2-user
  • icon-line2-speedometer
  • icon-line2-social-youtube
  • icon-line2-social-twitter
  • icon-line2-social-tumblr
  • icon-line2-social-facebook
  • icon-line2-social-dropbox
  • icon-line2-social-dribbble
  • icon-line2-shield
  • icon-line2-screen-tablet
  • icon-line2-magic-wand
  • icon-line2-hourglass
  • icon-line2-graduation
  • icon-line2-ghost
  • icon-line2-game-controller
  • icon-line2-fire
  • icon-line2-eyeglasses
  • icon-line2-envelope-open
  • icon-line2-envelope-letter
  • icon-line2-bell
  • icon-line2-badge
  • icon-line2-anchor
  • icon-line2-wallet
  • icon-line2-vector
  • icon-line2-speech
  • icon-line2-puzzle
  • icon-line2-printer
  • icon-line2-present
  • icon-line2-playlist
  • icon-line2-pin
  • icon-line2-picture
  • icon-line2-map
  • icon-line2-layers
  • icon-line2-handbag
  • icon-line2-globe-alt
  • icon-line2-globe
  • icon-line2-frame
  • icon-line2-folder-alt
  • icon-line2-film
  • icon-line2-feed
  • icon-line2-earphones-alt
  • icon-line2-earphones
  • icon-line2-drop
  • icon-line2-drawer
  • icon-line2-docs
  • icon-line2-directions
  • icon-line2-direction
  • icon-line2-diamond
  • icon-line2-cup
  • icon-line2-compass
  • icon-line2-call-out
  • icon-line2-call-in
  • icon-line2-call-end
  • icon-line2-calculator
  • icon-line2-bubbles
  • icon-line2-briefcase
  • icon-line2-book-open
  • icon-line2-basket-loaded
  • icon-line2-basket
  • icon-line2-bag
  • icon-line2-action-undo
  • icon-line2-action-redo
  • icon-line2-wrench
  • icon-line2-umbrella
  • icon-line2-trash
  • icon-line2-tag
  • icon-line2-support
  • icon-line2-size-fullscreen
  • icon-line2-size-actual
  • icon-line2-shuffle
  • icon-line2-share-alt
  • icon-line2-share
  • icon-line2-rocket
  • icon-line2-question
  • icon-line2-pie-chart
  • icon-line2-pencil
  • icon-line2-note
  • icon-line2-music-tone-alt
  • icon-line2-music-tone
  • icon-line2-microphone
  • icon-line2-loop
  • icon-line2-logout
  • icon-line2-login
  • icon-line2-list
  • icon-line2-like
  • icon-line2-home
  • icon-line2-grid
  • icon-line2-graph
  • icon-line2-equalizer
  • icon-line2-dislike
  • icon-line2-cursor
  • icon-line2-control-start
  • icon-line2-control-rewind
  • icon-line2-control-play
  • icon-line2-control-pause
  • icon-line2-control-forward
  • icon-line2-control-end
  • icon-line2-calendar
  • icon-line2-bulb
  • icon-line2-bar-chart
  • icon-line2-arrow-up
  • icon-line2-arrow-right
  • icon-line2-arrow-left
  • icon-line2-arrow-down
  • icon-line2-ban
  • icon-line2-bubble
  • icon-line2-camcorder
  • icon-line2-camera
  • icon-line2-check
  • icon-line2-clock
  • icon-line2-close
  • icon-line2-cloud-download
  • icon-line2-cloud-upload
  • icon-line2-doc
  • icon-line2-envelope
  • icon-line2-eye
  • icon-line2-flag
  • icon-line2-folder
  • icon-line2-heart
  • icon-line2-info
  • icon-line2-key
  • icon-line2-link
  • icon-line2-lock
  • icon-line2-lock-open
  • icon-line2-magnifier
  • icon-line2-magnifier-add
  • icon-line2-magnifier-remove
  • icon-line2-paper-clip
  • icon-line2-paper-plane
  • icon-line2-plus
  • icon-line2-pointer
  • icon-line2-power
  • icon-line2-refresh
  • icon-line2-reload
  • icon-line2-settings
  • icon-line2-star
  • icon-line2-symbol-female
  • icon-line2-symbol-male
  • icon-line2-target
  • icon-line2-volume-1
  • icon-line2-volume-2
  • icon-line2-volume-off
  • icon-line2-users
  • icon-et-mobile
  • icon-et-laptop
  • icon-et-desktop
  • icon-et-tablet
  • icon-et-phone
  • icon-et-document
  • icon-et-documents
  • icon-et-search
  • icon-et-clipboard
  • icon-et-newspaper
  • icon-et-notebook
  • icon-et-book-open
  • icon-et-browser
  • icon-et-calendar
  • icon-et-presentation
  • icon-et-picture
  • icon-et-pictures
  • icon-et-video
  • icon-et-camera
  • icon-et-printer
  • icon-et-toolbox
  • icon-et-briefcase
  • icon-et-wallet
  • icon-et-gift
  • icon-et-bargraph
  • icon-et-grid
  • icon-et-expand
  • icon-et-focus
  • icon-et-edit
  • icon-et-adjustments
  • icon-et-ribbon
  • icon-et-hourglass
  • icon-et-lock
  • icon-et-megaphone
  • icon-et-shield
  • icon-et-trophy
  • icon-et-flag
  • icon-et-map
  • icon-et-puzzle
  • icon-et-basket
  • icon-et-envelope
  • icon-et-streetsign
  • icon-et-telescope
  • icon-et-gears
  • icon-et-key
  • icon-et-paperclip
  • icon-et-attachment
  • icon-et-pricetags
  • icon-et-lightbulb
  • icon-et-layers
  • icon-et-pencil
  • icon-et-tools
  • icon-et-tools-2
  • icon-et-scissors
  • icon-et-paintbrush
  • icon-et-magnifying-glass
  • icon-et-circle-compass
  • icon-et-linegraph
  • icon-et-mic
  • icon-et-strategy
  • icon-et-beaker
  • icon-et-caution
  • icon-et-recycle
  • icon-et-anchor
  • icon-et-profile-male
  • icon-et-profile-female
  • icon-et-bike
  • icon-et-wine
  • icon-et-hotairballoon
  • icon-et-globe
  • icon-et-genius
  • icon-et-map-pin
  • icon-et-dial
  • icon-et-chat
  • icon-et-heart
  • icon-et-cloud
  • icon-et-upload
  • icon-et-download
  • icon-et-target
  • icon-et-hazardous
  • icon-et-piechart
  • icon-et-speedometer
  • icon-et-global
  • icon-et-compass
  • icon-et-lifesaver
  • icon-et-clock
  • icon-et-aperture
  • icon-et-quote
  • icon-et-scope
  • icon-et-alarmclock
  • icon-et-refresh
  • icon-et-happy
  • icon-et-sad
  • icon-et-facebook
  • icon-et-twitter
  • icon-et-googleplus
  • icon-et-rss
  • icon-et-tumblr
  • icon-et-linkedin
  • icon-et-dribbble
  • icon-medical-i-womens-health
  • icon-medical-i-waiting-area
  • icon-medical-i-volume-control
  • icon-medical-i-ultrasound
  • icon-medical-i-text-telephone
  • icon-medical-i-surgery
  • icon-medical-i-stairs
  • icon-medical-i-radiology
  • icon-medical-i-physical-therapy
  • icon-medical-i-pharmacy
  • icon-medical-i-pediatrics
  • icon-medical-i-pathology
  • icon-medical-i-outpatient
  • icon-medical-i-mental-health
  • icon-medical-i-medical-records
  • icon-medical-i-medical-library
  • icon-medical-i-mammography
  • icon-medical-i-laboratory
  • icon-medical-i-labor-delivery
  • icon-medical-i-immunizations
  • icon-medical-i-imaging-root-category
  • icon-medical-i-imaging-alternative-pet
  • icon-medical-i-imaging-alternative-mri
  • icon-medical-i-imaging-alternative-mri-two
  • icon-medical-i-imaging-alternative-ct
  • icon-medical-i-fire-extinguisher
  • icon-medical-i-family-practice
  • icon-medical-i-emergency
  • icon-medical-i-elevators
  • icon-medical-i-ear-nose-throat
  • icon-medical-i-drinking-fountain
  • icon-medical-i-cardiology
  • icon-medical-i-billing
  • icon-medical-i-anesthesia
  • icon-medical-i-ambulance
  • icon-medical-i-alternative-complementary
  • icon-medical-i-administration
  • icon-medical-i-social-services
  • icon-medical-i-smoking
  • icon-medical-i-restrooms
  • icon-medical-i-restaurant
  • icon-medical-i-respiratory
  • icon-medical-i-registration
  • icon-medical-i-oncology
  • icon-medical-i-nutrition
  • icon-medical-i-nursery
  • icon-medical-i-no-smoking
  • icon-medical-i-neurology
  • icon-medical-i-mri-pet
  • icon-medical-i-interpreter-services
  • icon-medical-i-internal-medicine
  • icon-medical-i-intensive-care
  • icon-medical-i-inpatient
  • icon-medical-i-information-us
  • icon-medical-i-infectious-diseases
  • icon-medical-i-hearing-assistance
  • icon-medical-i-health-services
  • icon-medical-i-health-education
  • icon-medical-i-gift-shop
  • icon-medical-i-genetics
  • icon-medical-i-first-aid
  • icon-medical-i-dermatology
  • icon-medical-i-dental
  • icon-medical-i-coffee-shop
  • icon-medical-i-chapel
  • icon-medical-i-cath-lab
  • icon-medical-i-care-staff-area
  • icon-medical-i-accessibility
  • icon-medical-i-diabetes-education
  • icon-medical-i-hospital
  • icon-medical-i-kidney
  • icon-medical-i-ophthalmology
  • icon-medical-womens-health
  • icon-medical-waiting-area
  • icon-medical-volume-control
  • icon-medical-ultrasound
  • icon-medical-text-telephone
  • icon-medical-surgery
  • icon-medical-stairs
  • icon-medical-radiology
  • icon-medical-physical-therapy
  • icon-medical-pharmacy
  • icon-medical-pediatrics
  • icon-medical-pathology
  • icon-medical-outpatient
  • icon-medical-ophthalmology
  • icon-medical-mental-health
  • icon-medical-medical-records
  • icon-medical-medical-library
  • icon-medical-mammography
  • icon-medical-laboratory
  • icon-medical-labor-delivery
  • icon-medical-kidney
  • icon-medical-immunizations
  • icon-medical-imaging-root-category
  • icon-medical-imaging-alternative-pet
  • icon-medical-imaging-alternative-mri
  • icon-medical-imaging-alternative-mri-two
  • icon-medical-imaging-alternative-ct
  • icon-medical-hospital
  • icon-medical-fire-extinguisher
  • icon-medical-family-practice
  • icon-medical-emergency
  • icon-medical-elevators
  • icon-medical-ear-nose-throat
  • icon-medical-drinking-fountain
  • icon-medical-diabetes-education
  • icon-medical-cardiology
  • icon-medical-billing
  • icon-medical-anesthesia
  • icon-medical-ambulance
  • icon-medical-alternative-complementary
  • icon-medical-administration
  • icon-medical-accessibility
  • icon-medical-social-services
  • icon-medical-smoking
  • icon-medical-restrooms
  • icon-medical-restaurant
  • icon-medical-respiratory
  • icon-medical-oncology
  • icon-medical-nutrition
  • icon-medical-nursery
  • icon-medical-no-smoking
  • icon-medical-neurology
  • icon-medical-mri-pet
  • icon-medical-interpreter-services
  • icon-medical-internal-medicine
  • icon-medical-intensive-care
  • icon-medical-inpatient
  • icon-medical-information-us
  • icon-medical-infectious-diseases
  • icon-medical-hearing-assistance
  • icon-medical-health-services
  • icon-medical-health-education
  • icon-medical-gift-shop
  • icon-medical-genetics
  • icon-medical-first-aid
  • icon-medical-dental
  • icon-medical-coffee-shop
  • icon-medical-chapel
  • icon-medical-cath-lab
  • icon-medical-care-staff-area
  • icon-medical-registration
  • icon-medical-dermatology
  • icon-realestate-advert
  • icon-realestate-air-conditioning
  • icon-realestate-bag
  • icon-realestate-balance
  • icon-realestate-balcony
  • icon-realestate-barrow
  • icon-realestate-bathtub
  • icon-realestate-bed
  • icon-realestate-billboard
  • icon-realestate-box
  • icon-realestate-bricks
  • icon-realestate-bridge
  • icon-realestate-brush
  • icon-realestate-building-crane
  • icon-realestate-building
  • icon-realestate-building2
  • icon-realestate-building3
  • icon-realestate-bungalow
  • icon-realestate-buying-a-home
  • icon-realestate-calculator
  • icon-realestate-calendar
  • icon-realestate-chair
  • icon-realestate-chair2
  • icon-realestate-chandelier
  • icon-realestate-check
  • icon-realestate-china-house
  • icon-realestate-clip
  • icon-realestate-combination-lock
  • icon-realestate-compasses
  • icon-realestate-concrete-mixer
  • icon-realestate-construction-helmet
  • icon-realestate-court
  • icon-realestate-credit
  • icon-realestate-dialogue
  • icon-realestate-doc
  • icon-realestate-doc2
  • icon-realestate-doc3
  • icon-realestate-document
  • icon-realestate-door
  • icon-realestate-door2
  • icon-realestate-drill
  • icon-realestate-eco
  • icon-realestate-elevator
  • icon-realestate-exchange
  • icon-realestate-fence
  • icon-realestate-fireplace
  • icon-realestate-folder
  • icon-realestate-garage
  • icon-realestate-garage2
  • icon-realestate-glasses
  • icon-realestate-hacksaw
  • icon-realestate-hammer
  • icon-realestate-hangar
  • icon-realestate-heating
  • icon-realestate-high-voltage
  • icon-realestate-horn
  • icon-realestate-hotel
  • icon-realestate-hotel2
  • icon-realestate-house-key
  • icon-realestate-house
  • icon-realestate-house2
  • icon-realestate-house3
  • icon-realestate-house4
  • icon-realestate-house5
  • icon-realestate-house6
  • icon-realestate-house7
  • icon-realestate-house8
  • icon-realestate-house9
  • icon-realestate-imac
  • icon-realestate-incision-plan
  • icon-realestate-ipad
  • icon-realestate-key
  • icon-realestate-key2
  • icon-realestate-ladder
  • icon-realestate-lamp
  • icon-realestate-lawn-mower
  • icon-realestate-letter
  • icon-realestate-light-bulb
  • icon-realestate-light-bulb2
  • icon-realestate-lock
  • icon-realestate-lock2
  • icon-realestate-love
  • icon-realestate-mail
  • icon-realestate-map
  • icon-realestate-medicine-chest
  • icon-realestate-mixer
  • icon-realestate-money
  • icon-realestate-moneybox
  • icon-realestate-motorhome
  • icon-realestate-move
  • icon-realestate-move2
  • icon-realestate-music
  • icon-realestate-music2
  • icon-realestate-my-house
  • icon-realestate-my-key
  • icon-realestate-newspapers
  • icon-realestate-nightstand
  • icon-realestate-nippers
  • icon-realestate-notebook
  • icon-realestate-pan
  • icon-realestate-parking
  • icon-realestate-parquet
  • icon-realestate-phone
  • icon-realestate-phone2
  • icon-realestate-phone3
  • icon-realestate-pipe-wrench
  • icon-realestate-plan
  • icon-realestate-plan2
  • icon-realestate-plan3
  • icon-realestate-plant
  • icon-realestate-plant2
  • icon-realestate-point
  • icon-realestate-pointer
  • icon-realestate-printer
  • icon-realestate-purse
  • icon-realestate-purse2
  • icon-realestate-realtor
  • icon-realestate-regulator
  • icon-realestate-rent
  • icon-realestate-rent2
  • icon-realestate-restaurant
  • icon-realestate-roller
  • icon-realestate-roulette
  • icon-realestate-scale
  • icon-realestate-search
  • icon-realestate-secateurs
  • icon-realestate-shop
  • icon-realestate-shovel
  • icon-realestate-shower
  • icon-realestate-skyscrapers
  • icon-realestate-skyscrapers2
  • icon-realestate-socket
  • icon-realestate-spatula
  • icon-realestate-stamp
  • icon-realestate-statistic
  • icon-realestate-suitcase2
  • icon-realestate-swimming-pool
  • icon-realestate-switch
  • icon-realestate-tag
  • icon-realestate-tap
  • icon-realestate-things
  • icon-realestate-time
  • icon-realestate-tools
  • icon-realestate-trowel
  • icon-realestate-tv
  • icon-realestate-vacuum-cleaner
  • icon-realestate-ventilation
  • icon-realestate-washing-machine
  • icon-realestate-window
  • icon-realestate-wood

小部件設置(Widgets Setup)

Widgets 是非常簡單且容易設置,完全彈性且能夠用在頁面的任何地方。這裡是一些範例碼:

<div class="widget clearfix">
	<h4>Widget Title</h4>
	...
</div>

所包含的 Widget 列表:

  • Links
  • Flickr Photostream
  • Dribbble Shots
  • Instagram Feed
  • Posts List
  • Twitter Feed
  • Tabbed Widgets
  • Carousel
  • Subscribers
  • Social Icons
  • Testimonials
  • Quick Contact
  • Tags Cloud
  • Video Embeds
  • Raw Text/HTML

資訊: 大部分的 Widget 都很易於使用與理解,且能夠從側邊欄頁面去找到。不過有一些比較複雜下面有做出解說。

Flickr Widget

你能夠在網站上顯示你某個帳號或群組的圖片,只需寫一行程式碼。其中一些你必須為此 Widget 設置的重要屬性如下列:

  • data-id - 你 Username/Group 的 ID. 能夠由 這裡取得。 例如: 613394@N22
  • data-count - 你想要取得的圖片數量。 例如: 12
  • data-type - 你所提供 ID 所屬的類型。 例如: group/user

範例碼:

<div id="flickr-widget" class="flickr-feed masonry-thumbs" data-id="613394@N22" data-count="16" data-type="group" data-lightbox="gallery"></div>

Dribbble Widget

你能夠在網站的任何地方顯示你某個帳號的 Dribbble Shots,只需要寫一行程式碼。其中一些你必須為此 Widget 設置的重要屬性如下列:

  • data-user - 你所想要提供相片的帳號。你只有在你的data-typeuser/follows 的狀況下才需要提供帳號。例如: envato
  • data-count - 你想要取得的圖片數量。 例如: 12
  • data-type - 你想要取得的圖片類型。 例如: user/follows/list
  • data-list - 你想要取得的列表類型。你只有在你的 data-typelist 的時候才需要提供此屬性。 例如: popular/everyone/debuts

範例碼:

<div id="dribbble-widget" class="dribbble-shots masonry-thumbs" data-user="envato" data-count="16" data-type="user"></div>

Instagram Widget

你能夠在你網站的任何地方顯示你某個 Username/Tags Instagram Feed,只需要寫一行程式碼。其中一些你必須為此 Widget 設置的重要屬性如下列:

  • data-user - 你想要取得相片的 Instagram 帳號ID。你只有在你的data-typeuser 時才需要提供ID。 你可以從這裡找到你的帳號ID: http://www.otzberg.net/iguserid/。 例如: 269801886
  • data-count - 你想要取得多少張圖片。 例如: 12
  • data-type - 你想要取得的相片類型。 例如: user/tag/popular
  • data-tag - 你想要取得的圖片所屬之標籤。你只有在你的data-typetag的時候才需要提供此屬性。 例如: beautiful/nature/morning etc.
  • data-sortBy - 將你所取得的圖片根據這些參數來進行排序。 例如: none/most-recent/least-recent/most-liked/least-liked/most-commented/least-commented/random
  • data-resolution - 選擇你圖片的解析度。 例如: thumbnail/low_resolution/standard_resolution

範例碼:

<div id="instagram-photos" class="instagram-photos masonry-thumbs col-5" data-user="269801886" data-count="15" data-type="user"></div>

注意: 確保你永遠讓你的 Instagram Feed 擁有唯一的ID,否則它們將全部無法執行。

Twitter Widget

你能夠在你網站的任何地方顯示你某個帳號的 Twitter Feed。中一些你必須為此 Widget 設置的重要屬性如下列:

  • username - 你想要取得tweets的 Username。 例如: envato
  • count - 你想要取得多少個 Twwets。 例如: 3

範例碼:

<ul class="iconlist twitter-feed" data-username="envato" data-count="2">
	<li></li>
</ul>

Twitter Feed Avatars

你也能夠在 Twitter Feed 顯示 Twitter用戶頭像。 範例碼:

<ul class="iconlist twitter-feed twitter-feed-avatar" data-username="envato" data-count="2">
	<li></li>
</ul>

Twitter Feeds Scroller 範例碼:

<div class="fslider customjs testimonial twitter-scroll twitter-feed" data-username="envato" data-count="2" data-animation="slide" data-arrows="false">
	<i class="i-plain i-large color icon-twitter nobottommargin" style="margin-right: 20px;"></i>
	<div class="flexslider" style="width: auto;">
		<div class="slider-wrap">
			<div class="slide"></div>
		</div>
	</div>
</div>


Twitter oAuth 驗證設定

新的 Twitter API v1.1不再支援未驗證用戶的 Timeline 呼叫。所以你將必須透過 OAuth去驗證才能夠在網頁上顯示你的Twitter Feeds。根據下面的步驟來設定你的驗證:

  1. 拜訪 https://dev.twitter.com/apps/ 並使用你的Twitter帳密來進行登入。這並不需要是你想要取得 Stream 的帳密,只要是你擁有的Twitter帳號即可。
  2. 選擇 Create new application 接著輸入應用程式的細節資料。
    1. 名稱和描述可以根據你的喜好來輸入,但你不能在名字裡頭使用到 'Twitter' 這個字。
    2. 網址欄可以是你的主網頁而非必須是你放置 Twitter feed或其所在頁面。
    3. 回呼網址(Callback URL)可以留白
  3. 輸入 CAPTCHA 資訊後按下 create
  4. 在下一個詳細頁面,按下 Create my access token。你或許需要重載頁面如果幾秒後頁面沒有自動出現的話。
  5. 記下 Consumer key, Consumer secret, Access token 和 Access token secret 如下面所標示

Twitter Feed OAuth Authentication

當你成功建立你的 Twitter APP之後按照以下步驟:

  1. 開啟 include/twitter/tweets.php 檔案。
  2. 輸入你的 Twitter 詳細資訊如下描述:
    $consumerkey = ""; // Twitter App - Consumer Key for OAuth
    $consumersecret = ""; // Twitter App - Consumer Secret for OAuth
    $accesstoken = ""; // Twitter App - Access Token for OAuth
    $accesstokensecret = ""; // Twitter App - Access Token Secret for OAuth
    然後 儲存 此檔案。

注意 記得設定 include/twitter/cache 資料夾的 permissions755。這樣 Twitter Feed 快取檔案才能被儲存,否則你的 Twitter Feeds 將無法運作。

聯絡表單與 Mailchmip 訂閱(Contact Forms & Mailchimp Subscriptions)

你能夠在你網站的任何地方設置聯絡表單與 Mailchimp 訂閱,只需要複製貼上範例碼在HTML檔案內。

選項:
  • data-alert-type - 當表單提交後所希望的提示類型。 例如: inline/notify
  • data-loader - 當提交按鈕被按下時處理提示的類型。 例如: button/form

聯絡表單

只需要改變你的 Email Address 在 include/sendemail.phpinclude/quickcontact.php 檔案來開始取得表單回應。

$toemails[] = array(
	'email' => 'username@website.com', // Your Email Address
	'name' => 'Your Name' // Your Name
);

如何設定多個 Email Address?
對於每一個你希望能收到表單回應的新 Email Address 只需要複製上面程式碼到新的一行。

reCaptcha 設定

要設定 reCaptcha 表單保護,你將需要從Google reCaptcha Website取得一組 Site/Secret 金鑰。下方步驟將引導你設置表單的金鑰:

  1. 加入以下程式碼到你的表單並且設定 Site Key:
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    <div class="g-recaptcha" data-sitekey="your-recaptcha-site-key-here"></div>

  2. 找到以下程式碼,位在 include/sendemail.phpinclude/quickcontact.php 檔案,加入你的 Secret Key:
    // Add this only if you use reCaptcha with your Contact Forms
    $recaptcha_secret = 'your-recaptcha-secret-key-here'; // Your reCaptcha Secret

注意: 確保取消以下程式碼的註解,位於 include/sendemail.php 檔案,假如你想要強制 reCaptcha 驗證的話:

// Uncomment the following Lines of Code if you want to Force reCaptcha Validation

// if( !isset( $_POST['g-recaptcha-response'] ) ) {
// 	echo '{ "alert": "error", "message": "Captcha not Submitted! Please Try Again." }';
// 	die;
// }


沒有收到表單郵件?

假如你沒有從你的表單收到郵件的話就代表你的伺服器設定並不支援 PHP mail() 函式。但你能使用 SMTP驗證,只要找到以下程式碼:

$mail = new PHPMailer();

在上面這一行後面加入以下程式碼:

$mail->IsSMTP();
$mail->Host = "mail.yourdomain.com";
$mail->SMTPDebug = 0;
$mail->SMTPAuth = true;
$mail->Port = 26;
$mail->Username = "yourname@yourdomain.com";
$mail->Password = "yourpassword";

加入自定義欄位到聯絡單

編輯 include/sendemail.php 檔案來加入自定義欄位。將有三個步驟需要設定:

  1. 找到下列程式碼並複製它來加入新的欄位:
    $name = isset( $_POST['template-contactform-name'] ) ? $_POST['template-contactform-name'] : '';
    範例:
    $newfield = isset( $_POST['template-contactform-newfield'] ) ? $_POST['template-contactform-newfield'] : '';
    確保 template-contactform-newfield 這個內容替換成與新表單輸入項的 name 屬性相同。
  2. 現在,找到以下程式碼,它就在幾行之後。現在複製它來加入新的欄位:
    $name = isset($name) ? "Name: $name<br /><br />" : '';
    範例:
    $newfield = isset($newfield) ? "New Field: $newfield<br /><br />" : '';
  3. 現在你只需要加入新的欄位到以下程式碼:
    $body = "$name $email $phone $service $message $referrer";
    範例:
    $body = "$name $email $phone $newfield $service $message $referrer";

自訂表單的警告訊息格式

你絕對可以顯示你的自定義提示不論是成功或錯誤訊息。訊息是以JSON格式被加在PHP內所以他們可以正常的在jQuery被轉換,並且顯示適合的警告類型在螢幕上。使用以下格式:

echo '{ "alert": "success", "message": "This is a Success Message" }';
對於錯誤訊息使用這個:
echo '{ "alert": "error", "message": "This is an Error Message" }';

MailChimp 訂閱設置

要設定你的 Mailchimp 新聞信註冊表單,你將需要加入你的 API Key 和 你的 List IDinclude/subscribe.php 檔案內。

$apiKey = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-us5'; // Your MailChimp API Key
$listId = 'xxxxxxxx'; // Your MailChimp List ID

要加入一個訂閱者到不同的 List ID, 你只需要在以下程式碼替換表單Action:

<form action="include/subscribe.php?list=your-list-id" ...

Google 自定義搜尋設定

要設定你的Google自定義搜尋,你將需要加入你的 cx 金鑰到 search.html 檔案。 登入到 Google Custom Search 去取得你的搜尋引擎 cx 金鑰。 在取得你的 cx 金鑰後, 開啟 search.html 然後變更以下 cx 值:

var cx = '006140480002229796823:xbltpcavzi0';

Version 4.5.1

Released on 26th July, 2017

Fixed:

  • Issue with Revolution Slider Templates
  • Issue with data-scrollto Functionality

Changed Files:

  • JS
    • js/functions.js
      • Code Updated linkScroll: function() Function Block
      • Code Updated goToTopScroll: function() Function Block
  • HTML
    • Code Updated Revolution Slider Markup updated in the following files for compatibility with Latest Version:
      • index-corporate.html
      • index-restaurant.html
      • index-shop.html
      • op-revolution-fullscreen.html
      • op-revolution-fullwidth.html
      • slider-revolution-fullwidth.html
      • slider-revolution-html5-videos.html
      • slider-revolution-kenburns.html
      • slider-revolution.html

Version 4.5

Released on 24th July, 2017

Added:

  • Music Niche Demo
  • Car Niche Demo
  • Barber Niche Demo
  • Pets Niche Demo
  • eCommerce Niche Demo
  • Business Niche Demo
  • Resume Niche Demo
  • 5+ Premium Revolution Slider Templates
  • Menu on Click Functionality
  • Portfolio Full now supports Responsive Column Defining using data-col-** Attribute

Updated:

  • Revolution Slider Plugin to Latest Version
  • Revolution Slider Visual Editor to Latest Version
  • PHPMailer to Latest Version

Fixed:

  • LESS/SASS Files and added missing styling
  • Side Navigation Template. .custom-js class to .customjs
  • Windows Menu Trigger CSS
  • .easypiechart class changed to .rounded-skill class in CSS/LESS/SASS files
  • Issue with .customjs on Tabs Functionality

Changed Files:

  • CSS
    • css/responsive.css
      • Code Updated .windows-mobile-menu CSS Block
    • style-rtl.css
      • Code Updated .easypiechart class changed to .rounded-skill class
    • css/dark.css
      • Code Updated .easypiechart class changed to .rounded-skill class
  • LESS
    • less/dark.less
      • Code Updated .easypiechart class changed to .rounded-skill class
    • less/shortcodes/counter-skills.less
      • Code Updated .easypiechart class changed to .rounded-skill class
  • SASS
    • sass/dark.scss
      • Code Updated .easypiechart class changed to .rounded-skill class
    • sass/shortcodes/counter-skills.sass
      • Code Updated .easypiechart class changed to .rounded-skill class
  • JS
    • js/functions.js
      • Code Updated defineColumns: function() Function Block
      • Code Updated linkScroll: function() Function Block
      • Code Updated menuFunctions: function() Function Block
      • Code Updated pageTransitions: function() Function Block
      • Code Updated tabsJustify: function() Function Block
      • Code Updated tabsResponsive: function() Function Block
      • Code Updated tabsResponsiveResize: function() Function Block
  • HTML
    • demo-ecommerce.html
      • Added eCommerce Website Niche Demo
    • demo-music.html
      • Added Music Player Niche Demo
    • demo-car.html
      • Added Cars Showcase Niche Demo
    • demo-barber.html
      • Added Barber Shop Niche Demo
    • demo-business.html
      • Added Business Niche Demo
    • demo-resume.html
      • Added Resume/CV Niche Demo
    • demo-pet.html
      • Added Pets Niche Demo
    • rs-demo-*.html
      • Added New Revolution Slider Templates
    • side-navigation.html
      • Code Update Side Navigaion Tabs Updated. .custom-js class to .customjs
  • include/rs-plugin
    Folder Updated

Version 4.4

Released on 14th April, 2017

Added:

  • Restaurant Niche Demo
  • Photography Niche Demo
  • Interior Design Studio Niche Demo
  • Writer Niche Demo
  • 15 New Revolution Slider Templates
  • 50+ Chart Example Templates

Updated:

  • Revolution Slider Plugin to Latest Version
  • Revolution Slider Visual Editor Plugin to Latest Version
  • ChartJS Plugin to Latest Version

Changed:

  • ChartJS Plugin Codes removed from js/plugins.js File and Standalone File used on Chart related Templates.

Fixed:

  • Issue with Revolution Slider Video Layer Setting data-videoloop="none" affecting Delays in the Subsequent Slides

Changed Files:

  • JS
    • js/plugins.js
      • Deleted ChartJS Plugin Codes
    • js/charts.js
      • Added ChartJS Plugin Codes
  • HTML
    • All rs-demo-*.html Files
      • Code Update All Revolution Slider Demo Files
    • demo-restaurant.html
      • Added Restaurant Niche Demo
    • demo-interior-design.html
      • Added Interior Design Niche Demo
    • demo-photography.html
      • Added Photography Niche Demo
    • demo-writer.html
      • Added Writer Niche Demo
    • charts-*.html Files
      • Added New Chart Example Templates
    • index-corporate.html
      • Code Update Fixed Issue with 2nd Slide Delay in Revolution Slider
    • services.html
      • Code Update Updated to New Charts
    • sections.html
      • Code Update Updated to New Charts
    • one-page/op-chart.html
      • Code Update Updated to New Charts

Version 4.3

Released on 10th February, 2017

Added:

  • Real Estate Niche Demo with 3 Hero Layouts
  • Sticky Sidebar
  • Pricing Toggle Switch in Pricing Template

Updated:

  • PHPMailer to Latest Version
  • Youtube BG Plugin to Latest Version
  • Countdown Plugin to Latest Version
  • Isotope Plugin to Latest Version
  • Swiper Plugin to Latest Version
  • Documentation

Fixed:

  • Issue with Side Tabs in RTL Layout
  • Issue with Bootstrap Focus Color on Anchor Links
  • Issue with Large Navigation Bullets
  • Issue with PHPMailer Vulnerabilities
  • Issue with Helper Classes missing in LESS and SASS
  • Issue with reCaptcha Validation Implementation

Changed Files:

  • CSS
    • style-rtl.css
      • Code Update .side-tabs related CSS Blocks
    • css/bootstrap.css
      • Code Update Updated File
  • JS
    • js/functions.js
      • Added stickySidebar: function() Function Block
      • Added SEMICOLON.widget.stickySidebar(); Function inside SEMICOLON.widget > init: function() Function Block
    • js/plugins.js
      • Added stickySidebar: function() Function Block
  • PHP
    • include/phpmailer
      • Updated all the Files
    • Code Update Updated All the PHP Form Processing with reCatpcha Codes
  • SASS
    • sass/helpers.scss
      • Added missing Helper Classes
  • LESS
    • sass/helpers.less
      • Added missing Helper Classes
  • HTML
    • demo-real-estate.html
      • Added Real Estate Hero Layout 1
    • demo-real-estate-2.html
      • Added Real Estate Hero Layout 2
    • demo-real-estate-3.html
      • Added Real Estate Hero Layout 3
    • sticky-sidebar.html
      • Added Sticky Sidebar Template
    • pricing.html
      • Added Pricing Toggle Switch
    • slider-revolution-html5-videos.html
      • Code Update Fixed Issue with Large Bullets

Version 4.2

Released on 1st December, 2016

Added:

  • 11 Inner Pages for Construction Niche Demo
  • 8 Inner Pages for Medical Niche Demo
  • New Premium Templates for Revolution Slider
  • Option to Disable Placeholder for HTML5 Videos on Mobile Devices
  • SASS Files for Responsive and Dark CSS

Updated:

  • Bootstrap to Latest Version
  • Revolution Slider to Latest Version
  • Superfish Plugin to Latest Version
  • Youtube BG Video Plugin to Latest Version
  • Text Rotator Plugin to Latest Version
  • ImagesLoaded Plugin to Latest Version
  • Swiper Slider Plugin to Latest Version
  • Toastr Notification Plugin to Latest Version
  • Flex Slider Plugin to Latest Version
  • DatePicker Plugin to Latest Version
  • Vector Maps to Latest Version
  • Documentation

Removed:

  • css3-mediaqueries.js Script Linking from all the HTML Files for Less than IE9

Fixed:

  • Issue with Subscription Form Markup Code in the demo-xmas.html File
  • Issue with Team Members List Carousel Markup Code in the team.html File
  • Issue with Video Sound Event not working properly for index-video-sound-event.html File
  • Issue with Product Overlay overflowing on some Devices
  • Issue with Responsiveness Component: Select Boxes
  • Issue with Magnific Popup AJAX Functionality when Closing the Lightbox results in causing issues with the Last Focused Element
  • Issue with .primary-menu-open Toggle Class incorrectly configured in One Page Scroll Functionality
  • Issue with inconsistencies with Common Height Functionality
  • Issue with Custom Buttons in Top Cart Content
  • Issue with Top Account Links in Dark Scheme
  • Issue with Custom Carousel Linking Functionality
  • Issue with Swiper Slider Dimensions Update JS Conflict
  • Issue with Blog Timeline Ordering Display in Full Width

Changed Files:

  • CSS
    • style.css
      • Code Update Added overflow: hidden; CSS Property to .product-overlay CSS Block
      • Code Update Updated #top-cart a to #top-cart > a
      • Removed .entry.entry-date-section + .entry .entry-timeline { top: 70px; } CSS Block
      • Code Update Updated .video-placeholder CSS Block
      • Code Update Updated .toastr-* related CSS Block
    • css/bootstrap.css
      • Code Update Latest Version
    • css/dark.css
      • Added Added .dark #header-wrap:not(.not-dark) #top-account a and .dark #header-wrap:not(.not-dark) #top-account a:hover CSS Blocks
    • All the colors.css and colors.php Files:
      • Code Update Updated #top-cart a to #top-cart > a
    • demos/travel/css/datepicker.css
      • Code Update Updated DatePicker Plugin
    • css/vmap.css
      • Code Update Updated vMap Plugin
  • JS
    • js/functions.js
      • Code Update Updated lightbox: function() Function Block and added autoFocusLast: false Setting to the $lightboxAjaxEl.magnificPopup Function Block
      • Code Update Updated onePageScroll: function() Function Block
      • Code Update Updated commonHeight: function( element ) Function Block
      • Code Update Updated html5Video: function() Function Block
      • Code Update Updated sliderParallaxDimensions: function() Function Block
      • Code Update Updated blogTimelineEntries: function() Function Block
      • Code Update Updated sidePanel: function() Function Block
    • js/plugins.js
      • Code Update Updated Superfish Plugin
      • Code Update Updated Youtube BG Plugin
      • Code Update Updated Text Rotator Plugin
      • Code Update Updated ImagesLoaded Plugin
      • Code Update Updated Swiper Slider Plugin
      • Code Update Updated Toastr Notifications Plugin
      • Code Update Updated Flex Slider Plugin
      • Code Update Updated Bootstrap
    • demos/travel/js/datepicker.js
      • Code Update Updated DatePicker Plugin
    • js/jquery.vmap.js
      • Code Update Updated vMap Plugin including all the Files in the js/vmap Folder
  • SASS
    • sass/mixins.scss
      • Code Update Updated @mixin translate3d($val,$val2,$val3) Code Block
    • sass/dark.scss
      • Added New File
    • sass/responsive.scss
      • Added New File
  • HTML
    • All HTML Files
      • Removed css3-mediaqueries.js Script Linking from the Document <head>
    • All HTML Files
      • Code Update Google API URL updated with the ?key=YOUR_API_KEY Query
    • demos/construction
      • Added New Templates for Inner Pages
    • demos/medical
      • Added New Templates for Inner Pages
    • rs-demo-*.html
      • Added New Premium Templates for Revolution Slider
    • demo-xmas.html
      • Code Update Subscription Form Markup Code updated
    • team.html
      • Code Update Team Members List Carousel Markup Code updated
    • index-video-sound-event.html
      • Code Update Added JS Codes for making the Video Sound Event Functional
    • component-select-box.html
      • Code Update Added style="width:100%;" Attribute to the <select> Tags
    • shop-single-custom-linking-carousel.html
      • Code Update Fixed issue with Carousel Linking Functionality

Version 4.1.1

Released on 1st August, 2016

Added:

  • SASS Files

Updated:

  • Visual Editor Addon for Revolution Slider to Latest Version

Fixed:

  • Issue with Undefined Redirect in Quick Contact Forms
  • Issue with Undefined Redirect in Subscription Forms
  • Issue with Pages with Side Panels not scrolling on Android Devices

Changed Files:

  • jQuery
    • js/functions.js
      • Code Update quickContact: function() Function Block
      • Code Update subscription: function() Function Block
      • Code Update sidePanel: function() Function Block

Version 4.1

Released on 26th June, 2016

Added:

  • New Demo for App Landing
  • New Demo for Cafe
  • New Demo for Spa
  • 10+ New Revolution Slider Templates
  • Added Visual Editor Add-On for the Revolution Slider for Building Complex Sliders easily
  • Added Off Canvas Mobile Menu Layout
  • Split Menu Header Layout
  • Profile Page Template
  • Boxed Layout for Index Page
  • Option to Redirect AJAX Forms on Successful Submission
  • Option to Close the Custom Style Boxes
  • Combination Filter Functionality Example for Shop Template
  • New Button Styles
  • New Portfolio Filter Styles
  • Option to convert Tabs into Accordion on Responsive Devices
  • Support for Static Sticky Menu on Mobile Devices
  • Gallery Compatibility between Magnific Lightbox and Owl Carousel
  • Option to Choose Default Filter for the Isotope Filter Functionality
  • Ability to Play Multiple Youtube BG Videos on the Canvas Swiper Slider
  • Option for Reverse Animation in Flex Slider
  • Option for Stagger Animation in Grid Container Functionality

Changed:

  • Increased Font Size for the Custom Style Boxes for Better Design Flow UI/UX

Updated:

  • Incorrect Documentation URL for Swiper Slider API
  • Incorrect Documentation in Campaign Monitor Subscription File
  • jQuery Updated to v1.12.4
  • IsoTope Plugin Updated to Latest Version
  • Revolution Slider Plugin Updated to Latest Version

Fixed:

  • Issue with Data Table Component Template duplicate CSS Loading in Header and Footer
  • Issue with Page Transition Primary Menu Links with the Latest jQuery
  • Issue with Incorrect Form Action File Location in Contact Form reCaptcha Templates
  • Issue with the Side Cover Wrapper Slider on Media Agency Niche Demo on some Browsers
  • Issue with Addition of Email/Call/SMS Links in Primary Menu
  • Issue with Header Scheme Changer on Canvas Swiper Slider while Header is Sticky
  • Issue with Isotope Grid in RTL Layouts
  • Issue with Carousel Navigation Colors when Color Scheme is changed
  • Issue with Dots Menu Caption BG when Color Scheme is changed
  • Issue with Slider Parallax Dimension in Responsive Devices
  • Issue with Contact Form File Uploads not going through the Server
  • Issue with JSON Message Encoding in include/jobs.php File
  • Issue with Slider Parallax on iPad Landscape Orientation
  • Issue with Youtube BG Video playing even when Video Autoplay Turned off for Canvas Slider
  • Issue with Incorrect Message Transmitting for AutoResponders in include/sendemail-autoresponder.php File
  • Issue with Incorrect Autoresponder Name/Email
  • Issue with Page Sub Menu/Dots Menu Issue with Primary Menu when using One Page Functionality
  • Issue with Video Alignment in Page Title Video Template
  • Issue with Top Bar Links uneven Horizontal Alignment when Menu Items have Icons
  • Issue with Primary Menu's Sub Menu Items Icon Alignment
  • Issue with Left Padding in Mega Menu Columns
  • Issue with Portfolio Overlay in Individual Portfolio Items
  • Issue with Page Menu Items Floats in RTL on Responsive Devices
  • Issue with Star Rating in RTL Mode

Changed Files:

  • CSS
    • style.css
      • Code Update .style-msg Related Codes
      • Added .style-msg .close Code Block
      • Added .portfolio-filter Related Code Block
      • Added .button Related Code Block
      • Added .device-touch .slider-parallax .slider-parallax-inner { position: relative; } Code Block
      • Code Update #page-title.page-title-video .video-wrap Code Block
      • Code Update .top-links li i Code Block
      • Added #primary-menu.mobile-menu-off-canvas Code Block
      • Added .iportfolio .portfolio-overlay Code Block
      • Added #primary-menu ul ul li > a i { vertical-align: middle; } Code Block
      • Added #header.split-menu Related Code Blocks
      • Added .grid-container Related Code Blocks
      • Code Update .button i Code Block
    • css/responsive.css
      • Added .portfolio-filter Related Code Block
      • Added .tabs-responsive Related Code Block
      • Code Update .responsive-sticky-header Related CSS Blocks
      • Added #primary-menu.mobile-menu-off-canvas Code Block
      • Added #primary-menu ul li.mega-menu { position: relative; } Code Block
      • Added padding-left: 15px #primary-menu ul li .mega-menu-content ul.mega-menu-column CSS Block
      • Added #header.split-menu Related Code Blocks
      • Added #header.split-menu #logo Related Code Blocks
    • css/colors.css
      • Code Update .owl-carousel .owl-nav Related Code Blocks
      • Code Update #page-menu.dots-menu nav li div Related Code Blocks
    • css/font.css
      • Code Update CSS Styles Updated
    • css/bs-rating.css
      • Added .rtl Related Code Blocks
  • jQuery
    • js/functions.js
      • Code Update pageTransition: function() Function Block
      • Code Update contactForm: function() Function Block
      • Code Update subscription: function() Function Block
      • Code Update quickContact: function() Function Block
      • Code Update gridInit: function( $container ) Function Block
      • Code Update filterInit: function() Function Block
      • Code Update extras: function() Function Block
      • Code Update sliderParallaxDimensions: function() Function Block
      • Code Update sliderParallaxDimensions: function() Function Block
      • Added tabsResponsive: function() Function Block
      • Added tabsResponsiveResize: function() Function Block
      • Added SEMICOLON.widget.tabsResponsive(); Function Block to SEMICOLON.widget > init: function()
      • Added SEMICOLON.widget.tabsResponsiveResize(); Function Block to SEMICOLON.widget > init: function()
      • Added SEMICOLON.widget.tabsResponsiveResize(); Function Block to SEMICOLON.documentOnResize > init: function()
      • Code Update sliderRun: function() Function Block
      • Code Update youtubeBgVideo: function() Function Block
      • Removed $youtubeBgPlayerEl = $('.yt-bg-player'), from Global Variable List
      • Added $youtubeBgPlayerEl = $('.yt-bg-player'); to youtubeBgVideo: function() Function Block
      • Code Update lightbox: function() Function Block
      • Code Update onePageScroll: function() Function Block
      • Code Update topsearch: function() Function Block
      • Code Update loadFlexSlider: function() Function Block
      • Code Update headerSchemeChanger: function( activeSlide, onWinLoad ) Function Block
      • Code Update gridInit: function( $container ) Function Block
  • PHP
    • css/colors.php
      • Code Update .owl-carousel .owl-nav Related Code Blocks
      • Code Update #page-menu.dots-menu nav li div Related Code Blocks
    • include/subscribe-cm.php
      • Code Update API Key and List ID Documentation
    • include/jobs.php
      • Code Update Issue with JSON encoding of the Result Messages
    • include/sendemail-autoresponder.php
      • Code Update Incorrect Message Transmitting for AutoResponders: $autoresponder->MsgHTML
      • Code Update Incorrect Autoresponder Name/Email
  • HTML
    • component-datatable.html
      • Code Update Fixed Duplicate CSS Loading in Header and Footer
    • index-wedding.html
      • Code Update Countdown Date Updated
    • demo-media-agency.html
      • Code Update .side-cover-wrapper Updated
    • style-boxes.html
      • Code Update Closeable Native Style Boxes Example added
    • index-boxed.html
      • Added New Template
    • split-menu.html
      • Added New Template
    • shop-combination-filter.html
      • Added New Template
    • profile.html
      • Added New Template
    • portfolio-filter-styles.html
      • Added New Template
    • jobs-file.html
      • Code Update Form Action File Location
      • Added enctype="multipart/form-data" to <form> Tags
    • tabs.html
      • Added Responsive Tabs Example
    • contact-2-recaptcha.html
      • Code Update Form Action File Location
    • contact-3-recaptcha.html
      • Code Update Form Action File Location
    • contact-4-recaptcha.html
      • Code Update Form Action File Location
    • contact-5-recaptcha.html
      • Code Update Form Action File Location
    • contact-6-recaptcha.html
      • Code Update Form Action File Location
    • contact-7-recaptcha.html
      • Code Update Form Action File Location
    • contact-file.html
      • Added enctype="multipart/form-data" to <form> Tags
    • contact-2-file.html
      • Added enctype="multipart/form-data" to <form> Tags
    • contact-3-file.html
      • Added enctype="multipart/form-data" to <form> Tags
    • contact-4-file.html
      • Added enctype="multipart/form-data" to <form> Tags
    • contact-5-file.html
      • Added enctype="multipart/form-data" to <form> Tags
    • contact-6-file.html
      • Added enctype="multipart/form-data" to <form> Tags
    • contact-7-file.html
      • Added enctype="multipart/form-data" to <form> Tags
    • rs-demo-hero-web-product-light.html
      • Code Update Fixed Issue with Revolution Slider Parallax Smoothness
    • rs-demo-hero-web-product-dark.html
      • Code Update Fixed Issue with Revolution Slider Parallax Smoothness
  • Plugin Updates
    • include/rs-plugin
      • Code Updates All the Files and Folders updated to the Latest Version

Version 4.0.1

Released on 19th March, 2016

Fixed:

  • Issue with Masonry Thumbs not aligning properly on Full Width Grids
  • Issue with Owl Sliders not displaying on Slider Areas
  • Issue with Page Sub Menu inside Content Area not getting Sticky properly
  • Issue with Side Panel Push Open Issue with .slider-parallax-inner
  • Issue with One Page Menu Scrolling on Mobile Devices
  • Issue with Sub Menu Background Hover on Mobile Devices

Changed Files:

  • CSS
    • style.css
      • Code Update #side-panel related Code Blocks
      • Code Update #page-menu.sticky-page-menu related Code Blocks
    • one-page/onepage.css
      • Code Update #side-panel related Code Blocks
    • css/responsive.css
      • Code Update #primary-menu ul ul li:hover > a Code Block
  • jQuery
    • js/functions.js
      • Code Update setFullColumnWidth: function( element ) Function Block
      • Code Update onePageScroll: function() Function Block
      • Code Update sliderParallaxDimensions: function() Function Block
      • Code Update carousel: function() Function Block

Version 4.0

Released on 1st March, 2016

Note: We have made Lot of CSS/HTML/JS Changes and Rebuilt some of the Components from scratch for Unmatchable Flexibility & Speed Improvements. Please refer to Documentation > Start > Upgrading from v3 to v4 Section for Complete List of Changes. For small code changes, it is recommended that you use a File Compare Software.

Added:

  • Ability to Add Selected Widgets in Mega Menus
  • Ability to add Mixed Column Mega Menus
  • Ability to Add Unlimited Portfolios on a Single Page with Filters
  • Ability to Add Unlimited Shops on a Single Page
  • Global Function for Activating Isotope & Filter on any Grid
  • Speed Improvements, Javascript Optimizations & Less File Sizes
  • 2 Custom Inner Pages for the Travel Demo
  • Shortcode for Date & Time Pickers
  • Shortcode for Bootstrap Editable Fields
  • Shortcode for Bootstrap File Uploads
  • Shortcode for Range Sliders
  • Shortcode for Star Ratings
  • Shortcode for Select Picker & Select Boxes
  • Shortcode for Styled Toggle Switcher, Radio and Checkboxes
  • Bootstrap TypeAhead Component
  • Data Tables Component
  • 20+ Contact Form Templates with Google reCaptcha, File Uploads & Inline Submission Alerts
  • Option to Display a Alternate Menu in Mobile Devices
  • Facebook Video & HTML5 Video Embed Examples
  • Option to Add Multiple Email Address for Form Emails
  • Global Function for Owl Carousel for Easy Carousel Initialization
  • Global Function for Canvas Slider for Easy Slider Initialization
  • Global Function for Contact Forms
  • Global Function for Quick Contact Forms
  • Global Function for Subscription Forms
  • Contact, Quick Contact and Subscription Forms now show Message Specific Alerts
  • Added New Placeholder Images in Package for Better Development
  • GoToTop New Options for Easily Modifying Settings
  • Option to Enable/Disable GoToTop on Mobile Devices
  • Option to Show Avatars in Twitter Feeds
  • Boxed Layout Template in the Package
  • XXL Size for Styled Icons
  • Option to Show Arrows in Main Level Primary Menu for Dropdowns
  • Option to enable Element Animate Out

Updated:

  • Bootstrap Updated to v3.3.6
  • Swiper Slider Plugin Updated to Latest Version
  • Revolution Slider Updated to Latest Version
  • Owl Carousel Plugin Updated to Latest Version
  • Magnific Popup Plugin Updated to Latest Version
  • jQuery Validation Plugin Updated to Latest Version
  • jQuery UI Updated to Latest Version
  • Toastr Plugin Updated to Latest Version
  • Morphext Plugin Updated to Latest Version
  • MB YTPlayer Plugin Updated to Latest Version
  • Instafeed Plugin Updated to Latest Version
  • Jribbble Plugin Updated to Latest Version
  • Flex Slider Plugin Updated to Latest Version
  • Mailchimp API Updated to v3.0
  • Dribbble Widget Function

Fixed:

  • Issue with Slider Parallax on Canvas Slider on Mac OS
  • Issue with Sticky Menu & Sticky PageMenu on Page Reload on the Middle of the Page
  • Issue with Background Position of Parallax Images on Mobile Devices
  • Issue with Youtube BG Video not working in Canvas Slider
  • Issue with Backward/Forward Cache on Safari Browsers
  • Issue with Dribbble Widget not working
  • Issue with .mpost on Smart Phone Devices
  • Issue with Post Grid Row Alignment on Responsive Devices
  • Issue with Multi Line Toggle and Accordion Titles
  • Issue with Video Placeholder Image on Mobile Devices for Canvas Slider
  • Issue with Side Panel disabling Body Scroll on Android Devices
  • Issue with Scroll To Highlighting Function
  • Issue with Google Maps with Transparent Headers on Mobile Devices
  • Issue with Windows Mobile Menu Trigger Icon visibility on Mobile Devices
  • Issue with Auto Height on Flex Slider Fade Effect
  • Issue with Side Navigation Arrow alignment
  • Issue with Notifications Trigger & Visibility
  • Issue with Page Menu Sticky on Mobile Devices
  • Issue with Copyrights Positioning
  • Issue with Nav Tree Current Item Child Links

Changed Files:

  • CSS
    • style.css
      • Code Update .slider-parallax CSS Block
      • Code Update #primary-menu CSS Block
      • Code Update .sticky-header CSS Block
      • Code Update #portfolio CSS Block updated and renamed to .portfolio
      • Code Update #shop CSS Block updated and renamed to .shop
      • Added .i-xxlarge Code Block
      • Code Update .nav-tree li.current > ul CSS Block
      • Code Update #copyrights CSS Block
      • Code Update .toggle CSS Block
      • Added .twitter-feed-avatar CSS Block
      • Added .widget p CSS Block
      • Added .mobile-primary-menu CSS Block
      • Code Update .mobile-parallax CSS Block
    • css/responsive.css
      • Code Update Updated All the Codes
    • css/bootstrap.css
      • Code Update Updated to the Latest Version
    • css/dark.css
      • Code Update Updated All the Codes
    • css/colors.css
      • Code Update Updated All the Codes
  • jQuery
    • js/functions.js
      • Code Update Updated all the Codes for more Robustness
    • js/plugins.js
      • Code Update Bootstrap to Latest Version
      • Code Update Swiper Slider Plugin to Latest Version
      • Code Update Owl Carousel Plugin to Latest Version
      • Code Update Magnific Popup Plugin to Latest Version
      • Code Update jQuery Validation Plugin to Latest Version
      • Code Update jQuery UI Plugin to Latest Version
      • Code Update Toastr Plugin to Latest Version
      • Code Update Morphext Plugin to Latest Version
      • Code Update Instafeed Plugin to Latest Version
      • Code Update Jribbble Plugin to Latest Version
      • Code Update Flex Slider Plugin to Latest Version
  • HTML
    • Code Update Updated All the HTML Files
  • PHP
    • Code Update Updated All the PHP Form Processing and Subscription Files
  • LESS
    • Code Update Updated All the LESS Files

Version 3.1.1

Released on 12th December, 2015

Added:

  • XMAS Demo

Fixed:

  • Issue with Revolution Slider on Home Shop Template
  • Issue with Revolution Slider on One Page Templates with Revolution Slider
  • Issue with Slider Text and Mobile Image on Home App Showcase Template
  • Issue with Duplicate <head> Tag and Thumbnails Filter on Revolution Slider Templates
  • Issue with Incorrect CSS Files Linking in menu-5.html Template
  • Issue with FlexSlider Thumbs Auto-Size
  • Issue with .i-overlay Icon Placement
  • Issue with One Page Menu with Side Headers

Changed Files:

  • CSS
    • style.css
      • Code Update .flex-control-nav.flex-control-thumbs li, .flex-control-nav.flex-control-thumbs li img Code Block
      • Code Update .i-overlay i Code Block
    • css/responsive.css
      • Removed .full-screen:not(.force-full-screen) .container.vertical-middle Code Block from @media (max-width: 991px) Media Query Breakpoint
    • css/colors.css
      • Code Update #page-menu ul ul Added to background-color
    • css/colors.php
      • Code Update #page-menu ul ul Added to background-color
  • LESS
    • less/sliders.less
      • Code Update Following Code Block:

        .fslider {
        	&.flex-thumb-grid {
        		.flex-control-nav {
        			&.flex-control-thumbs
    • less/shortcodes/styled-icons.less
      • Code Update .i-overlay > i Code Block
    • less/responsive.less
      • Removed Following Code Block:

        .full-screen {
        	&:not(.force-full-screen) {
        		.container {
        			&.vertical-middle {
        				width: 750px !important;
        			}
        		}
        	}
        }
  • jQuery
    • js/functions.js
      • Code Update onePageCurrentSection: function() Function Block
      • Code Update SEMICOLON.documentOnReady > windowscroll: function() Function Block updated with pageMenuOffset Related Codes
  • HTML
    • demo-xmas.html
      • Added XMAS Demo Layout
    • index-shop.html
      • Code Update Fixed Issue with Revolution Slider
    • one-page/op-revolution-fullwidth.html
      • Code Update Fixed Issue with Revolution Slider
    • one-page/op-revolution-fullscreen.html
      • Code Update Fixed Issue with Revolution Slider
    • menu-5.html
      • Code Update Fixed Issue with Incorrect CSS Files Linking
    • index-app-showcase.html
      • Code Update Fixed Issue with Slider Text and Mobile Image
    • rs-demo-*.html
      • Code Update Fixed Issue with Duplicate <head> Tag and Thumbnails Filter

Version 3.1

Released on 28th November, 2015

Note: Revolution Slider Plugin Upgrades requires some Code Changes. You may need to rebuild your Revolution Sliders. Please refer to the Revolution Slider Documentation to check what codes needs to be changed or use the Revolution Slider Templates included in the Package.

Added:

  • 80+ Premium Slider Templates for Revolution Slider
  • Dropdown Menu functionality for Page SubMenus
  • Page SubMenus can now be Individually Sticky and not dependant on the Primary Header

Updated:

  • Revolution Slider to Latest Version

Changed:

  • Parallax Plugin only initializes if Parallax Element present on the Page
  • Cookie Notification Function added to js/functions.js

Fixed:

  • Issue with Sticky Footer on Boxed Layout
  • Issue with DropDown Arrows on Top Bar Links
  • Issue with Sticky Header Background Color on Touch Devices
  • Issue with Cookie Notification Bar blinking on Page Load
  • Issue with Dark Style Cookie Notification Bar

Changed Files:

  • CSS
    • style.css
      • Added #page-menu related codes
      • Added .device-lg.sticky-footer:not(.stretched) #footer and .device-md.sticky-footer:not(.stretched) #footer Code Block
      • Code Update .top-links li i.icon-angle-down Code Block
    • css/dark.css
      • Code Update .dark #cookie-notification Code Block
  • jQuery
    • js/functions.js
      • Code Update parallax: function() Function Block updated
      • Code Update menufunctions: function() Function Block updated
      • Code Update SEMICOLON.documentOnReady > windowscroll: function() Function Block updated
      • Code Update stickyMenu: function( headerOffset ) Code Block
      • Added stickyPageMenu: function( pageMenuOffset ) Code Block
      • Added SEMICOLON.header.stickyPageMenu(); to SEMICOLON.header > init: function() Function Block
      • Code Update parallax: function() Function Block updated
      • Added $cookieNotification = $('#cookie-notification') to Variable List
      • Added cookieNotify: function() Code Block
      • Added SEMICOLON.widget.cookieNotify(); to SEMICOLON.widget > init: function() Code Block
      • Code Update revolutionSliderMenu: function( onWinLoad ) Function Block
    • js/plugins.js
      • Code Update
  • HTML
    • rs-demo-*.html
      • Added 80+ Premium Slider Templates for Revolution Slider
    • page-submenu.html
      • Code Update DropDown Examples Added to Page SubMenu
    • cookies.html
      • Code Update Cookie Notification Bar codes updated
  • Plugins
    • include/rs-plugin
      • Code Update All the Revolution Slider Plugin files updated to the Latest Version

Version 3.0.1

Released on 10th November, 2015

Added:

  • Mixed Lightbox Gallery Example
  • Negative Height Offset for Full Screen
  • Appointments Form Processing PHP File added in Package Files

Updated:

  • FitVids Plugin updated to Latest Version
  • Superfish Plugin updated to Latest Version
  • InstaFeed Plugin updated to Latest Version
  • Countdown Plugin updated to Latest Version
  • EasyPieChart Plugin updated to Latest Version
  • Morphext Plugin updated to Latest Version
  • Infinite Scroll Plugin updated to Latest Version
  • PHPMailer Plugin updated to Latest Version

Fixed:

  • Issue with Rounded Skills not loading properly if already in view
  • Issue with iPad View in Media Agency Demo
  • Issue with Semi Transparent Dark Header while Header Sticky on Window Load
  • Issue with Page SubMenu top positioning when Header Static Sticky
  • Issue with Full Screen FlexSlider on Travel and Wedding Demos

Changed Files:

  • CSS
    • style.css
      • Added #header.static-sticky ~ #page-menu.sticky-page-menu #page-menu-wrap { top: 100px; }
    • css/responsive.css
      • Added .sticky-responsive-menu #header-wrap in @media (max-width: 991px) Media Query Breakpoint
    • demos/media-agency/media-agency.css
      • Added .device-sm #wrapper CSS Line
  • jQuery
    • js/functions.js
      • Code Update roundedSkill: function() Function Block updated
      • Code Update fullscreen: function() Function Block updated
      • Code Update swiperSliderMenu: function( onWinLoad ) Function Block updated
      • Code Update revolutionSliderMenu: function( onWinLoad ) Function Block updated
      • Code Update headerSchemeChanger: function( activeSlide, onWinLoad ) Function Block updated
      • Code Update SEMICOLON.documentOnLoad > init: function() Function Block and replaced
        SEMICOLON.slider.swiperSliderMenu();
        SEMICOLON.slider.revolutionSliderMenu();
        with
        SEMICOLON.slider.swiperSliderMenu(true);
        SEMICOLON.slider.revolutionSliderMenu(true);
    • js/plugins.js
      • Code Update FitVids Plugin updated to Latest Version
      • Code Update Superfish Plugin updated to Latest Version
      • Code Update InstaFeed Plugin updated to Latest Version
      • Code Update Countdown Plugin updated to Latest Version
      • Code Update EasyPieChart Plugin updated to Latest Version
      • Code Update Morphext Plugin updated to Latest Version
      • Code Update Infinite Scroll Plugin updated to Latest Version
  • HTML
    • lightbox.html
      • Code Update Examples Updates
    • demo-medical.html
      • Code Update Appointment Form codes
    • demo-travel.html
      • Code Update Flex Slider Markup Codes
    • index-wedding.html
      • Code Update Flex Slider Markup Codes
  • PHP
    • include/phpmailer
      • Code Update PHPMailer Plugin updated to Latest Version
    • demos/medical/include
      • Added Appointments Form PHP Processing File
  • LESS
    • less/header.less
      • Code Update #primary-menu ul ul a
      • Added #header.static-sticky ~ #page-menu.sticky-page-menu #page-menu-wrap { top: 100px; }
    • less/responsive.less
      • Added .sticky-responsive-menu #header-wrap in @media (max-width: 991px) Media Query Breakpoint

Version 3.0

Released on 28th September, 2015

Added:

  • New Demo for Medical
  • New Demo for Media Agency
  • New 10+ One-Page Related Demo Layouts
  • 5+ Window onLoad Modal Examples
  • 100+ Core PSD Files
  • Option to show Alternate Logo for Sticky Header and Mobile Devices
  • Side Panel Examples
  • Sticky Footer and 1 New Footer Layout
  • Primary Menu Sub Menu Items now supports Multi-Line Text
  • More Options for Instagram Widget Photos Retreival
  • Inline Content Lightbox Type
  • Cookie Notification Bar
  • Option to add Icon Color for Social Icons
  • Option to Disable Smooth Scroll
  • Responsive Class Functionality
  • Navigation Tree now supports OnHover Functionality
  • Option to Define Time Out to Disable Page Loading Transition
  • Primary Menu now Supports Lightbox Links
  • Option to Disable Thumbs/Pagination Dots Reveal Animation on FlexSlider
  • Option to Highlight Section when data-scrollto Destination reached
  • Smooth Height Enable/Disable Option for Flex Slider
  • Testimonials Grid 1 Layout
  • New Helper Classes for Faster Editing
  • Option to define Custom Caption Position for Canvas Slider
  • Documentation for Side Panel
  • Documentation for Modal on Load
  • Documentation for Responsive Classes
  • Documentation for Favicons and Apple Touch Icons

Updated:

  • Bootstrap Updated to v3.3.5
  • IsoTope Plugin to Latest Version
  • RTL Files for New Base Files
  • Documentation for Instagram Widget

Changed:

  • .light Class to .dark Class in the Calendar Related Files for better Consistency
  • Page Submenu Styling
  • Moved all the Helper Classes from one-page/onepage.css to Main style.css for Global Access
  • Removed Responsive Device Support for Maximum Scale

Fixed:

  • Issue with PageTransition triggering on Same Page # Links
  • Minor Issue with .vertical-middle Class Inline Styling
  • Issue with .css3-spinner > .css3-spinner-ball-pulse-sync Alignment
  • Issue with .countdown-inline Text Transform property
  • Issue with Start/Stop parameters of the Youtube Background Player
  • Issue with Instagram Feeds not retrieving feeds from the correct username
  • Issue with Primary Menu Sub Menu Item texts overlapping
  • Issue with Button in Mobile Devices in contact-5.html Template
  • Issue with Portfolio Parallax Items on Mobile Devices
  • Issue with Bootstrap Pagination Links Color
  • Issue with Bootstrap Nav Pills Active Background Color not matching with Theme Color
  • Issue with Contact Form Processing Files when using Custom Buttons

Changed Files:

  • CSS
    • style.css
      • Code Update #page-menu nav li a CSS Block updated
      • Added .sticky-footer Related Codes
      • Code Update #primary-menu ul ul a CSS Block
      • Code Update #primary-menu ul li .mega-menu-content.style-2 ul a CSS Block
      • Code Update .css3-spinner > .css3-spinner-ball-pulse-sync Block Updated
      • Added #cookie-notification Related Codes
      • Added .testimonials-grid.grid-1 li Related Codes
      • Code Update .countdown-inline CSS Block. changed .text-transform property to inherit
      • Added body:not(.device-sm):not(.device-xs):not(.device-xxs) #primary-menu.style-2.center > ul CSS Block
      • Added New Helper Classes: .lowercase, .capitalize, .nott, .image-scale, .grayscale CSS Blocks
      • Added All the Helper Classes from one-page/onepage.css
      • Added Codes related to .pagination
      • Added Codes related to .si-text-color
    • one-page/onepage.css
      • Added .testimonials-lg Related Codes
      • Code Update Updated #header.full-header.border-full-header Related Codes
      • Code Update .button.button-border.button-circle renamed to .button.button-circle
      • Removed All the Helper Classes and moved them to the Main style.css
    • css/calendar.css
      • Code Update Renamed .light Class to .dark Class
    • css/dark.css
      • Added #cookie-notification Related Codes
    • css/fonts.css
      • Added New Helper Classes: .font-primary, .font-secondary & .font-body
    • css/colors.css
      • Added Codes related to .pagination
      • Added Codes related to .nav-pills > li.active > a
  • jQuery
    • js/functions.js
      • Code Update pageTransition: function() Function Block updated
      • Code Update lightbox: function() Function Block updated and option for Inline Lightbox added
      • Code Update youtubeBgVideo: function() Function Block updated
      • Code Update animations: function() Function Block updated and added if( element.parents('.fslider.no-thumbs-animate').length > 0 ) { return true; }
      • Code Update linkScroll: function() Function Block updated
      • Code Update navTree: function() Function Block updated
      • Code Update verticalMiddle: function() Function Block updated
      • Added stickyFooter: function() Function Block Added to SEMICOLON.initialize
      • Added SEMICOLON.initialize.stickyFooter(); added to SEMICOLON.documentOnResize > init: function() and SEMICOLON.documentOnLoad > init: function()
      • Added modal: function() Function Block Added to SEMICOLON.initialize
      • Added SEMICOLON.initialize.modal(); added to SEMICOLON.documentOnLoad > init: function()
      • Added dataResponsiveClasses: function() Function Block Added to SEMICOLON.initialize
      • Added SEMICOLON.initialize.dataResponsiveClasses(); added to SEMICOLON.initialize > init: function() and SEMICOLON.documentOnResize > init: function()
      • Code Update loadFlexSlider: function() Function Block
      • Renamed SEMICOLON.header.darkLogo() Function to SEMICOLON.header.logo()
      • Renamed darkLogo: function() Function to logo: function() and Function Block updated
      • Added $parallaxPortfolioEl related Codes
      • Code Update captionPosition: function() Function Block. $slider.find('.slider-caption') Updated to $slider.find('.slider-caption:not(.custom-caption-pos)')
      • Code Update onePageCurrentSection: function() Code Block
    • js/plugins.js
      • Added jQuery Colors Plugin
      • Code Update Animsition to Latest Version
      • Code Update Flex Slider to Latest Version
      • Code Update Youtube BG Player to Latest Version
      • Code Update Isotope to Latest Version
      • Code Update Smooth Scroll Plugin
      • Added Instafeed Plugin
      • Removed Spectagram Plugin
      • Added Cookie Plugin
  • PHP
    • css/colors.php
      • Added Codes related to .pagination
      • Added Codes related to .nav-pills > li.active > a
    • All Form Related PHP Files
      • Code Update $_SERVER['REQUEST_METHOD'] == 'POST'
  • HTML
    • demo-medical.html
      • Added New Niche Demo
    • demo-media-agency.html
      • Added New Niche Demo
    • responsive-class.html
      • Added New Template
    • logo-changer.html
      • Added New Template
    • modal-onload.html
      • Added New Template
    • modal-onload-iframe.html
      • Added New Template
    • modal-onload-cookie.html
      • Added New Template
    • modal-onload-subscribe.html
      • Added New Template
    • modal-onload-common-height.html
      • Added New Template
    • side-panel.html
      • Code Update Enhanced Example for better understanding of Side Panels
    • side-panel-light.html
      • Added New Template
    • side-panel-right-overlay.html
      • Added New Template
    • side-panel-left-overlay.html
      • Added New Template
    • side-panel-left-push.html
      • Added New Template
    • cookie.html
      • Added New Template
    • sticky-footer.html
      • Added New Template
    • footer-7.html
      • Added New Template
    • preloaders.html
      • Added New Template
    • lightbox.html
      • Code Update Added Inline Lightbox type Code
    • events-calendar.html
      • Code Update Renamed .light Class to .dark Class
    • index-events.html
      • Code Update Renamed .light Class to .dark Class
    • contact-5.html
      • Code Update Responsive Issue for Button Click here to Send an Email

Version 2.5

Released on 10th June, 2015

Added:

  • RTL Layout Compatibility
  • Side Panel Trigger from any Linking Element
  • Side Panel can now open from Left/Right Sides
  • Side Panel now supports Push or Overlay on open
  • New Page Loading Animations
  • Option to add any Color to Page Loading Animations
  • Option to add Unique List IDs per Subscription Form for Mailchimp
  • Campaign Monitor Subscription Forms
  • Template for Jobs Form accepting File Uploads
  • Option to make the Page SubMenu Invidually Sticky
  • Option to Initialize Flex Slider with Custom jQuery
  • Option to have a Custom Class for Responsive Headers
  • Centralised Template for all the Widgets
  • Much Easier & Faster way to create Twitter Feeds including Lists & Sliders

Updated:

  • Updated jQuery
  • Bootstrap to v3.3.4
  • jQuery IsoTope Plugin
  • Youtube Video Plugin
  • Animate.css Plugin
  • jQuery Chart Plugin
  • Animsition Plugin
  • Documentation for Subscription Forms
  • Documentation for Side Panel

Changed:

  • Simplified Twitter Feed Code Structure
  • Parallax Function Call Options

Fixed:

  • Issue with Sticky Menu extra removeStickyness()
  • Side Panel Better Browser Compatibility
  • Page SubMenu glitch on Responsive Devices
  • Issue with Header Offset returning jQuery Error when there is no Header present
  • Issue with Sub Title Menu separators
  • Issue with Full Screen Slider Parallax on LESS Setup

Changed Files:

  • CSS
    • style.css
      • Code Update #portfolio.portfolio-parallax .portfolio-item .portfolio-image CSS Block updated and background-attachment: fixed; added to it
      • Added #header.no-sticky ~ #page-menu.sticky-page-menu #page-menu-wrap CSS Block
      • Code Update #side-panel related codes
      • Added .css3-spinner related codes
    • css/responsive.css
      • Added #page-menu #page-menu-wrap CSS Block
    • css/bootstrap.css
      • Code Update Updated to the Latest Version
    • css/animate.css
      • Code Update Updated to the Latest Version
    • css/dark.css
      • Added .css3-spinner related codes
  • jQuery
    • js/functions.js
      • Code Update Removed extra check of SEMICOLON.header.removeStickyness(); from stickyMenu: function( headerOffset ) Function Block >
      • Code Update removeStickyness: function() Function Block
      • Code Update sidePanel: function() Function Block
      • Code Update loadFlexSlider: function() Function Block and changed $('.fslider').find('.flexslider'); to $('.fslider:not(.customjs)').find('.flexslider');
      • Added twitterFeed: function() Function Block
      • Added SEMICOLON.widget.twitterFeed(); Function Call to init: function() Function Block of the SEMICOLON.widget Function Set
      • Added responsiveMenuClass: function() Function Block
      • Added SEMICOLON.header.responsiveMenuClass(); to SEMICOLON.documentOnLoad > init: function()
      • Code Update windowscroll: function() Function Block. Replaced var headerOffset and var headerWrapOffset with new Code
      • Code Update pageTransition: function() Function Block
      • Code Update menufunctions: function() Function Block
      • Code Update parallax: function() Function Block
      • Code Update fullScreen: function() Function Block
    • js/plugins.js
      • Code Update jQuery to Latest Version
      • Code Update Bootstrap to Latest Version
      • Code Update Youtube jquery.mb.YTPlayer to Latest Version
      • Code Update Isotope to Latest Version
      • Code Update Animsition to Latest Version
      • Code Update ChartsJS to Latest Version
  • HTML
    • jobs-file.html
      • Added New Template
    • widgets.html
      • Added New Template
    • All Files with Twitter Feed
      • Code Update Twitter Feed Code Structure
    • All Files with Side Panel
      • Code Update Added the .side-panel-trigger Class to the Side Panel Trigger Elements
  • PHP
    • include/subscribe.php
      • Added $listId = $_GET['list']; for accepting different List ID per Subscription Form
    • include/subscribe-cm.php
      • Added API Integration for Campaign Monitor for adding Subscribers
      • Added campaign-monitor Folder to include Folder
  • LESS
    • less/header.less
      • Code Update Side Panel related Codes

Version 2.1

Released on 1st April, 2015

Added:

  • New Demo for Construction
  • New Demo for Travel
  • New Demo for Minimal Agency
  • Multi Level Navigation Tree Widget
  • New Tab Styles
  • Option for Justify Tabs
  • Options to define Columns for Masonry Thumbs in Responsive Mode
  • Bordered Transparent Full Header for One Page Module
  • Auto Detect Content Size to always keep Footer at the Bottom

Changed:

  • Improvements to Side Panel on Boxed Layouts
  • Improvements to Portfolio Description Overlay on Window Resize

Fixed:

  • Issue with Sticky Header on iPad Landscape Orientation on One Page
  • Issue with Tooltips shifting position of Certain Elements
  • Issue with Portfolio Parallax Images flickering on Certain Browsers
  • Issue with Side Panel Scrolling on Mac
  • Issue with Responsiveness of Description Buttons
  • Issue with Additional Icons inside Icon Lists
  • Issue with Featured Box Icon Effects in LESS Files

Changed Files:

  • CSS
    • style.css
      • Code Update #portfolio.portfolio-parallax .portfolio-item .portfolio-image CSS Block updated and background-attachment: fixed; added to it
      • Code Update #side-panel related codes
      • Added Codes related to .nav-tree
      • Added Codes related to .tabs-alt, .tabs-tb and .tabs-bb
      • Removed Code Block:

        .gmap .gmnoprint,
        .gmap .gm-style-cc { display: none !important; }
    • css/colors.css
      • Added Codes related to .tabs-tb and .tabs-bb
      • Added Codes related to .nav-tree
    • css/font-icons.css
      • Code Update .iconlist Class Updated to allow Additional Icons inside List Texts
    • css/fonts.css
      • Added Codes related to .nav-tree
    • css/dark.css
      • Added Codes related to .nav-tree
    • css/responsive.css
      • Added Codes related to .button-desc inside @media (max-width: 767px) Media Query
    • one-page/onepage.css
      • Added Codes related to .border-full-header
  • jQuery
    • js/functions.js
      • Code Update !SEMICOLON.isMobile.any() check removed from stickyMenu: function( headerOffset ) Function Block
      • Code Update Updated the extra: function() Function Block and changed $('[data-toggle="tooltip"]').tooltip(); to $('[data-toggle="tooltip"]').tooltip({container: 'body'});
      • Added SEMICOLON.portfolio.portfolioDescMargin(); to SEMICOLON.documentOnResize > init: function()
      • Added tabsJustify: function() Function Block
      • Added SEMICOLON.widget.tabsJustify(); added to SEMICOLON.documentOnResize > init: function() and SEMICOLON.widget > init: function()
      • Code Update defineColumns: function( element ) Function Block
      • Added navTree: function() to SEMICOLON.widget
      • Added SEMICOLON.widget.navTree(); to SEMICOLON.widget > init: function()
      • Added stickFooterOnSmall: function() to SEMICOLON.initialize
      • Added SEMICOLON.initialize.stickFooterOnSmall(); to SEMICOLON.documentOnLoad > init: function()
  • HTML
    • demo-construction.html
      • Added New Demo Layout
    • demo-travel.html
      • Added New Demo Layout
    • demo-agency.html
      • Added New Demo Layout
    • side-panel.html
      • Code Update Added Multi Level Navigation Tree Widget to Side Panel
    • tabs.html
      • Code Update New Tab Styles Added
  • PHP
    • css/colors.php
      • Added Codes related to .tabs-tb and .tabs-bb
      • Added Codes related to .nav-tree
  • LESS
    • less/header.less
      • Code Update Side Panel related Codes
    • less/shortcodes/feature-box.less
      • Code Update All the Codes updated to fix issue with Featured Box Icon Effects
    • less/shortcodes/tabs.less
      • Added Codes related to .tabs-alt, .tabs-tb and .tabs-bb
    • less/widgets.less
      • Added Codes related to .nav-tree
    • less/dark.less
      • Added Codes related to .nav-tree

Version 2.0

Released on 27th February, 2015

Added:

  • 30 Dedicated One Page Templates
  • HTML5 Video Placeholder for Mobile Devices
  • Better Support for Team Overlay Social Icons
  • Dedicated Mobile Menu for Windows Mobile Devices
  • Option to Define Sticky Header Offset
  • Option to disable to Pause on Hover for Flex Slider
  • Option to add more than one image in Masonry Thumbs data-big

Changed:

  • Improvements to Side Panel
  • Improvements to Slider Parallax
  • Improvements to Common Height Functionality
  • Improvements to HTML5 Video Functionality

Fixed:

  • Issue with Widget Paragraphs resizing Lead Texts
  • Issue with .uppercase Class
  • Issue with Vertical middle Functionality
  • Issue with Small Centered Featured Box
  • Issue with Menus on Windows Mobile Devices
  • Issue with Parallax Image Initialization

Changed Files:

  • CSS
    • style.css
      • Code Update :not(.lead) CSS check for .widget p
      • Code Update !important added to .uppercase Class
      • Code Update left: 0; added to .vertical-middle Class
      • Code Update Codes related to Side Panel Updated
      • Added .video-placeholder CSS Block
      • Removed #primary-menu li:hover > ul { display: block; }
      • Added .feature-box.fbox-center.fbox-small CSS Block
      • Code Update .team-overlay .social-icon CSS Block Updated
    • css/responsive.css
      • Added Codes related to .windows-mobile-menu
  • jQuery
    • js/functions.js
      • Code Update Updated the stickyMenu: function( headerOffset ) Function Block
      • Removed SEMICOLON.widget.parallax(); from SEMICOLON.widget > init: function()
      • Added SEMICOLON.widget.parallax(); to SEMICOLON.documentOnLoad > init: function()
      • Code Update Updated the sliderParallax: function() Function Block
      • Code Update Updated the windowscroll: function() Function Block
      • Code Update Updated the verticalMiddle: function() Function Block
      • Code Update Updated the loadFlexSlider: function() Function Block
      • Code Update Updated the maxHeight: function() Function Block
      • Added Added the commonHeight: function() Function Block
      • Code Update Updated the setFullColumnWidth: function() Function Block
      • Code Update Updated the html5Video: function() Function Block
    • js/plugins.js
      • Added jQuery Transit Plugin
      • Code Update Bootstrap Plugin Block Updated

Version 1.4

Released on 4th February, 2015

Added:

  • Sticky Responsive Menu
  • Fade Animation for Lightbox
  • 4 New Login/Register Page Layouts
  • Cart Page Layout
  • Checkout Page Layout
  • AJAX Jobs Form for the Career Page
  • AJAX RSVP Form for the Wedding Homepage
  • Support for Static Sticky Headers
  • Support for adding Styled Google Maps
  • Additional Options for One Page Menu Scrolling Functionality
  • Additional Options for Same Page Scrolling Functionality
  • Easier Tabs Initialization
  • Option to define Toggle State
  • Option to define which Accordion to open by default
  • Added .nocolor CSS check for Heading Spans
  • Added Custom Google Map Functionality in maps.html Template

Updated:

  • Bootstrap to Version 3.3.2
  • Swiper Plugin Updated to Latest Version
  • jQuery Form Plugin Updated to Latest Version
  • jQuery Validation Plugin Updated to Latest Version
  • jQuery Isotope Plugin Updated to Latest Version
  • jQuery GMap Plugin Updated to Latest Version
  • Updated Documentation

Changed:

  • Mailchimp API URL Logic for Auto-Detection of Datacenter based on the API Key
  • Offset Position Detection logic

Fixed:

  • Issue with Parallax Offset Calculation in Slider Parallax Functionality on Transparent Headers
  • Issue with resizing of Parallax Images in Page Title Parallax feature on Mobile Devices
  • Issue with Canvas Slider 3,4 and 5 Columns
  • Issue with Icon Line Height on Revolution Slider Arrows on Index Shop
  • Issue with DIV inside H1 Hierarchy in index-corporate-4.html Template
  • Issue with some of the Package Images not opening in Photoshop
  • Media Query Typing Error in less/responsive.less

Changed Files:

  • CSS
    • style.css
      • Added .static-sticky CSS check to support Static Sticky Header. Search for :not(.static-sticky) to update the related codes
      • Added .accordion-lg CSS Code Blocks
      • Added .input-group-lg > .input-group-addon CSS Code Block to fix the Line Height Issue
      • Added .tparrows.preview2:after CSS Code Block to fix the Line Height Issue on Revolution Slider Arrows on Index Shop
      • Added .nocolor CSS Check for Header Spans
    • css/responsive.css
      • Added .responsive-sticky-header CSS Code Blocks for Responsive Sticky Menu
    • css/colors.css
      • Added .nocolor CSS Check for Header Spans
    • css/bootstrap.css
      • Code Update Codes Updated to V3.3.2
    • css/magnific-popup.css
      • Added .mfp-fade Code Blocks for Fade Animation of Magnific Popup
  • jQuery
    • js/functions.js
      • Code Update Updated the stickyMenu: function( headerOffset ) Function Block
      • Code Update Updated the windowscroll: function() Function Block
      • Added $header.hasClass('transparent-header') check in the sliderParallaxOffset: function() Function Block
      • Added $parallaxPageTitleEl = $('.page-title-parallax')
      • Added $parallaxPageTitleEl.addClass('mobile-parallax'); in the parallax: function() Function Block
      • Code Update Updated the onePageScroll: function() Function Block
      • Code Update Updated the linkScroll: function() Function Block
      • Added Added tabs: function() Function Block
      • Code Update Updated the toggles: function() Function Block
      • Code Update Updated the accordions: function() Function Block
      • Added $onePageMenuEl.length check to $window.scrolled Code Block
      • Added onePageGlobalOffset Variable
      • Code Update Updated the onePageCurrentSection: function() Function Block
    • js/plugins.js
      • Code Update Bootstrap Plugin Block Updated
      • Code Update Swiper Plugin Block Updated
      • Code Update jQuery Form Plugin Block Updated
      • Code Update jQuery Validation Plugin Block Updated
      • Code Update jQuery Isotope Plugin Block Updated
    • js/jquery.gmap.js
      • Code Update Updated & Customized Google Maps API3 jQuery Code to allow Custom Styled Maps
  • HTML
    • static-sticky.html
      • Added New Layout Added
    • responsive-sticky.html
      • Added New Layout Added
    • cart.html
      • Added New Layout Added
    • checkout.html
      • Added New Layout Added
    • index-wedding.html
      • Code Update RSVP Form Section updated
    • index-corporate-4.html
      • Code Update Updated .text-rotater Code Block
    • login-register-2.html
      • Added New Layout Added
    • login-register-3.html
      • Added New Layout Added
    • login-1.html
      • Added New Layout Added
    • login-2.html
      • Added New Layout Added
    • slider-canvas-3.html
      • Code Update Changed jQuery(document).ready(function($) to jQuery(window).load(function() in the Swiper Slider Section
    • slider-canvas-4.html
      • Code Update Changed jQuery(document).ready(function($) to jQuery(window).load(function() in the Swiper Slider Section
    • slider-canvas-5.html
      • Code Update Changed jQuery(document).ready(function($) to jQuery(window).load(function() in the Swiper Slider Section
    • All the Pages with the Tabs Shortcode except Side Navigation & Process Steps
      • Removed Tab Initialization Script as a Global Function has been added for this
  • PHP
    • css/colors.php
      • Added .nocolor CSS Check for Header Spans
    • include/subscribe.php
      • Added $datacenter Variable
      • Code Update $submit_url Updated the Mail Chimp API URL logic
    • include/jobs.php
      • Added Codes for Jobs Form Processing
    • include/rsvp.php
      • Added Codes for RSVP Form Processing
  • LESS
    • less/typography.less
      • Added .nocolor CSS Check for Header Spans
    • less/header.less
      • Added .static-sticky CSS check to support Static Sticky Header. Search for :not(.static-sticky) to update the related codes
    • less/sliders.less
      • Added .tparrows.preview2:after CSS Code Block to fix the Line Height Issue on Revolution Slider Arrows on Index Shop
    • less/responsive.less
      • Added .responsive-sticky-header CSS Code Blocks for Responsive Sticky Menu
      • Code Update Added @ to media only screen and (min-width: 480px) and (max-width: 767px)
    • less/extras.less
      • Added .input-group-lg > .input-group-addon CSS Code Block to fix the Line Height Issue
    • less/shortcodes/toggles-accordions.less
      • Added .accordion-lg CSS Code Blocks

Version 1.3.1

Released on 12th January, 2015

Added:

  • Example for Canvas Slider - Autoplay
  • Example for Canvas Slider - Video Button onClick Play/Pause
  • Example for Canvas Slider - Pagination

Fixed:

  • Import mislinking in responsive.less & dark.less Files
  • Issue with Side Panel Content Scrolling on Touch Devices
  • Issue with Touch Compatibility of Mobile Menus on Windows Mobiles
  • Issue with Button Resizing in the Revolution Slider on Responsive Devices
  • Issue with Color Switching for Overlay Menu

Updated:

  • Revolution Slider to Latest Version v4.6.4
  • Updated Superfish Plugin to Latest Version
  • Updated Chartsjs to Latest Version
  • Updated Magnific Popup to Latest Version
  • Header LESS CSS
  • Documentation

Changed Files:

  • CSS
    • style.css
      • Added .tp-banner .button { height: auto !important; } in Revolution Slider Section to fix Button Resizing on Responsive Devices
      • Added body.side-push-panel.device-touch Code Block
    • css/colors.css
      • Added Codes related to .overlay-menu
    • css/colors.php
      • Added Codes related to .overlay-menu
    • css/magnific-popup.css
      • Code Update Complete Code Update to Latest Version
  • HTML
    • Added slider-canvas-autoplay.html
    • Added slider-canvas-video-event.html
    • Added slider-canvas-pagination.html
  • LESS
    • less/dark.less
      • Code Update Changed the Import Linking
    • less/header.less
      • Added Side Panel related Styles
    • less/responsive.less
      • Code Update Changed the Import Linking
    • less/sliders.less
      • Added .tp-banner .button { height: auto !important; } in Revolution Slider Section to fix Button Resizing on Responsive Devices
  • jQuery
    • js/plugins.js
      • Code Update Superfish Plugin Block Updated
      • Code Update Chartsjs Plugin Block Updated
      • Code Update Magnific Popup Plugin Block Updated
  • include/rs-plugin
    • Folder Update Updated the Complete Folder

Version 1.3

Released on 17th December, 2014

Added:

  • Side Panel Area
  • Minimal Overlay Menu
  • New Loading Styles for the Page Loading Transitions
  • Gallery Support for AJAX Lightbox
  • Fading Feature for the Canvas Slider slider-canvas-fade.html
  • LESS Files
  • Added Overlay Compatibility to Full Google Maps for Transparent Headers

Updated:

  • Video Order: webm video source placed above mp4 video source for better caching of the Video Files in the Modern Browsers & this will eventaully reduce your Server's Bandwidth Usage. Tested this on our Own Servers.
  • Bootstrap to V3.3.1
  • Page Loading Transitions Script
  • Removed only screen property from Media Queries in CSS Files
  • Documentation

Fixes:

  • Issue with Post Content & Sidebar floats in Responsive Devices
  • z-Index Issue with Toastr Notifications
  • Issue with Menu Style 5 Icons Font Sizing on Responsive Devices
  • Smooth Scrolling Disabled on unnecessary Devices & Browsers.
  • Issue with Header Extras in Firefox & Internet Explorer
  • Issue with Sticky Menu Classes
  • Issues with Body Overflow in Lightbox AJAX Type which prevents Double Scrollbars

Changed Files:

  • CSS
    • style.css
      • Added Loading Styles in the Page Transitions section .css3-spinner
      • Added Styles related to .overlay-menu
      • Added #header.transparent-header + #google-map for Transparent Headers Compatibility
      • Added Styles related to body.side-push-panel, #side-panel-trigger & #side-panel-trigger-close
      • Code Update Increased z-index Value changed for #toast-container
      • Code Update Update .header-extras li .he-text
      • Removed only screen property from Media Queries
    • css/responsive.css
      • Added Styles related to #side-panel-trigger & #side-panel-trigger-close
      • Code Update Fixed float issue of the .postcontent & .sidebar sections in responsive devices less than 992px @media only screen and (max-width: 991px)
      • Code Update Added !important to font-size attribute in #primary-menu.style-5 > ul > li > a i
      • Removed only screen property from Media Queries
    • css/bootstrap.css
    • css/dark.css
      • Added Styles related to #side-panel-trigger & #side-panel-trigger-close
      • Added Styles related to .overlay-menu
      • Removed only screen property from Media Queries
    • Added LESS Files in the less Folder.
      • Added style.less
  • HTML
    • All the HTML Files with HTML5 Videos
      • Code Update Updated Source Video order & placed webm video source above the mp4 video source
    • side-panel.html
    • slider-canvas-fade.html
  • jQuery
    • js/functions.js
      • Added Loader Styles variable to the pageTransition: function() Block
      • Added lightbox: function() > $lightboxAjaxGalleryEl.magnificPopup which adds AJAX Lightbox Gallery support
      • Added sidePanel: function() block
      • Added SEMICOLON.header.sidePanel(); to SEMICOLON.header > init: function()
      • Added overlayMenu: function() block
      • Added SEMICOLON.header.overlayMenu(); to SEMICOLON.header > init: function() &aamp; SEMICOLON.documentOnResize > init: function()
      • Added if (!$(event.target).closest('#side-panel').length) { $body.toggleClass('side-panel-open', false); } to $(document).on('click', function(event)
      • Code Update menufunctions: function() Block Updated to calculate Overlay Menu Height & align it in the middle of the window
      • Code Update stickyMenuClass: function() Block Updated to add/remove Sticky Menu Classes more accurately
      • Code Update lightbox: function() > $lightboxAjaxEl.magnificPopup Block Updated to prevent Document Body to show scrollbars when Lightbox AJAX Modal is opened. This fixes the Double Scrollbar Issue
    • js/plugins.js
      • Added loadingHtml option to the Animsition Plugin
      • Code Update Updated ssc_init() Block
      • Code Update Updated Animsition Plugin
      • Code Update Updated Bootstrap Plugin
    • js/canvas.slider.fade.js

Version 1.2.2

Released on 14th November, 2014

Fixes:

  • Issue with IE & Mobile Browsers displaying Blank Page
  • Issue with Top Social's Text Width handling

Changed Files:

  • CSS
    • css/animate.css
      • Removed Media Query Condition @media only screen and (min-width: 768px)
  • jQuery
    • js/functions.js
      • Code Update topsocial: function()
      • Removed SEMICOLON.header.topsocial(); from SEMICOLON.header > init: function()
      • Added SEMICOLON.header.topsocial(); to SEMICOLON.documentOnLoad > init: function()

Version 1.2.1

Released on 13th November, 2014

Added:

  • Ability to use Custom Speed Duration & Animation Style for Page Load Transitions
  • Ability to use any Animate.css Transition for Page Loading Transitions

Updated:

  • Bootstrap to V3.3
  • Page Load Transitions now uses Native CSS3 Animations from the animate.css library
  • Documentation

Fixes:

  • Blog Masonry 3 Full Responsive Issue
  • Issue with $subject variable in sendemail.php File
  • Fixed Wrong Links of Portfolio Masonry in the Menus
  • Fixed Issues with Footer Quick Contact Form in footer-2.html & footer-3.html Files
  • Fixed some Z-Indexes for Menus

Changed Files:

  • CSS
    • style.css
    • css/responsive.css
    • css/dark.css
    • css/bootstrap.css
  • HTML
    • footer-2.html
    • footer-3.html
  • PHP
    • include/sendemail.php
  • jQuery
    • js/plugins.js
    • js/functions.js

Version 1.2

Released on 6th November, 2014

Added:

  • Month/Date Sections for Blog Timeline Full Width
  • Infinity Scroll for Blog Timeline
  • Added ability to use any animation from the animate.css library on Text Rotaters
  • Added colors.php file for easy theme color setup
  • Added fonts.css for Easy Custom Font Management
  • More Documentation Info

Fixes:

  • Blog Timeline Entry Position Issue
  • Blog Timeline issues on Responsive Devices
  • Posts Entry Meta Icon Display issues on Responsive Devices
  • Issue with Sub-Title Menu Dividers on the First Menu Item
  • IE Display Issue with Text Rotators
  • Issue with iconlist color importance
  • Issues with jQuery Widgets
  • Fixed an Issue with Mobile Primary Menus on Android Devices

Changed Files:

  • CSS
    • style.css
    • css/responsive.css
    • css/dark.css
    • css/colors.css
    • css/colors.php
    • css/fonts.css
  • HTML
    • blog-timeline.html
    • blog-timeline-2.html
    • index-corporate-4.html
    • static-parallax.html
    • headings-dropcaps.html
  • jQuery
    • js/plugins.js
    • js/functions.js

Version 1.1

Released on 30th October, 2014

Added:

  • HTML5 Youtube Video Backgrounds that can be added as a Video Background for any Element.
  • Added a Class .no-transition to be added to the body Tag to disable Page Loading Transition.
  • Revolution Slider Documentation

Fixes:

  • Responsive Sub Menu Width Issue on Full Header
  • Shopping Cart Dark Scheme Issue
  • Icon List Color Scheme Issue
  • One Page Team Layout Issue
  • Index Shop Bottommost Subscription Section Layout Issue
  • Landing Page 5 Overlay Form Layout Issue
  • App Showcase minor Improvements
  • Heading Blocks Not Dark Issue
  • Fixed Issue with Vertical Middle in Responsive Devices
  • Heading Block Text Size on Responsive Device
  • Primary Menu Sub Title - Sub Menu Font Size Issue

Changed Files:

  • CSS
    • style.css
    • css/responsive.css
    • css/dark.css
    • css/colors.css
  • HTML
    • index.html
    • index-onepage.html
    • index-onepage-2.html
    • index-shop.html
    • landing-5.html
    • index-app-showcase.html
    • sections.html
  • jQuery
    • js/functions.js
    • js/plugins.js

Initial Release V1.0

Released on 22nd October, 2014