One of hottest features in JSN Epic is extended styles adapted for 5 most popular Joomla! extension: K2, Community Builder, Virtue Mart, JEvents and JoomGallery.
Technically extended styles are overrides of default extensions style (images + CSS) and located in folder /ext 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.
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 http://extensions.joomla.org/
Extended style for K2 includes adapted tabs color, additional module styles, fixed alignment issues and some other minor visual enhancement.
Here is how K2 component will look like after extended styles applied.
Besides from extended component styling you can use template module styles for K2 modules as well.
Extended style for Community Builder includes adapted dropdown menu style, tabs color, additional module styles and some other minor visual enhancement.
Here is how Community Builder component will look like after extended styles applied.
Adapted drop-menu style and tabs color on CB Profile page
Besides from extended component styling you can use template module styles for Community Builder modules as well.
In the example above:
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.
Fixed alignment issues on Product Details page
Besides from extended component styling you can use template module styles for Virtue Mart modules as well.
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.
Totally redesigned calendar navigation icons
Adapted calendar table header color
Adapted table header color on Event List page
Besides from extended component styling you can use template module styles for JEvents modules as well.
In the example above:
Extended style for JoomGallery includes redesigned navigation icons, fixed alignment issues, additional module styles and some other minor visual enhancement.
Totally redesigned navigation bar and information panel
Fixed alignment issues
Besides from extended component styling you can use template module styles for JoomGallery modules as well.
One of the fastest and easiest ways to learn template is to install sample data and start playing with it. JSN Epic provides unique mechanism of installing sample data directly on your current website. Just few steps and the demo website is here.
Go to template settings page and click button "Get started".
There are 2 options for you to choose: Install sample data on your current Joomla site or download the QuickStart package to install a full package of Joomla CMS, JSN Epic template and sample data.
The installation process would start instantly and you would get the website in less than a minute.
Done! Just 2 simple steps and you have sample data installed.
Now it's time to read documentation and play with the template. You can download documentation package for free.
JSN Epic is equipped with very comprehensive documentation package that will help you with template utilization.
When purchasing our products you are backed up with professional and timely support providing via:
One more great benefit is that we provide support for all questions related not only to the product, but also to your Joomla! configuration.
At JoomlaShine.com, we put great efforts in optimizing our templates performance by multiple techniques like image sprites application, clean html code output and now one new step CSS/JS Compression.
What it does is to combine all CSS/JS files into a single file and deliver it in GZIP compressed state to browser. This feature significantly reduce http request number to server as well as overall loading size, which results in 35% performance boost.
Before enabling CSS/JS compression
After enabling CSS/JS compression
CSS/JS Compression feature is enabled on this demo website. You can check the source code to see how it works.
This feature allows you to load multiple custom CSS files among with template default files. This feature is very useful, when you have special dedicated CSS file for content styling.
Custom CSS files are loaded among with other template CSS files
Just put custom CSS files to template's CSS folder and define them in template parameter Custom CSS File(s) each file name at a line. If you enable CSS/JS Compression feature, all custom CSS files will be compressed as well.
JSN Epic was developed with extreme focus on typography and we believe it provides the most comprehensive content presentation capability. Headings, text, links, tables, images, everything was designed with high level of refinement. Let's take a look.
Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.
Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.
Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.
Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.
Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.
Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.
You can arrange content in multiple columns by using very simple html code. JSN Epic will detect the amount of columns you defined and automatically make arrangement.
Usage: <div class=”grid-layout”><div>Text in column 1</div><div>Text in column 2</div></div>
Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.
Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.
Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.
Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.
Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.
At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.
At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.
At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.
At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.
Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet.
Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet.
Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet.
Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet.
Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet.
div.grid-layout2 div.grid-col { float: left; width: 49.95%; } div.grid-layout3 div.grid-col { float: left; width: 33.3%; }
You can us this style to quote somebody's speech, idea or a fragment from some book, articles, etc. Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.
Usage: <blockquote>This is your quote</blockquote>
You can use this special drop cap symbol style for magazine / newspaper text paragraph. Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.
Usage: <p class="text-dropcap">This is the text with dropcap symbol.</p>
You can use this style to highlight important words and / or keyword expression in search result page. Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.
Usage: <span class="text-highlight">This is the text to be highlighted.</span>
You can use this style to highlight important text block on mouse over. Just roll mouse over this text block to see how it's highlighted.
Usage: <div class="text-box-highlight">This is the text to be highlighted.</div>
You can use this style to highlight important text block on mouse over. Just roll mouse over this text block to see how it's highlighted.
Usage: <div class="text-box-highlight">This is the text to be highlighted.</div>
You can use this style for alert or warning text paragraph requiring user's attention. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.
Usage: <p class="text-alert">This is text that requires user's attentions.</p>
You can use this style for regular information text paragraph that does not require much user's attentions. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.
Usage: <p class="text-info">This is your d text.</p>
You can use this style for information text paragraph related to download process. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.
Usage: <p class="text-download">This is download related text.</p>
You can use this style for useful information like tips, hint or help text. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.
Usage: <p class="text-tip">This is yourtip hint or help text.</p>
You can use this style for description text paragraph that related to video file. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.
Usage: <p class="text-video">This is your video related text.</p>
You can use this style for description text paragraph related to audio file. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.
Usage: <p class="text-audio">This is your audio related text.</p>
You can attach up to 20 predefined icons to the front of any link by adding simple class to it.
Usage: <a class="link-icon jsn-icon-xxx">This is link text.</a>, where xxx is the name of icon to be applied. Detailed information about all icon names can be found in template documentation.
Example: <a class="link-icon jsn-icon-download">This is link to download something.</a>
JSN Epic offers 6 button styles to decorate any call-to-action links you have in the content.
Usage: <a class="link-button button-xxx">This is link text.</a>, where xxx is the button color name selected from: light, dark, green, orange, blue and red.
Example: <a class="link-button button-orange">See plans & pricing.</a>
You can use both button and icon link style combined.
Usage: <a class="link-button button-xxx"><span class="link-icon jsn-icon-yyy">This is link text.</span></a>, where xxx and yyy are button color and icon names respectively.
Example: <a class="link-button button-green"><span class="link-icon jsn-icon-cart">Add to cart.</span></a>
JSN Epic is able to attach not only descriptive icon to the front of link as described in above section, but also 23 extension icons to the end of the link.
All icons can be assigned automatically by enabling a template parameter or manually by adding simple class to the link.
Usage: <a class="link-icon-ext jsn-icon-ext-xxx">This is link text.</a>, where xxx is the icon name. Detailed information about all icon names can be found in template documentation.
Table header | Column header 1 | Column header 2 | Column header 3 |
---|---|---|---|
Table footer | Footer data | ||
Row header 1 | Lorem ipsum | Dolor sit amet | Lorem ipsum |
Row header 1 | Lorem ipsum | Dolor sit amet | Lorem ipsum |
Row header 1 | Lorem ipsum | Dolor sit amet | Lorem ipsum |
Row header 1 | Lorem ipsum | Dolor sit amet | Lorem ipsum |
Row header 1 | Lorem ipsum | Dolor sit amet | Lorem ipsum |
Table header | Column header 1 | Column header 2 | Column header 3 |
---|---|---|---|
Table footer | Footer data | ||
Row header 1 | Lorem ipsum | Dolor sit amet | Lorem ipsum |
Row header 1 | Lorem ipsum | Dolor sit amet | Lorem ipsum |
Row header 1 | Lorem ipsum | Dolor sit amet | Lorem ipsum |
Row header 1 | Lorem ipsum | Dolor sit amet | Lorem ipsum |
Row header 1 | Lorem ipsum | Dolor sit amet | Lorem ipsum |
Table header | Column header 1 | Column header 2 | Column header 3 |
---|---|---|---|
Table footer | Footer data | ||
Row header 1 | Lorem ipsum | Dolor sit amet | Lorem ipsum |
Row header 1 | Lorem ipsum | Dolor sit amet | Lorem ipsum |
Row header 1 | Lorem ipsum | Dolor sit amet | Lorem ipsum |
Row header 1 | Lorem ipsum | Dolor sit amet | Lorem ipsum |
Row header 1 | Lorem ipsum | Dolor sit amet | Lorem ipsum |
You can assign any of predefined 20 icons to list items. 6 icons shown above are just samples.
Laboratório de Cristalografia e Caracterização Estrutural de Materiais.
LCCEM/CCNH/UFABC - Av. dos Estados, 5001, bairro Santa Terezinha, Santo André, SP, CEP: 09210-580, Brasil.
You can use this style for comment text paragraph. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.
Usage: <p class="text-comment">This is your comment text.</p>