42
JSN Dona 2 Portfolio Configuration Manual Getting Started The Sun Framework is automatically installed when you install JSN Shine or any JSN Template Gen.2 templates. In case manual installation is needed, please download the plug-in from our Customer Area and install it as a normal Joomla extension: Navigate to Extensions Manage Upload Packages Select the Choose File button. Locate the downloaded ZIP and click Upload & Install to begin the installation process. System Requirements Joomla Requirements Joomla 3.6+ Server Requirement Software: PHP 5.4.x Database MySQL 5.1 + SQL Server 10.50.1600.1 + PostgreSQL 8.3.18 + Web Server Apache 2.0 + Microsoft IIS 7 + Nginx 1.0 Browser Requirement Firefox 4 + Google Chrome 10 + Opera 10 + Safari 5 + Microsoft Edge Development Environment Local development is preferred to work with Sun framework for the best performance. You can use the following servers suggestion list to develop your site locally on your computer. Windows WAMPSEVER XAMPP for Windows Linux LAMP Bubdle XAMPP for Linux Mac OS MAMP & MAMP Pro XAMPP for Mac OS Folder Structure Sun Framework

JSN Dona 2 Portfolio Configuration Manual - … · JSN Dona 2 Portfolio Configuration Manual ... Images, flash files and cascading style sheets (css) files are released under a JoomlaShine.com

  • Upload
    hanhan

  • View
    252

  • Download
    1

Embed Size (px)

Citation preview

Page 1: JSN Dona 2 Portfolio Configuration Manual - … · JSN Dona 2 Portfolio Configuration Manual ... Images, flash files and cascading style sheets (css) files are released under a JoomlaShine.com

JSN Dona 2 Portfolio Configuration Manual

Getting StartedThe Sun Framework is automatically installed when you install JSN Shine or any JSN Template Gen.2 templates.

In case manual installation is needed, please download the plug-in from our Customer Area and install it as a normal Joomla extension:Navigate to Extensions → Manage → Upload Packages → Select the Choose File button. Locate the downloaded ZIP and click Upload &Install to begin the installation process.

System RequirementsJoomla Requirements

Joomla 3.6+

Server Requirement

Software: PHP 5.4.x

Database

MySQL 5.1 +SQL Server 10.50.1600.1 +PostgreSQL 8.3.18 +

Web Server

Apache 2.0 +Microsoft IIS 7 +Nginx 1.0

Browser Requirement

Firefox 4 +Google Chrome 10 +Opera 10 +Safari 5 +Microsoft Edge

Development Environment

Local development is preferred to work with Sun framework for the best performance. You can use the following servers suggestion list todevelop your site locally on your computer.

Windows

WAMPSEVERXAMPP for Windows

Linux

LAMP BubdleXAMPP for Linux

Mac OS

MAMP & MAMP ProXAMPP for Mac OS

Folder StructureSun Framework

Page 2: JSN Dona 2 Portfolio Configuration Manual - … · JSN Dona 2 Portfolio Configuration Manual ... Images, flash files and cascading style sheets (css) files are released under a JoomlaShine.com

JSN Template

License & UsageYou should carefully read the following terms and conditions of JoomlaShine. Your download, purchase or use of Sun Framework impliesthat you have read and accepted these terms and conditions. If you have any questions or concerns, please contact us through the contactpage.

License

Sun Framework is FREE, and released under the GPLv2.0 license: (http://www.gnu.org/licenses/gpl-2.0.html) Everyone is permitted to copyand distribute verbatim copies of this license document, but changing it is not allowed.

Images, flash files and cascading style sheets (css) files are released under a JoomlaShine.com Proprietary License. All content and imagesshown on demos or sample data are for presentation purposes ONLY and ARE NOT INCLUDED with any templates or extensions.

Usage

You are free to use Sun Framework for both personal and commercial projects without any payment or membership. You do not have tokeep the Sun Framework or JoomlaShine links and logos in the front end.

However, if you sell any template using Sun Framework or you want to distribute for ecommerce purpose, please don’t remove theJoomlaShine copyright marks in the backend administrative interface and from the source code.

Template Package Installation1. Download the template installation package

Log in JoomlaShine Customer Area to download the template package that you have purchased. Make sure that you have downloaded the"Installation Package."

Page 3: JSN Dona 2 Portfolio Configuration Manual - … · JSN Dona 2 Portfolio Configuration Manual ... Images, flash files and cascading style sheets (css) files are released under a JoomlaShine.com

Depending on your order, you should have a template installation file either called jsn_dona-portfolio_developer_Z.Z.Z_install.zip if youpurchased the DEVELOPER Edition, or jsn_dona-portfolio_individual_Z.Z.Z_install.zip if you purchased the INDIVIDUAL Edition (ZZZ is thetemplate version)

2. Install the template package

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

In Joomla! Administration, go to menu Extensions -> Extension Manager -> Install click Or browse for the file, select templateinstallation file or drag and drop template installation file.

Install the template package

Installation file will be uploaded to your server and installed in your Joomla. Once the process is completed, you will see the followingnotification

Install successfully

Now, the template is installed, but your layout and style need to be re-configured. You can build your own layout and set your style from

Page 4: JSN Dona 2 Portfolio Configuration Manual - … · JSN Dona 2 Portfolio Configuration Manual ... Images, flash files and cascading style sheets (css) files are released under a JoomlaShine.com

Now, the template is installed, but your layout and style need to be re-configured. You can build your own layout and set your style fromhere. However, it will be more convenient if you choose to install our sample Data.

Please see our instructions below for further details about sample data installation

Sample Data InstallationAll JoomlaShine templates have unique feature of installing sample data which makes your website look the same as on the template demowebsite.

You can start the sample data installation process by clicking on "Get Started" button, which appears at the end of your template installationsteps (see above), or from the Data tab on the top of JSN Dona Portfolio template manager.

Install sample data

Show template’s image, click Install

Window installer

Option 1: Install everything including content, layout and style

Your current contents will be erased. This option is suitable when you build a new website, and current contents are of no importance to you.

Page 5: JSN Dona 2 Portfolio Configuration Manual - … · JSN Dona 2 Portfolio Configuration Manual ... Images, flash files and cascading style sheets (css) files are released under a JoomlaShine.com

1. On page JSN Dona Portfolio 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 versions of JSN extensions: JSN ImageShow, JSN PowerAdmin, JSN Mobilize, JSN EasySlider, JSN PageBuilder 2 andJSN UniForm.Install sample data: this step will check the template version before installing the sample data

2. Click the Finish button to Return to template settings page for further configuration

Page 6: JSN Dona 2 Portfolio Configuration Manual - … · JSN Dona 2 Portfolio Configuration Manual ... Images, flash files and cascading style sheets (css) files are released under a JoomlaShine.com

Notes about Sample Data :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. Therefore, if you need the sampledata for the 3rd party extensions that come with your template, make sure that you have installed them all beforerunning sample data installation.In some cases, the 3rd extensions that you have installed are not matched with the ones that come with sampledata, the installation process will not be completed. Please check the log at the end of the installation step to see therequired versions, then go to the extensions' websites and download them. After that, run the sample datainstallation again.

Option 2: Install only layout and style

Your current contents will be untouched. This option is suitable when you want to migrate your existing site to JSN Gen.2 templates

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_dona-portfolio_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

Page 7: JSN Dona 2 Portfolio Configuration Manual - … · JSN Dona 2 Portfolio Configuration Manual ... Images, flash files and cascading style sheets (css) files are released under a JoomlaShine.com

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.

Quickstart InstallationQuickstart package is a fully functional Joomla! package containing the CMS itself, the database, the selected template and all extensionsused in the template.

Once you install the quickstart successfully, you will have a complete website that looks exactly same as our Demo, with all theconfigurations and data that we used on the demo site in one place.

NOTE:

You can NOT install a Quickstart package in Joomla administration. Instead, you will need to upload it to the host, extract allthe files - then click on the URL and follow the instruction there to set up your package.Commercial extensions are not included in a quickstart package, even if you have purchased them. After installing a quickstartpackage, install these extensions and run sample data installation to get the full demo look for these extensions.

Preparation

A template quickstart package downloaded from JSN Customer Area

A hosting Cpanel account or an FPT connection

A MySQL database with a user that has full privileges over this database.

Important notes

For copyright reasons, we use blank thumbnail images instead of demo photos in quickstart packages. You will need to replace them

Page 8: JSN Dona 2 Portfolio Configuration Manual - … · JSN Dona 2 Portfolio Configuration Manual ... Images, flash files and cascading style sheets (css) files are released under a JoomlaShine.com

For copyright reasons, we use blank thumbnail images instead of demo photos in quickstart packages. You will need to replace themall with your own photo stocks.

Commercial extensions will not be included in the quickstart. You will need to install them separately after the quickstart package hasbeen installed.

In some cases, you will need to update your Joomla version after installing the quickstart package.

Step 1: Download the Quickstart package from JSN Customer Area

Note that the Quickstart package often has a big file size than the normal installation package. So it will be helpful if you have a goodinternet connection.

Step 2: Upload the quickstart to your web folder

There are two main options, depending on your hosting features.

Option 1: Upload using Cpanel

Log on your hosting’s Cpanel → Go the public_html folder → Upload the Quickstart zip package → Extract all the files in this folder

Option 2: Using FTP to upload extracted files from the Quickstart package to your public_html web folder

Page 9: JSN Dona 2 Portfolio Configuration Manual - … · JSN Dona 2 Portfolio Configuration Manual ... Images, flash files and cascading style sheets (css) files are released under a JoomlaShine.com

Step 3: Open your web browser, type or paste your URL in the address bar to start the quickstart installation process

Fill in all the fields below as required. Once you have completed all the fields, click NEXT to proceed to the next step.

Step 4: Enter your database configuration information

On this page, please enter the correct database info that you created for this Joomla.

Once you have filled in all the info, click NEXT to continue.

Page 10: JSN Dona 2 Portfolio Configuration Manual - … · JSN Dona 2 Portfolio Configuration Manual ... Images, flash files and cascading style sheets (css) files are released under a JoomlaShine.com

If all the information is correct, the quickstart package will be installed as below:

Step 5: Finalize the installation process

The congratulation message will appear when the package is fully installed. On this screen, you will be prompted to remove Joomlainstallation.

Click on Remove Installation folder to perform this action.

After that, you can either log on your backend to start working on the site by clicking on “Administrator” button, or check how the websitelooks by clicking on “Site” button.

Info & Auto-Update

Page 11: JSN Dona 2 Portfolio Configuration Manual - … · JSN Dona 2 Portfolio Configuration Manual ... Images, flash files and cascading style sheets (css) files are released under a JoomlaShine.com

In the About parameter, you can find some basic information of the JSN template and JSN Sun Framework, including version, released date,and copyright information. Please make sure you are using the latest versions of JSN template and JSN Sun Framework.

If you are not using the latest versions, you will see the following notification:

and there will be also another notification displayed on the top of the page requiring you to update the products:

Click the Update button, you will see a modal window asking you to set token key in order to get update and support for the products.

Page 12: JSN Dona 2 Portfolio Configuration Manual - … · JSN Dona 2 Portfolio Configuration Manual ... Images, flash files and cascading style sheets (css) files are released under a JoomlaShine.com

Click the Set token key button, you will be directed to the Global Parameters page:

Token key will be used to verify your purchases, which is required to get product update and support. Just input your JoomlaShine customercredential to obtain the key.

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

Learn more about How to migrate to JSN gen-2 templates (/joomla-hub/migrating-to-jsn-templates-gen-2.html)

Product Domain RegistrationsIf you are using JSN template DEVELOPER Edition with unlimited website licenses, except for the 1st website/domain, you should registerthe website domains that you want them to get JoomlaShine updates and support by following these steps:

Login to your JoomlaShine account, go to Customer Area -> Orders and DownloadsNavigate to your Order Items, click the Register button:

Enter your website domain in the registration field one by one. Your domain will be automatically activated after you click theRegister button.

If you don’t want any website domain to receive JoomlaShine updates and support, simply click the Deactivate now button.

Page 13: JSN Dona 2 Portfolio Configuration Manual - … · JSN Dona 2 Portfolio Configuration Manual ... Images, flash files and cascading style sheets (css) files are released under a JoomlaShine.com

LayoutThe JSN Sun Framework enables you to create custom style for almost everything on the template.

This section covers the basics of style customization in JSN Dona Portfolio and other templates powered by Sun Framework.

General

Concept OverviewTo start with layout configuration, Go to Extension → Template → JSN_template_default

The first tab you see will be the Layout tab, where you can have the ultimate control of the template layout.

Layout Overview

Sun Layout Builder is a very flexible and powerful tool which gives you the ability to build and customize the existing template with theintuitive drag-and-drop interface.

The Layout Builder consists of 3 main areas:

1. Layout Items: list of items which you can drag & drop into the layout.2. Layout: including the main layout and 4 off-canvas regions. There are areas where your template’s layout items are positioned and

built.3. Setting panel: all the settings related to layout items which are being configured.

Concepts

Sun Framework’s layout concepts:

1. Page: Overal settings for the layout2. Section: Section is a division of a page. A section is automatically created when you add a row to an empty area in the layout. It

contains one or more row in which you can add Layout Items.3. Row4. Column5. Layout items: These are smallest pieces in the layout. Each item is made up of one column.

Layout ControlUndo & Redo

Page 14: JSN Dona 2 Portfolio Configuration Manual - … · JSN Dona 2 Portfolio Configuration Manual ... Images, flash files and cascading style sheets (css) files are released under a JoomlaShine.com

Sun Layout Builder allows you to undo and redo the actions that you made. Simply hit Undo to switch back or Redo to go forth. This tool willsurely save you a huge amount of time and efforts. Worry-free if you accidentally make a mistake.

Save Layout

Sun Framework offers Ajax save button for each settings tab. Changes will be saved quickly without having to re-load the setting pages.

Save as Custom Layout

This option gives you the ability to save the current layout and use it later on.

To save the current layout as a custom one, just click on “Save on custom layout”. After that, type the name of the layout.

Load Custom Layout

This button enables you to load custom layout that you saved.

Building a LayoutDrag & Drop

Page 15: JSN Dona 2 Portfolio Configuration Manual - … · JSN Dona 2 Portfolio Configuration Manual ... Images, flash files and cascading style sheets (css) files are released under a JoomlaShine.com

You can start building your own layout by drag & drop items on the left panel into the layout area. After that, you can adjust their settings viathe right panel.

If you drag a new item into a blank area of the layout, it will automatically create a row, a column and section wrapped around thisitem.If you drag a new item below an existing row, a new row which contains this new item will be created. These two rows will be in thesame section.If you drag a new item below an existing item/row in a column, these two items will be wrapped in the same column.You can drag an existing item in the layout to any position simply by clicking on the drag icon in the item and bringing it to anywhereyou want.

Adjusting Column Width

To change a column width, simply move your mouse cursor on the dividing line between two columns and drag it left or right, depending onhow you want it to go.

Sun Framework utilizes Bootstrap 3, which means there will be 12 columns in the layout.

Layout SettingsCommon Settings

Most of the items in Sun’s layout share the following settings

HideCloneDeleteCustom classes: for custom stylingResponsive display: hide or display item in different viewports (applied for columns/items)

Page 16: JSN Dona 2 Portfolio Configuration Manual - … · JSN Dona 2 Portfolio Configuration Manual ... Images, flash files and cascading style sheets (css) files are released under a JoomlaShine.com

Page Settings

This panel is the first thing you see when opening the Layout tab. It contains general settings for the page layout.

Settings DescriptionEnable responsive Turn on or off responsive layout mode. This feature is on by defaultShow desktop switcher Display an icon that allows you to switch from mobile view to desktop view.

Boxed layoutChange from full-width layout to boxed layout. Upon selecting this option, you can set the width for yourlayout.

Margin Set margin values for the page

Show “Go to Top” buttonDisplay go-to-top button near the bottom of the website. Upon selecting this option, you can select propericons for this button.

Section Settings

A section is automatically created when you drag a Layout Item into a blank area in the layout

Section settings will appear when you select any section in the layout. See the available settings for a section in the screenshot below:

Settings DescriptionEnable full width Set full-width layout for a sectionEnable sticky Set sticky mode for a section. This feature is often used for header sectionMargin Set margin values for a sectionPadding Set padding values for a section

Row Settings

Page 17: JSN Dona 2 Portfolio Configuration Manual - … · JSN Dona 2 Portfolio Configuration Manual ... Images, flash files and cascading style sheets (css) files are released under a JoomlaShine.com

Row settings will appear when you select any row in the layout. See the available settings for a row in the screenshot below:

Settings DescriptionMargin Set margin values for a sectionPadding Set padding values for a sectionCustom classes Specific CSS classes for custom styling

Column Settings

Column settings will appear when you select any column in the layout. See the available settings for a column in the screenshot below.

Settings DescriptionMargin Set margin values for a sectionPadding Set padding values for a sectionCSS classes Specific CSS classes for custom stylingDisplay in layouts Set visibility of columns in each viewport: mobile, tablet, laptop, desktop

Flexible Space

Flexible Space allows you to add an empty space between items in the layout. This item doesn't have any special function but merely astyling tool.

Off-canvas Section

This section give you the ability to place menus, modules and positions in a special off-canvas sidebar, used for both desktop and mobileview.

The Sun framework offers 4 off-canvas sections, which are located on the top, right, bottom and left side of the layout.

Page 18: JSN Dona 2 Portfolio Configuration Manual - … · JSN Dona 2 Portfolio Configuration Manual ... Images, flash files and cascading style sheets (css) files are released under a JoomlaShine.com

To set up a off-canvas section, you only need to click on one of the toggle buttons, which are available on each side of the layout builder,depending on where you want the off-canvas section to display on the front end.

Settings DescriptionWidth The width of the off-canvas section (Applied for left and right off-canvas only)Height The height of the off-canvas section (Applied for top and bottom off-canvas only)Padding Set the padding value, including top, right, bottom and left paddingToggle position Set the position of the toggle buttonCustom classes Add custom CSS classes for the off-canvas section.

Responsive Layout

The responsive mode is enabled by default. If you don’t want to use Responsive Layout, go back to Page Settings and deselect “EnableResponsive”.

You can adjust the width of each item in tablet and mobile, as well as their visibility in each viewport, by going to each viewport and changeits settings.

The responsive viewport of Sun Framework layout is similar to that of Bootstrap 3. For further information, please see it .

Section

Homepage PortfolioNote that all the items in Header and Footer (1, 2) are the same in all pages. Please check the above section on header configuration(/joomla-hub/jsn-dona-2-users-guide.html#header-3870).

Promo

Page 19: JSN Dona 2 Portfolio Configuration Manual - … · JSN Dona 2 Portfolio Configuration Manual ... Images, flash files and cascading style sheets (css) files are released under a JoomlaShine.com

Promo section on frontend

To edit Promo section for your website, go to Extensions → Templates → jsn_dona2_portfolio - Default → Layout → Promo.

Promo section on backend

To edit the module in the promo position, go to Extensions → Module and search for Homepage Slider, then open this module, and to openthe JSN EasySlider used in this module to edit.

Alternatively, you can go from Components → JSN EasySlider, then select the slider named Portfolio to edit.

Content Top

Page 20: JSN Dona 2 Portfolio Configuration Manual - … · JSN Dona 2 Portfolio Configuration Manual ... Images, flash files and cascading style sheets (css) files are released under a JoomlaShine.com

To edit Content Top information for your website, go to Extensions → Templates → jsn_dona2_portfolio - Default → Layout → Content Top.

Content Top on frontend

Content Top on backend

To edit the module in the content-top position, go to Extensions → Module -> Search for Portfolio - About Me

Switch Editor to JSN PageBuilder 2 to edit the module's content:

Page 21: JSN Dona 2 Portfolio Configuration Manual - … · JSN Dona 2 Portfolio Configuration Manual ... Images, flash files and cascading style sheets (css) files are released under a JoomlaShine.com

Content Top Below

To edit Content Top information for your website, go to Extensions → Templates → jsn_dona2_portfolio - Default → Layout → Content TopBelow.

Content Top on frontend

Content Top on backend

To edit the module in the content-top position, go to Extensions → Module -> Search for Portfolio - My services

Page 22: JSN Dona 2 Portfolio Configuration Manual - … · JSN Dona 2 Portfolio Configuration Manual ... Images, flash files and cascading style sheets (css) files are released under a JoomlaShine.com

Make sure that you have switched your editor to JSN PageBuilder 2 to edit the module's content:

Content

Content on frontend

To edit Content information for your website, go to Articles → Portfolio - Featured Projects

Page 23: JSN Dona 2 Portfolio Configuration Manual - … · JSN Dona 2 Portfolio Configuration Manual ... Images, flash files and cascading style sheets (css) files are released under a JoomlaShine.com

Content Bottom Over

To edit Content information for your website, go to Extensions → Modules and search for Portfolio - Testimonials

Page 24: JSN Dona 2 Portfolio Configuration Manual - … · JSN Dona 2 Portfolio Configuration Manual ... Images, flash files and cascading style sheets (css) files are released under a JoomlaShine.com

Content Bottom

To edit Content bottom section in your website, go to Extensions → Modules and search for Newsletter. From here you can open the formembedded in this module to customize.

Alternatively, you can find the form by going to Components → JSN Uniform → Forms and select "Want to hire me" form, or you can use yourown form here.

Page 25: JSN Dona 2 Portfolio Configuration Manual - … · JSN Dona 2 Portfolio Configuration Manual ... Images, flash files and cascading style sheets (css) files are released under a JoomlaShine.com

Styles

GeneralPage style

This area gives you the ability to edit overall styles for both page outer and page inner.

If boxed layout is disabled, only settings for page outer style will be displayed:

Boxed layout is disabled

If boxed layout is enabled, settings for both page outer and page inner style will be displayed:

Boxed layout is enabled

Page 26: JSN Dona 2 Portfolio Configuration Manual - … · JSN Dona 2 Portfolio Configuration Manual ... Images, flash files and cascading style sheets (css) files are released under a JoomlaShine.com

Boxed layout is enabled

Settings DescriptionPage outer These settings are visible ONLY when boxed layout is enabledBackground color Background color of the page outer.Background image Background image of the page outer.Background image settings Settings when background image is used.Page inner Background color Background color of the page inner.Border Page border values. Visible only when boxed layout is enabled.Boxed shadow Used when boxed layout is enable

Color style

To set up the style color for main and sub in the template, click on Main color and sub color in the preview panel on the left side and changetheir settings on the right panel.

Style color for main and sub in the template

Heading style

To set up the style for all the headings in the template, click on any heading in the preview panel on the left side and change their settings onthe right panel.

Style all heading in the template

Content style

To set up the style for content text, click on the paragraph text area under the heading in the preview panel on the left side and change theirsettings on the right panel.

Page 27: JSN Dona 2 Portfolio Configuration Manual - … · JSN Dona 2 Portfolio Configuration Manual ... Images, flash files and cascading style sheets (css) files are released under a JoomlaShine.com

Style for content text in the template

Button style

To set up the style for buttons, including default and primary button, click on each of these buttons on the preview panel and change itssettings on the right panel.

Style for buttons in the template

Link style

To set up the style for links, click on the link in the preview panel on the left side and change its settings on the right panel.

Style for link in the template

SectionGo to the Style tab, you will see the same section names and many styling options for each of them. For example, the style for section "Top"in layout tab will also be under section "Top" in style tab. This makes it easy for you to locate where the customization can take place.

Page 28: JSN Dona 2 Portfolio Configuration Manual - … · JSN Dona 2 Portfolio Configuration Manual ... Images, flash files and cascading style sheets (css) files are released under a JoomlaShine.com

Section container

You can change the style of each section’s container simply by clicking on the area around the border of the section that you want to havecustom style, and change its settings on the right panel.

Style section's container

Section heading

By default, section headings style will be inherited from General style. If you want to have different styles for section headings, click on “Usecustom settings” to activate custom style settings.

Style section's heading

Section content

By default, section content style will be inherited from General style. If you want to have different style for section content, click on “Usecustom settings” to activate custom content style settings.

Style section's content

Page 29: JSN Dona 2 Portfolio Configuration Manual - … · JSN Dona 2 Portfolio Configuration Manual ... Images, flash files and cascading style sheets (css) files are released under a JoomlaShine.com

Section button

By default, section button style will be inherited from General style. If you want to have different style for section button, click on “Usecustom settings” to activate custom button style settings.

Style section's button

Section link

By default, section link style will be inherited from General style. If you want to have different style for section link, click on “Use customsettings” to activate custom link style settings.

Style section's link

ModuleFirst, Go to tab Style --> Module

From here you will see some module styles provided by the template.

The Sun Framework comes with 4 highly flexible module styles, and you can customize each of them in the same way with Section.

Module container

Similar to section container style, you can change the style of each module’s container simply by clicking on the module that you want tohave custom style, and change its settings on the right panel.

Page 30: JSN Dona 2 Portfolio Configuration Manual - … · JSN Dona 2 Portfolio Configuration Manual ... Images, flash files and cascading style sheets (css) files are released under a JoomlaShine.com

Style module's container

Module Title

To change the style of a module’s title, click on the title of the module style that you want to customize in order to see its available settings.

Style module's title

Module content

To change the style of a module’s content, click on the content area of the module style that you want to customize in order to see itsavailable settings.

Style module's content

Module button

By default, the button style of the module is inherited from the General settings.

To enable custom style for module settings, select “Use custom setting” to open custom style options and make changes as you want.

Page 31: JSN Dona 2 Portfolio Configuration Manual - … · JSN Dona 2 Portfolio Configuration Manual ... Images, flash files and cascading style sheets (css) files are released under a JoomlaShine.com

Style module's button

Module link

To change the style of a module’s hyperlink, click on link in the module style that you want to customize in order to see its settings.

Style module's link

To apply a style to a module:

Open a module in Joomla Module ManagerGo to Advanced tab:

1. Select a style from the list in the dropdown

2. Add FontAwesome code in Header Class to have icons for your module heading

Apply a style to a module

More FontAwesome icons can be found here: http://fontawesome.io/icons/

MenuTo change a menu style, go to tab menu and change their style settings in the right panel.

To change a parental menu style, click on any parental menu item to open its settings and customize it.

Page 32: JSN Dona 2 Portfolio Configuration Manual - … · JSN Dona 2 Portfolio Configuration Manual ... Images, flash files and cascading style sheets (css) files are released under a JoomlaShine.com

Style for menu root

To change a sub-menu item style, click on the submenu in the preview panel to open the settings.

Style for menu dropdown

MegamenuSun Framework, as well as templates built with this framework, allows you to create a mega menu for site navigation and usabilityenhancement.

They provide a visual way to create a mega menu with clicks and drag-n-drop function, without touching a single line of code. Everything isdone in a similar way the Layout is built.

To set up mega menu, click “Mega Menu” on top bar of the template framework.

Set Up Mega MenuMegamenu in templates powered by Sun Framework can be built with the following steps:

Select the menu & language of the menu that you want to config

Page 33: JSN Dona 2 Portfolio Configuration Manual - … · JSN Dona 2 Portfolio Configuration Manual ... Images, flash files and cascading style sheets (css) files are released under a JoomlaShine.com

Select the menu & language of the menu that you want to config

Drag menu item into the main menu panel. Settings for each of these items will be available on the right panel.

Config menu container, row and column in the same way you do with the Layout.

Mega Menu Layout & StyleMenu container

Menu row

Menu column

Mega Menu ItemGeneral function

Similar to items in the layout, each of the Mega Menu item, row and column shares the following functions, which are available in the rightpanel.

Hide: temporarily hide item/row/columnClone: clone item/row/columnRemove: remove item/row/column

Page 34: JSN Dona 2 Portfolio Configuration Manual - … · JSN Dona 2 Portfolio Configuration Manual ... Images, flash files and cascading style sheets (css) files are released under a JoomlaShine.com

Megamenu items

Apart from submenu item, Megamenu includes items similar to those in Layout builder, namely Module, Position, Custom HTML, Image.

Details about their settings can be found in Layout chapter.

System

Assets CompressionWith Sun Framework, 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 orderof CSS/JS files is the same before and after the compression. This feature significantly reduces http request number to server as well asoverall loading size, which results in significant performance boost.

You can configure the compression settings in the tab “Advanced” → 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 compreCache Directory: Specify the directory for storing compressed CSS/JS file

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

Before tagBefore tag

Page 35: JSN Dona 2 Portfolio Configuration Manual - … · JSN Dona 2 Portfolio Configuration Manual ... Images, flash files and cascading style sheets (css) files are released under a JoomlaShine.com

Custom FilesFor all customization purposes, Sun framework allows you to load multiple CSS / JS files you customized without altering the template corefiles.

Just put custom CSS/JS files to template's CSS/JS folder and define them in template parameter Custom CSS File(s) and Custom JS File(s);each file name at a line.

Please note: If you enable CSS/JS Compression feature, all custom CSS files will be compressed as well.

Import/Export Settings

The Sun Framework enables you to export and import your template settings. You can export all the setting that you configured to save as abackup file or reuse it somewhere.

To import/export template settings, go to the top menu → Maintenance → select Import or Export

Please note: When you import the backup file, your current template settings will be overwritten.

ExtrasTo enable Cookies consent, go to Extras → Cookie Law → Select “Enable Cookie Consent” to config its layout styles and contents.

Page 36: JSN Dona 2 Portfolio Configuration Manual - … · JSN Dona 2 Portfolio Configuration Manual ... Images, flash files and cascading style sheets (css) files are released under a JoomlaShine.com

Settings DescriptionEnable Cookie ConsentChoose whether to use Cookie Law.Style There are 2 styles of Cookie Law to choose from: Light and DarkBanner Placement Select position of initial consent slide-down notificationMessage Cookie law content: You can use either a simple text message for cookie law, or use an article to display the message.Accept Button Text The label of the accept buttonRead More Button TextThe text shown on the link to the cookie policy (requires Your Cookie Policy Link to be set)Cookie Policy link The url of the Cookie Policy. If left blank, the link will be hidden.Once the cookie law is enabled, you will have two options:

Enter your cookie law notification messageUse an article as cookie law: this option is perfect when you want to create a multilingual cookie law notification

Cookie Law

Cookie Law MessageIn the box Message, select TextEnter your cookie law notification message in the text box as well as config other params

Display a Cookie Law MessageThis option is important when you want to have a multi-lingual cookie law messageTo use this option, in the box Message -> Select Articles.Then browse the article that you want to use as your Cookie Law message

Assignment

Page 37: JSN Dona 2 Portfolio Configuration Manual - … · JSN Dona 2 Portfolio Configuration Manual ... Images, flash files and cascading style sheets (css) files are released under a JoomlaShine.com

This is where you assign the template style to specific menu items. All of your menu items will be listed here.

After assigning the menu item for your template, click Save Assignment to save the settings.

Extended StylesOne of hottest features in JSN Template is extended styles adapted for a lot of Joomla! extensions, for example: K2, VirtueMart, JEvents and EasyBlog,....

Technically extended styles are overrides of default extensions style (images + CSS) and located in folder /ext inside template folder. Someextensions have their own template system and you might want to turn off extended style thru template parameter in order to use thosenative templates.

K2 SupportJSN Dona Portfolio supports K2 and we also build extended style to make K2 look in style with the template. Below is how K2 and JSN DonaPortfolio combination looks like. You can see all K2 components such as K2 Comment, K2 Content, K2 Users, Tag Cloud, Article, etc. workwell with JSN Dona Portfolio.

To setting K2 on backend you go to: Components-> K2 and setting for your website.

Attention! If you install JSN Dona Portfolio manually, you will need to install K2 by yourself. K2 is not included in the JSN Dona Portfoliotemplate package. You can download K2 for free at http://getk2.org/ (http://getk2.org/)

If you install our Quickstart package, then K2 is already included and you don’t have to install it!

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

Kunena with JSN Dona Portfolio theme

Page 38: JSN Dona 2 Portfolio Configuration Manual - … · JSN Dona 2 Portfolio Configuration Manual ... Images, flash files and cascading style sheets (css) files are released under a JoomlaShine.com

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 (http://www.kunena.org/)via Joomla! administratorLog in the Customer Area, (http://www.joomlashine.com/customer-area.html)download JSN Dona Portfolio theme for Kunena.Unzip file jsn_dona-portfolio_kunena_unzip_me_first.zip, then copy the folder jsn_dona-portfolio to the pathjoomla_root\components\com_kunena\templateGo to joomla_root\components\com_kunena\template\jsn_dona-portfolio\language, copy the file en- Gcom_kunena.tpl_jsn_dona-portfolio and paste it in the folder joomla_root\components\com_kunena\language\en- GB

Page 39: JSN Dona 2 Portfolio Configuration Manual - … · JSN Dona 2 Portfolio Configuration Manual ... Images, flash files and cascading style sheets (css) files are released under a JoomlaShine.com

Go to the website backend -> Component -> Kunena Forum -> Template Manager -> Set JSN Dona Portfolio as default

Now you have the JSN Dona Portfolio theme on your website.

Attention!. Kunena is not included in the JSN Dona Portfolio template package. You can download Kunena freely athttp://www.kunena.org/ (http://www.kunena.org/)

Product UpdateJSN Template Update Notification

Open a JSN template → If the template is not updated, you will see a notification on the top bar like “Update available for JSN XXXversion” → Click on the Update button on the top right.

Upon clicking the Update button, you will see the following screen if you have not set your token key for the template → Click on SetToken Key button.

You will be redirected to the page Global Parameters - Token Key, where you will be asked to enter your JSN username and passwordand generate your Token key. Make sure that you have registered your domain. If not please follow the domain registration guidelinesto complete the process, then get back to this step.

Page 40: JSN Dona 2 Portfolio Configuration Manual - … · JSN Dona 2 Portfolio Configuration Manual ... Images, flash files and cascading style sheets (css) files are released under a JoomlaShine.com

Register your domain(s)

Step 1: Log on JSN Customer Area

Go to JoomlaShine website: https://www.joomlashine.com (https://www.joomlashine.com/)Click on My Account menu on the top right

Enter your Username & Password to log on the system

Step 2: Go to Order & Download section

Page 41: JSN Dona 2 Portfolio Configuration Manual - … · JSN Dona 2 Portfolio Configuration Manual ... Images, flash files and cascading style sheets (css) files are released under a JoomlaShine.com

Step 3: Find your order(s) and register your domain(s)

Click the Register button next to your order

Type the domain(s) that you want to register and click the Register button next to your order.On this screen, you will see that all the domains that you register will be added and activated (the word “activated” is next to thedomain names)

In case you want to deactivate a domain names from your list, simply click on the “Deactivate now” button

Page 42: JSN Dona 2 Portfolio Configuration Manual - … · JSN Dona 2 Portfolio Configuration Manual ... Images, flash files and cascading style sheets (css) files are released under a JoomlaShine.com

Verify JSN template license

The following steps are only applied for Shine and gen.2 templates, meaning that templates released from JSN Shine onward.

Go to your template manager → Click Global Parameters → Select “Token key”Enter your JSN username & password → Click “Get token key”

This website uses cookies to ensure you get the bestexperience on our website. More information(https://www.joomlashine.com/joomlashine/privacy-policy.html)

Got It!