SJ Lotte

View demoMore detail
This guide will help you install SJ Lotte and extensions included in the template step by step.

1REQUIREMENT – Back to top

At the basic level, this template will require the following conditions:

  • Compatible with version Joomla: Joomla 2.5 & Joomla 3.x
  • Compatible with K2 Component
  • Installation Packages include:
    • Quickstart Package
    • Template package only
    • Extensions package from our store

2HOW TO DOWNLOAD – Back to top

Download Packages from our store:

Step 1: Login your account

Step 2: Go to Joomla > Download > Joomla Templates Club


Step 3: Under Premium Joomla Templates –> click to download template as you want

Step 4: Under name of template –> Download packages as you want

3HOW TO INSTALL – Back to top

There are two ways to install a Joomla Template:

  • Install quickstart: By using this package, you will set the template exactly as our Demo with sample data. This is applied when you need a fresh Joomla with our template.
  • Install Template and Extensions: This is applied when you have already installed a Joomla instance on your server. You will need only be using the zipped files in “Extensions” and “Template” folders mentioned above.

Note:We used the images on Joomla 3.x to illustrate

3.1 Install with Quickstart Package:

Before installing the Quickstart package, we recommend you back up your site first. You click to learn how to back up a Joomla site. The following steps will guide to install a quickstart package of SmartAddons Joomla Template: Click here

3.2 Install with Template and Extensions:

Log in your Administrator, go to Extensions > Extension Manager

Then install Template and Extensions as below.

3.2.1 Install Template:

Step 1: Click Choose File/Browse button, select our template file you have downloaded > Upload & Install.

Step 2: Go to Extensions > Template Manager and set SJ Lotte to become the default template as below


3.2.2 Install Extensions:

Here is list of extensions that are used in the template.

Step 1: Install Extensions that are developed by SmartAddons. Please Unzip First the Extension package for getting SmartAddons extensions then install each of them as install template above.

Step 2: Enable/Public plug-ins. Note: all plug-ins listed are imperative.

  • YT Framework Plug-in supports to add extra parameters used with Mega Menu and to compress CSS/JS/HTML when optimizing code. Besides, configure Yt Framework to show SJ Help with Report Bugs, Template Tutorials and YT Framework Tutorials or include j Query into template. You can go here for getting more information of this plug-in.
  • SJ Content Related News is used for showing other related articles in the same category. For more info about this module, please go here. Click here for viewing the screen shot of backend.

You need to install and activate them when using this template. Let’s start from 1 – 2 – 3 to active plug-ins as below:

After install template/extensions, please go to next step – Configuration of template as 4. Part below

3.3 Install multilingual site in SJ Template

To help you better about language problem when you work with SJ Template. We will instruct you how to set up multilingual site in SJ Template. FOLLOW US!

4HOW TO CONFIGURE – Back to top

The following part we will guide how to configure the template becomes the same with our home page – Demo

4.1 Modules Positions

4.2 Template Configuration

The parameters of SJ Lotte Template are divided into the following groups:

  • Global Settings
  • Site Styles
  • Typography
  • Layout Settings
  • Top Menu Settings
  • Content Component
  • Optimize CSS,JS
  • Advanced Options

Global Settings

  • Generator tag – Generate tag for your template
  • Hide Main Content Block – Allow to hide Content Component on Homepage
  • Direction – Choose direction of language: RTL/LTR
  • Logo Type – Choose your logo type: image OR text
  • Override Logo Image – Choose logo image file to use
  • Logo Text – Set text for Text type of logo
  • Slogan – Set your Website slogan here

Site Styles

  • Default Style – Allow to choose a style from preset ones
  • Body background color – Set color for background of body
  • Class body background image – Set CSS class using for image background of body
  • Link color – Set color for links
  • Text color – Set color for text
  • Spotlight background color – Set color for background of spotlight effect
  • Class spotlight background image – Set CSS class using for image background of spotlight effect
  • Spotlight3 background color – Set color for background of spotlight3 effect
  • Footer background color – Set color for background of footer
  • Class footer background image – Set CSS class using for image background of footer

Typography

  • Default Font Size – Allow to choose default font size
  • Default Font-Family – Allow to choose a font-family from 13 available ones. The default one is Arial
  • Google Font-Family – Allow to choose a google font-family used for html tags which are in Affected Selectors parameter below
  • Affected Selectors – Tag names will be applied with google font, comma seperated

Layout Settings

    • Select Layout – Allow to choose default layout xml file
    • Overwrite Layouts Windows – Used with window mode, when you want to use another layout for a menu. Syntax:
      • Itemid1:Layout_Name1 | Itemid2:Layout_Name2 | …

With:

    • Itemid1, Itemid2…: Id of Menus. You can see these in Menu Item Manager
    • Layout_Name1, Layout_Name2…: The name of layout. You can see these in templates/{this_template_name}/layouts folder. NOTE: remove .xml extension

Top Menu Settings

  • Default Type Menu – Allow to choose default menu type shown with template, this list is gotten from Menu Manager
  • Default Menu Style – We support several styles for Menus
    • CSS, Moo and Dropline Menu: simple menu
    • Mega Menu: multimedia menu
  • Javascript Effect – Allow to select which JS Effect used with Moo Menu and Mega Menu
  • Duration Effect – Set time before showing any submenus
  • Start Level – Set level of menu to start rendering the menu
  • End Level – Set level of menu to stop rendering the menu

Content Component

  • Apply for Blog View – Allow to show the Content block at blog pages OR not
  • Apply for Frontpage view – Allow to show at Frontpage view OR not
  • Leading Images Width – Set width of images of Leading Articles
  • Leading Images Height – Set height of images of Leading Articles
  • Intro Images Width – Set width of images of Intro Articles
  • Intro Images Height – Set height of images of Intro Articles
  • Thumbnail Background Color – Set color background for thumbnail images
  • Thumbnail Mode – Set thumbnail mode:
    • Fill
    • Fit
    • Stretch
    • Center

Optimize Css, Js

  • Optimize Merge File – Choose Yes to optimize all CSS and JS Files which are used in your website
  • Optimize CSS – Choose Yes to optimize only CSS files
  • Optimize CSS Exclude – CSS files which are not optimized, comma separated
  • Optimize JS – Choose Yes to optimize only JS files
  • Optimize JS Exclude – JS files which are not optimized, comma separated
  • Optimize Folder – A specific folder with Css/Js files need to be optimized

Advanced Options

    • Show Back to Top – Allow you to show Back to Top button OR not
    • Show Cpanel – Allow you to show YT Framwork Control panel OR not
    • Include LazyLoad plugin – Enable/disable LazyLoad
    • Enable jQuery – Enable/disable jQuery lib
    • Enable Google Analytics – Enable/disable Google Analytics
    • Enter your Google Analytics tracking ID – Copy and paste your Google Analytics tracking ID here

4.3 Menu Configuration

4.3.1 Mega menu Configuration

To configure Mega Menu, go to: Extensions –> Template manager –> open SJ Lotte template, in the Menu setting, you can configure Mega Menu. To view more guide about how to install, set up and configure SJ Mega Menu as you want, please click here

4.3.2. Menu Item Configuration


EXPLORE MENU:

Menu Item Type

Menu Item Type: Single Article

Frontend


Backend – TREE OF MENU
Backend – YT MENU PARAM

ABOUT JOOMLA:

Menu Item Type

Menu Item Type: Text Separator

Frontend


Backend – TREE OF MENU
Backend – YT MENU PARAM

K2 CONTENT:

Menu Item Type

Menu Item Type: Text Separator

Frontend


Backend – TREE OF MENU
Backend – YT MENU PARAM

MENU:

Menu Item Type

Menu Item Type: Category Blog

Frontend


Backend – TREE OF MENU
Backend – YT MENU PARAM

4.4 Extension Configuration

4.4.1. Top 1 – Custom HTML Module

Module Position – Module Suffix

Position: top1
Suffix: Not Used

Frontend (demo layout above)

Backend: top1

Code Custom HTML of “top1”:

4.4.2. Top 2 – Custom HTML Module

Module Position – Module Suffix

Position: top2
Suffix: Not Used

Frontend (demo layout above)

Backend: top2

Code Custom HTML of “top2”:

4.4.3. Top 3 – Custom HTML Module

Module Position – Module Suffix

Position: top3
Suffix: Not Used

Frontend (demo layout above)

Backend: top3

Code Custom HTML of “top3”:

4.4.4. SJ Slideshow Module

Module Position – Module Suffix

Position: slide_show
Suffix: Not Used

Frontend (demo layout above)

Backend: Slideshow

To view more guide about how to install, set up and configure SJ SlideShow as you want, please click here

4.4.5. Position a – Custom HTML Module

Module Position – Module Suffix

Position: position-a
Suffix: Not Used

Frontend (demo layout above)

Backend: position-a

Code Custom HTML of “position-a”:

4.4.6. Menu Lotte – SJ Basic News Module

Module Position – Module Suffix

Position: position-b
Suffix: title3 basic_style1

Frontend (demo layout above)

Backend: position-b

4.4.7. SJ Basic News Module

Module Position – Module Suffix

Position: mod-tabs
Suffix of “Latest Events”: Not Used
Suffix of “Special”: basic_gender title5
Suffix of “New Video”: basic_gender title5

Frontend (demo layout above)

Backend: Latest Events; Special; New Video

4.4.8. Why membes love lotte – SJ Extra Slider Module

Module Position – Module Suffix

Position: position-8
Suffix: NOT USED

Frontend (demo layout above)

Backend: Why membes love lotte

To view more guide about how to install, set up and configure SJ Extra Slider as you want, please click here

4.4.9. About us – Custom HTML Module

Module Position – Module Suffix

Position: position-10
Suffix: about_us

Frontend (demo layout above)

Backend: About us

Code Custom HTML of ” About us”:

4.4.10. Categories – Custom HTML Module

Module Position – Module Suffix

Position: position-11
Suffix: categories

Frontend (demo layout above)

Backend: Categories

4.4.11. Map – Custom HTML Module

Module Position – Module Suffix

Position: position-12
Suffix: map

Frontend (demo layout above)

Backend: Map

Code Custom HTML of ” Map”:

5SUPPORT – Back to top

Thank you so much for purchasing this template. If you have any questions that are beyond the scope of this help file, please send us via: Submit a Ticket

Thanks so much!