Author: administrator

Extended styles

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.

  • K2 Content Module (mod_k2_content) with module style box-green icon-article applied

  • K2 Comments Module (mod_k2_comments) with module style box-blue icon-comment applied
  • K2 Login Module (mod_k2_login) with module style box-yellow icon-user applied

Community Builder

Extended style for Community Builder includes adapted dropdown menu style, tabs color, additional module styles and some other minor visual enhancement.
Component styling
Here is how Community Builder component will look like after extended styles applied.

Adapted drop-menu style and tabs color on CB Profile page
Module styling
Besides from extended component styling you can use template module styles for Community Builder modules as well.

In the example above:

  • CB Login Module (mod_cblogin) with module style box-yellow icon-user applied
  • CB Online Module (mod_comprofilerOnline) with module style box-blue icon-online applied
  • CB Workflows (mod_comprofilermoderator) with module style box-grey icon-selection applied

Virtue Mart

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.
Component Styling

Fixed alignment issues on Product Details page
Module styling
Besides from extended component styling you can use template module styles for Virtue Mart modules as well.

  • VirtueMart Module (mod_virtuemart) with module style box-blue icon-cart applied.

JEvents

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.
Component Styling

Totally redesigned calendar navigation icons

Adapted calendar table header color

Adapted table header color on Event List page
Module styling
Besides from extended component styling you can use template module styles for JEvents modules as well.

In the example above:

  • Events Calendar Module (mod_jevents_cal) with module style box-blue icon-calendar applied.
  • Latest Events Module (mod_jevents_latest) with module style box-green icon-star applied.
  • JEvents Legend Module (mod_jevents_legend) with module style box-grey icon-info applied.

JoomGallery

Extended style for JoomGallery includes redesigned navigation icons, fixed alignment issues, additional module styles and some other minor visual enhancement.
Component Styling

Totally redesigned navigation bar and information panel

Fixed alignment issues
Module styling
Besides from extended component styling you can use template module styles for JoomGallery modules as well.

  • JoomSearch Module (mod_joomsearch) with module style box-blue icon-search applied.
  • JoomGallery Treeview Module (mod_jgtreeview) with module style box-yellow icon-image applied.

  • JoomGallery Latest Categories Module (mod_jglatestcart) with module style box-grey icon-star applied.
  • JoomGallery Stats Module (mod_joomgallerystats) with module style box-green icon-statistics applied.

Read More

Tree Menu

Tree Menu represents menu items in clear tree-like hierarchy, which is very appropriate for indexing menu. By default all submenu items are collapsed until you select the parent menu item.
To setup Tree Menu you just need to configure module parameter “Menu Class Suffix” appropriately and the menu system will take care of the rest.

Tree Menu with Icons and Rich Text

Here you can see live demonstration of Tree Menu with icons and rich text.
Tree Menu can present menu items with icons and descriptive text, pretty much like index.php?option=com_content&view=article&id=99&Itemid=151 Main Menu and index.php?option=com_content&view=article&id=87&Itemid=100 Side Menu.
To setup icons you need to configure menu items appropriately just like Main Menu. There are very detailed instructions in template documentation.

Read More

Top Menu

Top Menu allows you to arrange menu items in horizontal line and assign icons to them. All icons are configured directly in menu item settings page which is very convenient.
You can choose up to 20 predefined icons to menu item.

To set up icons, you need to go to menu item settings and add symbol combination (icon=xxx) to title where xxx is the icon name.

  • images/content/template-details/design-features/uniicons.png” target=”_blank” class=”link-action See preview of all icons

Read More

Side Menu

Here you can see live demonstration of Side Menu.
Side Menu is very unique vertical menu with slide-out panels. This menu is extremely efficient when you have complex navigation with a lot of menu items.
To setup Side Menu you just need to configure module parameter “Menu Class Suffix” appropriately and the menu system will take care of the rest. There are very detailed instructions in template documentation.

Side Menu with Icons and Rich Text

Here you can see live demonstration of Side Menu with icons and rich text.
Side Menu can present menu items with icons and descriptive text, pretty much like Main Menu.
To setup icons you need to configure menu items appropriately just like Main Menu. There are very detailed instructions in template documentation.

Side Menu with RTL Support

Side Menu works flawlessly even in RTL layout, in which sub-menu panels will slide out from right to left.

  • index.php?option=com_content&view=article&id=96&Itemid=101&jsn_setdirection=rtl” class=”link-action See Side Menu in RTL layout

Read More

Rich Menu

With this menu system you can attach icons and add descriptive text to each menu item making them much clearer and visually appealing. The best thing is you can use the default menu module built-in Joomla!, no need to install external menu modules.

Menu items with descriptive text

JSN Epic allows you to present menu items with descriptive text placed on a separated line at the bottom of main text.

To setup text strings you need to go to menu item settings and add symbol combination “(=)” as separator between primary and secondary text.

In the example above text “Home” is the primary text and “Lorem ipsum dolor sit…” is the secondary text. Separator between them is the symbol combination “(=)”. Really simple and elegant solution.

Menu items with icons

JSN Epic allows you to assign up to 20 predefined icons for items in main menu.

To setup icons, you need to find template parameter Main Menu Icons and choose any icon you want to display from drop-down panel.

Combination of descriptive text and icons

You can use combination of descriptive text and icons to get Rich Menu in it’s best presentation.

Read More

LATEST

Most Popular

Want to browse our charities?
SUBSCRIBE to view all star ratings.

Share