<?php 
/**
 * The template for displaying the admin "Customization" tab.
 *
 * @package WordPress
 * @subpackage Edition
 * @since Edition 1.0
 */
global $themewich_theme_info; ?>

<div class="bootstrap-wrapper">
    <div class="container bs-docs-container">
        <div class="row">
            <div class="col-md-7 doc-content" role="main">

              <!-- Customization
                ================================================== -->
                <div class="bs-docs-section">
                    <h1 id="customization" class="page-header">Customization</h1>

                    <p class="lead">
                        <?php echo esc_html( $themewich_theme_info->Name ); ?> is equipped with loads of features that allow you to customize your website.
                        Use the following passages as a guide and if you need any help along the way check out our
                         <a href="https://themewich.com/theme-support/" target="_blank">Support System</a>. 
                    </p>

                </div><!-- .bs-docs-section -->

             <!-- Theme Customizer
						    ================================================== -->
		<div class="bs-docs-section">
                  <h1 id="theme-customizer" class="page-header"> Theme Customizer </h1>
                  <p class="lead">Change the highlight color, navigation menu, tagline and adjust layout options using this tool. </p>
                  <p>Navigate to <strong> Appearance > Customize</strong> to open the Theme Customizer live preview and begin changing and customizing the look
                  of your website. See below for descriptions on the various tools and features of the Customizer. Once you have made changes you would like to keep, 
                  click <kbd>Save & Publish</kbd>. 
                  </p>
                  <p class="bs-example">
                     <img src="<?php echo get_template_directory_uri(); ?>/functions/help/images/appearance-customize.png" class="img-responsive" />
                  </p>
                 
                  <h3 id="options-features">Options and Features</h3>
                  <p>Below are the descriptions for the various tools and features of the Theme Customizer.</p>
                  <div class="table-responsive">
                        <h4>Customize:</h4>
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th style="min-width:200px;">Option</th>
                                    <th>Description</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><strong>Header Layout</strong></td>
                                    <td>Select whether you want the header next to or below the logo.</td>
                                </tr>
                                <tr>
                                    <td><strong>Search Box Default Text</strong></td>
                                    <td>Enter the text you'd like to appear in the search box, such as "Search...".</td>
                                </tr>
                            </tbody>
                        </table>
                        <h4>Updates:</h4>
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th style="min-width:200px;">Option</th>
                                    <th>Description</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><strong>Themeforest Username</strong></td>
                                    <td>Enter your Themeforest Username that you used to purchase the this theme.</td>
                                </tr>
                                <tr>
                                    <td><strong>Themeforest API Key</strong></td>
                                    <td>You can find your API key by Logging into Themeforest, visiting your Dashboard page then clicking the My Settings tab. 
                                    At the bottom of the page you will find your account API key and a button to regenerate it as needed.</td>
                                </tr>
                            </tbody>
                        </table>
                        <h4>Site Title and Tagline:</h4>
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th style="min-width:200px;">Option</th>
                                    <th>Description</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><strong>Site Title</strong></td>
                                    <td>Enter the title of your site here.</td>
                                </tr>
                                <tr>
                                    <td><strong>Tagline</strong></td>
                                    <td>Enter an optional tagline for your site here.</td>
                                </tr>
                            </tbody>
                        </table>
                        <h4>Colors:</h4>
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th style="min-width:200px;">Option</th>
                                    <th>Description</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><strong>Highlight Color</strong></td>
                                    <td>Select the highlight color, i.e links and hovers, for your site.</td>
                                </tr>
                            </tbody>
                        </table>
                        <h4>Navigation:</h4>
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th style="min-width:200px;">Option</th>
                                    <th>Description</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><strong>Main Navigation Menu</strong></td>
                                    <td><?php echo esc_html( $themewich_theme_info->Name ); ?> has one menu location option. You can select from already created Custom menus
                                        to set one as your main navigation menu.</td>
                                </tr>
                            </tbody>
                        </table>
                        <h4>Static Front Page:</h4>
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th style="min-width:200px;">Option</th>
                                    <th>Description</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><strong>Front Page Displays</strong></td>
                                    <td>Select <strong>Your latest posts</strong> if you'd like your Homepage to be the blog, or select <strong>Static 
                                        Page</strong> if you want a different page as the Homepage.</td>
                                </tr>
                                <tr>
                                    <td><strong>Front Page</strong></td>
                                    <td>Select or change which page you'd like for you homepage.</td>
                                </tr>
                                <tr>
                                    <td><strong>Posts Page</strong></td>
                                    <td>Select or change which page you'd like for the blog page.</td>
                                </tr>
                            </tbody>
                        </table>
                        <div class="bs-callout bs-callout-info" id="wordpress-install">
                              <p>
                              <span class="glyphicon glyphicon-info-sign"></span>
                              You may have already setup the Front and Posts Page displays during <a href="?page=theme-help&amp;tab=setup#page-setup" target="_blank">Page Setup</a>
                              </p>
                    	</div>  
                         <h4>Widgets Footer (Left, Center, Right) :</h4>
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th style="min-width:200px;">Option</th>
                                    <th>Description</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><strong>Add Widget</strong></td>
                                    <td>Add and reorder widgets in the various footer areas or visit <strong>Appearance > Widgets</strong> for more widget areas.</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                              
            </div>  
            <!--.bs-docs-section -->  
            
            
            <!-- 
                ================================================== -->
                <div class="bs-docs-section">
                    <h1 id="theme-options" class="page-header">Theme Options</h1>
			  <p> Use the Theme Options panel to customize layouts, add custom CSS, upload a logo, change the fonts, and adjust other theme settings. 
                    </p>
                    <p>After making changes to any of the following tabs be sure to click <kbd>Save Changes</kbd>. To reset the changes of the 
                    specific tab you're currently viewing click <kbd>Reset Section</kbd>, to reset all tabs in Theme Options click <kbd>Reset All</kbd>
                    <p class="bs-example">
                     <img src="<?php echo get_template_directory_uri(); ?>/functions/help/images/theme-options.png" class="img-responsive" />
                    </p>
                   
                    <div class="table-responsive">
                        <h3 id="general-settings">General Settings</h3>
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th style="min-width:200px;">Option</th>
                                    <th>Description</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><strong>Logo</strong></td>
                                    <td>Click <kbd>Upload</kbd> to upload your logo file, the recommended size is no wider than 300px.</td>
                                </tr>
                                <tr>
                                    <td><strong>Retina Logo</strong></td>
                                    <td>Select <kbd>On</kbd> to half the size of your logo for HDPI displays.</td>
                                </tr>
                                <tr>
                                    <td><strong>Favicon</strong></td>
                                    <td>Upload your <a href="#" data-toggle="tooltip" title="A website or tab icon">Favicon</a>, the recommended size is 16px by 16px.</td>
                                </tr>
                                <tr>
                                    <td><strong>Tracking Code</strong></td>
                                    <td>Paste in the <a href="#" data-toggle="tooltip" title="Generates detailed website traffic statistics">Google Analytics</a> tracking code.</td>
                                </tr>
                            </tbody>
                        </table>
                        <h3 id="customize">Customize</h3>
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th style="min-width:200px;">Option</th>
                                    <th>Description</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><strong>Navigation Layout</strong></td>
                                    <td>Choose whether you want the navigation menu to appear next to or below the logo.</td>
                                </tr>
                                <tr>
                                    <td><strong>Header Ad Area</strong></td>
                                    <td>Only when the navigation menu is below the logo, there is room for an advertisement to display to the right of the logo. Enter the HTML code or 
                                        advertisement code.</td>
                                </tr>
                                <tr>
                                    <td><strong>Header Margin</strong></td>
                                    <td>Enter a margin value to create spacing on top and below your header. The value is measured in pixels.</td>
                                </tr>
                                <tr>
                                    <td><strong>Search Box Default Text</strong></td>
                                    <td>Enter the text you would like to appear in the search box.</td>
                                </tr>
                                <tr>
                                    <td><strong>Custom CSS</strong></td>
                                    <td>Enter any custom CSS here.</td>
                                </tr>
                                <tr>
                                    <td><strong>Custom Javascript</strong></td>
                                    <td>Enter any custom javascript here.</td>
                                </tr>
                            </tbody>
                        </table>
                        <h3 id="top-bar">Top Bar</h3>
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th style="min-width:200px;">Option</th>
                                    <th>Description</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><strong>Left Side</strong></td>
                                    <td>Select if you want the Breaking New Ticker or Text to appear in the top left bar.</td>
                                </tr>
                                <tr>
                                    <td><strong>Top Text</strong></td>
                                    <td>Enter the text you'd like to appear in the top left bar space, only available when Text option is selected above.</td>
                                </tr>
                                <tr>
                                    <td><strong>Number of Posts to Cycle Through</strong></td>
                                    <td>Select the number of posts you'd like the Breaking New Ticker to cycle through.</td>
                                </tr>
                                <tr>
                                    <td><strong>Replace "Breaking" Title</strong></td>
                                    <td>Select whether to display the "Breaking" title in top bar.</td>
                                </tr>
                                <tr>
                                    <td><strong>Change "Breaking" Title</strong></td>
                                    <td>If Replace Breaking Title is "On" enter a new title for the ticker in the provided text box.</td>
                                </tr>
                                <tr>
                                    <td><strong>Timeline</strong></td>
                                    <td>Select the popularity timeline for the ticker.</td>
                                </tr>
                                <tr>
                                    <td><strong>Delay between posts</strong></td>
                                    <td>Choose the number of seconds to be delayed between each post.</td>
                                </tr>
                                <tr>
                                    <td><strong>Animation</strong></td>
                                    <td>Choose the animation for the slide changes of the ticker.</td>
                                </tr>
                                <tr>
                                    <td><strong>Right Side</strong></td>
                                    <td>Select if you want the Soical Icons or Text to display in the top right bar.</td>
                                </tr>
                                <tr>
                                    <td><strong>Top Text</strong></td>
                                    <td>Enter the text you'd like to appear in the top right space, only available when Text option is selected above.</td>
                                </tr>
                                <tr>
                                    <td><strong>Social Icons</strong></td>
                                    <td>Select from the list which Social Icons you'd like to appear in the top right bar.</td>
                                </tr>
                                <tr>
                                    <td><strong>Social Link URLs</strong></td>
                                    <td>Enter your link URLs for the icons you've selected.</td>
                                </tr>
                            </tbody>
                        </table>
                        <h3 id="post-settings">Post Settings</h3>
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th style="min-width:200px;">Option</th>
                                    <th>Description</th>
                                </tr>
                            </thead>
                            <tbody>
                            	  <tr>
                                    <td><strong>Automatic Drop Cap</strong></td>
                                    <td>Choose whether to display an automatic drop cap for the first letter of your post.</td>
                                </tr>
                                <tr>
                                    <td><strong>Default Featured Image Style</strong></td>
                                    <td>Choose whether to display the featured image as a full width or regular width image at the top of the post.</td>
                                </tr>
                                <tr>
                                    <td><strong>Default Post Sharing</strong></td>
                                    <td>Choose to display sharing options for the post, they will show to the right of the content.</td>
                                </tr>
                                <tr>
                                    <td><strong>Default Related Posts</strong></td>
                                    <td>Choose to display related posts at the bottom of your posts.</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                      
                      <h3 id="theme-fonts">Theme and Content Fonts</h3>
                      <p>These two tabs are where you'll change your font throughout the theme. You can also change the weight, making it bolder or less bold,
                        and size of the font as well. Sections have their own fonts seperate from the rest of the site. Use the button <kbd> Reset Section</kbd> if you'd like to undo any font changes and reset them to the theme's original. </p>
                        
                      <h3 id="updates">Updates</h3>
                      <p>Fill out the fields in this tab to get automatic theme updates</p>
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th style="min-width:200px;">Option</th>
                                    <th>Description</th>
                                </tr>
                            </thead>
                            <tbody>
                            	  <tr>
                                    <td><strong>Themeforest Username</strong></td>
                                    <td>Enter your themeforest.net username.</td>
                                </tr>
                                <tr>
                                    <td><strong>Themeforest API Key</strong></td>
                                    <td>You can find your API key by Logging into Themeforest, visiting your Dashboard page then clicking the My Settings tab. 
                                    At the bottom of the page you will find your account API key and a button to regenerate it as needed.
                                    </td>
                                </tr>
                                <tr>
                                    <td><strong>Your Version</strong></td>
                                    <td>Displays the version of the theme you are using.</td>
                                </tr>
                               </tbody>
                        </table>
                        
                        <h3 id="advanced">Advanced</h3>
                         <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th style="min-width:200px;">Option</th>
                                    <th>Description</th>
                                </tr>
                            </thead>
                            <tbody>
                            	  <tr>
                                    <td><strong>Show Help Page</strong></td>
                                    <td>Turn this off to hide the help page from the Wordpress dashboard.</td>
                                </tr>
                                </tbody>
                        </table>
                        
                        <h3 id="import-export">Import / Export Options</h3>
                         <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th style="min-width:200px;">Option</th>
                                    <th>Description</th>
                                </tr>
                            </thead>
                            <tbody>
                            	 <tr>
                                    <td><strong>Export Options</strong></td>
                                    <td>Here you can copy/download your current option settings. Keep this safe as you can use it as a backup should 
                                    anything go wrong, or you can use it to restore your settings on this site (or any other site).</td>
                                </tr>
                                 <tr>
                                    <td><strong>Import Options</strong></td>
                                    <td>Once you've downloaded a copy you can reimport it here, should you ever lose your Theme Options.</td>
                                </tr>
                                </tbody>
                        </table>
                        
</div><!-- .bs-docs-section -->


            </div><!-- .doc-content-->

            <?php get_template_part('functions/help/sidebar-templates/customization-sidebar'); ?>
        </div>
    </div>
</div>