JA Decor

Responsive Joomla template for Decor, Interior Design and Corporate Portfolio for both Joomla 2.5 and Joomla 3. We have written this the documentation based on Joomla 2.5, please do consider this factor if you are using it for Joomla 3. No worry, there aren't any big differences between the two.

1. Joomla template for Decor and Interior design

JA Decor is unique with its dynamic block layout design, eCommerce solution ready with Mijoshop component and is blogging friendly thanks to EasyBlog component.

Built on the robust T3 Framework with Bootstrap 3 at core, JA Decor is fully responsive. With no exception, JA Decor supports Right-to-Left (RTL) language layout and Off-Canvas menu navigation system for both mobile and tablet devices.

View Demo for responsive Joomla template - JA Decor

2. Main Features

  • Dynamic Joomla template with eCommerce
  • Fully Responsive Template
  • Joomla 2.5 and Joomla 3 native
  • Bootstrap 3 integration

3. JA Extensions Supported

  • JA Content Slider module
  • JA Masshead module
  • JA Slideshowlite module
  • System - JA Google Map plugin
  • JA Extension Manager
  • T3 Framework

4. Supported Third party extensions

  • Acymailing
  • Easyblog
  • Mijoshop

5. Supported Joomla pages (by default)

  • Login
  • Registration Page
  • Edit User Profile
  • Web Links
  • News Feeds
  • Contact Us
  • Smart Search
  • Offline Page
  • Tag Item Page
  • 404 Page

6. Site structure and Module position

View in higher Resolution

JA Decor is compatible with Joomla 3 and Joomla 2.5. Please make sure your system meets the following requirements:

Joomla 3 System requirement

Software

  • Software: PHP (Magic Quotes GPC off): 5.3.1 + (5.4+ recommended)

Databases

  • MySQL(InnoDB support required): 5.1+
  • MSSQL 10.50.1600.1+
  • PostgreSQL 8.3.18+

Web Severs

  • Apache 2.x+
  • Microsoft IIS 7
  • Nginx 1.0 (1.1 recommended)

Joomla 2.5+ system requirement

Software

  • Software: PHP 5.2.4+ (5.4+ recommended)
  • MySQL: 5.0.4+

Web Sever

  • Apache: 2.x+
  • Microsoft: IIS 7
  • Nginx: 1.0 (1.1 recommended)

Browser requirement

The requirements are the same with both Joomla 2.5 and Joomla 3

  • Firefox 4+
  • IE (Internet Explorer) 8+
  • Google Chrome 10+
  • Opera 10+
  • Safari 5+

Development Environment

The requirements are the same with both Joomla 2.5 and Joomla 3

During development process, Localhost is preferred. You can use the following servers on your PC to develop your site.

Windows

  • WAMPSEVER
  • XAMPP for Windows

Linux

  • LAMP Bubdle
  • XAMPP for Linux

Mac OS

  • MAMP & MAMP Pro
  • XAMPP for Mac OS

1. Plan your site Development

  • Kick-start a New Joomla Site? - If you are planning to start fresh with a new Joomla site, then use our Quickstart package to quickly clone the demo site, then replace the demo content with yours. Check the How to install Quickstart Package documentation for the in-depth how-to guide for Quickstart Installation.
  • Installing on your existing live site ? - If you are planning to use this template for your existing Joomla site, then you should follow the How to make your site look like demo site guide first to dig in the steps involved.

2. Download Template and Extensions

Please proceed to JA Decor's Download page, where it holds all the related files and template zip file that you need.

3. Install Template and Extensions

Once you successfully Download the files you need, You'll have to:

  • Install the template file onto your Joomla system.
  • At default, during the installation process, JA Decor template will be installed with the settings we're used as on the demo website. Therefore, if you would like to make any changes in configuration, it's recommended that you should complete the setup (including installing all the modules and plugins along with the templates as on demo) then carry out any customization afterwards.

View how to install extensions guide

4. Build demo with our Demo Builder

If you are not yet familiar with JoomlArt Demo Builder, more information on this can be read here. To be short, the demo builder service allows you to quickly clone demo for any JoomlArt's Joomla template and test-drive it. As we have recently improved and re-developed the Demo Builder system, you can now play around and experiment with it up to 3 days.

Demo Builder at JoomlArt

Visit Demo Builder

Note:

Custom HTML Module: We have styled (CSS) for several Custom HTML modules using different div classes. You should check out the HTML codes in these module and follow the same format in order to get it displayed correctly. We do also provide the HTML code in this user-guide down below for your references.

Note: This guide is applied for fresh Quickstart installation, Joomla 3.4 and Mijoshop 3 only. If your site undergoes any change to configuration, you might foresee unexpected conflicts.

If you installed JA Decor using our Quickstart installation package and made no changes to default configuration. Then follow instructions below to integrate Mijoshop component with pre-defined configuration as per our demo:

Step 1: Download and install component MijoShop as normal

Step 2: Install SQL

Download SQL file: SQL for Joomla 3.x - ja_decor_sample_data.zip

Open *.sql file you just download, then replace #__ with [database Tables Prefix]

How to get the [database Tables Prefix]:

Navigate to Administrator > site > global configuration > server, you will see your [database Tables Prefix] as per screenshort below:

Then, login your PHPMyadmin, select your Database Name (see screen short for reference).

Step 3: Download Mijoshop Theme that we built in JA Decor:

JA Decor Theme for Mijoshop: http://www.joomlart.com/forums/downloads.php?do=file&id=4094 then unzip and copy to your site's root folder.

Step 4: Download package images at ja_decor_sample_demo_images.zip then unzip and copy to your site's root folder. Once done, you should see the images path: components\com_mijoshop\opencart\

If there is any information in this guide that needs further clarification, feel free to leave comments in the forum, we would be happy to answer all questions you might have.

I. JA Extension Configuration

1. JA Slideshow Lite module

  Module Position: slideshow
  Module Suffix: NOT USED

JA Slideshow module

View JA Slideshow Lite Docs

2. JA Content Slider module

  Module title: Testimonial Slider
  Module Position: home-2
  Module Suffix:  background-gray about-box  testimonial-box

Testimonial Slider

View JA Content Slider Docs

3. JA Masshead module

  Module Position: masthead
  Module Suffix: NOT USED

JA Masshead module

Configuration Conditions :

[Masshead Itemid="455" title="About Us" ][/Masshead]
[Masshead Itemid="512" title="Products" ][/Masshead] 
[Masshead Itemid="517" title="Our Services" ][/Masshead]
[Masshead Itemid="519" title="Featured Projects" ][/Masshead]
[Masshead Itemid="296" title="Jobs" ][/Masshead]
[Masshead Itemid="560" title="Featured Articles" ][/Masshead]
[Masshead Itemid="260" title="Featured Articles" ][/Masshead]
[Masshead Itemid="521" title="Register Account" ][/Masshead]
[Masshead Itemid="524" title="My Account" ][/Masshead]
[Masshead Itemid="525" title="Admin Panel" ][/Masshead]
[Masshead Itemid="526" title="Affiliates" ][/Masshead]
[Masshead Itemid="527" title="Bestsellers" ][/Masshead]
[Masshead Itemid="528" title="Shopping Cart" ][/Masshead]
[Masshead Itemid="529" title="Category" ][/Masshead]
[Masshead Itemid="530" title="Checkout" ][/Masshead]
[Masshead Itemid="531" title="Compare" ][/Masshead]
[Masshead Itemid="532" title="Contact" ][/Masshead]
[Masshead Itemid="533" title="Downloads" ][/Masshead]
[Masshead Itemid="534" title="Mijoshop" ][/Masshead]
[Masshead Itemid="535" title="Information" ][/Masshead]
[Masshead Itemid="536" title="Latest Products" ][/Masshead]
[Masshead Itemid="537" title="Manufacturer" ][/Masshead]
[Masshead Itemid="538" title="Manufacturers" ][/Masshead]
[Masshead Itemid="539" title="Newsletter" ][/Masshead]
[Masshead Itemid="511" title="Easyblog" ][/Masshead]
[Masshead Itemid="540" title="Oders" ][/Masshead]
[Masshead Itemid="541" title="Popular Products" ][/Masshead]
[Masshead Itemid="542" title="Product" ][/Masshead]
[Masshead Itemid="543" title="Returns" ][/Masshead]
[Masshead Itemid="544" title="Search" ][/Masshead]
[Masshead Itemid="545" title="Site Map" ][/Masshead]
[Masshead Itemid="546" title="Special Offers" ][/Masshead]
[Masshead Itemid="547" title="Gift Vouchers" ][/Masshead]
[Masshead Itemid="548" title="Wish List" ][/Masshead]

View JA Masshead Docs

4. JA Google Map Plugin

Google Map plugin

How to change google map style?

Step 1: Go to http://snazzymaps.com/ , choice a google map style that you want to add to your map , click More info.

Select Map style

Step 2: In Javascript style array, click Copy to clipboard.

Coppy Javascript

Step 3: Go to your backend -> Extensions -> Plugins Manager -> Google Map plugin -> enable Map Styles and paste to params Map Styles.

Input Code

  • Front-end Appearance

II. Acymailing Module Configuration

  Module title : Newsletter
  Module Position: footer-4
  Module Suffix: NOT USED

Acymailing Module

III. Default Joomla Extensions Configuration

1. Language Switcher

  Module Position: languageswitcherload
  Module Suffix:  NOT USED

Language Switcher

2. Articles Category

2.1. Our Services
  Module Position: features-1
  Alternative Layout : triangle
  Module Suffix:  NOT USED

Our Services

2.2. Features Projects
  Module Position: after-content
  Alternative Layout : normal
  Module Suffix:  NOT USED

Features Projects

2.3. Features Projects
  Module Position: features-3
  Alternative Layout : normal
  Module Suffix:  NOT USED

Features Projects

3. Banner

To create a banner in the Easyblog as in demo, please follow the following steps:

Go to Backend -> Components -> Banners

Step 1: Create Category

Create a Category's name is Easyblog , the back-end settings are as below.

Step 2: Create banner

Create a banner's name is Easyblog Banner and assign to Easyblog category, the back-end settings are as below.

Step 3: Add the module Banner.

Go to Backend -> Extensions -> Modules manager: Create new module with type is banners

  Module title: Easblog Banner
  Module Position: sidebar-2
  Module Suffix: NOT USED

Banner

4. Footer

  Module Position: footer
  Module Suffix: NOT USED

Footer

5. Login Form

  Module Position: sidebar-2
  Module Suffix: NOT USED

Login Form

6. Menu

6.1. Services menu module

To have it displayed as it is per Demo site, please follow the step by step instruction as below:

Step 1: Create "Services" menu and add menu items

- Go to Administrator >> Menus >> Menu Manager >> Add New Menu: Services.

- Add New Menu Items for the Menu .

Step 2: Add "Services" menu module

Go to Administrator >> Extensions >> Modules manager >> Add New Menu Module : Services .

  Module Position: footer-2
  Module Suffix: NOT USED

Services menu module

6.2. Company menu module

To have it displayed as it is per Demo site, please follow the step by step instruction as below:

Step 1: Create "Company" menu and add menu items

- Go to Administrator >> Menus >> Menu Manager >> Add New Menu: Company

- Add New Menu Items for the Menu.

Step 2: Add "Company" menu module

Go to Administrator >> Extensions >> Modules manager >> Add New Menu Module: Company

  Module Position: footer-3
  Module Suffix: NOT USED

Company menu module

6.3. Main Menu module

This menu will be used if Megamenu is Turned off

  Module Position: mainnav
  Module Suffix: _menu

Main Menu module

6.4. Off Canvas menu module

This menu used on devices

  Module Position: mainnav
  Module Suffix: _menu

Off Canvas Menu module

Before working with Custom HTML module, please disable the default Editor under Global Configuration

Go to Backend -> Site -> Global Configuration:

Disable Editor

1. About Us

  Module Position: features-1
  Module Suffix: NOT USED

HTML code:

<div class="about-wrap">
  <div class="about-box about-intro clearfix">
  <div class="col-md-6 col-sm-12">
    <div id="about-slideshow" class="carousel slide" data-ride="carousel">
      <div class="carousel-inner">
        <div class="item active">
          <img src="/images/joomlart/demo/about-img.jpg" border="0" alt="" />
        </div>
        <div class="item">
          <img src="/images/joomlart/demo/about-img.jpg" border="0" alt="" />
        </div>
      </div>
 
      <a class="left carousel-control" href="#about-slideshow" data-slide="prev">
        <i class="fa fa-angle-left"></i>
      </a>
      <a class="right carousel-control" href="#about-slideshow" data-slide="next">
        <i class="fa fa-angle-right"></i>
      </a>
    </div>
  </div>
  <div class="col-md-6 col-sm-12">
    <div class="about-box-ct">
      
      <h2 class="title-sanserif">Get to know about Studio</h2>
      <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. natur aut odit aut fugit.</p>
      <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. natur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. </p>
    </div>
  </div>
</div>
 
</div>

About Us

2. About Troppies

  Module Position: features-3
  Module Suffix:  background-primary about-box

HTML code:

<div class="about-troppies clearfix">
  <div class="col-xs-6 col-sm-3 troppy-item">
    <div class="troppy-badge">
      <i class="fa fa-bell"></i>
    </div>
    <div class="troppy-number">153</div>
    <div class="troppy-text">Awards and Nominations</div>
  </div>
   <div class="col-xs-6 col-sm-3 troppy-item">
    <div class="troppy-badge">
      <i class="fa fa-briefcase"></i>
    </div>
    <div class="troppy-number">6</div>
    <div class="troppy-text">Successful projects</div>
  </div>
   <div class="col-xs-6 col-sm-3 troppy-item">
    <div class="troppy-badge">
      <i class="fa fa-share"></i>
    </div>
    <div class="troppy-number">17</div>
    <div class="troppy-text">We have clients all over the world </div>
  </div>
   <div class="col-xs-6 col-sm-3 troppy-item">
    <div class="troppy-badge">
      <i class="fa fa-headphones"></i>
    </div>
    <div class="troppy-number">24/7</div>
    <div class="troppy-text">Clients Support</div>
  </div>
</div>

About Troppies

3. Client List

  Module Position: features-4
  Module Suffix:   about-box background-gray

HTML code:

<div class="about-client clearfix">
<div class="col-sm-3 client-list-header">
<h2 class="title-sanserif">Client List</h2>
</div>
<div class="col-sm-9 client-list-slide">
<div id="client-slider" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="row item active">
<div class="col-sm-4">
<div class="client-logo">
<img src="/images/joomlart/demo/client-1.jpg" border="0" alt="" />
</div>
<div class="client-logo">
<img src="/images/joomlart/demo/client-2.jpg" border="0" alt="" />
</div>
</div>
<div class="col-sm-4">
<div class="client-logo">
<img src="/images/joomlart/demo/client-3.jpg" border="0" alt="" />
</div>
<div class="client-logo">
<img src="/images/joomlart/demo/client-4.jpg" border="0" alt="" />
</div>
</div>
<div class="col-sm-4">
<div class="client-logo">
<img src="/images/joomlart/demo/client-5.jpg" border="0" alt="" />
</div>
<div class="client-logo">
<img src="/images/joomlart/demo/client-6.jpg" border="0" alt="" />
</div>
</div>
</div>
<div class="row item">
<div class="col-sm-4">
<div class="client-logo">
<img src="/images/joomlart/demo/client-1.jpg" border="0" alt="" />
</div>
<div class="client-logo">
<img src="/images/joomlart/demo/client-2.jpg" border="0" alt="" />
</div>
</div>
<div class="col-sm-4">
<div class="client-logo">
<img src="/images/joomlart/demo/client-3.jpg" border="0" alt="" />
</div>
<div class="client-logo">
<img src="/images/joomlart/demo/client-4.jpg" border="0" alt="" />
</div>
</div>
<div class="col-sm-4">
<div class="client-logo">
<img src="/images/joomlart/demo/client-5.jpg" border="0" alt="" />
</div>
<div class="client-logo">
<img src="/images/joomlart/demo/client-6.jpg" border="0" alt="" />
</div>
</div>
</div>
</div>
<div class="client-slider-control">
<a class="left carousel-control" href="#client-slider" data-slide="prev">
<i class="fa fa-angle-left"></i>
</a>
<a class="right carousel-control" href="#client-slider" data-slide="next">
<i class="fa fa-angle-right"></i>
</a>
</div>
</div>
</div>
</div>

Client List

4. Footer Logo

  Module Position: footer-1
  Module Suffix:  footer-logo

HTML code:

<p><img src="/images/logo-white.png" border="0" alt="" /></p>

Footer Logo

5. Maps

  Module Position: footer-map
  Module Suffix:  NOT USED

HTML code:

{jamap}
<div class="office-info">
<div class="inner">
<h3>Office Address</h3>
<ul>
<li><i class="fa fa-building-o"></i> 350 Fifth Avenue, 34th floor New York NY 10065 USA</li>
<li><i class="fa fa-phone"></i> +1-212-736-1234</li>
<li><i class="fa fa-envelope"></i> <a href="mailto:info@joomlart.com" title="info@joomlart.com">info@joomlart.com</a></li>
<li><i class="fa fa-globe"></i> <a href="http://www.joomlart.com" title="Joomlart">http://www.joomlart.com </a></li>
</ul>
</div>
</div>

Maps

6. Video - Welcome

  Module Position: position-1
  Module Suffix:  NOT USED

HTML code:

<div class="video-wrapper grid-2x2">
<img class="video-cover" src="/images/joomlart/demo/video-cover.jpg" alt="" />
<a class="video-play-icon" href="#"><i class="fa fa-play-circle-o"></i></a>
<iframe width="560" height="315" src="//www.youtube.com/embed/nz7sxt9xeJE" frameborder="0" allowfullscreen></iframe>
</div>

Video - Welcome

7. About Us

  Module Position: position-2
  Module Suffix:  NOT USED

HTML code:

<div class="single-article background-primary">
<div class="article-intro grid-2x1">
<h3 class="article-title"><span class="first-letter">About</span> Us</h3>
<p>Lorem ipsum dolor sit amet consectetuer tincidunt in laoreet tincidunt adipiscing. Amet id et molestie habitasse consequat Cras tortor natoque sed cursus. Feugiat penatibus eros Aliquam et Sed laoreet pretium Mauris nibh Nullam.</p>
<a class="btn btn-primary" href="/">Read more</a>
</div>
<div class="article-image grid-2x1">
<img src="/images/joomlart/demo/sam-2.jpg" alt="" />
</div>
</div>

About Us

8. Sticky Module

  Module Position: sticky
  Module Suffix:  NOT USED

HTML code:

<!-- AddThis Follow BEGIN -->
<div class="addthis_toolbox addthis_32x32_style addthis_default_style">
<a class="addthis_button_facebook_follow" addthis:userid="joomlart"></a>
<a class="addthis_button_twitter_follow" addthis:userid="joomlart"></a>
<a class="addthis_button_google_follow" addthis:userid="joomlart"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=xa-525b746c4d879b01"></script>
<!-- AddThis Follow END -->

Sticky Module

Follow the steps below to add the "AddThis" buttons.

Step 1: Get Addthis code

Access AddThis site, select service

Get AddThis service code

<!-- AddThis Follow BEGIN -->
<p>Follow Us</p>
<div class="addthis_toolbox addthis_32x32_style addthis_default_style">
<a class="addthis_button_facebook_follow" addthis:userid="YOUR-PROFILE"></a>
<a class="addthis_button_twitter_follow" addthis:userid="YOUR-USERNAME"></a>
<a class="addthis_button_google_follow" addthis:userid="joomlart"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=xa-52c4dc6a6f54bdd9"></script>
<!-- AddThis Follow END -->

Step 2: add code to your site

Create a custom HTML module then paste the AddThis code, assign the custom HTML module to sticky position.

Step 3: change position and customize style

The class to style for the module is defined in the file: mainbody.php in templates/ja_decor/tpls/blocks

<?php if ($this->countModules('sticky')) : ?>
<!-- STICKY MODULE -->
<div class="sticky-module sticky-module-left <?php $this->_c('sticky') ?>">
  <jdoc:include type="modules" name="<?php $this->_p('sticky') ?>" style="raw" />
</div>
<!-- //STICKY MODULE -->
<?php endif ?>

The styles are in module.less in templates/ja_decor/less.

// Sticky Module
// ---------------
.sticky-module {
  position: fixed;
  left: 0;
  top: 145px;
  width: 30px;
  display: none;

  &.sticky-module-right {
  left: auto;
  right: 0;
  }

  @media (min-width: @screen-md) {
  display: block;
  }

  .addthis_32x32_style .at15nc.at300bs, 
  .addthis_32x32_style .at15nc.at15t {
  background-image: url("@{t3-image-path}/ico/social.png") !important;
  height: 30px !important;
  line-height: 30px !important;
  width: 30px !important;
  }

  .addthis_32x32_style .at15nc.at15t_twitter {
  background-position: 0px -30px !important;

  &:hover {
    background-position: -30px -30px !important;
  }
  }

  .addthis_32x32_style .at15nc.at15t_facebook {
  background-position: 0px 0px !important; 

  &:hover {
    background-position: -30px 0px !important;
  }
  }

  .addthis_32x32_style .at15nc.at15t_google_follow  {
  background-position: 0px -60px !important;
  &:hover {
    background-position: -30px -60px !important;
  }
  }

  .addthis_toolbox {
  width: 30px;
  padding: 0;
  text-align: right;
  }

  .addthis_default_style .addthis_separator, 
  .addthis_default_style .at300b, 
  .addthis_default_style .at300bo, 
  .addthis_default_style .at300m, 
  .addthis_default_style .at300bs {
  float: none;
  display: block;
  padding: 0 0 2px;
  }
}

You can change the position of Addthis button

Replace the class

sticky-module-left

with:

sticky-module-right

9. Position: Features-1

  Module Position: features-1
  Module Suffix:  NOT USED

HTML code:

<div class="about-wrap">
  <div class="about-box about-intro clearfix">
  <div class="col-sm-6">
    <div id="about-slideshow" class="carousel slide" data-ride="carousel">
      <div class="carousel-inner">
        <div class="item active">
          <img src="/images/joomlart/demo/about-img.jpg" border="0" alt="" />
        </div>
        <div class="item">
          <img src="/images/joomlart/demo/about-img.jpg" border="0" alt="" />
        </div>
      </div>
      <a class="left carousel-control" href="#about-slideshow" data-slide="prev">
        <i class="fa fa-angle-left"></i>
      </a>
      <a class="right carousel-control" href="#about-slideshow" data-slide="next">
        <i class="fa fa-angle-right"></i>
      </a>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="about-box-ct">
      <h2 class="title-sanserif">Position: Features-1</h2>
      <p>Lorem ipsum dolor sit amet consectetuer dis non et et id. Urna nec Mauris est urna Curabitur odio mauris urna elit justo. Vel augue pretium condimentum quis sit Vivamus ut orci enim Sed. Quisque eros justo dapibus condimentum mi et Maecenas malesuada sed orci. Morbi sit semper non enim dolor molestie..</p>
    </div>
  </div>
</div>
</div>

Position: Features-1 Module

10. Position: Features-2

  Module Position: features-2
  Module Suffix:  NOT USED

HTML code:

<div class="col-xs-12 ">
<div class="normal-style category-module">
<div class="col-xs-12 col-sm-6 col-md-3 col-cmd-12 category-info background-primary ">
<div class="grid-inner grid-1x2">
<h3 class="category-title">
<span class="first-letter">Position:</span> Features-2</h3>
<p class="category-des">Quisque eu massa ut justo egestas pellentesque? Integer viverra neque a neque laoreet volutpat. Mauris vel nisl et velit placerat auctor non et nibh. </p>
<a href="#" class="btn btn-primary">View all</a>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-cmd-4">
<div class="grid-1x2">
<div class="article-img grid-1x1">
<div class="img-intro">
<img src="/images/joomlart/demo/300x300.gif" alt="" />
</div>
<a href="#" class="btn btn-default ">View</a>
</div>
<div class="article-content grid-1x1">
 <h4><a href="#" class="mod-articles-category-title ">Teen Bedroom Decor</a></h4>
<p class="mod-articles-category-introtext">Curabitur a lacinia enim. Aenean gravida vehicula augue, eu pharetra nisl luctus lobortis? Donec...</p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-cmd-4">
<div class="grid-1x2">
<div class="article-img grid-1x1">
<div class="img-intro">
<img src="/images/joomlart/demo/300x300-gray.gif" alt="" />
</div>
<a href="#" class="btn btn-default ">View</a>
</div>
<div class="article-content grid-1x1">
 <h4><a href="#" class="mod-articles-category-title ">Teen Bedroom Decor</a></h4>
<p class="mod-articles-category-introtext">Curabitur a lacinia enim. Aenean gravida vehicula augue, eu pharetra nisl luctus lobortis? Donec...</p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-cmd-4">
<div class="grid-1x2">
<div class="article-img grid-1x1">
<div class="img-intro">
<img src="/images/joomlart/demo/300x300.gif" alt="" />
</div>
<a href="#" class="btn btn-default ">View</a>
</div>
<div class="article-content grid-1x1">
 <h4><a href="#">Teen Bedroom Decor</a></h4>
<p class="mod-articles-category-introtext">Curabitur a lacinia enim. Aenean gravida vehicula augue, eu pharetra nisl luctus lobortis? Donec...</p>
</div>
</div>
</div>
</div>
</div>

Position: Features-2 Module

11. Position: Features-3

  Module Position: features-3
  Module Suffix:  NOT USED

HTML code:

<div class="layout-about about-box about-team">
<div class="team-header text-center background-gray">
<h2>Position: Features-3</h2>
<div class="category-desc">
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis <br>nostrudexercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<div class="clr"></div>
</div>
</div>
</div>
<div class="about-troppies clearfix">
  <div class="col-xs-6 col-sm-3 troppy-item">
    <div class="troppy-badge">
      <i class="fa fa-bell"></i>
    </div>
    <div class="troppy-number">153</div>
    <div class="troppy-text">Awards and Nominations</div>
  </div>
  <div class="col-xs-6 col-sm-3 troppy-item">
    <div class="troppy-badge">
      <i class="fa fa-briefcase"></i>
    </div>
    <div class="troppy-number">6</div>
    <div class="troppy-text">Successful projects</div>
  </div>
  <div class="col-xs-6 col-sm-3 troppy-item">
    <div class="troppy-badge">
      <i class="fa fa-share"></i>
    </div>
    <div class="troppy-number">17</div>
    <div class="troppy-text">We have clients all over the world </div>
  </div>
  <div class="col-xs-6 col-sm-3 troppy-item">
    <div class="troppy-badge">
      <i class="fa fa-headphones"></i>
    </div>
    <div class="troppy-number">24/7</div>
    <div class="troppy-text">Clients Support</div>
  </div>
</div>

Position: Features-3

12. Position: Features-4

  Module Position: features-4
  Module Suffix:  NOT USED

HTML code:

<div class="about-client clearfix">
  <div class="col-sm-3 client-list-header">
  <h2 class="title-sanserif">Position: Features-4</h2>
  </div>
  <div class="col-sm-9 client-list-slide">
    <div id="client-slider" class="carousel slide" data-ride="carousel">
      <div class="carousel-inner">
        <div class="row item active">
          <div class="col-sm-4">
            <div class="client-logo">
              <img src="/images/joomlart/demo/client-1.jpg" border="0" alt="" />
            </div>
            <div class="client-logo">
              <img src="/images/joomlart/demo/client-2.jpg" border="0" alt="" />
            </div>
          </div>
          <div class="col-sm-4">
            <div class="client-logo">
              <img src="/images/joomlart/demo/client-3.jpg" border="0" alt="" />
            </div>
            <div class="client-logo">
              <img src="/images/joomlart/demo/client-4.jpg" border="0" alt="" />
            </div>
          </div>
          <div class="col-sm-4">
            <div class="client-logo">
              <img src="/images/joomlart/demo/client-5.jpg" border="0" alt="" />
            </div>
            <div class="client-logo">
              <img src="/images/joomlart/demo/client-6.jpg" border="0" alt="" />
            </div>
          </div>
        </div>
         <div class="row item">
          <div class="col-sm-4">
            <div class="client-logo">
              <img src="/images/joomlart/demo/client-1.jpg" border="0" alt="" />
            </div>
            <div class="client-logo">
              <img src="/images/joomlart/demo/client-2.jpg" border="0" alt="" />
            </div>
          </div>
          <div class="col-sm-4">
            <div class="client-logo">
              <img src="/images/joomlart/demo/client-3.jpg" border="0" alt="" />
            </div>
            <div class="client-logo">
              <img src="/images/joomlart/demo/client-4.jpg" border="0" alt="" />
            </div>
          </div>
          <div class="col-sm-4">
            <div class="client-logo">
              <img src="/images/joomlart/demo/client-5.jpg" border="0" alt="" />
            </div>
            <div class="client-logo">
              <img src="/images/joomlart/demo/client-6.jpg" border="0" alt="" />
            </div>
          </div>
        </div>
      </div>
      <div class="client-slider-control">
        <a class="left carousel-control" href="#client-slider" data-slide="prev">
          <i class="fa fa-angle-left"></i>
        </a>
        <a class="right carousel-control" href="#client-slider" data-slide="next">
          <i class="fa fa-angle-right"></i>
        </a>
      </div>
    </div>
  </div>
</div>

Position: Features-4

13. Our team box style

  Module Position: position-2
  Module Suffix:  NOT USED

HTML code:

<div class="layout-about about-box about-team">
<div class="team-header text-center background-gray">
<h2>Our team box style</h2>
<div class="category-desc">
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis <br>nostrudexercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<div class="clr"></div>
</div>
</div>
</div>

Our team box style

JA Decor supports Easyblog components.

1. EasyBlog Component

JA Decor supports EasyBlog styles by default. In order to have the EasyBlog design, you should download, extract the files and add EasyBlog theme for JA Decor to your site. If you only want the JA Decor's EasyBlog style, please follow the following step in this section.

1.2 Install EasyBlog component

If you are new to this Joomla component, please read these guide.

Install EasyBlog   Add Style

Quick Guide:

  • Step 1: Install Easyblog component
  • Step 2: Download JA Decor theme for Easyblog ( if you have installed the Quickstart package, you should move on to Step 4).
  • Step 3: Extract zip file and upload to your your_site_folder. You should see folder ja_decor in /components/com_easyblog/themes.
  • Step 4: Go to back-end panel >> Components >> Easyblog >> Themes >> select ja_decor.

The following screenshots are for Step 4.

  • Access: Components >> Easyblog >> Themes

access easyblog theme

  • Change the default theme to ja_decor

change default theme

1.3 Configure EasyBlog Component

Forum Configuration

Recommendation:

Most of the settings are the default settings, when you select ja_decor theme, you will get the almost the same style as on our demo.

1.4 Configure Easyblog Slide

Easyblog

The EasyBlog slide displays the featured EasyBlog items only. Hence, in order to get the items display in EasyBlog slide, you have to set the items to "Featured".

Featured Article

1.5 EasyBlog Module Configuration

1.5.1 Blog Categories Module
  Module Position: sidebar-2
  Module Suffix:  easyblog-module-gray

Blog Categories

1.5.2 EasyBlog Archive Module
  Module Position: sidebar-2
  Module Suffix: NOT USED

EasyBlog Archive

1.5.3 EasyBlog Latest Blogs Module
  Module Position: sidebar-2
  Module Suffix: background-primary

EasyBlog Latest Blogs

1.5.4 EasyBlog Tag Cloud Module
  Module Position: sidebar-2
  Module Suffix: NOT USED

EasyBlog Tag Cloud

JA Decor now supports Mijoshop 3, if you want to use the new version, there are 2 ways:

  • For the site using Mijoshop 2: migrate to Mijoshop 3
  • For new installation: install it as normal

1. Migrate Mijoshop 2 to Mijoshop 3

Here are steps to migrate Mijoshop 2 to Mijoshop 3.

Step 1: take back-up for your site

To make sure the migration has no risk, please take backup for your site.

  • Take full back-up of your site with Akeeba
  • Backup your theme in [root]/components/com_mijoshop/opencart/catalog/view/theme

Step 2: Migrate Mijoshop 2 to Mijoshop 3 database

Check out more info about Migration of Mishop 2 to Mijoshop 3.

Beware that this a database migration process and won't keep your templates, extensions, modifications etc.

1. Download the Database Migration extension, extract it and upload to the folder: [root]/components/com_mijoshop/opencart/

2. Go to "MijoShop => System => VQMod Manager" uninstall an install DB Migration

3. Go to "MijoShop => System => Users => User Groups => Top Administrator" and click both "Select All" links

4. Go to to "MijoShop => System => DB Migration", click on the "Migrate Database" button, once the database is migrated, click on the "Backup Media" if you want to keep current images and downloads

5. Uninstall "MijoShop" component and "System - MijoShop jQuery" plugin from Joomla Extension Manager page

6. Download MijoShop 3 and install it 3 packages: component, jquery plugin and mijoshop library

7. Go to "MijoShop => Settings" and enter your Personal ID from the MijoShop tab

8. Go to "MijoShop => System => Users => User Groups => Top Administrator" and click both "Select All" links

Step 3: Configure Mijoshop 3 component and module setting

As we mentioned above, the database migration process won't keep your templates, extensions, modifications etc so you have to do it manually.

1. Download Decor custom theme for Mijoshop, extract and upload it to the folder: components\com_mijoshop\opencart\catalog\view\theme

2. Assign the decor theme as default: go to System > Setting, hit the Edit button of the default template, in the Store tab, assign "decor_v3" as default theme then save it.

3. Go to "MijoShop => System => Settings" compare and change all config width the Mijoshop 2 in your site

4. Create all modules as you used in Mijoshop 2 version

5. Assign modules to corresponding layout as you did in Mijoshop 2: go to System > Design > Layouts, open the layout you want to assign module to, add new module, select module, assign position then save.

Mijoshop Component is a commercial extension and is not included in the Quickstart package. The following instruction will help you to install and add Mijoshop JA Decor's style to your site.

Add style for Mijoshop

  • Download then install Mijoshop component to your site
  • Download style package for Mijoshop from Download page of JA Decor template
  • Extract the downloaded Mijoshop style package then add to your site

Download   Install

Mijoshop Configuration

Go to: Components >> Mijoshop >> Settings.

To have style like our demo, please make sure you have same settings as the image below.

Other settings are default settings.

Mijoshop Documentation

Mijoshop Module Configuration

When you install Mijoshop component, all extensions are installed as well. But the modules are not managed in Extensions >> Module Manager. In Extensions >> Modules, you will find only one module: Mijoshop - All-in-One. The module will load any module and assign to any position in your site. To display different modules in different positions, duplicate the Mijoshop - All-in-One module, assign Mijoshop module you want to the duplicated Mijoshop - All-in-one module.

Load any module and assign to any position

To manage Mijoshop modules, from Dasboard of Mijoshop, go to: Extensions >> Modules to configure modules.

In the list of Mijoshop module, click on Edit button to configure the module.

There is one module supported in our site: Latest Products

Module Position: features-4
Module Suffix: NOT USED

Mijoshop information module configuration

Theme Settings

JA Decor supports 5 color themes by default: Default, Red, Brown, Yellow and Turquoise.

JA Decor colors

A here, you can switch to any theme you like. To change theme, kindly select it from the drop down box under the Theme tab.

Theme Settings

In the Theme tab, you can also change the logo by replacing other image here or select text logo option as you wish.

View Logo Customization Docs

ThemeMagic Settings

ThemeMagic is a real time theme customization tool supported by T3 Framework. It allows you to customize any theme without touching in the code.

Step 1: Enable ThemeMagic

In the General tab, enable ThemeMagic then access ThemeMagic's working panel by clicking on ThemeMagic.

ThemeMagic Settings

Step 2: Select the theme to customize

Select theme then customize

Tips: Once ThemeMagic is enabled, you can access ThemeMagic from your front-page by adding "?tm=1" after your site url (example: http://joomla-templates.joomlart.com/ja_decor/?tm=1)

View ThemeMagic Documentation   VIew ThemeMagic's Video Tutorial

Layout Settings

There are 2 layouts that are used in the template. Select the style that you want to work on, then assign the layout for that style accordingly.

Layout Settings

Layout Structure

Here, you can change the layout structure, module positions in the layout, and more.

Layout Structure

In the spotlight block, you can see the number of positions available.

spotlight block

Responsive Layouts

JA Decor supports multiple responsive layouts. In the Responsive layout, select the layout you would like to configure.

Responsive Layouts

In each responsive layout, you can disable any module position as you wish.

Disable position

For module positions in the spotlight block, you can drag to resize.

Resize position

Documentation   Layout configuration video   Layout customization video

Masonry Configuration

Mansory Configuration will allow you to set the number of items being displayed according to different screen sizes. These settings are located in the tab Masonry Configuration in Administrator--> Extensions--> Template Manager--> JA Decor Template

Items display in LG: The number of items showing on a row with width of browser (in the case, it can be understood as width of monitor if you does not resize browser) larger than 1200px

Items display in MD: The number of items showing on a row with width of browser between 992px and 1200px

Items display in SM: The number of items showing on a row with width of browser between 768px and 992px

Items display in SMX: The number of items showing on a row with width of browser between 480px and 768px

Items display in XS: The number of items showing on a row with width of browser smaller than 480px

Gutter of items: Distance between the items showing

To display as Demo site, please follow step by step as below:

Step 1: Go to Administrator --> Menus --> Main Menu Create new Menu using Menu Item Tyle is Masonry Layout

Create new menu

In Category Options tab: Select to show all Subcategory levels

Category Options

Step 2: Go to Administrator --> Content --> Categories--> Featured Projects category--> Extra Fields tab -->Select "Extra Field Group" is Project

Select Extra Field Group in Category

Step 3: Go to Administrator --> Content --> Categories--> Open Subcategory (Ex: Bathroom)--> Basic Options tab--> Select "Alternative Layout" is Masonrylayout

Select Extra Field Group in Category

Step 3: Go to Administrator --> Content --> Articles--> Open Extrafield Project Layout tab:

Select Extra Field Group in Category

Frontend Appearance

JA Decor comes with multiple typography styles for Headings, Content, Color, Buttons, Quotes, Forms and so on ...

Typography page

Note:

JA Decor is built on the latest version of T3 Framework which integrates Bootstrap 3 at core, hence, JA Decor does support all Bootstrap 3's typo.

Step 1: Get the typo markup

There are 3 ways you can quickly get the typo markup from:

#1: Using Firebug

Using Firebug to get the typo markup

#2: Using quickstart package

We provide a Quickstart package, which includes the sample data that will help you replicating the Purity III demo as is for your site. Once you successfully install the site, you can easily get the typo's markup from the articles and custom HTML module.

#3: Using demo builder

Once you successfully build a Demo using Demo Builder which we have shown earlier in the Download and Installation section, you can easily copy the typo markup from the articles and custom HTML directly from the back-end.

Demo builder

Access demo builder

Step 2: Add markup of the typo to your content

Turn off editor:

Please make sure you turn the Editor off if you are going to add HTML code to your article content. To turn off, please navigate to Sytem >> Global confoguration, select Editor - None in the field Default editor.

You can add the typo markup to the article's content field or custom HTML module.

Add typography

Here is HTML code: Typography_Page_HTML_Code.txt.

You can use the above HTML code for making similar page in your site and refer to the codes for using Typography.

IMPORTANT: These typography styles are specific to JA Decor template and if you use them in your content and later decide to change the template, the styles will be broken, as these styles depend upon the template based css files (typo.css). We recommend using minimum typography, if you plan to change your template in future.

Step 3: Get the typo displayed on the front-page

Create a menu, assign to the article we added the typo markup to.

Menu settings

1. How to have a search button like in our demo?

In order to have a search button as in our demo, you should follow 4 steps below:

Step 1: Create a menu named as Search in the mainmenu with its order as last.

Step 2: Enable Search module (Show title is No and assign to all pages)

Step 3: Navigate to Backend ->> Templates Manager ->> Megamenu Config ->> Search menu item then add nav-search into Extra Class box and fa fa-search in Icon box.

Step 4: Enable submenu then choose the Search menu as in our screenshot below:

2. How to have a button like Get In Touch in our demo?

In order to have a button like Get In Touch in our demo, you should follow 2 steps below:

Step 1: Create a menu named as Get In Touch in the mainmenu. Its order should be placed before the Search button (if you already have one) or placed as last (if you have no Search button yet).

Step 2: Navigate to Backend ->> Templates Manager ->> Megamenu Config ->> Get In Touch menu item then add nav-highlight into Extra Class box.

3. How to create or change the copyright?

In order to create or change the copyright in the template

Go to templates\ja_decor\html\mod_footer\default.php and change the copyright in the file. Please note that you must follow our regulation for copyright removal at https://www.joomlart.com/member/signup.php

4. How to create the grid layout as “Featured Projects” page in demo?

In order to create the grid layout as “Featured Projects” page in demo, you should follow 3 steps below:

Step 1: Create a menu with the Menu Items Type as Masonry Layout

In Masonry Layout, we can change the parameters to fit for different layouts:

The total number of items shown in masonry layout equals the total params for # Leading Articles and # Intro Articles.

In the “Pagination” setting, you can choose the params as ajax load or normal

The “All Project” select is shown when you set params “Subcategory Levels” to anything other than “None” and the category you choose have sub categories.

The subcategories in the select All Project use the default layout. In case you need to set an alternative layout as masonry layout for it, navigate to Administrator >> Content >> Categorys Manager then choose the subcategory you need to change. In the “Basic Options” tab, set the params Alternative Layout to masonrylayout.

Step 2: In the chosen category, go to Extrafields setting and set the Extra Fields Group to Project

Step 3: When you set <>bExtra Fields group as Project, you can set grid size for each article apart from the 1x1 ratio as default.

5. How to make use of the parameters in "Masonry Configuration" tab?

Those are all settings for the Featured Projects page in demo.

Items display in LG: defines the number of items shown on a row for screen width or browser width (in case you resize your browser) larger than 1200px.

Items display in MD: defines the number of items shown on a row for browser width between 992px and 1200px.

Items display in SM: defines the number of items shown on a row for browser width between 768px and 992px.

Items display in SMX: defines the number of items shown on a row for browser width between 480px and 768px.

Items display in XS: defines the number of items shown on a row for browser width smaller than 480px.

Gutter of items: defines the distance between the each item.

6. How to change the width or height of each item on “Featured Projects” page?

Here is how you do it.

- Width of items is equal with width of browser (or width of screen) defined in the Masonry Configuration setting.

- Height of items is equal with width of items by default. If you want change this setting, you need to custom the code.

First, open the file “templates/ja_decor/js/scripts.js”, find this code line:

            height = multiplier_h ? columnWidth*multiplier_h[1] : columnWidth;

Next, change “columnWidth” with the number you want.

7. How can I hide the column Our Services with its category name and description in the [features-1] position?

In order to hide the column Our Services in the [features-1] position, you should follow 2 steps below:

Step 1: Open the \templates\ja_decor\html\mod_articles_category\triangle.php file and remove these code lines:

      <?php    
	  //Get category info   
	  if(isset($jacategory)) : ?>    
	  <div class="col-xs-12 col-sm-6 col-md-3 col-cmd-12 category-info background-primary">        
	  <div class="grid-1x2 grid-inner">           
	  <h3 class="category-title">           
	  <?php                 
	  $cat_title = $jacategory->title;               
	  $cat_titles = explode(" ",$cat_title);               
	  echo '<span class="first-letter">'.$cat_titles[0].'</span>';               
	  unset($cat_titles[0]);               
	  echo ' '.implode(" ",$cat_titles);           
	  ?>          
	  </h3>        
	  <div class="category-des">         
	  <?php echo $jacategory->description;?>        
	  </div>          
	  <a class="btn btn-primary btn-icon" href="/<?php echo JRoute::_(ContentHelperRoute::getCategoryRoute($jacategory->id));?>"><?php echo JText::_('VIEW_ALL'); ?> <i class="fa fa fa-long-arrow-right"></i></a>   
	  </div>   
	  </div>   
	  <?php endif; 
	  //End add   
	  ?>
     

Step 2: Go to “Our Services” module manager. In the Filtering Options setting, set Count from 3 to 4

Here is the result in front-end:

8. How can I hide the column Featured Projects with its category name and description in the [features-3] position?

In order to hide the column Featured Projects in the [features-3] position, you should follow 2 steps below:

Step 1: Open the \templates\ja_decor\html\mod_articles_category\normal.php file and remove these code lines:

  <?php    
  //Get category info    
  if(isset($jacategory)) : ?>    
  <div class="col-xs-12 col-sm-6 col-md-3 col-cmd-12 category-info background-primary ">        
  <div class="grid-inner grid-1x2">            
  <h3 class="category-title">            
  <?php                
  $cat_title = $jacategory->title;                
  $cat_titles = explode(" ",$cat_title);                
  echo '<span class="first-letter">'.$cat_titles[0].'</span>';               
  unset($cat_titles[0]);               
  echo ' '.implode(" ",$cat_titles);            
  ?>            
  </h3>            
  <div class="category-des">  
  <?php echo $jacategory->description;?>  
  </div>            
  <a class="btn btn-primary btn-icon" href="/<?php echo JRoute::_(ContentHelperRoute::getCategoryRoute($jacategory->id));?>"><?php echo JText::_('VIEW_ALL'); ?> <i class="fa fa fa-long-arrow-right"></i></a>       
  </div>    
  </div>   
  <?php endif;    
  //End add    
  ?>

Step 2: Go to “Featured Projects” module manager. In the Filtering Options setting, set Count from 3 to 4

Here is the result in front-end:

9. Where is the Breadcrumbs module?

We disable this module in the back-end so it is not shown in demo. If you want to display Breadcrumbs module, go to admin setting then public Breadcrumbs module with its module position as navhelper and assign it to all pages.

10. Can I have featured articles in Home Page?

Yes, you can. Log into your site back-end then navigate to Mainmenu manager ->> edit Home menu item and change the number in these fields:

Leading Articles

Intro Articles

Columns

Note:

The value in Columns should be set as 1, value in Leading Articles should be odd number.

11. How to change logo in JA Decor template?

There are two ways to change the default logo in JA Decor template.

11.1 Upload your own logo in the template back-end

Navigate to Backend >> Extensions >> Templates Manager >> ja_decor - Default >> Theme tab Browse and upload yout logo in the field Logo Image

Click Save to complete the whole process. Refresh your site in the front-end to see the immediate change.

Note:

In case you use more than one theme: In the Theme tab, navigate to the Theme field then select the theme you want to change.

Finish all the steps above and you are done.

11.2 Use custom CSS

Set your logo to the standard size (xxx) and name it as [your_site_name].png

Copy that logo file to the folder [root]/templates/ja_decor/images/

Create a css file named custom.css in the folder: /your site/templates/ja_decor/css/

If the new logo size is not going well with your site’s look and feel, just change its size with additional styling as below:

- Adding a new class as .logo-image {}

For Example

   .logo-image {
     width: logo-width;
     height: logo-height;
     background: url("your-site/ja_decor/templates/ja_decor/images/your-site-logo.png") no-repeat / 100% auto;
 }

 .logo-image img { display: none;}

- Click save then refresh your site in the front-end to see the change.

If the new logo does not appear, follow these steps:

- Navigate to Backend >> Extensions >> Template Manager >> Select your template style then click on the Theme tab

- In the field Logo Image, click on X to clear

- Click Save then repeat all the above steps for your other template styles.

- Go to the front-end to check your result.

How to customize your uploaded logo?

Small Logo

To specially display on mobile/tablet or other collapsed screens, the default logo will then be replaced by the small logo.

Enable On: The logo uploaded by user will be used. In case no logo is selected in the Small Logo Image field, the default logo will be used.

Enable Off: The default logo will be used.

Long width logo

Logo with width too long will not go well with the background shape below. To dismiss this default background, follow these steps:

- Open the folder /your site/templates/ja_decor/templates/css/

- Edit the custom.css file as below: .logo-image { background: none; }

Here is the result in the front-end

Short width logo

When your logo overlaps the background shape like this, you can change its height by following these steps:

- Open the folder /your site/templates/ja_decor/templates/css/

- Edit the custom.css file as below: .logo-image { max-height: 70px; }

Here is the result in the front-end

The above userguide should help one in replicating the Demo site settings for the template and extension on their site.

Recommended :

If you are new or are confused, we recommend installing Quickstart on your localhost and use it as reference for the configurations. This is the best way to work with any template. Links to all the resources are provided above. We suggest you to carefully go over those in order to take the maximum advantage of our products.

Support :

Please raise your support queries in the forum and make sure you follow the support guidelines. We would need to spend more time to get back to you, in case the support guidelines are not followed.