GE Trends Theme and GE Trends Framework created by cb-theme.com



1. Installation and Demo Content

---

2. Plugins

---

3. GE Trends Settings

---

4. Widgets

---

5. Page Templates

---

6. Post Templates

---

7. Styles

---

8. FAQ - Revolution Slider, Images, Page Builder, Common Questions

---

9. Responsive Design

---

10. Demo - Examples

---

11. Support

---

12. Credits

---

13. Icons

---

1. Installation

GE Trends has been created on WordPress 3.5, you will need at least this version to install the theme. But that is only recommended.

1.1 Installing through WordPress Dashboard
Go to the Appearance -> Themes -> Now click on the Install Themes on the top -> Choose Upload instead of Search -> Select and upload the theme.

Stylesheet Missing Error? Check below: http://support.envato.com/index.php?/Knowledgebase/Article/View/269/0/my-wordpress-theme-isnt-working-what-should-i-do

Now, click Activate Theme.

1.1a. Click Begin Installing plugin. Check them all and select install from bulk actions and apply it.

1.1b. Go to Plugins->Installed Plugins. Check your plugins and active them.

1.1c. Go to GE Trends->Demo Content and install demo content with widgets. Dont worry widget importer wont delete your current widgets.

1.2 Installing through FTP
Using some FTP client, like e.g. FileZilla or Total Commander upload contents of the unzipped package of GE Trends to "your root server directory/wp-content/themes". So it will look like this: "/your_root/wp-content/themes/cb-Day and Night".

Now go to Appearance -> Themes and activate Day and Night.

After that you will see GE Trends welcoming message allowing you to go directly to the Settings or importing Demo Content so everything will be like in the demo. We recommend you to install Demo Content if that is your first time with GE Trends.


1.3 Setting up Menu
Remember to set up Menu in "Appearance->Menus". Select Your Menu in Theme Locations-> main-menu.

1.4 Demo Content
Go to "GE Trends->Demo Content" and follow instructions. Check import widgets to yes if you want to copy them from our demo.
Installing demo content will make your website the same as our demo but without Revolution Slider and images. We have provided sample image so you can replace it where you want to.

To configure widgets just set up menus in wordpress dashboard->appearance->menus. And then go to appearance->widgets and drop Custom Menu widgets where you want.

2. Plugins

We strongly recommend you to install these plugins, they will make GE Trends friendlier for your users.

2.1 WP-PageNavi - it provides nice looking pagination. http://wordpress.org/extend/plugins/wp-pagenavi/

2.2 Yoast Breadcrumbs. http://wordpress.org/extend/plugins/breadcrumbs/

2.3 Contact Form 7.

2.4 WP Minfy.

2.5 WP-Retina-2x.

In order to install plugins click install plugins in the notice at the top.

3. GE Trends Settings

3.1 Homepage

Choose your home page in Wordpress Settings->Reading.

---

3.2 Styles

Background - here you can select background or pattern from images provided by GE Trends.

---

Your own background upload - here you can upload your own background, this option will override normal background option.

3.3 Sidebars

Here you can generate sidebars, assign them to categories and choose to show them or not. Default column, sidebar in posts and sidebar in pages options won't affect page or post if you will select your own sidebar or sidebar position in Custom GE Trends Template.

3.4 Slider

Use Revolution Slider
or
Anything slider - works only on the post categories. It will show every post from a given category. If you want to show only a image make sure you set up featured image in Post. Resize content - this option is to resize contents of a post to fit in a slider area.
You can also create sliders by using Custom Post/Page Template or Shortcodes.

3.5 Fullscreen Slider

Fullscreen Slider will show images attached to a page. You can attach images to a page via Media Library or Custom GE Trends Page Settings metabox.

Note: Fullscreen Slider should be used without normal slider because it will slow down the website.

3.6 Shortcodes

Here you can see the list of available shortcodes.

To insert shortcodes in a post or a page click + button in Visual Editor.

4. Page Templates

GE Trends offers 8 Custom Page Templates + 1 "Sitemap" based on normal Wordpress template system.

---

First of all, make sure that while editing a page GE Trends Custom Page is checked at the top of the page in Screen Options. It will show metabox below editor where you can set up your own options and choose a template for a page.

Header Settings - You can customize header for every page. Choose between normal header, background image that will stretch to fit in the browser window or a slider. Sliders used in pages can be configured in GE Trends menu in Slider tab. You cannot configure the same slider differently for different pages.

---

General Settings - this group of options affects all templates besides Sitemap. Here we can upload images the same as in Media Library, select sidebar position and choose which sidebar to show.

---

Default Page Template - it is a casual blank page in Wordpress.

---

Blog Template - this template will show a list of posts from a given category based on the settings like number of posts, number of columns, etc. The blog will show posts based on their templates.

---

Portfolio Template - here you can locate your portfolio based on posts from a given category.

---

Gallery Template - this template will show all images attached to the page in a gallery format.

---

Video Template - a simple page showing a YouTube, Vimeo or your own uploaded video. Supported formats are: mp4, 3gp, mov, fla.

---

Audio Template - a simple page showing your own uploaded mp3 file or a video from YouTube/Vimeo.

---

Slider Template - a page containing slider which can show images attached to the page or posts from a category.

---

Contact Template - a template containing contact form. Sidebars are not used in this template.

6. Post Templates

Header Settings - You can customize header for every post. Choose between normal header, background image that will stretch to fit in the browser window or a slider. Sliders used in posts can be configured in GE Trends menu in Slider tab. You cannot configure the same slider differently for different posts.

---

Default Template - a simple blank template.

---

Portfolio Template - a template showing large image on the top of the content. It is based on featured image.

---

Gallery, Video, Audio, Slider Template - the same as in Pages.

7. Styles

GE Trends provides 17 predefined color styles available to combine with transparent background images. The list is here: grey, bright red, blue, cocoa, dark brown, coffee 1, coffee 2, magenta, bordo, orange, green, green lemon, paradise, violet, purple pink, raspberry pink, barbie pink. See screenshots here

If you want to choose your own color use "Master color" changer- it will work like color styles, or just adjust the elements yourself.

INFO: GE Trends color styles will override other settings such as individual color settings.

If you will disable element background visibility and combine this setting with disabling borders or fixed layout GE Trends width will automatically adjust. It is intentionally.

8. FAQ - Revolution Slider, Images, Page Builder, Common Questions

Revolution Slider- Go to Revolution slider on the left in Wordpress Dashboard.
1. Add New slider.
2. Now go to GE Trends->Slider and select revolution slider and your slider name.
3. Go back to Revolution slider and edit it.
Change slider type to full width.
In appearance change padding to 0.
Shadow type: no shadow.
Settings for Navigation (going through inputs from the top):Bullet,Solo,Round,No
Click update slider on the left.
Now you can go back and click edit slides on your slider main page.

If you cant add new layer or you want to add slider caption styles like in our demo:
Edit some slide and go to the bottom. Inside Layer params click "Edit CSS File"
Click CTRL+A to select the content of this window. Now paste this code inside:

				@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,800,300,700);

.tp-caption.border2 {
border:2px solid #FFF;
}
.tp-caption.circlebig {
border-radius:300px;
-moz-border-radius:300px;
-webkit-border-radius:300px;
  width:300px;
  overflow:hidden;
  height:300px;
} .circlebig img {width:100%;height:auto;border-radius:300px;-moz-border-radius:300px;-webkit-border-radius:300px;}
.tp-caption.circlemedium {
border-radius:225px;
-moz-border-radius:225px;
-webkit-border-radius:225px;
  width:225px;
  overflow:hidden;
  height:225px;
} .circlemedium img {width:100%;height:auto;
border-radius:225px;
-moz-border-radius:225px;
-webkit-border-radius:225px;}
.tp-caption.circlesmall {
  width:150px;
  height:150px;
  overflow:hidden;
border-radius:150px;
-moz-border-radius:150px;
-webkit-border-radius:150px;
}.circlesmall img {width:100%;height:auto;
border-radius:150px;
-moz-border-radius:150px;
-webkit-border-radius:150px;}


.tp-caption.fullbg-blue {
	background: #0255cf;
}

.tp-caption.fullbg-black {
	background: #0e0e0e;
}
.tp-caption.fullbg-lblack {
	background: #1f1f1f;
}

.tp-caption.fullbg-magenta {
	background: #ac50a7 !important;
}

.tp-caption.fullbg-yellow{
	background: #ede73a !important;
}

.tp-caption.fullbg-grey{
	background: #777777 !important;
}
.tp-caption.fullbg-lightgrey{
	background: #ececec !important;
}

.tp-caption.fullbg-red {
	background: #ff2c34 !important;
}

.tp-caption.fullbg-orange {
	background: #fd9530 !important;
}

.tp-caption.fullbg-green {
	background: #8fbd2d !important;
}
.tp-caption.opa8 {opacity:0.8!important;}
.tp-caption.opa6 {opacity:0.6!important;}
.tp-caption.opa4 {opacity:0.4!important;}

.tp-caption.big_yellow{
            position: absolute; 
			color: #ffd658; 
			text-shadow: none; 
			font-weight: 400; 
			font-size: 100px; 
			line-height: 36px; 
			font-family: "Open Sans"; 
			padding: 0px 4px; 
			padding-top: 1px;
			margin: 0px; 
			border-width: 0px; 
			border-style: none; 
			background-color:transparent;	
								
		}

.tp-caption.big_bluee{
            position: absolute; 
			color: blue; 
			text-shadow: none; 
			font-weight: 400; 
			font-size: 78px; 
			line-height: 36px; 
			font-family: "Open Sans"; 
			padding: 0px 4px; 
			padding-top: 1px;
			margin: 0px; 
			border-width: 0px; 
			border-style: none; 
			background-color:transparent;	
								
		}
.tp-caption.big_white{
			position: absolute; 
			color: #fff; 
			text-shadow: none; 
			font-weight: 700; 
			font-size: 36px; 
			line-height: 36px; 
			font-family: Arial; 
			padding: 0px 4px; 
			padding-top: 1px;
			margin: 0px; 
			border-width: 0px; 
			border-style: none; 
			background-color:#000;	
			letter-spacing: -1.5px;										
		}

.tp-caption.big_orange{
			position: absolute; 
			color: #ff7302; 
			text-shadow: none; 
			font-weight: 700; 
			font-size: 36px; 
			line-height: 36px; 
			font-family: Arial; 
			padding: 0px 4px; 
			margin: 0px; 
			border-width: 0px; 
			border-style: none; 
			background-color:#fff;	
			letter-spacing: -1.5px;															
		}	
					
.tp-caption.big_black{
			position: absolute; 
			color: #000; 
			text-shadow: none; 
			font-weight: 700; 
			font-size: 36px; 
			line-height: 36px; 
			font-family: Arial; 
			padding: 0px 4px; 
			margin: 0px; 
			border-width: 0px; 
			border-style: none; 
			background-color:#fff;	
			letter-spacing: -1.5px;															
		}		

.tp-caption.medium_grey{
			position: absolute; 
			color: #fff; 
			text-shadow: none; 
			font-weight: 700; 
			font-size: 20px; 
			line-height: 20px; 
			font-family: Arial; 
			padding: 2px 4px; 
			margin: 0px; 
			border-width: 0px; 
			border-style: none; 
			background-color:#888;		
			white-space:nowrap;	
			text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);		
		}	
					
.tp-caption.small_text{
			position: absolute; 
			color: #fff; 
			text-shadow: none; 
			font-weight: 700; 
			font-size: 14px; 
			line-height: 20px; 
			font-family: Arial; 
			margin: 0px; 
			border-width: 0px; 
			border-style: none; 
			white-space:nowrap;	
			text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);		
		}
					
.tp-caption.medium_text{
			position: absolute; 
			color: #fff; 
			text-shadow: none; 
			font-weight: 700; 
			font-size: 20px; 
			line-height: 20px; 
			font-family: Arial; 
			margin: 0px; 
			border-width: 0px; 
			border-style: none; 
			white-space:nowrap;	
			text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);		
		}
					
.tp-caption.large_text{
			position: absolute; 
			color: #fff; 
			text-shadow: none; 
			font-weight: 700; 
			font-size: 40px; 
			line-height: 40px; 
			font-family: Arial; 
			margin: 0px; 
			border-width: 0px; 
			border-style: none; 
			white-space:nowrap;	
			text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);		
		}	
					
.tp-caption.very_large_text{
			position: absolute; 
			color: #fff; 
			text-shadow: none; 
			font-weight: 700; 
			font-size: 60px; 
			line-height: 60px; 
			font-family: 'Open Sans',Arial; 
			margin: 0px; 
			border-width: 0px; 
			border-style: none; 
			white-space:nowrap;	
			text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
			letter-spacing: -2px;		
		}
					
.tp-caption.very_big_white{
			position: absolute; 
			color: #fff; 
			text-shadow: none; 
			font-weight: 800; 
			font-size: 60px; 
			line-height: 60px; 
			font-family: Arial; 
			margin: 0px; 
			border-width: 0px; 
			border-style: none; 
			white-space:nowrap;	
			padding: 0px 4px; 
			padding-top: 1px;
			background-color:#000;		
					}	
					
.tp-caption.very_big_black{
			position: absolute; 
			color: #000; 
			text-shadow: none; 
			font-weight: 700; 
			font-size: 60px; 
			line-height: 60px; 
			font-family: Arial; 
			margin: 0px; 
			border-width: 0px; 
			border-style: none; 
			white-space:nowrap;	
			padding: 0px 4px; 
			padding-top: 1px;
			background-color:#fff;		
					}
					
.tp-caption.modern_medium_fat{
			position: absolute; 
			color: #000; 
			text-shadow: none; 
			font-weight: 800; 
			font-size: 24px; 
			line-height: 20px; 
			font-family: 'Open Sans', sans-serif; 
			margin: 0px; 
			border-width: 0px; 
			border-style: none; 
			white-space:nowrap;		
		}
.tp-caption.modern_medium_fat_white{
			position: absolute; 
			color: #fff; 
			text-shadow: none; 
			font-weight: 800; 
			font-size: 24px; 
			line-height: 20px; 
			font-family: 'Open Sans', sans-serif; 
			margin: 0px; 
			border-width: 0px; 
			border-style: none; 
			white-space:nowrap;		
		}
.tp-caption.modern_medium_light{
			position: absolute; 
			color: #000; 
			text-shadow: none; 
			font-weight: 300; 
			font-size: 24px; 
			line-height: 20px; 
			font-family: 'Open Sans', sans-serif; 
			margin: 0px; 
			border-width: 0px; 
			border-style: none; 
			white-space:nowrap;		
		}
.tp-caption.modern_big_bluebg{
			position: absolute; 
			color: #fff; 
			text-shadow: none; 
			font-weight: 800; 
			font-size: 30px; 
			line-height: 36px; 
			font-family: 'Open Sans', sans-serif; 
			padding: 3px 10px; 
			margin: 0px; 
			border-width: 0px; 
			border-style: none; 
			background-color:#4e5b6c;	
			letter-spacing: 0;										
		}
.tp-caption.modern_big_redbg{
			position: absolute; 
			color: #fff; 
			text-shadow: none; 
			font-weight: 300; 
			font-size: 30px; 
			line-height: 36px; 
			font-family: 'Open Sans', sans-serif; 
			padding: 3px 10px; 
  			padding-top: 1px;
			margin: 0px; 
			border-width: 0px; 
			border-style: none; 
			background-color:#de543e;	
			letter-spacing: 0;										
		}
.tp-caption.modern_small_text_dark{
			position: absolute; 
			color: #555; 
			text-shadow: none; 
			font-size: 14px; 
			line-height: 22px; 
			font-family: Arial; 
			margin: 0px; 
			border-width: 0px; 
			border-style: none; 
			white-space:nowrap;		
		}

.tp-caption.boxshadow{
		-moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
		-webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
		box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
	}
											
.tp-caption.black{
		color: #000; 
		text-shadow: none;		
	}	
					
.tp-caption.noshadow {
		text-shadow: none;		
	}	
					
.tp-caption a { 
	color: #ff7302; text-shadow: none;	-webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out;	 
}			
	
.tp-caption a:hover { 
	color: #ffa902; 
}
			

Click Update.

Importing Sliders - Go to Revoluton slider main page and click import slider. Then choose file from cb-getrends/docs/import folder. Main slider is slider.txt.

Adding sliders to normal pages - Edit your page then scroll to the middle and choose header type- slider. Then select Revolution Slider and select slider.



If you want to add for example black, white background for your layer, or you want to change the color of the button(bttn style):
Click on your layer and then at the bottom in Layer Params select the style you want.
For example- "light_text".
If you want to add to this text black background add " b_20" so it will look like this "light_text b_20".
b_20 - light black background
b_50 - more visible black background
w_20 - light white background
w_50 - more visible white background
round - rounded border. For example your style will look like this: "light_text b_20 round".

Buttons:
Select bttn style and add "round" for round borders. If you want to change button color add
"black","blue","green","orange","magenta". So for example a style for rounded green button will look like this: "bttn green round"
If you have some issues with the Revolution Slider you can contact the author here

That's It!


Images- If you want to show images in post thumbnails you need to edit your post or page and set Featured Image for it. The box is on the right bottom. If you dont see it click Screen Settings at the top and check it.


Page Builder- Page Builder is really simple. Just drag and drop elements and edit them - thats it. If you have any questions contact us on Themeforest.


Common Questions-
1. Newsletter Widget in the footer Activation- This was created for demo purposes. You can find and use some Newsletter plugin and place the code in this place.
2. Images for Galleries, Full Screen Slider etc.- These work on images attached to a post or page. So you MUST upload images to every post or page, you cant just choose them from Media Library.
Thats because Wordpress allows to attach one image to only one post or page.
If you want to attach images to a post click Upload Multiple Images In GE Trends Custom Page Area, Choose your images, wait until uploader finishes and then close the popup window. Go to the top and Click Update on the right.
Now you can see your images below upload mulitple images button. You can sort them as simple by drag 'n dropping.

3. Twitter Widget- you can create it here (if you are logged in): https://twitter.com/settings/widgets
Then just paste the code into Wordpress text widget.

4. One Page Setting Up: You can load demo content with one page option to see thing for yourself or you can create one page layout yourself.
First thing to do will creating new page in wordpress. then add couple of "Full Width" blocks. Full width block will be one your page section. Remember to set onepage name in block settings. You will need to add this name while creating menu. To create menu go to Appearance->Menus. Make sure that CSS Classes are set on in top right screen options menu. Now add new menu item- Custom item. URL is "#"+ your page name that you have set up in full width block options. For example: #onepagetest. Then On the right click little triangle right to your menu item and add to CSS Classes: onepage
Thats it.

5. Grid Posts(like in demo home): If you want to show your posts in grid style then while editing post make sure to set up the style in "GE Trends Custom Post" that is below wordpress post editor. The option you are looking for is "Recent Posts Block Style". You will need to test your grid layout to make it right because it loads item by their post date.

6. Portfolio Single Images: You can set up portfolio single items like in demo by changing page header type to background image. Then scroll a little lower and upload your background image.

7. Overlays for Revolution Slider: If you want to add overlays to your slide you can find them in your theme in img folder. Files you are looking for are white_overlay.png and black_overlay.png
Upload them by adding new image layer and then click "depth" on the right and make sure that ovelay is the first layer. That way it will be always behind your other layers.

8. Heading Classes: You can control heading font weight by adding 3 classes: bold,light,normal. In heading block you can add for example

				this is normal or bold part <span class="light">this part is in lighter font</span>
			

9. Deleting images from blocks(page builder): You can see hidden block options by clicking little triangles on the right of the block.

10. Contact Form 7 Captcha: In GE Trends we use captcha in our contact form template. But in Hidden Widget we use contact form 7. You can add captcha to this form by adding a plugin. Search for "contact form 7 captcha"

11. Performance and speed boosting: Use "w3 total cache" plugin to cache and speed up your website. GE Trends is fully compatible with it.
Another thing you can do is using cloudflare.com but thats paid service. Also read about CDN.
GE Trends is fast but if you are using multiple large images in one page layout these things can help.

13. Revolution Slider import- you can do that by import file from your wordpress theme folder - cb-GE Trends/docs/import/slider.txt. You can import the file while being in revolution slider plugin page.

14.Shop Sidebar- you can add widgets to shop sidebar by just dropping your widgets into the "shop" sidebar. Its the last sidebar in Appearance->Widgets page.

15. WooCommerce Thumbnail sizes: 205x205, for products use 300x300.

9. Responsive Design

GE Trends works on every mobile device. Try it yourself.

10. Demo – Examples

You can install Demo Content after activating GE Trends to see how the theme works by yourself.
Builder examples here: http://cb-theme.com/demo/day and night/shortcodes/.

11. Support

We offer support for our customers - answer guaranteed on theme page within 24 hours during working days.

12. Credits

Theme and "GE Trends Framework" created by cb-theme.com

---

Scripts used in GE Trends:

jscolor, JavaScript Color Picker, GNU Lesser General Public License, Jan Odvarko, http://odvarko.cz, http://jscolor.com
Black & White Effect, Gianluca Guarini, http://www.gianlucaguarini.com
AnythingSlider, Chris Coyier, http://css-tricks.com
jQuery UI, http://docs.jquery.com/UI
Video.js - HTML5 Video Player, LGPL v3 LICENSE INFO, Zencoder, Inc.
prettyPhoto, Stephane Caron, http://www.no-margin-for-errors.com
jQuery Masonry, David DeSandro, MIT license, http://masonry.desandro.com
Supersized - Fullscreen Slideshow jQuery Plugin, http://www.buildinternet.com/project/supersized
Adipoli jQuery Image Hover Plugin, http://jobyj.in/adipoli
Backstretch, http://srobbin.com/jquery-plugins/backstretch/
Revolution Slider on Extended License, http://codecanyon.net/item/slider-revolution-responsive-wordpress-plugin/2751380
Aqua Page Builder base, Syamil MJ
TGM Plugin Activation, http://tgmpluginactivation.com/
Jquery Custom Scrollbar - MZubala, https://github.com/mzubala/jquery-custom-scrollbar
Caroufredsel/, http://caroufredsel.dev7studios.com
Wordpress Widget Importer/Exporter, http://wordpress.org/plugins/widget-settings-importexport/

Icons From: http://findicons.com/pack/2536/soft_media_vol_1, Pixelden.com
Icons From: http://findicons.com/pack/2446/free_icons_pack, smorge.com
Social Icons From: http://findicons.com/pack/2229/social_media_mini, Paul Robert Lloyd
Font Awesome: http://fortawesome.github.io/Font-Awesome/

Images bought for commercial use from depositphotos.com

---

13. Font Awesome Icons:

You can use them in code:

				
				<i class="ICON NAME"></i>
			

Or Page Builder(Headings,Tabs,Callouts) just by clicking.