<?php 
/**
 * Trending news help page
**/ 
if ( current_user_can('edit_files') ) {
add_action('admin_menu', 'trendingnews_theme_help');
}
function trendingnews_theme_help() {
	add_theme_page('Trending news help', 'Trending News Help & Guide', 'read', 'trendingnews_help','trendingnews_help_page');
}

function trendingnews_help_page(){ ?>
	<div class="container">
	
		<h3 class="center alt">&ldquo;Trending News&rdquo; Documentation by &ldquo;StepFox&rdquo;</h3>
		
		<hr>
		
		<h1 class="center">&ldquo;Trending News&rdquo;</h1>
		
		<div class="borderTop">
			<div class="span-6 colborder info prepend-1">
				<p class="prepend-top">
					<strong>
					Created: 17/06/2014<br>
					By: StepFox<br>
					Email: <a href="StepFoxHelp@gmail.com">StepFoxHelp@gmail.com</a>
					</strong>
				</p>
			</div><!-- end div .span-6 -->		
	
			<div class="span-12 last">
				<p class="prepend-top append-0">Thank you for purchasing our theme.
If you have any questions that are beyond the scope of this help file, please feel free to email via our user page contact form here.
Thanks so much!</p>
			</div>
		</div><!-- end div .borderTop -->
		
		<hr>
		
		<h2 id="toc" class="alt">Table of Contents</h2>
		<ol class="alpha">
			<li><a href="#disclaimer">Disclaimer</a></li>
			<li><a href="#installation">Installation</a></li>
			<li><a href="#xmldata">XML Data</a></li>
			<li><a href="#themeoptions">Theme Options</a></li>
            <li><a href="#widgetareas">Widgets and Widget Areas</a></li>
			<li><a href="#widgetdesc">Widget Descriptions</a></li>
            <li><a href="#images">Images</a></li>
            <li><a href="#Videos">Videos</a></li>
            <li><a href="#reviews">Reviews</a></li>
			<li><a href="#cssFiles">CSS Files and Structure</a></li>
			<li><a href="#javascript">JavaScript</a></li>
		</ol>

		<hr>
		<h3 id="disclaimer"><strong>1) Disclaimer</strong> - <a href="#toc">top</a></h3>
<p>We do offer support for the theme and its core features and functionality. We cannot guarantee that this theme will function with all 
third-party components and plugins. The Trending News theme is presented as is.</p>

		<hr>
		<h3 id="installation"><strong>2) Installation</strong> - <a href="#toc">top</a></h3>
			<ol>
				<li>Make sure that you have the latest version of Wordpress installed.</li>
				<li>Upload the Trending News theme to Wordpress in one of two different ways<p>	- Extract the downloaded .zip file and copy the extracted Trending News folder to the /wp-content/themes/ 		directory on your server.	</p><p>- Or extract the downloaded .zip file, and then zip back just the Trending News folder. Then go to 		Appearance > Themes and click on
 the Install Themes tab at the top. Then click Upload and select the newly 		created TrendingNews.zip and click Install Now.</p></li>
				<li>After you upload the theme, activate it by going to Appearance > Themes and click Activate underneath the Observer screenshot.</li>
			</ol>

		<hr>
		<h3 id="xmldata"><strong>3) XML DATA</strong> - <a href="#toc">top</a></h3>
		<p>The Trending News theme comes with dummy content via an XML file. This file includes dummy posts, pages, menus, tags, categories,
one dummy photo and two dummy ads. To install the XML data, go to Tools > Import, click on WordPress then select the 
trendingnews.xml file located in the XML Data folder of your original zip file. Then click Upload file and import. Choose a user to assign 
the posts to and make sure you click the Download and import file attachments checkbox and then click submit.</p>
		
		<hr>
		<h3 id="themeoptions"><strong>4) Theme Options</strong> - <a href="#toc">top</a></h3>
		<p>Trending News comes with lots of custom theme Options that allow you to play with the design and the layout without touching the code.
To edit the Theme Options, go to Appearance and next to the Trending News screenshot click on Customize.</p>
			<ol>
				<li>Site Title, Tagline and Footer Copyright Text<p>- This is where you set your site title, the tagline or slogan and the copyright text in the footer. Pretty much self explanatory</p></li>
				<li>Logo, Favicon and Apple Touch Icon<p>- The first option is Logo and Favicon, it allows you to upload your own logo, favicon and an apple touch icon.
Logo should be 222x90 PNG image, while the favicon should be 16x16 PNG/GIF image. Apple touch icon should be 129x129 PNG/JPG</p></li>


<li>Ticker and Category Color: <p>- Header Background Color: This is where you change the color for the logo background and the background of the social media icons.</p>
<p>- Header Background Color: This is where you change the color for the logo background and the background of the social media icons.</p>
<p>- Menu Background & Menu Font Color: Here you select the color for the menu background, and the color of the font on the menu.</p>
<p>- Link and Hover Color: Use this option to change the color of the links and the hover color of the clickable titles.</p>
<p>- Footer Background and Footer Font Color: This option enables you to change the color of the footer background, and the font color.</p>
<p>- Widget Border Color: Change the color of the borders of the widget title.</p>
<p>- Hover Color: This is the color for the hover effect on links, text and symbols on the site.</p>

<img src="<?php echo get_template_directory_uri(); ?>/images/help/slika1.jpg"/>
<p>- Main Font: This is where you select the font for your site. The main font is present all throughout the site.</p>
<p>- Menu Font: This is the font for the Menu only.</p>

<img src="<?php echo get_template_directory_uri(); ?>/images/help/slika2.jpg"/>


<p>- Layout: Another option that we included is the option that allows you to choose where the sidebar will be. You can choose from 2 
options that place the sidebar either on the left, or on the right side of the page.</p>

<img src="<?php echo get_template_directory_uri(); ?>/images/help/slika3.jpg"/>

<p>- Background Color: Pretty much self explanatory, this is where you select the color for the background of your site.</p>

<p>- Signs: This option lets you select and use a keyboard sign. The sign appears on the menu next to categories that have 
subcategories, and right before the smallest thumbs throught the site.</p>

<img src="<?php echo get_template_directory_uri(); ?>/images/help/slika4.jpg"/>

</li>

<li>Home Slider and Ticker
<p>- This is where you ste up the main slider. Unlike other widgets, the main slider can only be maniuplated through here. You have the 
option to show/hide the slider, and select it's transitions. You must also appoint a tag, with which you will tag the posts that you 
want to appear on the slider.</p>

<p>

- Here also you can find the options for the Ticker. Just like the slider, you need to appoint a tag that you will use on the posts. Also 
you have the option to select how many posts should be visible on the ticker at one time.</p>
<img src="<?php echo get_template_directory_uri(); ?>/images/help/slika5.jpg"/>
</li>


<li>Post Page Options
<p>- Like the title suggests, here you have the options for the post page. You basically can decide whether to show/ or hide the social 
buttons, tags, comments and navigation links (next/prev post), but, also the widgets that are pre-placed by us in the sidebar.</p>
</li>

<li>Translate
<p>- If your website's language is not English, this is where you set up the translation. There are a few words throughout the site like 
read more, search, share, etc.. that you might want to translate to your language.</p>
</li>

<li>Ads & Tracking
<p>- This helps you set up ads and keep track of statistics. Simply copy and paste the code from the ad to the appropriate field or paste 
the google analytics(or any other) code in the tracking field. The ads will automaticly appear in the live preview.</p>
</li>


<li>Background Image
<p>- If you don't want a solid color for a background, you can upload an image. Be it a nice landscape, a cool city skyline or a 
subtle pattern, here is where you do it.</p>
</li>

<li>Navigation
<p>- The Observer supports two types of custom menus. Here you choose where to display the menus you have created. See the 
screenshot below for reference. Select which menu appears in each location. You can edit your menu content on the Menus screen 
in the Appearance section. For more information on how to use the Wordpress custom menu feature, click <a href="http://codex.wordpress.org/Appearance_Menus_Screen">here (http://codex.wordpress.org/Appearance_Menus_Screen)</a>. 
 </p>
 <img src="<?php echo get_template_directory_uri(); ?>/images/help/slika6.jpg"/>
</li>
			</ol>
			
	<hr>
		<h3 id="widgetareas"><strong>5) Widgets and Widget Areas</strong> - <a href="#toc">top</a></h3>
	<p>Trending News comes packed with 14 custom widgets you can use almost everywhere. Basically every widget fits in every area, so you
 are free to experiment. There are 6 areas you can place your widgets in: The body, the sidebar, the footer (this is what your homepage 
consists of), and then the post page sidebar, category sidebar and page sidebar.

To activate a widget, go to Appearance > Widgets and drag and drop a widget from the Available Widgets box to any of the six different 
widget areas.  Or you can do the same by going to Appearance>Customize where you can see the widgets area at the bottom of the 
menu. This way you can see the widgets in the live preview right away.</p>
<p><img src="<?php echo get_template_directory_uri(); ?>/images/help/slika7.jpg"/></p>
<p><img src="<?php echo get_template_directory_uri(); ?>/images/help/slika8.jpg"/></p>

<hr>
		<h3 id="widgetdesc"><strong>6) Widget Descriptions</strong> - <a href="#toc">top</a></h3>
	<p>As we have already said, every widget fits in every area, it's up to you to sey up your layout, or use one of our preset layouts.</p>

			<ol>
<li><b>Main Slider</b><p>The Main slider is a full width widget, that displays images with size 802x499 pixels. This is the only widget that can't be moved around, you only have the option to show/hide, and it can be manipulated by going to Appearance>Customize
>Main slider.</p></li>
            
            
<li><b>Body Slider</b><p>This is a smaller slider that displays posts with a certain tag, and it fits perfectly in the body area. Great for making layout combinations with other widgets.</p></li>

<li><b>Featured Category</b><p>A widget that displays posts from a category of your choice. Enter a title for this widget and select the category you would 
like to use. The latest post of that category will be displayed with a bigger image and a little text excerpt from the post. You 
can also select "All Categories" to display the latest posts from all categories on your site.</p></li>


<li><b>Carousel Widget</b><p>
	This widget displays posts from a tag of your choice. Enter a title for this widget and select the tags you would like to use.
You can also select "All Tags" to display posts from all tags. There is also an option that lets you choose how many posts 
you would like to display.</p></li>

<li><b>Big Featured Category</b><p>
	This widget displays posts, with big images right next to eachother. You can choose how many posts it displays, and from which category.</p></li>

<li><b>Blog Posts</b><p>
	
A typical blog posts widget, that displays your posts in a blog roll. You can select how many posts you want to be displayed 
and of course, what category should they be.</p></li>

<li><b>Multiple Categories</b><p>
	This widgets lets you chosse up to 4 categories that will be displayed. The latest posts from those categories will be visible 
with the first one as an image, and the others with titles as links.</p></li>

<li><b>One Column Category</b><p>
	This widget displays a certain category of your choosing, in a single column layout. The latest post from that category will
 have a bigger thumbnail at the top, while the others have those cute small thumbs that you can place a sing in front of.
You can also choose how many of them should be visible.</p></li>

<li><b>Tabs Widget</b><p>
	This is a classical tabber widget, displaying the latest posts, the most popular ones and the latest comments from throughout 
the site. You have an option to change the title of each one of those, and select how many posts should be displayed.
</p></li>

<li><b>TV Widget</b><p>
	This widget automatically displayes the latest videos you have uploaded. When a visitor clicks on the video, he is taken to 
the video page directly. You can set how many of your latest videos should be visible on the widget.</p></li>
	
<li><b>Latest News</b><p>
	A simple widget that displays the latest posts from a certain category, or the latest posts in general, with no images, just links.

You can set up the number of posts displayed.</p></li>
	
	<li><b>Thumbnails</b><p>
	Just like the previous widget, it displays the latest posts from a category or the latest posts in general. The difference being that 
these posts are displayed with small thumbs. You can set how many of them should be visible. </p></li>


	<li><b>About Us Widget</b><p>
	Like it's name suggests, this widgets lets you write something about yourself, so your visitors can get to know you better. </p></li>
    
        <li><b>Category square</b><p>
	This widget displays posts with thumbnails. Whats different about it is that you can display your review posts here, but also
you can select a category, not just reviews. If you want to display reviews, tick the show reviews box. If you want the widget
to be displayed in one column tick the appropriate box. There is also an option that lets you choose how many posts
should be visible. </p></li>

			</ol>
		<hr>
	
<h3 id="images"><strong>7) Images</strong> - <a href="#toc">top</a></h3>
	<p>Trending News uses Wordpress' built-in featured image feature to handle image management. The recommended size for images to 
show properly on the site is 802x499. However, if a particular post is not going to be displayed on the Main Slider, than you can use a
 smaller image, but no smaller than 636x395.

To set the featured image for a post, go to Posts > Add New (or edit an existing post) and click the set featured image in the featured 
image box. If the desired image is not already uploaded simply click on upload image and then select one and click set as featured image.
Trending News theme will take care of the rest in generating the smaller thumbnails that show up in the various places around the site.</p>
<img src="<?php echo get_template_directory_uri(); ?>/images/help/slika9.jpg"/>

		<hr>
 
 
 <h3 id="Videos"><strong>8) Videos</strong> - <a href="#toc">top</a></h3>
	<p>Trending News uses Wordpress' built-in featured video feature for easy video management. When creating a post, select video under 
Format options and then simply copy the video link and paste it in the Featured Video area. Trending News will take care of the rest and your video will automatically appear on the video page as well. The video page is basically a page containing all the videos in your articles 
so far, in a nice layout which makes it easier to browse them and also more enjoyable to watch.</p>
<img src="<?php echo get_template_directory_uri(); ?>/images/help/slika10.jpg"/>

		<hr>   
  
   <h3 id="REVIEWS"><strong>9) Reviews</strong> - <a href="#toc">top</a></h3>
	<p>It's really easy to set up a review post. Just like the video post, all you need to do is, select review from the format options on your post 
page. Once you do that, new options will appear under the text area. Here you can upload the image and give the name of the subject 
you are reviewing, and add a few short pros and cons to it (good and bad). Also here you add how many parameters the subject will be 
reviewed on, and what numbers it scores on each on it. The total amount of the scores will be summed up and shown over the image.</p>
<img src="<?php echo get_template_directory_uri(); ?>/images/help/slika11.jpg"/>

		<hr>  
  

		<h3 id="cssFiles"><strong>10) CSS Files and Structure</strong> - <a href="#toc">top</a></h3>
		<p><strong>style.css</strong> - Main theme stylesheet</p> 
        <p><strong>/inc/tn-post-style.css</strong> - Post stylesheet</p> 
        <p><strong>/inc/tn-editor-style.css</strong> - Editor stylesheet</p> 





		<hr>
		
		<h3 id="javascript"><strong>11) JavaScript</strong> - <a href="#toc">top</a></h3>
		
		<p>This theme imports three Javascript files.</p>
			<ul>
				<li><strong>/js/tn-scripts.js</strong> - Site scripts</li>
                <li><strong>/js/tn-post.js</strong> - Post scripts</li>
				<li><strong>/js/jquery.flexslider-min.js & jquery.flexslider.js</strong> - Flex Slider</li>
				<li><strong>/js/respond.min.js</strong> - Responsive design script</li>
			</ul>

		<hr>
		
		<p>Once again, thank you so much for purchasing this theme. As I said at the beginning, we'd be glad to help you if you have any questions 
relating to this theme. No guarantees, but we'll do our best to assist.</p> 
		
		<p class="append-bottom alt large"><strong>StepFox</strong></p>
		<p><a href="#toc">Go To Table of Contents</a></p>
		
		<hr class="space">
	</div><!-- end div .container -->

<?php } ?>