<p>One of hottest features in JSN Time is extended styles adapted for 5 most popular Joomla! extension: <strong>K2</strong>, <strong>Community Builder</strong>, <strong>Virtue Mart</strong>, <strong>JEvents</strong> and <strong>JoomGallery</strong>.</p>
<p>Technically extended styles are overrides of default extensions style (images + CSS) and located in folder <strong>/ext</strong> inside template folder. Some extensions have their own template system and you might want to turn off extended style thru template parameter in order to use those native templates.</p>
<p class="text-info">The extensions discussed here are not included in the template package and you have to download separately. You can download the extensions on Joomla! Extensions Directory <a href="http://extensions.joomla.org/">http://extensions.joomla.org/</a></p>
<h3>K2</h3>
<p>Extended style for K2 includes adapted tabs color, additional module styles, fixed alignment issues and some other minor visual enhancement.</p>
<h4>Component styling</h4>
<p>Here is how K2 component will look like after extended styles applied.</p>
<p class="content-center"><img width="600" height="445" src="images/content/template-details/advanced-stuff/extended-styles/ext-k2-style-after.png" alt="K2 Style Applied" /></p>
<h4>Module styling</h4>
<p>Besides from extended component styling you can use template module styles for K2 modules as well.</p>
<div class="grid-layout">
<div>
<p class="content-center"><img width="300" height="455" src="images/content/template-details/advanced-stuff/extended-styles/ext-k2-module-content.png" alt="K2 Style Module Content" /></p>
<ul><li>K2 Content Module (mod_k2_content) with module style <strong>box-green jsn-icon-article</strong> applied</li></ul>
</div>
<div>
  <p class="content-center"><img src="images/content/template-details/advanced-stuff/extended-styles/ext-k2-module-comment-login.png" width="300" height="580" alt="K2 Style Module Comment" /></p>
  <ul>
    <li>K2 Comments Module (mod_k2_comments) with module style <strong>box-blue jsn-icon-comment</strong> applied</li>
    <li>K2 Login Module (mod_k2_login) with module style <strong>box-yellow jsn-icon-user</strong> applied </li>
  </ul>
</div>
</div>
<hr class="line-dots" />
<h3>Community Builder</h3>
<p>Extended style for Community Builder includes adapted dropdown menu style, tabs color, additional module styles and some other minor visual enhancement.</p>
<h4>Component styling</h4>
<p>Here is how Community Builder component will look like after extended styles applied.</p>
<p class="content-center"><img width="600" height="500" src="images/content/template-details/advanced-stuff/extended-styles/ext-cb-profile.png" alt="CB Profile Style" /><br />
Adapted drop-menu style and tabs color on <strong>CB Profile page</strong></p>
<h4>Module styling</h4>
<p>Besides from extended component styling you can use template module styles for Community Builder modules as well.</p>
<p class="content-center"><img width="300" height="360" src="images/content/template-details/advanced-stuff/extended-styles/ext-cb-modules.png" alt="CB Module Style" /></p>
<p>In the example above:</p>
<ul>
  <li>CB Login Module (mod_cblogin) with module style <strong>box-yellow jsn-icon-user</strong> applied</li>
  <li>CB Online Module (mod_comprofilerOnline) with module style <strong>box-blue jsn-icon-online</strong> applied</li>
  <li>CB Workflows (mod_comprofilermoderator) with module style<strong> box-grey jsn-icon-selection</strong> applied</li>
</ul>
<hr class="line-dots" />
<h3>Virtue Mart</h3>
<p>Extended style for Virtue Mart includes adapted Add to Cart button, additional module styles, fixed alignment issues, redesigned checkout-steps icons and some other minor visual enhancement.</p>
<h4>Component Styling</h4>
<p class="content-center"><img width="600" height="420" src="images/content/template-details/advanced-stuff/extended-styles/ext-vm-product.png" alt="VM Product Style" /><br />Fixed alignment issues on <strong>Product Details</strong> page</p>
<h4>Module styling</h4>
<p>Besides from extended component styling you can use template module styles for Virtue Mart modules as well.</p>
<p class="content-center"><img width="300" height="420" src="images/content/template-details/advanced-stuff/extended-styles/ext-vm-module.png" alt="VM Module Style" /></p>
<ul>
  <li>VirtueMart Module (mod_virtuemart) with module style <strong>box-blue jsn-icon-cart</strong> applied.</li>
</ul>
<hr class="line-dots" />
<h3>JEvents</h3>
<p>Extended style for JEvents includes redesigned calendar navigation icons and calendar table, adapted table header color, additional module styles, fixed alignment issues and some other minor visual enhancement.</p>
<h4>Component Styling</h4>
<p class="content-center"><img width="600" height="220" src="images/content/template-details/advanced-stuff/extended-styles/ext-jevents-navigation.png" alt="JEvents Navigation Style" /><br />Totally redesigned calendar navigation icons</p>
<p class="content-center"><img width="600" height="455" src="images/content/template-details/advanced-stuff/extended-styles/ext-jevents-monthly.png" alt="JEvents Monthly Style" /><br />Adapted calendar table header color</p>
<p class="content-center"><img width="600" height="550" src="images/content/template-details/advanced-stuff/extended-styles/ext-jevents-weekly.png" alt="JEvents Weekly Style" /><br />
Adapted table header color on Event List page</p>
<h4>Module styling</h4>
<p>Besides from extended component styling you can use template module styles for JEvents modules as well.</p>
<p class="content-center"><img width="300" height="530" src="images/content/template-details/advanced-stuff/extended-styles/ext-jevents-modules.png" alt="JEvents Module Style" /></p>
<p>In the example above:</p>
<ul>
  <li>Events Calendar Module (mod_jevents_cal) with module style <strong>box-blue jsn-icon-calendar</strong> applied.</li>
  <li>Latest Events Module (mod_jevents_latest) with module style <strong>box-green jsn-icon-star</strong> applied.</li>
  <li>JEvents Legend Module (mod_jevents_legend) with module style <strong>box-grey jsn-icon-info</strong> applied.</li>
</ul>
<hr class="line-dots" />
<h3>JoomGallery</h3>
<p>Extended style for JoomGallery includes redesigned navigation icons, fixed alignment issues, additional module styles and some other minor visual enhancement.</p>
<h4>Component Styling</h4>
<p class="content-center"><img width="600" height="500" src="images/content/template-details/advanced-stuff/extended-styles/ext-jg-layout.png" alt="JG Layout Style" /><br />Totally redesigned navigation bar and information panel</p>
<p class="content-center"><img width="600" height="500" src="images/content/template-details/advanced-stuff/extended-styles/ext-jg-navigation.png" alt="JG Navigation Style" /><br />
Fixed alignment issues</p>
<h4>Module styling</h4>
<p>Besides from extended component styling you can use template module styles for JoomGallery modules as well.</p>
<div class="grid-layout">
<div>
<p class="content-center"><img width="300" height="500" src="images/content/template-details/advanced-stuff/extended-styles/ext-jg-modules1.png" alt="JG Module Style" /></p>
<ul>
  <li>JoomSearch Module (mod_joomsearch) with module style<strong> box-blue jsn-icon-search</strong> applied.</li>
  <li>JoomGallery Treeview Module (mod_jgtreeview) with module style <strong>box-yellow jsn-icon-image</strong> applied. </li>
</ul>
</div>
<div>
<p class="content-center"><img width="300" height="500" src="images/content/template-details/advanced-stuff/extended-styles/ext-jg-modules2.png" alt="JG Module 2 Style" /></p>
<ul>
  <li>JoomGallery Latest Categories Module (mod_jglatestcart) with module style <strong>box-grey jsn-icon-star</strong> applied.</li>
  <li>JoomGallery Stats Module (mod_joomgallerystats) with module style <strong>box-green jsn-icon-statistics</strong> applied.</li>
</ul>
</div>
</div>