Cardinal Carports BLog

We have been developing JSN Nuru for more than a year and that tremendous amount of time allowed us to roll out some really advanced stuff. For us, the word “advanced” is not just fancy marketing buzz, but really something that you will not likely see anywhere else.

Here you can see live demonstration of 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 Main Menu and Side Menu.

To setup icons you need to configure menu items appropriately just like Main Menu. There are very detailed instructions in template documentation.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non lorem libero. Vestibulum a leo ac tortor congue euismod. Nam sed nulla tellus. Suspendisse ut hendrerit justo. Sed molestie vestibulum nisl, a sodales urna molestie nec. Etiam neque nisl, malesuada ut egestas ut, facilisis vel leo. Morbi gravida blandit porttitor. Phasellus sed diam ante, quis lobortis tortor. Nunc quis mi congue ipsum fringilla hendrerit nec eget magna.

Lorem ipsum

Quisque sed mi non risus egestas cursus. Aenean odio mi, rhoncus sit amet tincidunt placerat, pellentesque ac mi. Mauris est lectus, faucibus vel ultrices eget, lobortis vitae lorem. Nam non nisl vel lorem pulvinar pharetra quis nec augue. Sed in odio lorem. In hac habitasse platea dictumst. Pellentesque elementum, ipsum vel sollicitudin porttitor, felis augue pharetra erat, ut vestibulum dui turpis sed nulla. Suspendisse ac nulla nisi. Fusce sed est a leo gravida bibendum non non odio. Maecenas et tortor sit amet dolor sagittis scelerisque sed sit amet lectus. Suspendisse sollicitudin suscipit velit, eu pellentesque tortor tristique a. Aliquam ut velit dolor, quis convallis orci. Curabitur tincidunt aliquam tellus id tempor. Etiam iaculis erat id metus placerat eget lacinia est eleifend. Ut in interdum mi.

At the top of this page, you can see live demonstration of 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 jsn-icon-xxx to menu item's parameter Link CSS Style, where xxx is the icon name.

• See preview of all icons

Here you can see live demonstration of Side Menu with icons and rich text in RTL layout.

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

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.

See Side Menu in Normal layout

Here you can see live demonstration of Side Menu with icons and rich text.

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

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.

See Side Menu in RTL layout

On top of this page, you can see live demonstration of 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 Nuru 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 Nuru 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.

On top of this page, you can see live demonstration of Main Menu with icons and rich text.

Main Menu is very powerful menu built with clean accessible XHTML code structure and effective drop-down submenu panels.

Main Menu Icons

You can attach any of 20 predefined icons to menu items to make them more appealing.

To set up icons, you need to go to menu item settings and add symbol combination jsn-icon-xxx to menu item’s parameter Link CSS Style, where xxx is the icon name.

• See preview of all icons

---

Main Menu Rich Text

You can add descriptive text to menu items to make them much clearer.

To set up descriptive text, you need to go to menu item settings and add descriptive text to menu item’s parameter Link Title Attribute.

---

Main Menu Icons and Rich Text in combination

You can set up menu items to utilize both icons and rich text in combination. Take a look at main menu on this page to see live demonstration.

Here you can see how content are presented only in main content area. Sometimes, you will need a lot of space to present content and that how it will looks like.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce suscipit dui eu augue faucibus non interdum odio elementum. Praesent faucibus lorem sed massa condimentum in semper lacus aliquet. Aliquam viverra erat a libero accumsan a egestas lorem hendrerit. Donec id elit dolor. Phasellus est ligula, hendrerit id vehicula sit amet, placerat ut diam. Sed eu fringilla lectus. Aliquam augue lorem, suscipit eu consequat vel, viverra id diam. Praesent lectus elit, interdum a imperdiet vitae, cursus at velit.

See all module positions outline

This is 3 columns layout with content presented on the right side, which is typical for blog sites. On left side columns you can present modules with sumplementary information for main content. The width of side columns can be adjusted conveniently via template parameters.

See all module positions outline

This is pretty “old-fashioned” 3 columns layout with content presented at center. On side columns you can present modules with equal importance. The width of side columns can be adjusted conveniently via template parameters.

See all module positions outline

This is also 3 columns layout with content presented at center, but the right side column was designed to present content of secondary importance comparing to those in left side column. On side columns you can present modules with equal importance. The width of side columns can be adjusted conveniently via template parameters.

See all module positions outline

This is also 3 columns layout with content presented at center, but the left side column was designed to present content of secondary importance comparing to those in right side column. On side columns you can present modules with equal importance. The width of side columns can be adjusted conveniently via template parameters.

See all module positions outline

This is 3 columns layout with content presented on the left side, which is typical for blog sites. On right side columns you can present modules with sumplementary information for main content. The width of side columns can be adjusted conveniently via template parameters.

See all module positions outline

JSN Nuru has some great features to improve your website visibility to search engines and audience with disabilities. All these SEO features are not new, but they are built-in the template and you do not have to install any additional extensions.

Source ordering

One of the most important SEO techniques is to make sure that search engine can find your critical content before others. To make this possible in our template code structure we generate the “center” part first and only after that “left” and “right” columns.

In this way, you can be sure that search engines will see your critical content first. You can use Lynx browser both online or offline to make sure of that.

---

Website Title

This feature allows you to use value defined in parameter Site Name from Joomla Global Configuration and show it in tag <title> on every pages. By default Joomla! presents Site Name only at back-end and offline page. Now, with parameter Website Title you can utilize Site Name at front-end on every page. This is great feature to improve your website SEO, since you can define a website title with some important keywords and show it on every page.

---

Top H1 tag

This feature allows you to wrap website slogan to <h1> tag, which is good for both SEO and accessibility. As we all know, <h1> is the most important content tag and search engine normally pays special attention to the content in that tag. Once you configured your keyword-powered website title and slogan, you can include them in the first h1 tag to increase SE ranking.

All JoomlaShine templates are equipped with native RTL layout support. We spent huge amount of time tweaking every tiny details of the template to make it look absolutely awesome in RTL mode. Everything is horizontally-flipped including dropdown main menu and side menu.

(Select any menu item to get back to normal layout)

All JoomlaShine templates can be effortlessly configured by template parameters. In template setting page, you will find 40+ template parameters arranged into logical groups for convenient operation.

---

Set parameters without confusion

Most parameters are designed that way that you can simply select options without confusion about what value to define. All parameters are equipped with description text for easier understanding.

Parameters to control layout dimensions

Parameters to control colors & styles

Parameters to control mobile settings

In our templates all wordings of both back-end and front-end are moved to separated language files, so you can easily translate them into any language you want.

!-

Currently our templates support more then 10 languages and more to be come in future.

-->

All JoomlaShine.com templates have special built-in design optimized for modern mobile devices iPhone, Android and Windows Mobile-based. The responsive design is applied for both Joomla 2.5 and 3.0 versions, and for Pro Edition only.

Unlike other template providers, we do not develop something that looks like a mobile app with heavy menu and animation. We built compact and lightweight version of the template preserving the whole original look-and-feel.

Mobile layout overview on Iphone

As default, all modules will be displayed on both desktop and mobile. To display a module on only desktop or on only mobile, you can add Module Class Suffix parameter as following:

• Display a module on only desktop: display-desktop
• Display a module on only mobile: display-mobile

Mobile layout overview on Ipad

Mobile layout overview on Ipad

---

Optimized HTML overrides for mobile

We optimized HTML overrides for all default Joomla! extensions to make them looks neat in mobile edition. The work is mainly focused on rearrangement content from columns to rows.

---

Optimized menu for mobile

For mobile edition, we have built very simple, yet effective menu system, where all children menu items are presented as tree in collapsible panel. This menu system utilizes only little Javascript (MooTool) for expanding/collapsing submenu panels and is very fast and lightweight.

Mobile Menu with icons and rich text

The most amazing thing is mobile menu inherits all the goodies of regular menu like icons and rich text.

The responsive feature is enabled on live demo. You can check this by resizing the demo to the desired size and see how it presents on mobile devices.

JSN Nuru is natively compatible with both Joomla! 2.5 and Joomla! 3.x. The installation package is compatible with both Joomla CMS.

In Customer Area, you can choose to download appropriate installation file for the Joomla! version you are using.