<?php 
/**
 * Titan help page
**/ 

add_action('admin_menu', 'titan_theme_help');

function titan_theme_help() {
	add_theme_page('Titan help', 'Titan Help & Guide', 'read', 'titan_help','titan_help_page');
}

function titan_help_page(){ ?>
	<div class="container">
	
		<h3 class="center alt">&ldquo;Titan theme&rdquo; Documentation by &ldquo;StepFox&rdquo;</h3>
		
		<hr>
		
		<h1 class="center">&ldquo;Titan&rdquo;</h1>
		
		<div class="borderTop">
			<div class="span-6 colborder info prepend-1">
				<p class="prepend-top">
					<strong>
					Created: 20/04/2015<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 my theme. If you have any questions that are beyond the scope of this help file, please feel free to email us on the following mail: StepFoxHelp@Gmail.com . 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="#gallery">Gallery</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 Titan 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 Titan theme to Wordpress in one of two different ways<p>	- Extract the titantheme.zip and upload the extracted folder to the /wp-content/themes/ directory on your server.</p><p>- Or go to Appearance > Themes and click on the Install Themes tab at the top. Then click Upload and select titantheme.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 Titan screenshot.</li>
			</ol>


		<hr>
		<h3 id="xmldata"><strong>3) XML DATA</strong> - <a href="#toc">top</a></h3>
		<p>The Titan 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 Titan.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>Titan comes with a plethora 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>Customize.</p>
			<ol>
				<li><strong>Site Title, Tagline and Footer Copyright Text</strong><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><strong>Logo Options</strong>
<p>	- This is where you upload your main log, and also the smaller logo for the menu. You can additionaly upload your favicon and an apple touch icon. Logo should be 367x76 PNG image, the menu logo should be 100x36, while the favicon should be 16x16 PNG/GIF image. Apple touch icon should be 129x129 PNG/JPG.
</p></li>

<li><strong>Colors</strong>
<p><strong>- Menu Background Color</strong>: This is where you change the color for the header background.</p>
<p><strong>- Menu Border & Menu Font Color:</strong> Here you select the color for the borders in the header, and the color of the font on the menu.</p>
<p><strong>- Menu Hover Color:</strong> Use this option to change the color of the menu items when users hover over them.</p>
<p><strong>- Main Color:</strong> This option enables you to change the main color of the theme, such as the logo and social icons background, categories, links and widget titles.</p>
<p><strong>- Background Color:</strong> This is the color for the background of the site.</p>
<p><strong>- Search and Social Icons Color:</strong> You can also select the colors for the search icon and social icons. They can be either black or white.</p>
<img src="<?php echo get_template_directory_uri(); ?>/images/help/slika1.jpg"/>
</li>				

<li><strong>Design</strong>
<p><strong>- Body Width:</strong> This is where you select the width of the site basically. There are 3 options, 1903px(full width), 1560px and 1350px. One thing to remember note is, if you change the size of the body width from smaller to bigger, and you already have uploaded the images before, than you will need to reupload them with proper size, or sue the regenerate thumbnails plugin.</p>
<p><strong>- Widget Title Style:</strong> Here you have a dozen of options of how you want the widget titles to look like.</p>
<p><strong>- Image Effect:</strong> This option changes the effect that appears when users hover over the images on your site. You can select one out of the 5 options available.</p>
<p><strong>- Menu Follow:</strong> Here you can trun on or off the option for the menu, whether you want it follow the user when he is scrolling down, or not.</p>
<p><strong>- Header Width:</strong> This changes the width of the header, you can either select it to be full width, or as wide as the body, depending on what body width you have select previously.</p>
<p><strong>- Widget Load Effect:</strong> Here you select the way that widgets load up when they gat into the viewport. There are 10 options you can choose from.</p>
</li>

<li><strong>Typography</strong>
<p><strong>- Main Font:</strong> This is where you select the font for your site. The main font is present all throughout the site.</p>
<p><strong>- Menu Font:</strong> This is the font for the Menu only.</p>
<p><strong>- Menu Font Weight:</strong> This is where you determine the font wieght for the menu. You can select regular font, semi-bold and bold.</p>
<p><strong>- Widget Title Font:</strong> This is where you change the font for the widget titles only.</p>
<img src="<?php echo get_template_directory_uri(); ?>/images/help/slika2.jpg"/>
</li>

<li><strong>Header Posts</strong>
<p>- Here you select the tag that you want to be displayed in the header posts. Use a tag, for example header and then tag the posts you want to appear in the header with the same tag.</p>
</li>

<li><strong>Post Page Options</strong>
<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), etc. Also here you determine the size of the post page media, the size of the font for the content area and whether the title of the post page should be in all uppercase or normal. Another options you have here is to determine what the related posts on the bottom of the page are determined by. You can select related posts by category, tags or author.
</p></li>

<li><strong>Category & TV Page Options</strong>

<p>- This is all about the category and Tv pages. Here you determine how many posts should be visible per category page, whether the category page itself should start with a big image (you can select from 2 different styles) and what type of blogroll style should portray the remainig posts on the page. You can also select whather the category page should display the popular posts, and if so for what period of time, onlu the popular posts from last week, last month or forever. As for the Tv page here you select the widget style that displays the video posts under the main video. You can select one out of 3 styles.
</p></li>

<li><strong>Translate</strong>
<p>- If your websites 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><strong>Social Settings</strong>
<p>- This is where you fill in your social accounts. Just type your username/handle under the appropriate social media platform, and the rest will take care of itself.</p>
</li>
	
<li><strong>Tracking</strong>
<p>- This helps you keep track of statistics. Simply copy and paste the code from google analytics(or any other) to the appropriate field and youll be ready to view your visitor statistics.
</p></li>

<li><strong>Background Image</strong>
<p>- If you dont 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><strong>Navigation</strong>
<p>- Titan has spaces for three 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, <a href="http://codex.wordpress.org/Appearance_Menus_Screen">click here</a>. 
(http://codex.wordpress.org/Appearance_Menus_Screen)
</p></li>		
</ol>



	<hr>
		<h3 id="widgetareas"><strong>5) Widgets and Widget Areas</strong> - <a href="#toc">top</a></h3>
	<p>Titan comes packed with 20 custom widgets you can use almost everywhere. Basically every widget fits in every area, depending on what size you select for it, so you are free to experiment.
To activate a widget, go to Appearance > Widgets and drag and drop a widget from the Available Widgets box to the 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>
<img src="<?php echo get_template_directory_uri(); ?>/images/help/slika3.jpg"/>


<hr>
		<h3 id="widgetdesc"><strong>6) Widget Descriptions</strong> - <a href="#toc">top</a></h3>
	<p>Like we mentioned before, you can place almost any widget anywhere. Feel free experimenting with your layout, or use one of the suggested layouts we have already made. Remember almost every widget can assume one of 4 different forms (widths) like shown in the example below.</p>
<img src="<?php echo get_template_directory_uri(); ?>/images/help/slika4.jpg"/>
			<ol>
<li><strong>- Super Slider</strong><p>The super slider displays 4 posts. This widget has 2 forms, you can select either full width, or the width of the body. Also You can specify how many slides should the widget display. /p></li>
 
<li><strong>- Slider</strong>
<p>This is the typical slider widget. It displays posts based on tags. You can also select if the control thumbs are visible on the slider, or rather use the arrows as a navigation.</p></li>

<li><strong>- Featured Category with Links</strong>
<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><strong>- Carousel Widget</strong>
<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, and if you would like the author of those posts to be visible.</p></li>

<li><strong>- Big Featured Images</strong>
<p>This widget displays posts with bigger images. It also can display your review posts or select a category. If you want to display reviews, tick the show reviews only box. There is also an option that lets you choose how many posts should be visible. And the option to decide if you want the authors and the date of the posts to be visible.</p></li>

<li><strong>- Shortcode Widget</strong>
<p>This is a widget that lets you paste the shortcodes that you want to use on the theme. You can select the size of it, thus making sure that it does not mess up the layout. </p></li>

<li><strong>- Ticker</strong>
<p>This is a typical ticker widget that displays breaking news, or any tag that you select for it. It can be full width, or the width of the body maiking it perfect for you to combine with other widgets. You can also add a small sign that will separate the posts.</p></li>

<li><strong>- Blogroll 1</strong>
<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. Also the lenght of the excerpt is determined by you, and the visibility of the authors and date.</p></li>

<li><strong>- Blogroll 2</strong>
<p>Another widget that displays posts in a blog style, only with much bigger images. You have the same options as the previous Blogroll 1 widget, like the visibility of the author,date and the number of posts it should display.</p></li>

<li><strong>- Small Featured Images</strong>
<p>This widget displays a certain category of your choosing, and you have the option to select the visibilty of the author, and date. Also you can select how many posts are displayed, and the option to filter only the reviews.</p></li>

<li><strong>- Tabs Widget</strong>
<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><strong>- TV Widget</strong>
<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><strong>- TV-Ajax-Widget</strong>
<p>Same as the previous Tv-Widget, only this one displays the videos directly. Meaning that when you click on it the video plays eight away, rather than taking you to the video post page. It also sports a carousel so the user can easily select from the latest videos you have uploaded.</p></li>

<li><strong>- Trending Posts</strong>
<p>A simple widget that displays the most popular/visited posts on your site. You can also set up the number of posts displayed.</p></li>

<li><strong>- Thumbnails</strong>
<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><strong>- Jumping Posts</strong>
<p>This is that neat looking widget whose posts jump up and change color when you hover over them. You can assign a category to this widget, or set it as All Categories, which basically means that the widget will display your latest posts.</p></li>

<li><strong>- Most Commented</strong>
<p>A simple widget that displays the most commented posts on your site, along with the number of comments.</p> </li>

<li><strong>- About Us Widget</strong>
<p>Like its name suggests, this widgets lets you write something about yourself, so your visitors can get to know you better.</p></li>

<li><strong>- Ad Widget</strong>
<p>This is where you place your ads. Just copy the Ad code in the appropriate field, or paste the image url and where it should link to and you have the ad ready.</p></li>

<li><strong>- Video Widget</strong>
<p>This widget displays a video that can be played directly on the homepage, or where ever you place it. Just add a link to the video and thats it.</p></li>
 
			</ol>

<hr>
		<h3 id="images"><strong>7) Images</strong> - <a href="#toc">top</a></h3>
	<p>Titan 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. Titan theme will take care of the rest in generating the smaller thumbnails that show up in the various places around the site.
<img src="<?php echo get_template_directory_uri(); ?>/images/help/slika5.jpg"/>
</p>

		<hr>

		<h3 id="Videos"><strong>8) Videos</strong> - <a href="#toc">top</a></h3>
	<p>Titan 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. Titan 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.
<img src="<?php echo get_template_directory_uri(); ?>/images/help/slika6.jpg"/>
</p>

		<hr>
		
		<h3 id="reviews"><strong>9) Reviews</strong> - <a href="#toc">top</a></h3>
	<p>Its 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 your 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. 
<img src="<?php echo get_template_directory_uri(); ?>/images/help/slika7.jpg"/>
</p>
		<hr>

		<h3 id="gallery"><strong>10) Gallery</strong> - <a href="#toc">top</a></h3>
	<p>With Titan it is really easy to set up a gallery page. All you have to do is select the gallery format on the right hand side, and then just upload the images in the new gallery field that opens up under the content area. And that's about it.
<img src="<?php echo get_template_directory_uri(); ?>/images/help/slika8.jpg"/>
</p>
		<hr>

		<h3 id="cssFiles"><strong>11) CSS Files and Structure</strong> - <a href="#toc">top</a></h3><ul>
		<li>
		<strong>style.css</strong> - Main theme stylesheet 
		</li>		
		<li>
		<strong>/inc/t1t-editor-style.css</strong> - Editor theme stylesheet 
		</li>	
		<li>
		<strong>/inc/t1t-post-style.css</strong> - Post stylesheet 
		</li>
		<li>
		<strong>/inc/t1t-widget-presets.css</strong> - demo picker stylesheet 
		</li>
		<li>
		<strong>/css/buddypress.css</strong> - buddypress stylesheet 
		</li>
		<li>
		<strong>/css/bbpress.css</strong> - bbpress stylesheet 
		</li>
		<li>
		<strong>/inc/woocommerce.css</strong> - woocommerce stylesheet 
		</li>

		</ul>

		<hr>
		
		<h3 id="javascript"><strong>12) JavaScript</strong> - <a href="#toc">top</a></h3>
		
		<p>Javascript files.</p>
			<ul>
				<li><strong>/js/t1t-post.js</strong> - Post scripts</li>
				<li><strong>/js/t1t-scripts.js</strong> - Site scripts</li>
				<li><strong>/js/jquery.flexslider-min.js & jquery.flexslider.js</strong> - Flex Slider</li>
				<li><strong>/js/ajax-video-widget.js</strong> - video ajax</li>
				<li><strong>/js/t1t-one-button-install.js</strong> - install script</li>
				<li><strong>/js/respond.js</strong> - responsive script</li>
				<li><strong>/js/smoothscroll.js</strong> - smooth scroll script</li>
			</ul>

		<hr>
		
		<p><strong>THANK YOU VERY MUCH</strong></p>
<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. 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 } ?>