Image:ShDocumenter.css

From OpenWetWare

Jump to: navigation, search

ShDocumenter.css (file size: 3 KB, MIME type: text/plain)

Warning: This file may contain malicious code, by executing it your system may be compromised.

<!DOCTYPE html>

  

	
	
	
	
	
    
	
	 Goodnex HTML
	
	
	
	

	
	
	
	
	
	
	

	
	
	


	
	

	
“Goodnex HTML” Documentation by “ThemeMakers” v.1.0

"Goodnex Responsive HTML5 CSS3 Template"

Created:28/06/2013
By: ThemeMakers
http://themeforest.net/user/ThemeMakers
Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to contact us via Support Forums or create a personal ticket in our Support System.
Thanks so much!

The Main Features

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.

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.

HTML Structure

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.


				

				

				

				
-- Primary Content Here --
--Footer Widgets Here --
-- Footer Text Here --

Header Structure

Logo

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

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


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

				
Navigation

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


Content Structure

Sub-pages titles are located in class .page-header which adds appropriates styles.


						

				

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


Columns

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


						
1
1/2 Column

-- Text Column --

2
1/2 Column

-- Text Column --


Sidebar Structure

You can regulate slider position. For that you have to set appropriate class for block with id="content"

class="sbl" - left-side sidebar

class="sbr" - right-side sidebar

All widgets are placed within aside tag with id="sidebar" and use the same code structure:

						
						

-- Widget Title --

--Widget Content--

Home Page

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.


Home Page with Layer Slider

Layer Slider options and settings:


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

				

Home Page with Flex Slider

Flex Slider options and settings:


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

				

Subpages


Blog

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

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

Here is an example of Blog page with gallery:


						

Example of Blog page with video:


Contact Form

This template is going with working inbuilt contact form.

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.

Features and Elements


Elements

You can find all elements examples on Elements page.

Toggles and Accorgion

Here for title .acc-trigger class is used, and for content - .acc-container one


						
								 -- Toggle Title -- 
						

						

-- Toggle Content --

Tabs

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


						

-- Tab Content --

...
Info Box
								

-- Info Box Title --

-- Info Box Text --

-- Read More Button --
Alert Boxes

						

-- Alert Text --

-- Alert Text --

-- Alert Text --

-- Alert Text --

Blockquote

						

-- Blockquote Text --

Testimonials
								
  • -- Quote Text --
    --Quote Author --, Manager
  • -- Quote Text --
    --Quote Author --, Manager
List Styles

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.

Unordered List Style:


						
  • -- List Item --
  • ...
Drop Caps

						A

						B

						C

				
Tooltips
							

-- Some Text -- -- Link Text for out tooltip-- -- Some Text --

Social Icons

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

Buttons
Highlights
								

-- Some text -- -- Highlight Text -- -- Some text --

CSS Files and Structure

All css files are located in css folder:

  • font-awesome.css
  • layout.css
  • skeleton.css
  • style.css

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.

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

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


						 */
				

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.

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:

						.page-header h1{
								change styles here
						}
				
						.section-title{
								change styles here
						}
				

You can also change the styles in widgets as you wish:

						#sidebar .widget{
								change styles here
						}
				
						#sidebar .widget-title{
								change styles here
						}
				

JavaScript

This theme imports 12 Javascript files. You can see some help info, when click links which are below each regarding script:

  1. jQuery - is a Javascript library that greatly reduces the amount of code that you must write. For more information, please visit http://www.jquery.com/
  2. jQuery Fancybox for images, videos, YouTube, iframes. Refer to the author's documentation for additional notes on how to use it.
  3. jQuery FlickrFeed. Refer to the author's documentation for additional notes on how to use it.
  4. jQuery Cycle Refer to the author's documentation for additional notes on how to use it
  5. jQuery Easing Refer to the author's documentation for additional notes on how to use it.
  6. jQuery Gmap Refer to the author's documentation for additional notes on how to use it.
  7. jQuery Isotope Refer to the author's documentation for additional notes on how to use it.
  8. Modernizr Refer to the author's documentation for additional notes on how to use it.
  9. Touchswipe Refer to the author's documentation for additional notes on how to use it.
  10. Blackandwhite Refer to the author's documentation for additional notes on how to use it.
  11. Jcarousel Refer to the author's documentation for additional notes on how to use it.
  12. Selectivizr Refer to the author's documentation for additional notes on how to use it.

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.

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

								/* ---------------------------------------------------------------------- */
								/*	Theme Settings														  */
								/* ---------------------------------------------------------------------- */
								
								/* ---------------------------------------------------- */
								/*	Menu												*/
								/* ---------------------------------------------------- */

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

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

								var objFlickr = {
										limit: 6, // Max 9
										qstrings: {id : '54958895@N06'}, // ID
										itemTemplate: '
  • {{title}}
  • ' }; /* ---------------------------------------------------- */ /* 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 */ /* ---------------------------------------------------------------------- */

    PSD Files

    I've included three psds with this theme:

    1. The Home page layout (Home-Page-Flex.psd)
    2. The Portfolio page layout (Portfolio-3-Columns.psd)
    3. The Blog page layout (Blog.psd)
    4. The Elements page layout (Elements.psd)
    5. The Pricing Tables page layout (Pricing-Tables.psd)

    Sources and Credits

    I've used Layer Slider and Flex Slider jQuery plugins in this template.

    I've used the following images, icons or other files as listed.

    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.

    File history

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

    Date/TimeDimensionsUserComment
    current12:45, 16 July 2013 (3 KB)Lina Kara'In (Talk | contribs)

    There are no pages that link to this file.

    Personal tools