<?php
/* ------------------------------------------------------------------------ *
 * Seja Framework Version 3.0
 *
 * 4.3 - Custom Formatting Elements
 * ------------------------------------------------------------------------ */
 
 function seja_formatting_dropdown_callback($args) { 
    ?>
    
    <p><img src="<?php bloginfo( 'template_url' ); ?>/images/help/formats.png" width="850" height="312"></p>
  
   <?php
 }
 
 function seja_formatting_formatting_callback($args) { 
 	
	?>
    
    <h2>Formatting</h2>
    
    <h3>Subtitle</h3>
    <p><strong>Creates a h2 block relatively positioned closer to the element above</strong></p>
	<h3>Highlight</h3>
	<p><strong>Creates an alternative text colour as defined by your themes styles</strong></p>
	<h3>Blockquote    </h3>
	<p><strong>Creates a blockquote area</strong></p>
	<p> In HTML and XHTML, the blockquote element defines "a section [within a document] that is quoted from another source".<br />
    The syntax is &lt;blockquote&gt;&lt;p&gt;blockquoted text goes here&lt;/p&gt;&lt;/blockquote&gt;.(<a href="https://en.wikipedia.org/wiki/Blockquote_element">Wikipedia</a>)</p>
    <pre><blockquote><p>blockquoted text goes here</p></blockquote></pre>
    <h3>Scroll</h3>
    <p><strong>Create a scroll class for hyperlinks.</strong></p>
    <p>Smooth scroll works by default for #id links in the navigation or the .hentry content for posts and pages, however it is not automatic in other areas (such as the footer or on WooCommerce pages). This class can be used on links that do not utilise smooth scroll by default.</p>
    <h3>Lightbox </h3>
    <p><strong>Creates a lightbox link to your media (great for PDF's). </strong></p>
    <p>Requires the Lightbox and Colorbox plugin, configured with secondary lightbox enabled. This also works well with the &quot;Popup Page&quot; option within the Template section</p>
    <hr>
    <p><strong>Note: It is important to add your text prior to adding columns otherwise formatting errors can occur. </strong>Text can easily be edited afterwards. The easiest way to set up your columns is to write out each column as a paragraph and then select them. </p>
    <p>Example</p>
    <p><a href="#TB_inline?width=860&height=350&inlineId=popup-image-1" class="thickbox"><img src="<?php bloginfo( 'template_url' ); ?>/images/help/column-format-example-1.png" width="277" height="100" /></a> &nbsp; <a href="#TB_inline?width=860&height=350&inlineId=popup-image-2" class="thickbox"><img src="<?php bloginfo( 'template_url' ); ?>/images/help/column-format-example-2.png" width="275" height="100" /></a></p>
    <p>Due to limitations in the default WordPress editor it is important to select the correct columns; for example, if you select two 50% left columns the editor will merge them into one.</p>
    <p>Columns are 'floating' elements which can create display issues with blocks that appear after the float. There are a number of ways to mark the end of a floating section.</p>
    <p>Use the 'clearfloat' option <img src="<?php bloginfo( 'template_url' ); ?>/images/clearfloat.png" width="20" height="20" /> <br />
    <em>While this clears the float on the public page it will not make any changes to the editor. As a result you may see display errors within the editor.</em></p>
    <p>Use a Horizontal Rule <img src="<?php bloginfo( 'template_url' ); ?>/images/help/hr.png" width="20" height="20" /> </p>
    <p>Use a 100% content block    </p>
    <p><a href="#TB_inline?width=860&height=350&inlineId=popup-image-3" class="thickbox"><img src="<?php bloginfo( 'template_url' ); ?>/images/help/column-format-example-3.png" width="275" height="100" /></a></p>
        
    
   <?php
 }
 
 function seja_formatting_layout_callback($args) { 
 	
	?>
    <h2>1/2 Layout</h2>
    <p>Use this for two 50% columns    </p>
    <p>Full Width resets floats</p>
    <h2>1/3 Layout</h2>
    <p>Use this for three 33% columns</p>
    <p>Full Width resets floats</p>
    <h2>1/4 Layout</h2>
    <p>Use this for four 25% columns </p>
    <p>Full Width resets floats</p>
    <h2>Other Layouts</h2>
    <h3>33% Column and 66% Column</h3>
    <p>Create a two column layout with one wide column. </p>
    <h3>Full Width </h3>
    <p>resets floats</p>
    <h3>Custom Block</h3>
    <p>This is a theme specific block. Used to format repeating blocks throughout your site</p>
    <h3>Call to Action Block</h3>
    <p>As for the custom Block, this is a secondary repeating block</p>
    <h3>Hyperlink Block</h3>
    <p>Need to create a link out of a block of text?<br />
    A common solution to this is to wrap a div block of text with a hyperlink but, while this does work it is technically incorrect and can affect your SEO</p>
    <p>The hyperlink block uses a jQuery call to look for the first hyperlink within the block and apply it to the whole. The hyperlink can be created using the link buttons within the editor or by creating a custom link within an image.</p>
    <p><a href="#TB_inline?width=860&height=350&inlineId=popup-image-4" class="thickbox"><img src="<?php bloginfo( 'template_url' ); ?>/images/help/column-format-example-4.png" width="273" height="100" /></a> &nbsp; <a href="#TB_inline?width=370&height=220&inlineId=popup-image-5" class="thickbox"><img src="<?php bloginfo( 'template_url' ); ?>/images/help/custom-url.png" width="178" height="100" /></a></p>
    
    


    <hr>
    <h3>Multi-column (default)</h3>
<p><strong>Create a left floating column </strong>- By default this is a 50% column</p>

	<h3>Multi-column (alt)</h3>
	<p><strong>Create a second left floating column</strong> - You need to alternate columns if you wish to add more than one. </p>
	<p>Due to the limitations in the WordPress editor you must create different columns this way or they will merge to be a single element. It is also recommended that you create your content text first for the same reason. Creating columns and then trying to add text will create unexpected results.</p>
	<p>It is possible to edit and add additional text after the column has been formatted.</p>
	<h3>Full Width (Use to reset floats)</h3>
	<p><strong>Creates a 100% div block</strong></p>
	<p>Any floating elements can cause display issues with content further down the page. This can also be corrected with a &lt;hr&gt; (horizontal rule)</p>
	<h3>Custom Block</h3>
	<p><strong>A theme specific div block </strong></p>
	<p>Theme formatted blocks may not be configured for your theme.</p>
	<h3>Hyperlink Block	</h3>
	<p>Makes the whole div a link using jQuery to extract the first hyperlink within it. This is a symantically correct method of creating a link block. </p>
	
    <?php
 }
 
 function seja_formatting_template_callback($args) { 
 	
	?>
    <img src="<?php bloginfo( 'template_url' ); ?>/images/help/template.png" width="353" height="341" />
    <h3>Default Template</h3>
    <p><strong>Single Column</strong></p>
    <p>This is the default template setting</p> 
	<h3>Popup Page</h3>
	<p><strong>Light formatted page </strong></p>
	<p>A page with minimal formatting, no header and no menu. This works great as a pop-up, especially using the Lightbox with Colourbox plugin.</p>
	<h3>Scroll Page</h3>
	<p>Create a single-page site. For more information, see the <a href="<?php bloginfo( 'url' ); ?>/wp-admin/admin.php?page=seja-help-page&tab=scroll-page">Create a Scroll Page</a> tab</p> 
	<h3>Two Column Left</h3>
	<p><strong>Content with a left-hand column	</strong></p>
	<h3>Two Column Right</h3>
	<p><strong>Content with a right-hand column</strong></p>
	<p>Both the left and right columns can be further configured <a href="<?php bloginfo( 'url' ); ?>/wp-admin/admin.php?page=seja_template_settings.php&amp;tab=theme-layout">here</a>. It is also possible to create column versions in the blog section (main page, single page and archive page)</p> 
    
    <?php
 }
 
 function seja_formatting_other_callback($args) {
	 
	 ?>
     
     <div id="help-page=other">
       <h3>Larger form fields </h3>
       <p>Larger form fields can be created using the class large-form. You can either use this within the CF7 code or wrap the shortcode within the page</p>
       <p><a href="#TB_inline?width=1000&height=600&inlineId=popup-image-7" class="thickbox"><img src="<?php bloginfo( 'template_url' ); ?>/images/help/large-form.png" width="300" height="180" /></a></p>
     </div>
     
     <?php
	 
 }
 
 function seja_formatting_mobilemenu_callback($args) { 
 	
	?>
    
    <div id="help-page-mobile-menu">
    	<h3>Understanding the 'Mobile Menu' option and how it can help on content heavy sites</h3>
    	<p>While it is recommened that people viewing your site on a mobile device have the same access to content as people on traditional devices it is not always practical to display the same menu options, especially if you've got a lot page links and drop-down's in your primary menu.</p>
    	<p>By enabling the Mobile Menu, you add a second menu location to your template, the theme will then display a different menu for these devices.</p>
    	<p>To ensure that mobile users get access to the same content as desktop users, a third menu can be created linking the unlisted content, which can then be placed in a widget in the sidebar or footer<em><strong> (NOTE: Currently this content will display to all users).</strong></em><strong></strong></p>
    	<p>See example<br />
        <a href="#TB_inline?width=1000&height=600&inlineId=popup-image-6" class="thickbox"><img src="<?php bloginfo( 'template_url' ); ?>/images/help/menu-select-menu.png" width="200" height="213" /></a>
    	</p>
    
    </div>
    
    
    
    <!-- popups -->
    <?php add_thickbox(); ?>
    <div id="popup-image-1" style="display:none;">
        <img src="<?php bloginfo( 'template_url' ); ?>/images/help/column-format-example-1.png" width="850" height="312" alt="help" />
    </div>
    <div id="popup-image-2" style="display:none;">
        <img src="<?php bloginfo( 'template_url' ); ?>/images/help/column-format-example-2.png" width="850" height="312" alt="help" />
    </div>
    <div id="popup-image-3" style="display:none;">
        <img src="<?php bloginfo( 'template_url' ); ?>/images/help/column-format-example-3.png" width="850" height="312" alt="help" />
    </div>
    <div id="popup-image-4" style="display:none;">
        <img src="<?php bloginfo( 'template_url' ); ?>/images/help/column-format-example-4.png" width="850" height="312" alt="help" />
    </div>
    <div id="popup-image-5" style="display:none;">
        <img src="<?php bloginfo( 'template_url' ); ?>/images/help/custom-url.png" width="366" height="206" alt="help" />
    </div>
    <div id="popup-image-6" style="display:none;">
      <img src="<?php bloginfo( 'template_url' ); ?>/images/help/menu-select-menu.png" width="935" height="997" alt="help" />
    </div>
    <div id="popup-image-7" style="display:none;">
      <img src="<?php bloginfo( 'template_url' ); ?>/images/help/large-form.png" width="1000" height="600" alt="help" />
    </div>
	
    <?php
 }

?>