<?xml version="1.0" encoding="utf-8"?>
<!-- generator="Joomla! - Open Source Content Management" -->
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
	<channel>
		<title>Basics</title>
		<description><![CDATA[Template Framework for Joomla]]></description>
		<link>https://www.yjsimplegrid.com/documentation/basics.html</link>
		<lastBuildDate>Tue, 03 Oct 2023 01:48:17 +0000</lastBuildDate>
		<generator>Joomla! - Open Source Content Management</generator>
		<atom:link rel="self" type="application/rss+xml" href="https://www.yjsimplegrid.com/documentation/basics.feed?type=rss"/>
		<language>en-gb</language>
		<managingEditor>youjoomla@gmail.com (YJ Simple Grid - CMS Template Framework)</managingEditor>
		<item>
			<title>Installation</title>
			<link>https://www.yjsimplegrid.com/documentation/basics/installation.html</link>
			<guid isPermaLink="true">https://www.yjsimplegrid.com/documentation/basics/installation.html</guid>
			<description><![CDATA[<h3>Download YJSG framework files</h3>
<p>
	Eximium is base YJ Simple Grid framework template. These are YJSG download options:
</p>
<ul>
	<li>
		<a href="http://www.youjoomla.com/joomla-extensions/yjsg-joomla-template-framework-plugin.html?opendowns#files_holder" target="_blank">
			Yjsg system plugin
		</a>
	</li>
	<li>
		<a href="http://www.youjoomla.com/joomla-extensions/yjsg-joomla-template-framework-plugin.html?opendowns#files_holder" target="_blank">
			Eximium Template Package
		</a> ( YJSG system plugin included ) 
	</li>
	<li>
		<a href="http://www.youjoomla.com/joomla-extensions/yjsg-joomla-template-framework-plugin.html?opendowns#files_holder" target="_blank">
			Eximium Demo
		</a>
		( full template demo as seen on the <a href="http://joomlatemplates.youjoomla.info/eximium/" target="_blank">demo page</a> )</li>
	<li>
		<a href="http://www.youjoomla.com/joomla-extensions/yjsg-joomla-template-framework-plugin.html?opendowns#files_holder">
			Eximium Template
		</a>
		( template installation file )</li>
</ul>
<br>
<h2> Install YJSG system plugin or Eximium Template Package</h2>
<p>
	Go to <b>Extensions -&gt; Extension manager</b> and <b>click</b> on <b>Choose File</b> button.
</p>
<p class="yjsgcenter">
	<span class="yjt_imgs bthin radiusb8 bspace yjt_none">
	<img src="/images/docs/30ext_manager.png" alt="">
	</span>
</p>
<br>
<p>
	Select previously downloaded YJSG system plugin or Eximium Template Package ( already includes YJSG system plugin ) <br /> and click on <b>Upload &amp; Install</b> button.
</p>
<br>
<h2> Assign Eximium as default template</h2>
<p>
	Go to <b>Extensions -&gt; Template manager</b>, <b>check</b> the check box next to <b>Eximium</b> template name, and <b>click</b>
	<b>Default</b> button in top admin menu.<br />Or click on star button icon next to the template name ( Joomla! 3.x only ).
</p>
<p class="yjsgcenter">
	<span class="yjt_imgs bthin radiusb8 bspace yjt_none">
	<img src="/images/docs/assign_eximium.png" alt="">
	</span>
</p>
]]></description>
			<author>youjoomla@gmail.com (Stefan)</author>
			<category>Basics</category>
			<pubDate>Sun, 22 Jun 2014 10:42:05 +0000</pubDate>
		</item>
		<item>
			<title>YJSG License</title>
			<link>https://www.yjsimplegrid.com/documentation/basics/yjsg-license.html</link>
			<guid isPermaLink="true">https://www.yjsimplegrid.com/documentation/basics/yjsg-license.html</guid>
			<description><![CDATA[<p class="blocknumber">
	<span class="bignumber">01</span> YjSimpleGrid is released under
	<a href="http://www.gnu.org/licenses/old-licenses/gpl-2.0.html" target="_blank">
		<strong>GNU/GPL V2 license.</strong>
	</a>
</p>
<p class="blocknumber">
	<span class="bignumber">02</span> You are free to use it for your personal or commercial projects.
</p>
<p class="blocknumber">
	<span class="bignumber">03</span> Copyright info at the beginning of all files is to be retained.
</p>
<p class="blocknumber">
	<span class="bignumber">04</span> If you are using YJSG for commercial offering, we ask you to retain<br /> visible "Powered by YJSG Framework logo" only if you are publicly<br /> showcasing Joomla! Templates powered by YJSG.
</p>
<p class="blocknumber">
	<span class="bignumber">05</span> If you wish to disable the YJSG link , you can do so from <a href="http://yjsimplegrid.com/documentation/basics/yjsg-template-manager.html">template manager</a>.
</p>]]></description>
			<author>youjoomla@gmail.com (Stefan)</author>
			<category>Basics</category>
			<pubDate>Sun, 22 Jun 2014 13:40:51 +0000</pubDate>
		</item>
		<item>
			<title>System Requirements</title>
			<link>https://www.yjsimplegrid.com/documentation/basics/system-requirements.html</link>
			<guid isPermaLink="true">https://www.yjsimplegrid.com/documentation/basics/system-requirements.html</guid>
			<description><![CDATA[<div class="yjtbox yjtb_blue lineup"><span class="yjtboxicon fa fa-info fa-lg"></span><h4 class="yjtboxtitle">YJSG Requirements info:</h4>
	<p>
		All  YJSG based templates will work properly on  Joomla! 2.5.x and UP. However we recommend using Joomla! 3.x.<br />Outlined requirements below are for Joomla! CMS only  and not for YJSG.
	</p>
</div>
<br>
<h2>Joomla! 2.5.x System Requirements</h2><br>
<table class="yjsg-table-bordered">
	<thead>
		<tr>
			<th>Software</th>
			<th>Recommended</th>
			<th>Min Requirement</th>
			<th>More info</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>PHP</td>
			<td>5.3+</td>
			<td>5.2.4+</td>
			<td>
				<a href="http://www.php.net" target="_blank">
					http://www.php.net
				</a>
			</td>
		</tr>
		<tr>
			<td>MySQL</td>
			<td>5.0.4 +</td>
			<td>5.0.4 +</td>
			<td>
				<a href="http://www.mysql.com" target="_blank">
					http://www.mysql.com
				</a>
			</td>
		</tr>
		<tr>
			<td>
				<h4>Supported webservers and modules</h4>
			</td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td>Apache</td>
			<td>2.x +</td>
			<td>2.x +</td>
			<td>
				<a href="http://www.apache.org" target="_blank">
					http://www.apache.org
				</a>
			</td>
		</tr>
		<tr>
			<td>Microsoft IIS</td>
			<td>7</td>
			<td>7</td>
			<td>
				<a href="http://www.iis.net" target="_blank">
					http://www.iis.net
				</a>
			</td>
		</tr>
		<tr>
			<td>Nginx</td>
			<td>1.1</td>
			<td>1.0</td>
			<td>
				<a href="http://wiki.nginx.org/" target="_blank">
					http://wiki.nginx.org/
				</a>
			</td>
		</tr>
		<tr>
			<td>mod_mysql</td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td>mod_xml</td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td>mod_zlib</td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</tbody>
</table><br>
<h2>Joomla! 3.x System Requirements</h2><br>
<table class="yjsg-table-bordered">
	<thead>
		<tr>
			<th>Software</th>
			<th>Recommended</th>
			<th>Min Requirement</th>
			<th>More info</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>PHP</td>
			<td>5.4+</td>
			<td>5.3.10+</td>
			<td>
				<a href="http://www.php.net" target="_blank">
					http://www.php.net
				</a>
			</td>
		</tr>
		<tr>
			<td>
				<h4>Supported databases</h4>
			</td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td>MySQL (InnoDB support required)</td>
			<td>5.1 +</td>
			<td>5.1 +</td>
			<td>
				<a href="http://www.mysql.com" target="_blank">
					http://www.mysql.com
				</a>
			</td>
		</tr>
		<tr>
			<td>MSSQL</td>
			<td>10.50.1600.1+</td>
			<td>10.50.1600.1+</td>
			<td>
				<a href="http://www.microsoft.com/sql" target="_blank">
					http://www.microsoft.com/sql
				</a>
			</td>
		</tr>
		<tr>
			<td>PostgreSQL</td>
			<td>8.3.18 +</td>
			<td>8.3.18 +</td>
			<td>
				<a href="http://www.postgresql.org/" target="_blank">
					http://www.postgresql.org/
				</a>
			</td>
		</tr>
		<tr>
			<td>
				<h4>Supported webservers and modules</h4>
			</td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td>Apache</td>
			<td>2.x +</td>
			<td>2.x +</td>
			<td>
				<a href="http://www.apache.org" target="_blank">
					http://www.apache.org
				</a>
			</td>
		</tr>
		<tr>
			<td>Microsoft IIS</td>
			<td>7</td>
			<td>7</td>
			<td>
				<a href="http://www.iis.net" target="_blank">
					http://www.iis.net
				</a>
			</td>
		</tr>
		<tr>
			<td>Nginx</td>
			<td>1.1</td>
			<td>1.0</td>
			<td>
				<a href="http://wiki.nginx.org/" target="_blank">
					http://wiki.nginx.org/
				</a>
			</td>
		</tr>
		<tr>
			<td>PHP Magic Quotes GPC off</td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td>mod_mysql</td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td>mod_xml</td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td>mod_zlib</td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</tbody>
</table><br>
<h2>Development Requirements</h2><br>
<p class="lead">
	For faster development we recommend folowing server bundles that can be installed on your computer. From the list below select your operating system than 
	download and install prefered server bundle.
</p>
<table class="yjsg-table-bordered">
	<thead>
		<tr>
			<th>MAC OS</th>
			<th>Windows</th>
			<th>Linux</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>
				<a href="http://www.apachefriends.org/en/xampp-macosx.html" target="_blank">
					XAMPP for Mac OS X
				</a>
			</td>
			<td>
				<a href="http://www.wampserver.com/en/" target="_blank">
					WampServer
				</a>
			</td>
			<td>
				<a href="http://www.apachefriends.org/en/xampp-linux.html" target="_blank">
					XAMPP for Linux
				</a>
			</td>
		</tr>
		<tr>
			<td>
				<a href="http://www.mamp.info/" target="_blank">
					MAMP &amp; MAMP Pro
				</a>
			</td>
			<td>
				<a href="http://www.easyphp.org/" target="_blank">
					EasyPHP
				</a>
			</td>
			<td>
				<a href="http://en.wikipedia.org/wiki/LAMP_(software_bundle)" target="_blank">
					LAMP Bundle
				</a>
			</td>
		</tr>
		<tr>
			<td>
				<a href="http://www.zend.com/en/products/server-ce/" target="_blank">
					Zend Server Community Edition
				</a>
			</td>
			<td>
				<a href="http://www.zend.com/en/products/server-ce/" target="_blank">
					Zend Server Community Edition
				</a>
			</td>
			<td>
				<a href="http://www.zend.com/en/products/server-ce/" target="_blank">
					Zend Server Community Edition
				</a>
			</td>
		</tr>
		<tr>
			<td>
				<a href="http://www.techiecorner.com/174/how-to-install-apache-php-mysql-with-macport-in-mac-os-x/" target="_blank">
					Mac Port
				</a>
			</td>
			<td>
				<a href="http://www.apachefriends.org/en/xampp-windows.html" target="_blank">
					XAMPP for Windows
				</a>
			</td>
			<td></td>
		</tr>
	</tbody>
</table><br>
<h2>Browser Requirements</h2><br>
<p class="lead">
	For accurate development we strongly recommend
	<a href="https://www.google.com/intl/en/chrome/browser/" target="_blank">
		<strong>Google Chrome browser</strong>
	</a>
	. It is faster and more accurate than any other browser.
</p>
<ul class="disc">
	<li>Google Chrome 10+</li>
	<li>Firefox 4+</li>
	<li>Safari 5+</li>
	<li>Internet Explorer 9+</li>
	<li>Opera 10+</li>
</ul>]]></description>
			<author>youjoomla@gmail.com (Stefan)</author>
			<category>Basics</category>
			<pubDate>Sun, 22 Jun 2014 10:42:05 +0000</pubDate>
		</item>
		<item>
			<title>YJSG Template Manager</title>
			<link>https://www.yjsimplegrid.com/documentation/basics/yjsg-template-manager.html</link>
			<guid isPermaLink="true">https://www.yjsimplegrid.com/documentation/basics/yjsg-template-manager.html</guid>
			<description><![CDATA[<div class="yjsg-row">
	<div class="yjsg-col-1">
		<p>
			YJSimpleGrid Framework Template Manager is one of the most interesting features our framework has to offer. We combined most used and most asked features and put them in a beautifully styled tabs for easy access and fast editing. YJSG templates admin is Ajax powered which speeds up the editing and saving process. Please see below YJSG template manager screenshots for more information.
		</p>
	</div>
</div>
<div class="yjsg-row">
	<div class="yjsg-col-1-5"> <a class="yjt_imgs bspace yjsg-lightbox-items yjt_none" href="/images/docs/system-lg.jpg" title="System check"><img src="/images/docs/system.jpg" alt="System check" /></a> </div>
	<div class="yjsg-col-4-5">
		<h2>System Check</h2>
		<p>
			System check tab will provide you with important information in case you turn on/off specific template settings like <span class="yjt_label yjtb_blue">LESS compiler</span> or <span class="yjt_label yjtb_blue">Component off switch.</span> It also provides live information about latest YJSG version.
		</p>
	</div>
</div>
<div class="yjsg-hr-hrsolid fasmall fa fa-code"></div>
<div class="yjsg-row">
	<div class="yjsg-col-1-5"> <a class="yjt_imgs bspace yjsg-lightbox-items yjt_none" href="/images/docs/style-lg.jpg" title="Style"><img src="/images/docs/style.jpg" alt="Style" /></a> </div>
	<div class="yjsg-col-4-5">
		<h2>Style</h2>
		<p>
			Style manager will let you adjust your default template style, default font size and default font-family. You can also use elements tags overrides to set specific font-family for assigned selectors. Visit
			<a href="http://yjsimplegrid.com/documentation/advanced/">
				Advanced docs
			</a>
			category to see how you can add more
			<a href="http://yjsimplegrid.com/documentation/extend/adding-custom-font-face-kits.html">
				@font-face kits
			</a>
			or
			<a href="http://yjsimplegrid.com/documentation/extend/adding-new-google-font-family.html">
				Google Fonts
			</a>
			.
		</p>
	</div>
</div>
<div class="yjsg-hr-hrsolid fasmall fa fa-code"></div>
<div class="yjsg-row">
	<div class="yjsg-col-1-5"> <a class="yjt_imgs bspace yjsg-lightbox-items yjt_none" href="/images/docs/topmenu-lg.jpg" title="Top menu"><img src="/images/docs/topmenu.jpg" alt="Top menu" /></a> </div>
	<div class="yjsg-col-4-5">
		<h2>Top menu</h2>
		<p>
			All YJSG based templates come with support for 5 different menu styles. SmoothDropdown,SmoothDropline, Dropdown, Dropline, Split Menu. There is also an option called <span class="yjt_label yjtb_blue">Menu Module Position</span> which will turn off built in menu type and let you use the top menu container as a module position. This way you can publish your custom menus in module position name <span class="yjt_label yjtb_blue">topmenupoz</span>.
		</p>
	</div>
</div>
<div class="yjsg-hr-hrsolid fasmall fa fa-code"></div>
<div class="yjsg-row">
	<div class="yjsg-col-1-5"> <a class="yjt_imgs bspace yjsg-lightbox-items yjt_none" href="/images/docs/layout-lg.jpg" title="Layout"><img src="/images/docs/layout.jpg" alt="Layout" /></a> </div>
	<div class="yjsg-col-4-5">
		<h2>Layout</h2>
		<p>
			Layout tab is where all the magic happens. This tab controls widths and layout for all available module grids. Each backend grid resembles frontend grid layout as you see it in template index.php file. This tab also contains your logo and header block settings which gives you additional control over your website layout.
		</p>
	</div>
</div>
<div class="yjsg-hr-hrsolid fasmall fa fa-code"></div>
<div class="yjsg-row">
	<div class="yjsg-col-1-5"> <a class="yjt_imgs bspace yjsg-lightbox-items yjt_none" href="/images/docs/additional-lg.jpg" title="Additional Features"><img src="/images/docs/additional.jpg" alt="Additional Features" /></a> </div>
	<div class="yjsg-col-4-5">
		<h2>Additional features</h2>
		<p>
			Additional features tab is where you would find custom parameters for Google Analytics, Text direction settings, IE6/7/8 notices, Mediaelement switch, footer links or site credits switch.
		</p>
		<h3>Here is full list of available Additional features parameters:</h3>
		<ul>
			<li>Enable/disable Google Analytics</li>
			<li>Enable/disable IE6/7/8 Notice</li>
			<li>Enable/disable nonscript Notice</li>
			<li>Enable/disable site tools</li>
			<li>Enable/disable font resizer</li>
			<li>Enable/disable RTL switch</li>
			<li>Set default Text Direction</li>
			<li>Enable/disable  H1 SEO tag</li>
			<li>Enable/disable Mediaelement.js</li>
			<li>Enable/disable Joomla! credits</li>
			<li>Custom footer copyright</li>
			<li>Remove Joomla generator tag</li>
			<li>Enable/disable Validation links</li>
			<li>Enable/disable Top scroll link</li>
		</ul>
	</div>
</div>
<div class="yjsg-hr-hrsolid fasmall fa fa-code"></div>
<div class="yjsg-row">
	<div class="yjsg-col-1-5"> <a class="yjt_imgs bspace yjsg-lightbox-items yjt_none" href="/images/docs/advanced-lg.jpg" title="Advanced Options"><img src="/images/docs/advanced.jpg" alt="Advanced Options" /></a> </div>
	<div class="yjsg-col-4-5">
		<h2>Advanced Options</h2>
		<p>
			Advanced Options tab contains responsive settings switch, built in sidebar settings, LESS compiler settings, Bootstrap version/off switch, frontpage news items control and component off switch.
		</p>
	</div>
</div>
<div class="yjsg-hr-hrsolid fasmall fa fa-code"></div>
<div class="yjsg-row">
	<div class="yjsg-col-1-5"> <a class="yjt_imgs bspace yjsg-lightbox-items yjt_none" href="/images/docs/customcode-lg.jpg" title="Custom code"><img src="/images/docs/customcode.jpg" alt="Custom code" /></a> </div>
	<div class="yjsg-col-4-5">
		<h2>Custom code</h2>
		<p>
			Custom code tab is where you can add your own CSS, javascript, before head tag, after head tag, before body tag and after body tag code snippets to further extend or override default YJSG behaviour.
		</p>
	</div>
</div>
<div class="yjsg-hr-hrsolid fasmall fa fa-code"></div>
<div class="yjsg-row">
	<div class="yjsg-col-1-5"> <a class="yjt_imgs bspace yjsg-lightbox-items yjt_none" href="/images/docs/menu-lg.jpg" title="Menus assignment"><img src="/images/docs/menu.jpg" alt="Menus assignment" /></a> </div>
	<div class="yjsg-col-4-5">
		<h2>Menus assignment</h2>
		<p>
			In this tab you can assign the YJSG based template to a specific menu item or change the style name.
		</p>
	</div>
</div>]]></description>
			<author>youjoomla@gmail.com (Stefan)</author>
			<category>Basics</category>
			<pubDate>Sun, 22 Jun 2014 13:42:48 +0000</pubDate>
		</item>
		<item>
			<title>Changing your website logo</title>
			<link>https://www.yjsimplegrid.com/documentation/basics/changing-your-website-logo.html</link>
			<guid isPermaLink="true">https://www.yjsimplegrid.com/documentation/basics/changing-your-website-logo.html</guid>
			<description><![CDATA[<p>
	There are 2 ways of changing your website logo. Overriding existing logo.png located in <code>site_root/templates/template_name/images/style_name/</code> folder or uploading new logo trough template manager.
</p>
<p>
</p>
<h2> Overriding existing logo.png</h2>
<p>
	To override existing logo.png file please open <code>logo.psd</code> ( requires
	<a href="http://www.adobe.com/products/photoshop.html" target="_blank">
		Photoshop
	</a>
	7.0 or higher ) change it to your own preference.<br>
</p>
<p>
	<br>
</p>
<p class="yjsgcenter">
	<span class="yjt_imgs bthin radiusb8 bspace yjt_none">
	<img src="/images/docs/logo1.png" alt="logo1">
	</span>
</p>
<br>
<br>
<p>
	Now replace existing <code>logo.png</code> file name in <code>site_root/templates/template_name/images/style_name</code> folder with new logo;
</p>
<br>
<p class="yjsgcenter">
	<span class="yjt_imgs bthin radiusb8 bspace yjt_none">
	<img src="/images/docs/logo2.png" alt="logo2">
	</span>
</p>
<br>
<br>
<p>
	Go to your homepage and refresh. Your new logo should be visible.<br>
	<span class="yjt_label yjtb_yellow">Note:</span> you might need to do "hard refresh" to clear existing browser cache for your logo image.
</p>
<p class="yjsgcenter">
	<span class="yjt_imgs bthin radiusb8 bspace yjt_none">
	<img src="/images/docs/logo3.png" alt="logo3">
	</span>
</p>
<br>
<br>
<h2> Change logo trough template manager</h2>
<p>
	Go to template manager tab name <b> Layout </b> hover over existing logo <b> than click on tool icon </b> the logo settings panel will drop down. <br />
	Click on <b> Select </b> button and select or upload your new logo:
</p>
<br>
<p class="yjsgcenter">
	<span class="yjt_imgs bthin radiusb8 bspace yjt_none">
	<img src="/images/docs/logo6.png" alt="logo6">
	</span>
</p>
<br>
<br>
<p>
	Select your new logo image and click on <b> Insert</b> button:
</p>
<br>
<p class="yjsgcenter">
	<span class="yjt_imgs bthin radiusb8 bspace yjt_none">
	<img src="/images/docs/logo4.png" alt="logo4">
	</span>
</p>
<br>
<br>
<p>
	Your logo will be applied to logo preview image. Now click on <b>Auto set params</b> to automatically set the logo height and width based on the image size:
</p>
<br>
<p class="yjsgcenter">
	<span class="yjt_imgs bthin radiusb8 bspace yjt_none">
	<img src="/images/docs/logo5.png" alt="logo5">
	</span>
</p>
<br>
<br>
<p>
	Click the <b> Save</b> button and go to your homepage and refresh..<br>
	<span class="yjt_label yjtb_yellow">Note:</span> you might need to do "hard refresh" to clear existing browser cache for your logo image.
</p>
<br>
<p class="yjsgcenter">
	<span class="yjt_imgs bthin radiusb8 bspace yjt_none">
	<img src="/images/docs/logo3.png" alt="logo3">
	</span>
</p>]]></description>
			<author>youjoomla@gmail.com (Stefan)</author>
			<category>Basics</category>
			<pubDate>Mon, 23 Jun 2014 17:03:38 +0000</pubDate>
		</item>
		<item>
			<title>YJSG Mega Menu Instructions</title>
			<link>https://www.yjsimplegrid.com/documentation/basics/yjsg-mega-menu-instructions.html</link>
			<guid isPermaLink="true">https://www.yjsimplegrid.com/documentation/basics/yjsg-mega-menu-instructions.html</guid>
			<description><![CDATA[<p>
	YJSG Template Framework comes with built in mega menu. This feature will help you create menu items groups or publish Joomla! modules within your menu items. After YJSG system plugin installation please got to <strong>Menus-&gt;ANY_MENU </strong>
</p>
<br>
<p class="yjsgcenter">
	<span class="yjt_imgs bthin radiusb8 bspace yjt_none">
	<img src="/images/docs/megamenu1.png" alt="megamenu1">
	</span>
</p>
<br>
<p>
	Select any menu item and click on tab Yjsg Mega Menu parameters.
</p>
<br>
<p class="yjsgcenter">
	<span class="yjt_imgs bthin radiusb8 bspace yjt_none">
	<img src="/images/docs/megamenu2.png" alt="megamenu2">
	</span>
</p>
<br>
<div class="yjsg-hr-hrsolid fasmall fa fa-code"></div>
<h2> Parameters explained</h2>
<p>
	Yjsg Mega Menu has 9 simple parameters which will help you setup your mega menu layout. Please read the parameters descriptions to understand the groups creation process.
</p>
<br>
<table class="yjsg-table-bordered">
	<thead>
		<tr>
			<th>Parameter name</th>
			<th>Parameter Description</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Sub Title</td>
			<td>Adds sub text under the menu item title</td>
		</tr>
		<tr>
			<td>Act as group holder?</td>
			<td>Define if this menu item should be group holder for its child items</td>
		</tr>
		<tr>
			<td>Group holder width</td>
			<td>Define the width of group holder. This should be total width of Sub groups widths combined. If you have 3 subgroups and each is 200px wide , your group holder width should be 600px wide. <span class="badge badge-important">Note:</span> do not include px, define width as 600.</td>
		</tr>
		<tr>
			<td>Number of sub groups</td>
			<td>This is the number of subgroups within group holder. Maximum is 5 but mostly used is 3.</td>
		</tr>
		<tr>
			<td>Sub groups width</td>
			<td>Here you can define the width of your sub groups. If left empty and you have 3 subgroups the groups holder width will be divided by 3 and each sub group will get that width. Example: 600 / 3 each sub group would be 200.<span class="badge badge-important">Note:</span> Add only 1 width declaration per line. Do not include px.</td>
		</tr>
		<tr>
			<td>Menu item type</td>
			<td>You can select what type of the item this would be . Module, module position, Normal link. If this item is a group holder please leave default value as Normal link.</td>
		</tr>
		<tr>
			<td>Display link title, image and sub title if link type is module? </td>
			<td>If set to <strong>NO</strong>, link title , link image and link description will not be displayed. This option is functional <span class="badge badge-important">ONLY</span> if link type is module or module position. This is useful if you like to show only module with its tile. For example Login Form</td>
		</tr>
		<tr>
			<td>Select one or more module</td>
			<td>Here you can select one or more modules to be displayed instead of the item link. If more the one module they will be displayed under each other starting with first selected.</td>
		</tr>
		<tr>
			<td>Select one or more position</td>
			<td>Here you can select one or more module positions to be displayed instead of the item link. If more the one module position they will be displayed under each other starting with first selected. <span class="badge badge-important">Note:</span> any module must be published in position you are looking for in order to be visible in this list. </td>
		</tr>
	</tbody>
</table>
<br>
<div class="yjsg-hr-hrsolid fasmall fa fa-code"></div>
<h2> Switching params on/off</h2>
<br>
<p class="lead">
	For your convenience and not to get confused with parameters names we have added simple switch that will hide parameters that are not in use depending on what type of the link you would like to use
</p>
<h4>Default view </h4>
<br>
<p class="yjsgcenter">
	<span class="yjt_imgs bthin radiusb8 bspace yjt_none">
	<img src="/images/docs/megamenu3.png" alt="megamenu3">
	</span>
</p>
<br>
<h4>Act as group holder set to Yes </h4>
<br>
<p class="yjsgcenter">
	<span class="yjt_imgs bthin radiusb8 bspace yjt_none">
	<img src="/images/docs/megamenu3_1.png" alt="megamenu3_1">
	</span>
</p>
<br>
<h4>Menu item type module </h4>
<br>
<p class="yjsgcenter">
	<span class="yjt_imgs bthin radiusb8 bspace yjt_none">
	<img src="/images/docs/megamenu3_2.png" alt="megamenu3_2">
	</span>
</p>
<br>
<h4>Menu item type module position </h4>
<br>
<p class="yjsgcenter">
	<span class="yjt_imgs bthin radiusb8 bspace yjt_none">
	<img src="/images/docs/megamenu3_3.png" alt="megamenu3_3">
	</span>
</p>
<div class="yjsg-hr-hrsolid fasmall fa fa-code"></div>
<h2>Example setup</h2>
<br>
<p>
	Follow these instructions to setup your first mega menu. The holder will contain 2 groups of 300px width each and 1 menu item in each group.
</p>
<h3> Step 1</h3>
<p>
	Go to your menu item ( we will use Home menu item  ) and add these settings in Yjsg Mega Menu Parameters tab:
</p>
<ul>
	<li> Set Sub title as anything you like. We used <strong>This is home</strong> .</li>
	<li> Set Act as group holder? to <strong>Yes</strong></li>
	<li> Set Group holder width  at <strong>600</strong></li>
	<li> Set Number of sub groups to <strong>2</strong></li>
	<li> Set Sub groups width<strong> 300</strong> one per line.</li>
	<li> Leave Menu item type at<strong> Normal link</strong></li>
</ul>
<p class="lead">
	You should have something like this
</p>
<p class="yjsgcenter">
	<span class="yjt_imgs bthin radiusb8 bspace yjt_none">
	<img src="/images/docs/megamenu4.png" alt="megamenu4">
	</span>
</p>
<br>
<h3> Step 2</h3>
<ul>
<li> Create 2 new menu items ( anything but separator ) and give them names as Group1 and Group2 .</li>
<li> Set your group holder ( Home in our case ) as <strong>their parent</strong></li>
<li> Create 2 more menu items, it can be any menu item type and set <strong>Group 1</strong> as <strong>parent</strong> for  the <strong>first</strong> and <strong>Group 2</strong> as <strong>parent</strong> for the <strong>second</strong> .</li>
<p class="lead">
	You should have this as your new mega menu
</p>
<p class="yjsgcenter">
	<span class="yjt_imgs bthin radiusb8 bspace yjt_none">
	<img src="/images/docs/megamenu5.png" alt="megamenu5">
	</span>
</p>
<div class="yjsg-hr-hrsolid fasmall fa fa-code"></div>
<h2> Add module or module positions</h2>
<p>
	To demonstrate adding module or module positions to menu items we will use our newly created mega menu item and just change the<br/>
	<strong>Menu item type</strong> for Group1 item and Group2 item to <strong>module</strong> and <strong>module position</strong>.
</p>
<h3> Step 1 adding module</h3>
<ul>
	<li> Go to your first child of Group 1 ( in our case Group1 item ) and change <strong>Menu item type</strong> to <strong>module</strong>. </li>
	<li>From <strong>Select one or more module</strong> param choose <strong>Login Form</strong></li>
	<li> Set <strong>Display link title, image and sub title if link type is module?</strong> to <strong>No</strong> and hit save.</li>
</ul>
<br>
<p class="yjsgcenter">
	<span class="yjt_imgs bthin radiusb8 bspace yjt_none">
	<img src="/images/docs/megamenu6_1.png" alt="megamenu5">
	</span>
</p>
<br>
<p class="lead">
	You should have your Login module displayed instead of the menu item.
</p>
<br>
<p class="yjsgcenter">
	<span class="yjt_imgs bthin radiusb8 bspace yjt_none">
	<img src="/images/docs/megamenu6.png" alt="megamenu6">
	</span>
</p>
<br>
<h3> Step 2 adding module position</h3>
<ul>
	<li> Go to your first child of Group 2 ( in our case Group2 item ) and change <strong>Menu item type</strong> to <strong>module position</strong>.</li>
	<li>From <strong>Select one or more module position</strong> param 	choose the module position you would like to display. </li>
	<li> Set <strong>Display link title, image and sub title if link type is module?</strong> to <strong>No</strong> and hit save.</li>
</ul>
<br>
<p class="yjsgcenter">
	<span class="yjt_imgs bthin radiusb8 bspace yjt_none">
	<img src="/images/docs/megamenu6_2.png" alt="megamenu5">
	</span>
</p>
<br>
<p class="lead">
	You should have your module position displayed instead of the menu item.
</p>
<br>
<p class="yjsgcenter">
	<span class="yjt_imgs bthin radiusb8 bspace yjt_none">
	<img src="/images/docs/megamenu7.png" alt="megamenu7">
	</span>
</p>
]]></description>
			<author>youjoomla@gmail.com (Stefan)</author>
			<category>Basics</category>
			<pubDate>Sun, 22 Jun 2014 13:41:44 +0000</pubDate>
		</item>
	</channel>
</rss>
