File:ShDocumenter.css

File
File history
File usage

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

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

<!-- Basic Page Needs

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

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

<title> Goodnex HTML</title>

<!-- Mobile Specific Metas

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

<!-- CSS

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

<script src="js/jquery.modernizr.js"></script>

</head> <body>

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

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

</nav>

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

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

</section>

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

<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 "content". The sidebar's (column #2) content is within a div with an id of "sidebar". The general template structure is the same throughout the template. Here is the general structure.</p>

</div>

</div>

</div>

</div>

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

</div>

</div>

</div>

</div>

</header>

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

</div>

-- Primary Content Here --

</section>

--Sidebar Widgets Here --

</aside>

</div>

</section>

--Footer Widgets Here --

-- Footer Text Here --

</div>

</div>

</footer>

</pre> </div>

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

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

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

#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="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>

</pre> </div>

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

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

</div>

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

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

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

</div>

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

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

</div>

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

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

</div>

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

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

</div>

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

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

</div>

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

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

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

</div>

</pre> </div>

</section>

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

<h3>Subpages</h3>

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

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

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

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

</div>

</article>

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

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

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

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

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

</div>

</pre> </div>

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

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

</pre> </div>

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

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

</div>

</pre> </div>

<h6>Alert Boxes</h6>

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

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

</pre> </div>

<h6>Testimonials</h6>

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

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

... </ul>

</pre> </div>

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

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

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

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

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

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

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

</div>

</body> </html>

File history

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

	Date/Time	Dimensions	User	Comment
current	10:45, 16 July 2013	(3 KB)	Lina Kara'In (talk \| contribs)

You cannot overwrite this file.

File usage

There are no pages that use this file.

File:ShDocumenter.css

File history

File usage

Navigation menu

Page actions

Page actions

Personal tools

Navigation

Search

research

Tools