File:ShDocumenter.css

From OpenWetWare
Jump to: navigation, search
ShDocumenter.css(file size: 3 KB, MIME type: text/plain)
Warning: This file type may contain malicious code. By executing it, your system may be compromised.

<!DOCTYPE html>

<html class="not-ie no-js" lang="en">  <!--<![endif]-->

<head> <!-- Google Web Fonts

 ================================================== -->

<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic:400,600' rel='stylesheet' type='text/css'>

<!-- Basic Page Needs

 ================================================== -->

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

   <!--[if ie]><meta http-equiv='X-UA-Compatible' content="IE=edge,IE=9,IE=8,chrome=1" /><![endif]-->

<title> Goodnex HTML</title>

<meta name="description" content=""> <meta name="author" content=""> <link rel="shortcut" href="images/favicon.ico" />

<!-- Mobile Specific Metas

 ================================================== -->

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<!-- CSS

 ================================================== -->

<link rel="stylesheet" href="/wiki/style.css" /> <link rel="stylesheet" href="/wiki/shDocumenter.css" /> <link rel="stylesheet" href="js/fancybox/jquery.fancybox.css" />

<!-- HTML5 Shiv ================================================== --> <script src="js/jquery.modernizr.js"></script>

</head> <body>

<nav id="documenter-nav" class="documenter-nav">

<a id="tm-logo" href="#"><img src="images/logo.png" alt="" /></a>

<ul class="navigation">

<li><a class="current_nav" href="#start">Start</a></li> <li><a href="#main_features">The Main Features</a></li> <li><a href="#html_structure">HTML Structure</a></li> <li><a href="#home_page">Home Page</a></li> <li><a href="#subpages">Subpages</a></li> <li><a href="#features">Features</a></li> <li><a href="#css_files_and_structure">CSS Files and Structure</a></li> <li><a href="#javascript">JavaScript</a></li> <li><a href="#psd_files">PSD Files</a></li> <li><a href="#sources_and_credits">Sources and Credits</a></li>

</ul>

<footer id="footer">

<p> Once again, thank you so much for purchasing this theme.

</p>

<ul class="items"> <li class="get-support"> <a href="http://forums.webtemplatemasters.com/" target="_blank"> <span class="circle-logo"></span> Get Free Support </a> </li> <li class="support-tickets"> <a href="http://tickets.webtemplatemasters.com/" target="_blank"> <span class="circle-logo"></span> Support Tickets </a> </li> <li class="follow-twitter"> <a href="https://twitter.com/ThemeMakers" target="_blank"> <span class="circle-logo"></span> Follow on Twitter </a> </li> <li class="follow-facebook"> <a href="http://www.facebook.com/wpThemeMakers" target="_blank"> <span class="circle-logo"></span> Follow on Facebook </a> </li> <li class="subscribe-rss"> <a href="feed://themeforest.net/feeds/users/ThemeMakers" target="_blank"> <span class="circle-logo"></span> Subscribe by RSS </a> </li> </ul>

</footer><!--/ #footer-->

</nav><!--/ #documenter-nav-->

<div id="documenter-content" class="documenter-content">

<section id="start">

<div class="heading"> <h6>“Goodnex HTML” Documentation by “ThemeMakers” v.1.0</h6> <h1>"Goodnex Responsive HTML5 CSS3 Template"</h1> </div><!--/ .heading-->

<table class="table-description"> <tr> <td class="desc-column-1"> <span class="author-created"> Created:28/06/2013 <br/> By: ThemeMakers </span> <span class="author-link"><a href="#">http://themeforest.net/user/ThemeMakers</a></span> </td> <td class="desc-column-2"> <blockquote> <span>Thank you for purchasing our theme.</span> If you have any questions that are beyond the scope of this help file, please feel free to contact us via <a href="http://forums.webtemplatemasters.com" target="_blank">Support Forums</a> or create a personal ticket in our <a href="http://tickets.webtemplatemasters.com" target="_blank">Support System</a>.<br /> <span>Thanks so much!</span> </blockquote> </td> </tr> </table><!--/ .table-description-->

</section><!--/ #start-->

<section id="main_features">

<h3>The Main Features</h3> <p>This template very clean and unique design. The main feature of this template is black-&-white images style which becomes colored by hovering. This makes your website look very alive and bright. One of the brightest peculiarities is scribble template version whith shabby elements which is very modern and actual design feature today. Moreover you are able to choose either use the full screen version - Wide, or work with more blog template version with fixed width - Boxed. Using boxed style you also can pick any patern you like.</p> <p>This template includes two sliders: Flex and Layer slider. Both sliders are very powerful tool to decorate your website pages, they will pay the customers' attention for sure and make your website to stand out from the crowd.</p>

</section><!--/ #features -->

<section id="html_structure">

<h3 class="tm-title">HTML Structure</h3> <p>This theme is a fixed layout with two columns. All of the information within the main content area is nested within a div with an id of &quot;content&quot;. The sidebar&#39;s (column #2) content is within a div with an id of &quot;sidebar&quot;. The general template structure is the same throughout the template. Here is the general structure.</p>

<div class="html_structure"> <pre class="brush: xml">

<!-- - - - - - - - - Header - - - - - - - - - - -->

<header id="header">

<div class="container">

<div class="eight columns">

<!-- - - - - - - - - Logo - - - - - - - - - - -->

<div id="logo"> <a href="index.html"><img src="images/logo.png" alt="logo"></a> </div><!--/ #logo-->

<!-- - - - - - - - - end Logo - - - - - - - - - - -->

</div><!--/ .columns-->

<div class="eight columns">

<div class="widget widget_contacts">

<div class="vcard clearfix">

<p class="top-phone">Call Us : <span>+00 123456789</span></p>

</div><!--/ .vcard-->

<div class="clear"></div>

<!-- - - - - - - - - Social Icons - - - - - - - - - - -->

</div>

</div><!--/ .columns-->

<div class="clear"></div>

<div class="sixteen columns">

<div class="menu-container clearfix">

<!-- - - - - - - - - Navigation - - - - - - - - - - -->

<nav id="navigation" class="navigation clearfix">

<div class="menu"> <ul> <li><a href="index.html">Home</a></li> <li><a href="portfolio-2-columns-sidebar.html">Portfolio</a></li> <li><a href="about-us.html">Pages</a></li> <li><a href="typography.html">Features</a></li> <li class="current-menu-item"><a href="blog.html">Blog</a></li> <li><a href="columns.html">Shortcodes</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div>

</nav><!--/ .navigation-->

<!-- - - - - - - - - end Navigation- - - - - - - - - - -->

<div class="search-wrapper">

<!-- - - - - - - - - Search Form - - - - - - - - - - -->

</div><!--/ .search-wrapper-->

</div><!--/ .menu-container-->

</div><!--/ .columns-->

</div><!--/ .container-->

</header><!--/ #header-->

<!-- - - - - - - - - end Header - - - - - - - - - - -->

<section id="content" class="sbr">

<div class="container clearfix">

<!-- - - - - - - - - Page Header - - - - - - - - - - -->

<div class="page-header clearfix">

<h1> -- Page Heading Here -- </h1>

</div><!--/ .page-header-->

<!-- - - - - - - - - end Page Header - - - - - - - - - - -->

<!-- - - - - - - - - Main - - - - - - - - - - -->

<section id="main" class="twelve columns">

-- Primary Content Here --

</section><!--/ #main-->

<!-- - - - - - - - - end Main - - - - - - - - - - -->

<!-- - - - - - - - - Sidebar - - - - - - - - - - -->

<aside id="sidebar" class="four columns">

--Sidebar Widgets Here --

</aside><!--/ #sidebar-->

</div><!--/ .container-->

</section> <!--/ #content-->

<!-- - - - - - - - - Footer - - - - - - - - - - -->

<footer id="footer">

<div class="container">

--Footer Widgets Here --

<div class="clear"></div>

<div class="sixteen columns">

-- Footer Text Here --

</div><!--/ .columns-->

</div><!--/ .container -->

</footer><!--/ #footer -->

<!-- - - - - - - - - end Footer - - - - - - - - - - --> </pre> </div>

<hr> <h4>Header Structure</h4>

<h6>Logo</h6>

<p>To change an image for your logo you need to replace file logo.png in Images folder. The most appropriate sizes for log is 143 x 24 px</p> <div class="html_logo"> <pre class="brush: xml">

<div id="logo">

<a href="index.html"><img src="images/logo.png" alt="logo"></a>

</div><!--/ #logo-->

</pre> </div>


<p>In case if you would like to change the styles for your Logo, you can add or edit appropriate properties in file style.css line 884 </p>

<div class="html_logo_css"> <pre class="brush: css">

#logo { display: block; float: left; line-height: 0; margin-top: 25px; }

</pre> </div>

<h6>Navigation</h6>

<p>Navigation is presented in list type which works with nested structure. It means that if you want to add submenu then put the submenu list to the item list of the main menu</p>

<div class="html_navigation"> <pre class="brush: xml">

<nav id="navigation" class="navigation clearfix">

<div class="menu"> <ul> <li><a href="index.html">Home</a> <ul> <li><a href="index.html">Layer Slider</a></li> <li><a href="index-2.html">Flex Slider</a></li> </ul> </li> <li><a href="portfolio-2-columns-sidebar.html">Portfolio</a> <ul> <li><a href="portfolio-2-columns-sidebar.html">With Sidebar</a> <ul> <li><a href="portfolio-2-columns-sidebar.html">Portfolio 2 Columns</a></li> <li><a href="portfolio-3-columns-sidebar.html">Portfolio 3 Columns</a></li> <li><a href="portfolio-4-columns-sidebar.html">Portfolio 4 Columns</a></li> <li><a href="portfolio-single-sidebar.html">Portfolio Single</a></li> </ul> </li> <li><a href="portfolio-2-columns.html">Without Sidebar</a> <ul> <li><a href="portfolio-2-columns.html">Portfolio 2 Columns</a></li> <li><a href="portfolio-3-columns.html">Portfolio 3 Columns</a></li> <li><a href="portfolio-4-columns.html">Portfolio 4 Columns</a></li> <li><a href="portfolio-single.html">Portfolio Single</a></li> </ul> </li> </ul> </li> <li><a href="about-us.html">Pages</a> <ul> <li><a href="about-us.html">About Us</a></li> <li><a href="services.html">Services</a></li> <li><a href="faq.html">FAQ</a></li> <li><a href="404.html">404 Page</a></li> </ul> </li> <li><a href="typography.html">Features</a> <ul> <li><a href="typography.html">Typography</a></li> </ul> </li> <li class="current-menu-item"><a href="blog.html">Blog</a> <ul> <li><a href="blog-single.html">Blog Single</a></li> </ul> </li> <li><a href="columns.html">Shortcodes</a> <ul> <li><a href="elements.html">Elements</a></li> <li><a href="pricing-tables.html">Pricing Tables</a></li> <li><a href="columns.html">Columns</a></li> <li><a href="icons.html">Icons</a></li> </ul> </li> <li><a href="contact.html">Contact</a></li> </ul> </div>

</nav><!--/ .navigation-->

</pre> </div>

<hr> <h4>Content Structure</h4>

<p>Sub-pages titles are located in class .page-header which adds appropriates styles.</p>

<div class="html_cs"> <pre class="brush: xml">

<div class="page-header clearfix">

<h1>Blog</h1>

</div><!--/ .page-header-->

</pre> </div>

<p>Also .section-title class is available within page content. It adds certain styles for titles in separate page blocks.</p>

<hr> <h4>Columns</h4>

<p>You can easily arrange your page content divided into few columns using skeleton.css classes.</p>

<div class="html_columns"> <pre class="brush: xml">

<div class="eight columns row">

<span class="dropcapcircle">1</span> <h6>1/2 Column</h6>

<p> -- Text Column -- </p>

</div><!--/ .columns -->

<div class="eight columns row">

<span class="dropcapcircle">2</span> <h6>1/2 Column</h6>

<p> -- Text Column -- </p>

</div><!--/ .columns -->

<div class="one-third column row">

<span class="dropcapcircle">1</span> <h6>1/3 Column</h6>

<p> -- Text Column -- </p>

</div><!--/ .columns -->

<div class="one-third column row">

<span class="dropcapcircle">2</span> <h6>1/3 Column</h6>

<p> -- Text Column -- </p>

</div><!--/ .columns -->

<div class="one-third column row">

<span class="dropcapcircle">3</span> <h6>1/3 Column </h6>

<p> -- Text Column -- </p>

</div><!--/ .columns -->

</pre> </div>

<hr> <h4>Sidebar Structure</h4>

<p>You can regulate slider position. For that you have to set appropriate class for block with id="content"</p> <p>class="sbl" - left-side sidebar</p> <p>class="sbr" - right-side sidebar</p> <p>All widgets are placed within aside tag with id="sidebar" and use the same code structure:</p>

<div class="html_sidebar"> <pre class="brush: xml">

<div class="widget widget_text">

<h3 class="widget-title"> -- Widget Title -- </h3>

<div class="textwidget">

<p> --Widget Content-- </p>

</div>

</div>

</pre> </div>

</section><!--/ #html_structure -->

<section id="home_page">

<h3>Home Page</h3> <p>There are two templates for Home page layout. One uses Layer slider, second - Flex Slider. Each slider has its own bright features and nice looking design, they perfectly fit any sphere of business and projects.</p>

<hr> <h4>Home Page with Layer Slider</h4>

<p>Layer Slider options and settings:</p> <div class="home_fullscreen"> <pre class="brush: js">

var objLayerSlider = { width : '100%', height : '400px', responsive : true, //Boolean: (true/false) responsiveUnder : 940, sublayerContainer : 940, autoStart : true, //Boolean: If true, slideshow will automatically start after loading the page. (true/false) pauseOnHover : true, //Boolean: If ture, SlideShow will pause when you move the mouse pointer over the LayerSlider container. (true/false) firstLayer : 1, //Integer: LayerSlider will begin with this layer. (Positive Integer) animateFirstLayer : true, //Boolean: (true/false) randomSlideshow : false, //Boolean: (true/false) twoWaySlideshow : true, //Boolean: If true, slideshow will go backwards if you click the prev button. (true/false) loops : 0, forceLoopNum : true, //Boolean: (true/false) autoPlayVideos : false, //Boolean: (true/false) autoPauseSlideshow : 'auto', keybNav : true, //Boolean: Keyboard navigation. You can navigate with the left and right arrow keys. (true/false) touchNav : true, //Boolean: (true/false) skin : 'goodnex', //String: You can change the skin of the Slider. (name_of_the_skin) skinsPath : 'js/layerslider/skins/', //String: You can change the default path of the skins folder. Note, that you must use the slash at the end of the path. (path_of_the_skins_folder/) globalBGColor : '#f6f6f6', //CSS Color Methods. Background color of LayerSlider. You can use all CSS methods, like hexa colors, rgb(r,g,b) method, color names, etc. Note, that background sublayers are covering the background. navPrevNext : true, //Boolean: If false, Prev and Next buttons will be invisible. (true/false) navStartStop : false, //Boolean: If false, Start and Stop buttons will be invisible. (true/false) navButtons : false, //Boolean: If false, slide buttons will be invisible. (true/false) hoverPrevNext : true, //Boolean: (true/false) hoverBottomNav : false, //Boolean: (true/false) thumbnailNavigation : 'disabled', tnWidth : 100, tnHeight : 60, tnContainerWidth : '60%', tnActiveOpacity : 35, tnInactiveOpacity : 100 };

</pre> </div>

<hr> <h4>Home Page with Flex Slider</h4>

<p>Flex Slider options and settings:</p> <div class="home_masonry"> <pre class="brush: js">

var objFlexSlider = { animation: "slide", //String: Select your animation type, "fade" or "slide" easing: "swing", // Refer to the link below http://easings.net/ direction: "horizontal", //String: Select the sliding direction, "horizontal" or "vertical" controlNav: false, //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage directionNav: true, //Boolean: Create navigation for previous/next navigation? (true/false) slideshowSpeed: 6000, //Integer: Set the speed of the slideshow cycling, in milliseconds animationSpeed: 600, //Integer: Set the speed of animations, in milliseconds randomize: false //Boolean: Randomize slide order };

</pre> </div>

</section><!--/ #home_page -->

<section id="subpages">

<h3>Subpages</h3>

<hr> <h4>Blog</h4>

<p>All posts on Blog page are built in from blocks .preloader, .entry-title, .entry-meta, .entry-body</p>

<div class="sub_blog"> <pre class="brush: xml">

<article class="entry clearfix">

<div class="preloader"> <a class="bwWrapper single-image link-icon" href="blog-single.html"> <img src="images/blog/blog-img-1.jpg" alt="" > </a> </div>

<div class="entry-title"> <h2 class="title"><a href="blog-single.html">-- Post Title --</a></h2> </div><!--/ .entry-title-->

<div class="entry-meta"> <span class="date"><a href="#"> -- Post Date -- </a></span> <span class="author"><a href="#"> -- Post Author -- </a></span> <span class="tag"><a href="#"> -- Post Tag -- </a>, <a href="#"> -- Post Tag -- </a></span> <span class="comments"><a href="#"> -- Post Comments -- </a></span> </div><!--/ .entry-meta-->

<div class="entry-body">

<p> -- Post Text -- </p>

<a class="button default small" href="blog-single.html"> -- Learn More Button -- </a>

</div><!--/ .entry-body-->

</article><!--/ .entry-->

</pre> </div>

<p>Please be aware that as a featured image with class .single-image .link-icon, .image-post-slider or .video-container can be set.</p>

<p>Here is an example of Blog page with gallery:</p>

<div class="sub_image-post-slider"> <pre class="brush: xml">

<div class="image-post-slider"> <ul> <li> <div class="preloader"> <a href="blog-single.html" class="bwWrapper single-image link-icon" rel="gallery"> <img src="images/blog/blog-img-2.jpg" alt="" /> </a> </div><!--/ .preloader--> </li> <li> <div class="preloader"> <a href="blog-single.html" class="bwWrapper single-image link-icon" rel="gallery"> <img src="images/blog/blog-img-3.jpg" alt="" /> </a> </div><!--/ .preloader--> </li> <li> <div class="preloader"> <a href="blog-single.html" class="bwWrapper single-image link-icon" rel="gallery"> <img src="images/blog/blog-img-4.jpg" alt="" /> </a> </div><!--/ .preloader--> </li> </ul> </div><!--/ .image-post-slider-->

</pre> </div>

<p>Example of Blog page with video:</p> <div class="sub_video"> <pre class="brush: xml"> <a class="bwWrapper single-image" href="blog-single.html"> <!-- <iframe src="http://player.vimeo.com/video/10112073" width="700" height="300"></iframe> --> </a> </pre> </div>

<hr> <h4>Contact Form</h4> <p> This template is going with working inbuilt contact form.</p>

<p>To make it worked simply open a file php/contact-send.php (line 6) and edit there an email address then upload all the files to your server.</p>

</section><!--/ #subpages -->

<section id="features">

<h3>Features and Elements</h3>

<hr> <h4>Elements</h4>

<p>You can find all elements examples on Elements page.</p>

<h6>Toggles and Accorgion</h6>

<p>Here for title .acc-trigger class is used, and for content - .acc-container one</p>

<div class="feat_toggles"> <pre class="brush: xml">

<span data-mode="toggle" class="acc-trigger"> <a href="#"> -- Toggle Title -- </a> </span>

<div class="acc-container">

<p> -- Toggle Content -- </p>

</div><!--/ .acc-container-->

</pre> </div>

<h6>Tabs</h6>

<p>The main and very important point using this element is that attribute href value for each link in .tabs-nav list has to match the id value in block .tab-content</p>

<div class="feat_tabs"> <pre class="brush: xml">

<div class="content-tabs">

<ul class="tabs-nav clearfix"> <li class="active"> <a href="#tab1"> -- Tab Title -- </a> </li>

... </ul>

<div class="tabs-container" style="height: 154px;"> <div id="tab1" class="tab-content" style="display: block;"> <p> -- Tab Content -- </p> </div>

...

</div>

</div>

</pre> </div>

<h6>Info Box</h6>

<div class="feat_info"> <pre class="brush: xml"> <div class="info-box">

<h2> -- Info Box Title -- </h2>

<p> -- Info Box Text -- </p>

<a class="button default small" href="#"> -- Read More Button -- </a>

</div><!--/ .info-box-->

</pre> </div>

<h6>Alert Boxes</h6>

<div class="feat_alert"> <pre class="brush: xml">

<p class="error"> -- Alert Text -- <a class="alert-close" href="#"></a> </p>

<p class="success"> -- Alert Text -- <a class="alert-close" href="#"></a> </p>

<p class="info"> -- Alert Text -- <a class="alert-close" href="#"></a> </p>

<p class="notice"> -- Alert Text -- <a class="alert-close" href="#"></a> </p>

</pre> </div>

<h6>Blockquote</h6>

<div class="feat_block"> <pre class="brush: xml">

<blockquote> <p> -- Blockquote Text -- </p> </blockquote>

</pre> </div>

<h6>Testimonials</h6>

<div class="feat_testimonials"> <pre class="brush: xml"> <div class="quote-box">

<ul class="testimonials">

<li>

<div class="quote-text"> -- Quote Text -- </div> <div class="quote-author"><b> --Quote Author --,</b> Manager</div>

</li> <li>

<div class="quote-text"> -- Quote Text -- </div> <div class="quote-author"><b>--Quote Author --,</b> Manager</div>

</li>

</ul>

</div><!--/ .quote-box-->

</pre> </div>

<h6>List Styles</h6>


<p>The peculiarity of this element is that fact, that each icon is output not as an image, but as font FontAwesome. So you simply need to add appropriate class for i tag.</p>

<p>Unordered List Style:</p>

<div class="feat_list_unor"> <pre class="brush: xml">

<ul class="list">

<li> <i class="icon-ok"></i> -- List Item -- </li>

... </ul>

</pre> </div>

<h6>Drop Caps</h6>

<div class="feat_drop"> <pre class="brush: xml">

<span class="dropcap">A</span>

<span class="dropcap circle dark">B</span>

<span class="dropcap color">C</span>

</pre> </div>

<h6>Tooltips</h6>

<div class="feat_tooltips"> <pre class="brush: xml"> <p> -- Some Text -- <a href="#" data-tooltip=" -- This is some information for our tooltip.-- " class="tooltip"> -- Link Text for out tooltip-- </a> -- Some Text -- </p> </pre> </div>

<h6>Social Icons</h6>

<p>Each icon element is a list element, here the main is to use already styled class with the social network name for li tag.</p>

<div class="feat_social"> <pre class="brush: xml">

<ul class="social-icons">

<li class="twitter"><a href="#">Twitter<span></span></a></li> <li class="facebook"><a href="#">Facebook<span></span></a></li> <li class="dribble"><a href="#">Dribble<span></span></a></li> <li class="vimeo"><a href="#">Vimeo<span></span></a></li> <li class="youtube"><a href="#">Youtube</a></li> <li class="rss"><a href="#">Rss<span></span></a></li> <li class="picasa"><a href="#">Picasa<span></span></a></li> <li class="stubleupon"><a href="#">StubleUpon<span></span></a></li> <li class="skype"><a href="#">Skype<span></span></a></li> <li class="dropbox"><a href="#">Dropbox<span></span></a></li> <li class="cat"><a href="#">Cat<span></span></a></li> <li class="linkedin"><a href="#">LinkedIn<span></span></a></li> <li class="plus"><a href="#">Plus<span></span></a></li> <li class="pinterest"><a href="#">Pintrest<span></span></a></li> <li class="blogger"><a href="#">Blogger2<span></span></a></li> <li class="flickr"><a href="#">flickr<span></span></a></li> <li class="delicious"><a href="#">Delicious<span></span></a></li> <li class="yahoo"><a href="#">Yahoo<span></span></a></li> <li class="evernote"><a href="#">Evernote<span></span></a></li> <li class="apple"><a href="#">Apple<span></span></a></li> <li class="behance"><a href="#">Behance<span></span></a></li> <li class="gplus"><a href="#">Gplus<span></span></a></li> <li class="digg"><a href="#">Digg<span></span></a></li> <li class="lastfm"><a href="#">LastFm<span></span></a></li> <li class="myspace"><a href="#">MySpace<span></span></a></li> <li class="social2"><a href="#">Social2<span></span></a></li> <li class="wordpress"><a href="#">Wordpress<span></span></a></li> <li class="mail"><a href="#">Mail<span></span></a></li>

</ul>

</pre> </div>

<h6>Buttons</h6>

<div class="feat_buttons"> <pre class="brush: xml">

<a class="button small turquoise" href="#">Button</a>

<a class="button medium blue" href="#">Button</a>

<a class="button big violet" href="#">Button</a>

</pre> </div>

<h6>Highlights</h6>

<div class="feat_highlights"> <pre class="brush: xml"> <p> -- Some text -- <a class="highlight" href="#">-- Highlight Text -- </a> -- Some text -- </p>

</pre> </div>

</section><!--/ features -->

<section id="css_files_and_structure">

<h3>CSS Files and Structure</h3> <p>All css files are located in css folder:</p> <ul> <li>font-awesome.css</li> <li>layout.css</li> <li>skeleton.css</li> <li>style.css</li> </ul> <p>I'm using one main CSS file and three addition styles, there are general styles for whole theme and reset styles inside main style.css. Many browser interpret the default behavior of html elements differently. By using a general reset CSS styles in this file, we can work round this. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.</p> <p>This template allows you easily change the color scheme of the site, and install the necessary patterns as a background for Boxed version. All the styles needed are already registered in our style.css file. All you need to do is to specify the appropriate class for tag body. Specifically, to set color scheme you can put class .color-1 - .color-16, for mixed color schemes .mixed-1 - .mixed-4, for shabby version - .scribble, for full width - .wide, for boxed - .boxed and here you cam also choose pattern .pattern-1 - .pattern-15. There are such classes installed in template by default: class="wide normal pattern-1 color-1". </p> <div class="css_stuct"> <pre class="brush: css">

/* ------------------------------------------------------------------- Stylesheet Guide ----------------------------------------------------------------------

01. Reset

02. Basic Elements 1. Clearfix 2. General Classes 3. Typography 4. Dropcap 5. Images 6. Fluid Width Video 7. Dividers 8. Forms 9. Contact and Comments Form 10. Buttons

03. Wrapper

04. Header 1. Logo 2. Phone 3. Social Icons 4. Main Navigation 5. Search

05. Slider

06. Page Header

07. Content 1. Main - Detail Columns - Project Carousel - Team - 404 Page - Clients - Pricing Tables

08. Blog 1. Image Post Slider 2. Page Navigation 3. About Author 4. Comments

09. Portfolio 1. Portfolio Filter 2. Portfolio Items 3. Portfolio Controls 4. Isotope Styles

10. Sidebar 1. Widgets - Default Widgets - Calendar - Popular Posts - Tags Cloud

11. Footer 1. Widgets - Flickr 2. Copyright

12. Widgets + Shortcodes 1. Accordion and Toggle 2. Testimonials 3. Tabs 4. Info Box 5. Notifications 6. List 7. Map 8. Tooltip

13. Other 1. Services 2. Back To Top

14. Styling


*/ </pre> </div> <p>If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.</p>

<p> If you need to change the color, size or font family for the main pages headings or titles of some blocks on pages, you can do this by finding and editing appropriate lines: </p> <pre class="brush: css"> .page-header h1{ change styles here } </pre>

<pre class="brush: css"> .section-title{ change styles here } </pre> <p>You can also change the styles in widgets as you wish:</p> <pre class="brush: css"> #sidebar .widget{ change styles here } </pre> <pre class="brush: css"> #sidebar .widget-title{ change styles here } </pre>


</section><!--/ css_files_and_structure -->

<section id="javascript">

<h3>JavaScript</h3> <p> This theme imports 12 Javascript files. You can see some help info, when click links which are below each regarding script:</p> <ol> <li><strong>jQuery</strong> - is a Javascript library that greatly reduces the amount of code that you must write. For more information, please visit <a href="http://www.jquery.com/">http://www.jquery.com/</a></li> <li><strong>jQuery Fancybox for images, videos, YouTube, iframes.</strong> Refer to the <a href="http://fancybox.net/">author's documentation</a> for additional notes on how to use it.</li> <li><strong>jQuery FlickrFeed.</strong> Refer to the <a href="http://www.newmediacampaigns.com/page/jquery-flickr-plugin">author's documentation</a> for additional notes on how to use it.</li> <li><strong>jQuery Cycle</strong> Refer to the <a href="http://jquery.malsup.com/cycle/">author's documentation</a> for additional notes on how to use it</li> <li><strong>jQuery Easing</strong> Refer to the <a href="http://gsgd.co.uk/sandbox/jquery/easing/">author's documentation</a> for additional notes on how to use it.</li> <li><strong>jQuery Gmap</strong> Refer to the <a href="http://www.smashinglabs.pl/gmap">author's documentation</a> for additional notes on how to use it.</li> <li><strong>jQuery Isotope</strong> Refer to the <a href="http://isotope.metafizzy.co">author's documentation</a> for additional notes on how to use it.</li> <li><strong>Modernizr</strong> Refer to the <a href="http://www.modernizr.com/download/#-touch-shiv-addtest-teststyles-prefixes">author's documentation</a> for additional notes on how to use it.</li> <li><strong>Touchswipe</strong> Refer to the <a href="http://labs.rampinteractive.co.uk/touchSwipe/docs/">author's documentation</a> for additional notes on how to use it.</li> <li><strong>Blackandwhite</strong> Refer to the <a href="http://www.gianlucaguarini.com/">author's documentation</a> for additional notes on how to use it.</li> <li><strong>Jcarousel</strong> Refer to the <a href="http://sorgalla.com/jcarousel/">author's documentation</a> for additional notes on how to use it.</li> <li><strong>Selectivizr</strong> Refer to the <a href="http://selectivizr.com/">author's documentation</a> for additional notes on how to use it.</li>

</ol> <p>To make it easier and more usable for you to work with the template we have gathered all options in one file config.js. Each setting value is commented, and only thing you need to do is just set the property needed.</p> <p>For example, if you need to turn off the fixed menu, simply set false for the fixed value in config.js file in line 10. You also have an ability to control images effect by hover. Originally all images are black-&-white, but on hovering they are getting colored. If you would like to make it vice verse - to makes images colored, but in hovering - black-&-white you simply need to change value for invertHoverEffect (line 139) and make it "true". If you would like to turn off this changing effect then put "false" for hoverEffect (line 134). However if invertHoverEffect has "true" then all images are always colored, if it has "false" then black-&-white </p> <div class="js_set"> <pre class="brush: js"> /* ---------------------------------------------------------------------- */ /* Theme Settings */ /* ---------------------------------------------------------------------- */

/* ---------------------------------------------------- */ /* Menu */ /* ---------------------------------------------------- */

var objNavMenu = { fixed: true // Boolean: (true/false) };

/* ---------------------------------------------------- */ /* Flickr */ /* ---------------------------------------------------- */

var objFlickr = { limit: 6, // Max 9 qstrings: {id : '54958895@N06'}, // ID itemTemplate: '<li><a class="bwWrapper" target="_blank" href="{{image_b}}" href="#"><img src="{{image_s}}" alt="{{title}}" /></a></li>' };

/* ---------------------------------------------------- */ /* Google Map */ /* ---------------------------------------------------- */

var objGoogleMap = { address: 'New York, USA', // City, County markers: [ {'address' : 'Grand St, New York'} // Street ], zoom: 14 // 0 - 21 };

/* ---------------------------------------------------- */ /* Layer Slider */ /* ---------------------------------------------------- */

var objLayerSlider = { width : '100%', height : '400px', responsive : true, //Boolean: (true/false) responsiveUnder : 940, sublayerContainer : 940, autoStart : true, //Boolean: If true, slideshow will automatically start after loading the page. (true/false) pauseOnHover : true, //Boolean: If ture, SlideShow will pause when you move the mouse pointer over the LayerSlider container. (true/false) firstLayer : 1, //Integer: LayerSlider will begin with this layer. (Positive Integer) animateFirstLayer : true, //Boolean: (true/false) randomSlideshow : false, //Boolean: (true/false) twoWaySlideshow : true, //Boolean: If true, slideshow will go backwards if you click the prev button. (true/false) loops : 0, forceLoopNum : true, //Boolean: (true/false) autoPlayVideos : false, //Boolean: (true/false) autoPauseSlideshow : 'auto', keybNav : true, //Boolean: Keyboard navigation. You can navigate with the left and right arrow keys. (true/false) touchNav : true, //Boolean: (true/false) skin : 'goodnex', //String: You can change the skin of the Slider. (name_of_the_skin) skinsPath : 'js/layerslider/skins/', //String: You can change the default path of the skins folder. Note, that you must use the slash at the end of the path. (path_of_the_skins_folder/) globalBGColor : '#f6f6f6', //CSS Color Methods. Background color of LayerSlider. You can use all CSS methods, like hexa colors, rgb(r,g,b) method, color names, etc. Note, that background sublayers are covering the background. navPrevNext : true, //Boolean: If false, Prev and Next buttons will be invisible. (true/false) navStartStop : false, //Boolean: If false, Start and Stop buttons will be invisible. (true/false) navButtons : false, //Boolean: If false, slide buttons will be invisible. (true/false) hoverPrevNext : true, //Boolean: (true/false) hoverBottomNav : false, //Boolean: (true/false) thumbnailNavigation : 'disabled', tnWidth : 100, tnHeight : 60, tnContainerWidth : '60%', tnActiveOpacity : 35, tnInactiveOpacity : 100 };

/* ---------------------------------------------------- */ /* Flex Slider */ /* ---------------------------------------------------- */

var objFlexSlider = { animation: "slide", //String: Select your animation type, "fade" or "slide" easing: "swing", // Refer to the link below http://easings.net/ direction: "horizontal", //String: Select the sliding direction, "horizontal" or "vertical" controlNav: false, //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage directionNav: true, //Boolean: Create navigation for previous/next navigation? (true/false) slideshowSpeed: 6000, //Integer: Set the speed of the slideshow cycling, in milliseconds animationSpeed: 600, //Integer: Set the speed of animations, in milliseconds randomize: false //Boolean: Randomize slide order };

/* ---------------------------------------------------- */ /* Carousel */ /* ---------------------------------------------------- */

var jCarousel = { animation: 600, easing: 'easeOutCubic' // Refer to the link below http://easings.net/ };

/* ---------------------------------------------------- */ /* Image Post Slider */ /* ---------------------------------------------------- */

var objPostSlider = { easing: 'easeInOutExpo', // Refer to the link below http://easings.net/ speed: 600, timeout: 5000 };

/* ---------------------------------------------------- */ /* Image Gallery Slider */ /* ---------------------------------------------------- */

var objGallerySlider = { easing: 'easeInOutExpo', // Refer to the link below http://easings.net/ speed: 600, timeout: 5000 };

/* ---------------------------------------------------- */ /* Testimonials */ /* ---------------------------------------------------- */

var objTestimonials = { easing: 'easeInOutExpo', // Refer to the link below http://easings.net/ speed: 600, timeout: 5000 };

/* ---------------------------------------------------- */ /* Black And White */ /* ---------------------------------------------------- */

var objBlackAndWhite = { hoverEffect: true, // default true // set the path to BnWWorker.js for a superfast implementation webworkerPath: '', // for the images with a fluid width and height responsive: true, invertHoverEffect: false, speed: {//this property could also be just speed: value for both fadeIn and fadeOut fadeIn: 400, // 400ms for fadeIn animations fadeOut: 800 // 800ms for fadeOut animations } };

/* ---------------------------------------------------------------------- */ /* end Theme Settings */ /* ---------------------------------------------------------------------- */

</pre> </div>


</section><!--/ javascript -->

<section id="psd_files">

<h3>PSD Files</h3> <p> I've included three psds with this theme:</p> <ol> <li>The Home page layout (Home-Page-Flex.psd)</li> <li>The Portfolio page layout (Portfolio-3-Columns.psd)</li> <li>The Blog page layout (Blog.psd)</li> <li>The Elements page layout (Elements.psd)</li> <li>The Pricing Tables page layout (Pricing-Tables.psd)</li>

</ol>

</section><!--/ psd_files -->

<section id="sources_and_credits">

<h3>Sources and Credits</h3> <p>I've used <a href="http://kreaturamedia.com/layerslider-responsive-wordpress-slider-plugin/"> Layer Slider</a> and <a href="http://www.woothemes.com/flexslider/">Flex Slider</a> jQuery plugins in this template.</p> <p>I've used the following images, icons or other files as listed.</p> <ul> <li><a href="http://photodune.net/item/five-goldfishes-moving-to-bigger-waters-change-and-improvement/186859">Five Goldfishes Moving To Bigger Waters, Change And Improvement</a></li> <li><a href="http://photodune.net/item/closeup-of-young-man-using-binoculars/191077">Closeup Of Young Man Using Binoculars</a></li> <li><a href="http://photodune.net/item/blueberries/621190">Blueberries</a></li> <li><a href="http://photodune.net/item/fashion-model-beauty-shot/941641">Fashion Model beauty shot</a></li> <li><a href="http://photodune.net/item/yacht-sailing-against-sunsetsailboatsepia-toned/1802903">Yacht Sailing against sunset.Sailboat.Sepia toned</a></li> <li><a href="http://photodune.net/item/paper-team/1879808">Paper team</a></li> <li><a href="http://photodune.net/item/extreme-ride/2359457">Extreme ride</a></li> <li><a href="http://photodune.net/item/coffe-time/2460171">Coffe time</a></li> <li><a href="http://photodune.net/item/scenic-route-through-the-mountains/2898652">Scenic Route Through the Mountains</a></li> <li><a href="http://photodune.net/item/hands-holding-tablet/2993669">Hands holding tablet</a></li> <li><a href="http://photodune.net/item/butterfly-and-eyeglasses/3111001">Butterfly and eyeglasses</a></li> <li><a href="http://photodune.net/item/your-world/3155499">Your World</a></li> <li><a href="http://photodune.net/item/sunset/524369">Sunset</a></li>

</ul>

<p>Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.</p>

</section><!-- sources_and_credits -->


</div><!--/ #documenter-content-->



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script> <script src="js/jquery.easing.1.3.min.js"></script> <script src="js/jquery.scrollto.min.js"></script> <script src="js/fancybox/jquery.fancybox.pack.js"></script> <script src="js/shCore.js"></script> <script src="js/shBrushCss.js"></script> <script src="js/shBrushXml.js"></script> <script src="js/shBrushJScript.js"></script> <script>SyntaxHighlighter.defaults['toolbar'] = false;SyntaxHighlighter.all();</script> <script src="js/custom.js"></script>



</body> </html>

File history

Click on a date/time to view the file as it appeared at that time.

Date/TimeDimensionsUserComment
current10:45, 16 July 2013 (3 KB)Lina Kara'In (talk | contribs)
  • You cannot overwrite this file.

There are no pages that link to this file.