Export to PDF file

JSN Artista Configuration Manual

Getting Started

JSN Artista template installation

After downloading, you should have a template installation file called jsn_artista_XXX_Z.Z.Z_install.zip, where:

  • XXX is the template edit It can be free or pro.
  • ZZZ is the template version

This is a standard Joomla! Template installation file, which can be installed in Joomla! Administration as usual. Here are quick instructions to remind you:

  • In Joomla! Administration, go to menu Extensions -> Extension Manager
  • Once you are on Extension Manager, click Browse button and select template installation file jsn_artista_XXX_Z.Z.Z_install.zip. After that, click on button Upload & Install.
  • Installation file will be uploaded to your server and installed in Joomla!
  • Set the templates as default, go to menu Extensions -> Template Manager

Sample Data Installation

All JoomlaShine templates have unique feature of installing sample data which makes your testing website look the same as on the template demo website. You can choose to install:

  • Sample Data – A light package with only JSN Artista data. You install it on your available Joomla website
    • Sample data will be installed for common Joomla components and for supported third-party extensions (K2, Kunena, VirtueMart, OS Property...) which are already available on your website.
    • If you have installed the third-party extensions after installing Sample Data, you must reinstall the Sample Data to have the content for those extensions.
  • QuickStart package – It contains both the latest Joomla installation file and JSN Artista.
    • By default, free extensions like K2 and Kunena are already included in the package with their sample data. The QuickStart packages do not contain commercial third-party extensions, you need to install these extensions separately.
      • You install this package normally as the flow to install Joomla. After that, you will get a totally new Joomla website with JSN Artista template and its sample data.

      Below is the instruction to install Sample Data package:

      1. First, go to the template settings page, at the parameter GETTING START, click Install sample data button.

      2. Next, on page JSN Artista Sample Data Installation follow on-screen instruction to start the process

      • Download sample data package of the demo website data such as: demo articles, demo menus, demo template settings, etc.
      • Install free extensions: JSN ImageShow, JSN PowerAdmin, JSN PageBuilder, JSN Mobilize, JSN EasySlider and JSN Uniform You can install them or not.
      • Install sample data: this step will check the template version before installing the sample data

      3. Finally, you should click the Finish button to Return to template settings page for further configuration

      Original data restoration

      Before the sample data installation process, all original data of your website is automatically backed up into a backup file located in folder /backup inside the joomla_root_folder/templates/jsn_artista_XXX/, where XXX is the template edition on your server. Technically, this is the zip file, which contains a plain text file with SQL instructions that need to be executed on your Joomla! Database.

      Below are the instructions on how to do that by using software phpMyAdmin 3.2.1.

      1. First, login to phpMyAdmin and select your Joomla! database on the left column

      2. Next, select tab Import on the horizontal menu bar

      3. Next, click button Browse.., then select the backup zip file and click button Go at the right corner of the page.

      After script execution, you can get back to your website to check how the original data was restored.

      Video tutorial

      It guides you how to install a JSN template and sample data visually. Here are video tutorials.

      JSN Epic in the video is an example and these instructions can be applied to other JSN templates as well.

Template Parameters

Template parameters logically grouped in panels

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

To access template setting page, please take the following steps:

  • Go to the template manager by menu Extensions -> Template Manager.
  • Click on template name JSN_artista_XXX, where XXX is the template edition you have.
  • Here in the Template Edit page, you will see the list of template parameters in section Parameters.
  • Click button Save to save all changes you’ve made.

Template Configurations

Template Information & Auto Update notification

In the first parameter, you can find important information about the latest template version. We really do treat our templates as a piece of software, which needs to be continuously improved. So you should always make sure you are using the latest version.

Also, in this section you can find some other relevant information such as Author and Copyright.

JSN Artista automatically checks the latest version available for template version and framework version to download.

  • If you want to update Framework only, click on the button Update to Y.Y.Y (Y.Y.Y is the latest framework version) which is next to the current framework ve After that a new modal window appears on your web browser, you click on the button Update, waiting for the update process, then click Finish.
  • If you want to update both framework and template, click on the button Update to X.X.X (X.X.X is the latest template version) which is next to the current template ve You fill in the JoomlaShine customer account and click on the button Update, waiting for the update process, and then click Finish.

Update template to the latest version

After that the window about successful upgrade appears in your web browser.

Please note, if you customized the CSS files of original template, the changes would be lost. The best if you do backup the customized CSS files before the upgrade process.

Template Configurations

Favicon configuration

Favicon is a small icon positioned on the left of the address bar of your browser. By default, Joomla! has an icon as shown on the screenshot below.

Default Joomla! favicon

On your website, you might want to use your own icon, like the one we are using on our site joomlashine.com.

JoomlaShine favicon

Here are instructions on how to do that:

Step 1: Create your own favicon file

Technically, favicon is a regular 16px * 16px icon file with exact name favicon.ico. In most cases, favicon is the sized-down version of the company logo saved in the icon format. In some cases, the logo is too specific and favicon needs to be built from scratch.

You can use some professional icon editor software like Axialis IconWorkshop and Iconcool Editor or to use online favicon generators. The first method gives you better quality, but takes more effort. The second method is easier, but the quality is not the best.

Step 2: Upload favicon file to your server

After you’ve got the favicon file, it’s time to upload it to your server. You need to upload the icon file to template folder overwriting the default file. This is the folder joomla_root_folder/templates/jsn_artista_XXX/, where XXX is the template edition.

If you have permission problems while using FTP, then we strongly recommend you use a great Joomla! Extension called eXplorer. And you don’t need to declare logo width/height anywhere. Template will automatically present it as it is.

If you don’t see your new icon, that doesn’t necessarily mean you did anything wrong. Browsers are designed to customize data traffic, so they don’t refresh the favicon every time they show a page. Even refreshing the page (F5) won’t help. So you need to refresh more thoroughly:

  • Mozilla / Firefox / Safari: hold down Shift while clicking Reload, or press Ctrl-Shift-R (Cmd-Shift-R on Apple Mac)
  • Internet Explorer: hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Konqueror: simply click the Reload button, or press F5
  • Opera: users may need to completely clear their cache in Tools -> Preferences
  • Chrome: Shift-F5

If this doesn’t work, you will need to delete the temporary internet files and history and then open your page again

Logo

JSN Artista logo is the default sample logo and you should replace it with your own. Technically, logo is an image file called logo.png located in folder joomla_root_folder/templates/jsn_artista_XXX/images/, where XXX the template edition you have.

You can manually choose your own logo file via template parameter Logo File. Additionally, you don’t need to declare logo width/height anywhere. Template will automatically present it as it is.

Parameters to set logo

When the logo file is ready, you can select and set it as the default logo of your website:

  • Logo File - Select the image file you want to use as logo.
  • Mobile Logo File – Set specific logo for your website on mobile device Please leave this parameter empty if on mobile, you want to use the re-sized logo which is used on the desktop already.
  • Logo Link – Set URL where the logo image should link to. You can set here:

Leave this parameter empty if you do NOT want your logo to be clickable at all.

  • Logo Slogan – Set the slogan text to be inserted to the logo image attribute alt. Text in alt attribute is visible to screen readers (good for accessibility) and search engines (good for SEO).
  • Enable Colored Logo – Define if you want to use special colored logo for each template color. Colored logo file is located under folder images/colors/{color_name}/ inside the template folder.

Set up rich-media logo via module in position “logo”

JSN Artista provides a module position called logo, where you can put any Custom HTML module with rich-media logo. Another advantage is that you can create multiple modules with different logos and display them in various pages using the menu-module assignment feature in Joomla!

Attention! If template detects that there are some module presented in position logo, then it will disable default logo with all logo parameters: Enable Colored Logo, Logo File, Logo Link and Logo Slogan.

Video tutorial

It guides you how to configure logo visually. Here are video tutorials.

JSN Epic in the video is an example and these instructions can be applied to JSN templates as well.

Layout

Module positions

JSN Artista provides 38+ module positions allowing you to have multiple layout configurations. All module positions are collapsible which means if you don’t use all the positions they will be left as blank for neighboring modules.

Layout dimensions

JSN Artista allows you to change the width size of several critical layout elements. All settings can be done via template parameters in the section LAYOUT SETTINGS.

Template Width

Template width can be configured in two different ways.

Configuration by template parameter (lowest priority)

Template width can be set by template parameter Template Width Type. There are three options for you to choose:

  • Fixed – Template width is fixed in pixels defined in parameter Fixed Width (px).
  • Float - Template width is fixed in percentage defined in parameter
Float Width (%).
  • Responsive - Template width fits into different resolution:
  • Mobile Device: Template width fits into mobile devices – tablets and smartphones
  • Wide Desktop: Template width fits into desktop with width display 1200 px and highe

This is the default setting and has the lowest priority.

Configuration by “Page Class” (higher priority)

Template width can be set by Page Class of a menu item with syntax

Custom-width-xxx, where xxx is the width value you choose.

There are the following possible values: fixed, float and responsive. For example: custom-width-fixed

This setting will override the default settings by template parameter Template Width.

Columns Width and Position

Thanks to the Bootstrap grid system, the layout is divided into 12 equal columns. Each module should take the width equal the columns number. You can drag and drop modules to adjust their widths and positions.

Visual column widths and positions

12 Bootstrap grids

Columns width adjustment

Columns position change

Please be aware that, you can adjust all the column widths and change almost all column positions. However, you are not allowed to change the positions of separate elements in the center block of “Inner Left”, “Component” and “Inner Right”.

The center block “Inner Left”, “Component” and “Inner Right”

Stick Positions

The template layout includes 6 stick positions: stick-lefttop, stick-leftmiddle, stick-leftbottom, stick-righttop, stick-rightmiddle and stick-rightbottom. You can assign any modules or create custom HTML module into mentioned positions for better website presentation. The module “sticks” into your layout, so when you scroll mouse up and down, the assigned module is moved in appropriate direction.

Let’s see how we can create a custom HTML module then place it in the stick-lefttop position.

  • In Joomla Administration you go to Extensions -> Module Manager
  • Click on a button New then choose Custom HTML
  • Fill the settings:
    • Title: My stick module
    • Show Title: No
    • Published: Published
    • Position: stick-lefttop
    • Customer Output: Type HTML code into this field

Above, we created a new module then assigned to the position stick-left-top. You can assign a module to the rest 5 stick positions.

Video tutorial

It guides you how to configure layout visually. Here are video tutorials.

JSN Epic in the video is an example and these instructions can be applied to JSN templates as well.

Mobile settings

All JoomlaShine templates are equipped with responsive design feature making your website look beautiful in mobile (both smartphones and tablets).

Enable Mobile Support

To enable responsive design with mobile please set the parameter Template width type as Responsive and choose

Mobile Device in parameter Responsive Width.

Mobile settings

After that all modules will be automatically rearranged to fit different screen resolutions.

  • If the client device is a smartphone like iPhone or Android-based phone, all content will be arranged in one column.
  • If the client device is a tablet like iPad, Kindle Fire, e all content will be arranged in two or three columns.

Also, main menu will be transformed into compact dropdown menu.

Opened mobile menu

1-column module

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

  • Display a module on only desktop: display-desktop
  • Display a module on only mobile: display-mobile
  • Display a module on only tablets: display-tablet
  • Display a module on only smartphones: display-smartphone

Enable Mobile Menu Sticky

Mobile Menu Sticky, the menu will appear anytime. This will help you control all menus easily.

To enable this feature, in the section Menu & Site Tools -> parameter Enable Sticky Menu -> choose the option Mobile.

Enable Mobile Menu Stick

Mobile Menu Effect

With Mobile Menu Effect, you can control how the mobile menu appears when being toggled. This feature has recently been added to make JSN template more flexible and mobile friendly. There are 5 choices for you to choose:

Default

Push Left

Push Right

Slide left

Slide Right

  • Default: This is the default mobile menu style which will show the menu in full-width under the toolbar
  • Push Left/Right: The mobile menu will slide in from the left/right while website content will be pushed to the same direction.
  • Slide Left/Right: The mobile menu will slide in from the left/right and overlap website content.

Mobile Logo File

Normally, the default logo will be automatically resized and displayed nicely in mobile layout. But if you want to have specifically designed logo, then you can select it in the section Logo -> parameter Mobile Logo File.

Mobile Logo File

Another feature of JSN templates is the Cookie Law, which shows a bar notifying website visitors about the cookies policy in your website.

Cookie law frontend

You have the option to enable this function in the tab Cookie Law via template settings as well as configure its layout and content:

Cookie law backend

Cookie Law settings

  • Enable Cookie Consent - Choose whether to use Cookie Law.
  • Banner Placement – Select position of initial consent slide-down notification.
  • Style – There are 2 styles of Cookie Law to choose from: Light and Dark.
  • Message – The notification message to be shown to users.
  • Accept button text – The label of the accept button.
  • Readmore button text – The text shown on the link to the cookie policy (requires Your Cookie Policy Link to be set).
  • Your Cookie Policy Link – The url of the Cookie Policy. If left blank, the link will be hidden.
Video tutorial

It guides you how to configure menus visually. Here are video tutorials.

JSN Epic in the video is an example and these instructions can be applied to all JSN templates as well.

Colors Variation

Template Color

JSN Artista provides six major color variations for you to choose from. Each color variation covers not only the main background, but also fills drop-down menu, links, table’s header and some others.

All available colors are described below.

blue

red

green

violet

orange

grey

Template color can be configured in three different ways. Configuration by template parameter (lowest priority)

Template color can be set by template parameter Template Color in Styling section. This is the default setting and has the lowest priority.

Configuration by “Page Class” (higher priority)

Template color can be set by Page Class of a menu item with syntax custom- color-xxx, where xxx is the color you want to have. There are the following possible values: blue, red, green, orange, grey and violet.

For example: custom-color-red

This setting will override the default settings by template parameter Template Color.

Configuration by Site tools panel (top priority)

Template color can be selected by Color Selector from Site tools.

This setting is considered as the visitor’s preference and has top priority. It will overwrite both Page Class and default settings of parameter Template Color.

After script execution, you can get back to your website to check how the original data was restored.

Video tutorial

It guides you how to configure colors visually. Here are video tutorials.

JSN Epic in the video is an example and these instructions can be applied to JSN templates as well

Module Styles

JSN Artista provides six box designs for module background styling, which can be combined with UniIcons for module title styling.

Module styles are configured by module’s parameter Module Class Suffix. All available values are described below and need to be applied without double quotes.

Module Box Designs

Box designs to be applied to modules.

“solid-1”

“solid-2”

“richbox-1”

“richbox-2”

Box designs to be applied to modules. 

“lightbox-1”

“lightbox-2”

Module Icon Designs 

You can attach any of the UniIcons to the module’s title. To set up icons, you need to add the string fa fa-xxx to the module class suffix, where xxx is the icon name.

JSN Artista provides five menu styles to present your website navigation. The default Joomla! built-in menu module (mod_mainmenu) is utilized, so you don’t need to install any external menu modules.

Top Menu

Top Menu allows you to arrange menu items in horizontal lines and assign icons to them. All icons are configured directly in the menu item settings page which is very convenient.

To set up Top Menu please select the menu module you want to use and set up parameters as follows:

  • Title: Top Menu (or any other you like)
  • Show title: Hide
  • Position: topbar
  • Access: public
  • Language: All
  • Select Menu: Top Menu (you might want to use another sources here)
  • Start Level: 1
  • End Level: 2
  • Show sub-menu items: No
  • Menu Class Suffix: menu-topmenu menu-iconmenu (Please only use “menu-iconmenu” if you want to display icons)

Attention! There is a common misconception about Menu Class Suffix and Module Class Suffix. They are absolutely different parameters, so please pay attention to their settings.

Top Menu icons

You can attach any of the UniIcons to top menu items to make them more appealing. UniIcons is the set of 20 predefined icons that can be used for multiple purposes. For more information about the available icons and their names, please read section UniIcons of this document.

To set up icons, you need to go to menu item settings and take the following steps:

Add symbol combination fa fa-xxx to menu item’s parameter Link CSS Style, where xxx is the icon name.

Main Menu

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

To set up Main Menu please select the menu you want to use and set up parameters as follows:

  • Title: Main Menu (or any other you like)
  • Show title: Hide
  • Position: mainmenu
  • Access: public
  • Language: All
  • Select Menu: Main Menu (you might want to use another menu source here)
  • Start Level:1
  • End Level: All
  • Show Sub-menu Items:Yes
  • Menu Class Suffix: menu-mainmenu menu-iconmenu menu-richmenu (Please only use “menu- iconmenu” if you want to display icons and use “menu-richmenu” if you want to display rich text)

Attention! There is a common misconception about Menu Class Suffix and Module Class Suffix. They are absolutely different parameters, so please pay attention to their settings.

Sticky Desktop Menu

With Sticky Desktop Menu, the main menu will always appear at the top – even when you scroll the web page down. To enable this feature, you tick the box Desktop in the parameter Enable Sticky Menu.

The Sticky Desktop Menu

The Sticky Desktop Menu setting

Side Menu 

Side Menu is a unique vertical menu with slide-out panels. This menu is extremely efficient when you have complex navigation with a lot of menu items.

To set up Side Menu please select the menu module you want to use and set up parameters as following:

  • Title: Side Menu (or any other you like)
  • Show Title: Show
  • Position: left
  • Access: Public
  • Language: All
  • Select Menu: Main Menu (you might want to use another menu source here)
  • Start Level: 1
  • End Level: All
  • Show sub-menu items: Yes
  • Menu Class Suffix: menu-sidemenu menu-iconmenu menu-richmenu (Please only use “menu- iconmenu” if you want to display icons and use “menu-richmenu” if you want to display rich text)

Attention! There is a common misconception about Menu Class Suffix and Module Class Suffix. They are absolutely different parameters, so please pay attention to their settings.

Tree Menu

Tree Menu represents menu items in a clear tree-like hierarchy which is very appropriate for indexing menu. By default all sub-menu items are collapsed until you select the parent menu item.

To set up Tree Menu please select the menu module you want to use and set up parameters as following:

  • Title: Tree Menu (or any other you like)
  • Position: right
  • Access: Public
  • Language: All
  • Select Menu: Main Menu (you might want to use another menu source here)
  • Start Level: 1
  • End Level: All
  • Show sub-menu items: No
  • Menu Class Suffix: menu-treemenu menu-iconmenu menu-richmenu (Please only use “menu- iconmenu” if you want to display icons and use “menu-richmenu” if you want to display rich text)
Tree Menu Icons and Rich Text

You can set up menu items to utilize both icons and rich text just as you can with Main Menu.

Div Menu

Div Menu is a simple yet nice menu bar with items separated by barely visible dashes. This menu is very suitable for footer navigation presentation.

To set up Div Menu please select the menu module you want to use and set up parameters as following:

  • Title: Div Menu (or any other you like)
  • Show title: Hide
  • Position: footer
  • Access: Public
  • Language: All
  • Menu Name: othermenu (you might want to use another menu source here)
  • Start Level: 1
  • End Level: 1
  • Show sub-menu items: No
  • Menu Class Suffix: menu-divmenu

Attention! There is a common misconception about Menu Class Suffix and Module Class Suffix. They are absolutely different parameters, so please pay attention to their settings.

Video tutorial

It guides you how to configure menus visually. Here are video tutorials.

JSN Epic in the video is an example and these instructions can be applied to all JSN templates as well.

Mega Menu

JSN Artista allows you to create a mega menu for usability enhancement. All settings can be done via template parameters in the section MEGAMENU.

Enable Mega Menu

To enable mega menu please choose Yes in parameter Enable Megamenu.

Also, Mega menu needs to be enabled in each menu items. You can select the menu item you want to present mega menu and set the Configuration as On.

When you enable megamenu, you can configure the basic setting for it:

  • Show menu item description
  • Show menu item icon

Create Mega Menu

JSN Artista provides a visual way to create a mega menu with clicks and drag-n-drop function, without touching a code line. Here are quick instructions:

  • Select menu you want to apply Mega Menu like Main Menu
  • Select menu item to build mega menu like Explore
  • Build the skeleton of Mega Menu based on your need.
    • Click icon to add column
    • Click Add row to make a new row

  • Add suitable elements to make the content of mega menu. You can select from 3 element types:
    • Joomla module
    • Submenu
    • Positions
  • Configure the container width and add CSS Class suffix if you want to style the menu.

For example:

Mega Menu in “Explore” - Backend

Mega Menu in “Explore” - Frontend

Attention! Megamenu is now only available in desktop view. The classic menu will be displayed when viewing on mobile devices.

Video tutorial

It guides you how to configure menus visually. Here are video tutorials.

JSN Epic in the video is an example and these instructions can be applied to all JSN templates as well.

Typography

JSN Artista was created with a strong focus on typography and we believe it contains the most comprehensive content presentation capability. Headings, text, links, tables, images, everything was designed with high level of refinement. Let’s take a look.

Content columns 

It’s a pretty common situation when you need to arrange your content in multiple columns. JSN Artista offers you very a convenient and accessible method to create multiple column content. This is a real step forward removing table tags from your content and leaving them only for showing tabular data.

You can arrange your content in as many columns as you like. JSN Artista will detect the number of columns you have and automatically arrange them. The only thing you need to do is to set class grid-layout to parent DIV tag.

Below are screenshots of how this feature looks and example how to use it.

Content arranged in 2 columns

Usage:

<div class="grid-layout">
<div>Text in column 1</div>
<div>Text in column 2</div>
</div>
Content arranged in 3 columns

Usage:

<div class="grid-layout">
<div>Text in column 1</div>
<div>Text in column 2</div>
<div>Text in column 3</div>
</div>

Heading styles

As we all know, headings are “title” of undergoing text blocks, so it must have a distinguish look. JSN Artista provides styling for five main headings. To apply them you just need to wrap your heading text in regular heading tags like <h1>…</h1>, <h2>…</h2>, <h3>…</h3>, etc.

Text styles

JSN Artista provides 12 text styles for making your content easier to scan and read. Below are screenshots of text styles and usage examples.

Preformatted text

You can use this style to present text with preserved spaces like text block of CSS code or other programming language.

Usage:

<pre>Your preformatted text</pre>
Quote text

You can use this style to quote somebody’s speech, idea or a fragment from books, articles, etc.

Usage:

<blockquote>Your quote text</blockquote>
Drop cap symbol

You can use this special drop cap symbol style for magazine / newspaper text paragraph.

Usage:

<div class="text-dropcap"><p>Your magazine text paragraph.</p></div>
Highlighted text

You can use this style to highlight important words and / or keyword expression in search result page.

Usage:

<span class=”text-highlight”>Text to be highlighted.</span>
Highlighted text on mouse over

You can use this style to highlight important box of words or expression on mouse over.

Usage:

<div class=”text-box-highlight”>Text to be highlighted.</div>
Alert text 

You can use this style for alert or warning text paragraphs which require user’s attention.

Usage:

<p class="text-alert">Your alert text that requires user’s attentions.</p>
Info text 

You can use this style for regular information text paragraphs that do not require much user’s attention.

Usage:

<p class="text-info">Your information text.</p>
Download text 

You can use this style for information text paragraph related to the download process.

Usage:

<p class="text-download">Your download text.</p>
Tip text 

You can use this style for useful information like tips, hints or help text.

Usage:

<p class="text-tip">Your tip, hint or help text.</p>
Comment text 

You can use this style for comment text paragraphs.

Usage:

<p class="text-comment">Your comment text.</p>
Attachment text 

You can use this style for information text paragraphs related to attachment file.

Usage:

<p class="text-attachment">Your attachment text.</p>
Video text 

You can use this style for description text paragraphs that related to video file.

Usage:

<p class="text-video">Your video text.</p>
Audio text 

You can use this style for description text paragraph related to audio file.

Usage:

<p class="text-audio">Your attachment text.</p>

Link styles

Action link styles

With action link styles, website hyperlink’s color will be changed when you hover mouse over website hyperlink.

Action link styles

Usage:

<a class="link-action" href="url">This is link text.</a>

Where url is the website hyperlink.

No action link styles

Usage:

<a href="url">This is link text.</a>
Icon link styles

You can attach any of Font Awesome Icons to the front of any link by adding simple class to it. You can read more about these icon types in JSN Artista customization manual.

Font Awesome Icons

Usage:

<a class="link-icon fa fa-xxx">This is link text.</a>

where xxx is the name of icon to be applied

Example:

<a class="link-icon fa fa-download">This is link to download something.</a>
Button link styles

JSN Artista offers 08 button styles to force 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: blue, red, green, violet, orange and grey.

Example:

<a class="link-button button-orange">See plans & pricing.</a>
Button and Icon link styles combined

You can use both button and icon link style combined.

Usage:

- With UniIcons

<a class="link-button button-xxx"><span class="link-icon jsn-icon-yyy">This is link text.</span></a>

- With Font Awesome Icons

<a class="link-button button-xxx"><span class="link-icon fa fa-yyy">This is link text.</span></a>

where xxx and yyy are button color and icon names respectively.

Example:

- With UniIcons

<span class="link-button button-green"><a class="link-icon jsn-icon-cart">Add to cart.</a></span>

- With Font Awesome Icons

<span class="link-button button-green"><a class="link-icon fa fa-shopping-cart">Add to cart.</a></span>
Extension link styles

JSN Artista is able to attach not only descriptive icon to the front of link as described in the above section, but also 23 extension icons to the end of the link.

There are 2 ways of utilization extension icons.

Automatic assignment

JSN Artista is able to detect links to various popular file extensions and assign icons accordingly. This feature utilizes the modern CSS2 specification allowing you to have links with meaningful icons assigned without any modification in XHTML code. Moreover, it can detect the protocol type to assign icons to links to instant messengers, email, etc.

Manual assignment

As stated before, most browsers icons will be automatically assigned thanks to the modern CSS2 specification. Unfortunately IE6 does not support this specification and you have manually set an appropriate class for links. Also, this can help if, for some reason, you turned off the auto icon link template parameter but still want to manually apply icons to links.

Usage:

<a class="link-icon-ext jsn-icon-ext-xxx">This is link text.</a>

where xxx is the icon name.

JSN Artista utilizes the CSS sprite technique to reduce the number of HTTP requests to server in order to get icons. Technically, all icons are merged in Force single image file and visitors will need to make Force single request/download to get that file with all icons. If you have extra time, please read more about CSS sprites.

Table styles 

Tabular data is a very common type of information to be presented on the web. By default, tables look ugly and not much readable. With JSN Artista you have 3 table styles to present virtually any kind of tabular data you have.

Plain Row table style

Usage:

<table class="table-style style-colorheader">...</table>
Color Stripes table style

Usage:

<table class="table-style style-colorstripes">...</table>
Grey Stripes table style

Usage:

<table class=”table-style style-greystripes”>…</table>

Attention! In order to get table styles shown correctly, you need to create Force XHTML code as show bellow.

<table width="100%" class="table-style style-colorheader">
<thead>
<tr>
<th>Table header</th>
<th>Column header 1</th>
<th class=”highlight”>Column header 2</th>
<th>Column header 3</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Table footer</th>
<td colspan="3">Footer data</td>
</tr>
</tfoot>
<tbody>
<tr class="odd">
<th>Row header 1</th>
<td>Lorem ipsum</td>
<td class=”highlight”>Dolor sit amet</td>
<td>Lorem ipsum</td>
</tr>
</tbody>
</table>

List styles

List is the crucial element in every content, not only online websites. List can really help readers to scan the content and catch important pieces by just a glance.

Standard list styles
Unordered list

Usage:

<ul>
<li>…</li>
</ul>
Ordered list

Usage:

<ol>
<li>…</li>
</ol>
Arrow list styles
Red arrow

Usage:

<ul class="list-arrow arrow-red">
<li>…</li>
</ul>
Blue arrow

Usage:

<ul class="list-arrow arrow-blue">
<li>…</li>
</ul>
Green arrow

Usage:

<ul class="list-arrow arrow-green">
<li>…</li>
</ul>
Icon list styles 

You can attach any of UniIcons to items in the list. To set up icons, you need to add string jsn-icon-xxx to <ul>

class, where xxx is the icon name.

Article icon list

Usage:

<ul class="list-icon jsn-icon-article">
<li>…</li>
</ul>
Folder icon list

Usage:

<ul class="list-icon jsn-icon-folder">
<li>…</li>
</ul>

For more information about available icons and their names, please read section UniIcons of this document.

Number list style 
blue Bullet number list

Usage:

<ul class="list-number-bullet bullet-blue"><li>…
red Bullet number list

Usage:

<ul class="list-number-bullet bullet-red"><li>…
green Bullet number list

Usage:

<ul class="list-number-bullet bullet-green"><li>…
violet Bullet number list

Usage:

<ul class="list-number-bullet bullet-violet"><li>…
orange Bullet number list

Usage:

<ul class="list-number-bullet bullet-orange"><li>…
grey Bullet number list

Usage:

<ul class="list-number-bullet bullet-grey"><li>…
blue Digit number list

Usage:

<ul class="list-number-digit digit-blue"><li>…
red Digit number list

Usage:

<ul class="list-number-digit digit-red"><li>…
green Digit number list

Usage:

<ul class="list-number-digit digit-green"><li>…
violet Digit number list

Usage:

<ul class="list-number-digit digit-violet"><li>…
orange Digit number list

Usage:

<ul class="list-number-digit digit-orange"><li>…
grey Digit number list

Usage:

<ul class="list-number-digit digit-grey"><li>…

Site Tools

JSN Artista provides a cool feature to enhance website user experience: Color Selector. By enabling this selector, you will certainly be giving visitors the best user experience on your website. All settings from Site tools will be stored as visitor’s browser cookies for further usage. If this selector is disabled, nothing from Site Tools will be shown.

Site tools Presentation

You have two options to present Site tools and one option to hide it.

As Menu

With this option, all color selected are elegantly arranged in the submenu panel. The drop-down animation, transparency and background color settings will be inherited from the Main Menu settings.

Inline

With this option, all colors selected are located directly on the main menu bar. If you want to enable only some selectors, this option is the best.

Colors in Site tools

In the back-end, you are able to manage your site tools easily. You can choose which colors to be shown up and rearrange their orders, as you want by ticking or dragging then dropping the applicable checkboxes.

Video tutorial

It guides you how to configure sitetools visually. Here are video tutorials.

JSN Epic in the video is an example and these instructions can be applied to JSN templates as well.

This feature allows you to put ‘Go to top’ link at the bottom of page. It will smoothly scroll your page to the top, which is nice and good for website usability.

Enable Auto Icon links

If you enable this feature, the icons will be automatically attached to links based on the link url.

Printing Optimization

This feature will give your website visitors a totally optimized page for a printer with only the important content included. This is very useful when you want your website visitors to be able to print only the main content of the page and nothing else like the side-column content, etc.

Before printing optimization

After printing optimization

As you can see on screenshots, not only the content is simplified, but also the styling is optimized to get pure black on white ready for printing page.

At anytime, you can turn this feature off so the whole page will be output to a printer.

Social Icons

Social icons in JSN Artista

In JSN Artista, you are free to integrate your social channels without digging into the code. Just configure the social icons with their URLs with the parameter “Social icons” in the section “SEO & System” in the back-end. You can also change positions of social icons by dragging and dropping them.

Change social channels

Change positions of social channels

There are there default social channels: Facebook, Twitter and YouTube. You can integrate more 9 social channels: Google+, Pinterest, MySpace, Flickr, Dribble, StumbleUpon, Yahoo, Skype and RSS. Just click the button on the right and add new URLs to the pop-up “Social Network Integration”, the corresponding social integration will be shown up.

The pop-up of Social Network Integration

CSS/JS Compression

At JoomlaShine.com, we put great effort into optimizing our templates performance with multiple techniques like image sprites application, clean html code output and now one new step – CSS/JS Compression.

What it does is combining all continuous CSS/JS files into compressed files and delivering it in GZIP compressed state to browser. The order of CSS/JS files is the same before and after the compression.

Before enabling CSS/JS compression

After enabling CSS/JS compression

This feature significantly reduces http request number to server as well as overall loading size, which results in 35% performance boost.

You can configure the compression settings in the section “Assets Compression”:

  • Compress CSS/JS: Allows you to select to compress both CSS and JS, Only CSS, Only JS or nothing.
  • Max File Size: Defines the maximum size a compressed file should be.
  • Exclude from compression: Set a list of files you don’t want to be compre
  • Cache Directory: Specify the directory for storing compressed CSS/JS file

Optimize Script Tags

JSN Artista allows you to optimize script tags. When you enable the parameter “Optimize Script Tags” in the tab

SEO & System, all script tags will be moved from head section to the end of body section.

Video tutorial

It guides you how to configure SEO & System visually. Here are video tutorials.

JSN Epic in the video is an example and these instructions can be applied to JSN templates as well.

Analytics Code Position

You can define where to insert the code by template parameter Analytics Code Position. There are two options to choose from:

  • Before ending …</head> tag
  • Before ending …</body> tag

Extended Styles

Kunena

Thanks to Kunena, you can create a forum easily. Now JSN Artista supports Kunena with a Kunena Theme. You can create a forum with enhanced designs, 6 color variations, RTL support and 4 modules styled.

Kunena with JSN Artista theme

Styled modules

You can set 4 module designs – Latest module, Search module, Login module and Statistics module as Right-to-left layout.

Log in Module RTL

Statistics Module RTL

Latest Module RTL

Search Module RTL

Installation

  • You install Kunena via Joomla! administra
  • Log in the Customer Area, download JSN Artista theme for Kunena.
  • Unzip file jsn_artista_kunena_unzip_me_first.zip, then copy the folder jsn_artista to the path joomla_root\components\com_kunena\template
  • Go to joomla_root\components\com_kunena\template\jsn_artista\language, copy the file en- Gcom_kunena.tpl_jsn_artista and paste it in the folder joomla_root\components\com_kunena\language\en- GB
  • Go to the website backend -> Component -> Kunena Forum -> Template Manager -> Set JSN Artista as default

Now you have the JSN Artista theme on your website.

Attention!. Kunena is not included in the JSN Artista template package. You can download Kunena freely at http://www.kunena.org/

K2 Support

Here is how K2 and JSN Artista combination looks like. You can see all K2 components such as K2 Comment, K2 Content, K2 Users, Tag Cloud, Article, etc. work well with JSN Artista

JSN Artista is fully supported K2 style

Attention!
K2 is not included in the JSN Artista template package. You can download K2 freely at http://getk2.org/

Native Support

Joomla! 3.x support

Joomla! 3.x support

Product files download

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

  • JSN Artista XXX for Joomla! 3.x (installation package) where XXX is the template edition you have (FREE, PRO STANDARD or PRO UNLIMITED) – A data package which allows you to install JSN Artista template on available Joomla website
  • JSN Artista XXX for Joomla! YYY (Quickstart package) where YYY is the Joomla version (3.x)

– It contains both the latest Joomla installation file and JSN Artista data. You install this package normally as the flow to install Joomla. After that, you will get a totally new Joomla website with JSN Artista template and its sample data.

Besides these, you can download JSN Artista Documentation package, JSN Artista Graphics , etc.

Free Extensions

JSN PowerAdmin – Joomla Admin made easy

JSN PowerAdmin makes your Joomla administration process easy and enjoyable. It allows you to have full control over your Joomla website in a single screen. You can manipulate elements by using an intuitive GUI with drag-n- drop operations.

Main features of JSN PowerAdmin:

  • Search any items quickly in back-end with Spotlight Search
  • Control the website content in one place with Site Manager

JSN PowerAdmin is totally FREE!

VIEW DEMO DOWNLOAD JSN POWERADMIN

JSN ImageShow – Stunning Joomla gallery

The image gallery you see on our demo website is another cool product JSN ImageShow from JoomlaShine.com. This product is shipped with component, module and content plug-in so that you can present a gallery anywhere on every website. The image gallery works normally on desktop and mobile devices.

Presentation as module

Here you can see how JSN ImageShow is presented as a slideshow module in position promo. The theme Slider is implemented in JSN Artista demo site.

JSN ImageShow presented as slideshow module

Presentation as plugin

Here you can see how JSN ImageShow is presented as full-featured gallery with thumbnails inside the article.

JSN ImageShow presented as gallery in main body content

JSN ImageShow is NOT included in the template package, but you can download the free edition separately.

VIEW DEMO DOWNLOAD JSN IMAGESHOW

JSN UniForm – Easy Joomla form builder

JSN UniForm will bring you the new indulgence since you find out it is the easiest-to-use form extension for your site. Contact us, survey and job application are just some of thousand forms that this single extension can help you to create and control.

Besides the intuitive drag-n-drop operation, flexible form presentation and multiple pages layout, JSN UniForm also assists you to deeply understand your collected data with the multiple admins email notification, clean result display or submission filter.

A survey created by JSN UniForm

JSN UniForm is NOT included in the template package, but you can download the free edition separately.

VIEW DEMO DOWNLOAD JSN UNIFORM

JSN PageBuilder – Easiest way to builder Joomla! pages

JSN PageBuilder is the perfect tool to help you build and manage content for Joomla 3.x websites. Even you are a Joomla newbie, you now can create your desired page without worry. And for a developer who is tired of coding too much, this helpful extension will make your life better and save you time. You can be free from programming knowledge.

JSN PageBuilder not only allows you to build a new page but also helps you to redesign your old pages because it works directly on articles and modules. With a lot of advanced elements and background settings, JSN PageBuilder provides unlimited style variations for you to choose from. Just drag’n’drop and you will get a page in minutes, displayed beautifully on all browsers and mobile devices.

An article being edited using JSN PageBuilder

JSN PageBuilder is NOT included in the template package, but you can download the free edition separately.

VIEW DEMO DOWNLOAD JSN PAGEBUILDER

JSN EasySlider – Multipurpose content slider with super user-friendly interface

JSN EasySlider is the cutting-edge way to present content on website: Informative - Impressive - Interactive. It helps you grab attention of website visitors with stunning transitions and then stick the message to their mind with eye-catching visual content.

Its mighty features enable you to leverage the strength of all content types from text, image to video, in combination with smooth effects for the most effective information delivery. Moreover, JSN EasySlider is a masterwork of UX and UI Design. With its super user-friendly interface, you can create, modify and customize appealing sliders from the first time without touching a line of code.

Creating a slider using JSN EasySlider

JSN EasySlider is NOT included in the template package, but you can download the free edition separately for free.

VIEW DEMO DOWNLOAD JSN EASYSLIDER

Responsive design

All JoomlaShine.com templates are responsive. They work normally on for modern mobile devices such as iPhone, Android and Windows mobile-based.

Mobile layout overview on iPhone

Header and top content

Main body

Bottom content

Mobile menu

Mobile layout overview on iPad

Both vertical or horizontal iPhone and vertical iPad are presented in the same way with 2 columns layout, horizontal iPad is presented with 3 columns layout.

Mobile layout overview on iPad

Read more: Section Mobile settings

Source ordering

One of the most important SEO techniques is to make sure that search engines 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.

Multilingual support

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. More information about how to make your own translation can be found in JSN Artista Customization Manual.

Currently our templates support 14 primary languages with more to come in the future.

English

German

Dutch

Italian

Spanish

French

Japanese

Danish

Russian

Polish

Bulgarian

Croatian

Greece

Brazilian Portuguese

If you want to contribute and add a translation into your own language, please feel free to contact us at:

http://www.joomlashine.com/contact-us/general-inquiries.html.

Custom 404 Error Page

The default error page comes from Joomla! is super ugly and sure to scare people away from your site at first glance, so with JSN Artista, it provides a clean and good looking Custom 404 Error page for your need.

Custom Offline Page

The default Joomla! offline page hasn’t changed much since the old days and doesn’t really look good. Therefore, we provide a Custom Offline page with professional and easy to customize your own way.

JSN Artista template customization

Now as you have learned every feature of the template, it’s time to move on and customize it to your needs. Go ahead and open the next documentation called JSN Artista Customization Manual. In this manual, you will find a detailed description about how to customize every bit of the template to make it suit your needs.

JSN Artista Customization Manual

Export to PDF file