JA Decor - Joomla Template documentation

I. JA Extension Configuration

1. JA Slideshow Lite module

  Module Position: slideshow
  Module Suffix: NOT USED

• Module Back-end Settings
• Front-end Appearance

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

• Module Back-end Settings
• Front-end Appearance

View JA Content Slider Docs

3. JA Masshead module

  Module Position: masthead
  Module Suffix: NOT USED

• Module Back-end Settings
• Front-end Appearance

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

• Plugin Back-end Settings
• Front-end Appearance

II. Acymailing Module Configuration

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

• Module Back-end Settings
• Front-end Appearance

III. Default Joomla Extensions Configuration

1. Language Switcher

  Module Position: languageswitcherload
  Module Suffix:  NOT USED

• Module Back-end Settings
• Front-end Appearance

2. Articles Category

2.1. Our Services

  Module Position: features-1
  Alternative Layout : triangle
  Module Suffix:  NOT USED

• Module Back-end Settings
• Front-end Appearance

2.2. Features Projects

  Module Position: after-content
  Alternative Layout : normal
  Module Suffix:  NOT USED

• Module Back-end Settings
• Front-end Appearance

2.3. Features Projects

  Module Position: features-3
  Alternative Layout : normal
  Module Suffix:  NOT USED

• Module Back-end Settings
• Front-end Appearance

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.

• Category Back-end Settings

Step 2: Create banner

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

• Banner Back-end Settings

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

• Module Back-end Settings
• Front-end Appearance

4. Footer

  Module Position: footer
  Module Suffix: NOT USED

• Module Back-end Settings
• Front-end Appearance

5. Login Form

  Module Position: sidebar-2
  Module Suffix: NOT USED

• Module Back-end Settings
• Front-end Appearance

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 .

• Services menu items

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

• Module Back-end Settings
• Front-end Appearance

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.

• Company menu items

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

• Module Back-end Settings
• Front-end Appearance

6.3. Main Menu module

This menu will be used if Megamenu is Turned off

  Module Position: mainnav
  Module Suffix: _menu

• Module Back-end Settings
• Front-end Appearance

6.4. Off Canvas menu module

This menu used on devices

  Module Position: mainnav
  Module Suffix: _menu

• Module Back-end Settings
• Front-end Appearance

Go to Backend -> Site -> Global Configuration:

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-sm-6">
    <div id="about-slideshow" class="carousel slide" data-ride="carousel">
      <div class="carousel-inner">
        <div class="item active">
          <img src="http://www.joomlart.com/images/joomlart/demo/about-img.jpg" border="0" alt="" />
        </div>
        <div class="item">
          <img src="http://www.joomlart.com/images/joomlart/demo/about-img.jpg" border="0" alt="" />
        </div>
      </div>

      <a class="left carousel-control" href="http://www.joomlart.com/#about-slideshow" data-slide="prev">
        <i class="fa fa-angle-left"></i>
      </a>
      <a class="right carousel-control" href="http://www.joomlart.com/#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">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>

• Module Back-end Settings
• Front-end Appearance

2. About Troppies

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

HTML code:

<div class="about-troppies clearfix">
  <div class="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-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-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-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>

• Module Back-end Settings
• Front-end Appearance

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="http://www.joomlart.com/images/joomlart/demo/client-1.jpg" border="0" alt="" />
            </div>
            <div class="client-logo">
              <img src="http://www.joomlart.com/images/joomlart/demo/client-2.jpg" border="0" alt="" />
            </div>
          </div>
          <div class="col-sm-4">
            <div class="client-logo">
              <img src="http://www.joomlart.com/images/joomlart/demo/client-3.jpg" border="0" alt="" />
            </div>
            <div class="client-logo">
              <img src="http://www.joomlart.com/images/joomlart/demo/client-4.jpg" border="0" alt="" />
            </div>
          </div>
          <div class="col-sm-4">
            <div class="client-logo">
              <img src="http://www.joomlart.com/images/joomlart/demo/client-5.jpg" border="0" alt="" />
            </div>
            <div class="client-logo">
              <img src="http://www.joomlart.com/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="http://www.joomlart.com/images/joomlart/demo/client-1.jpg" border="0" alt="" />
            </div>
            <div class="client-logo">
              <img src="http://www.joomlart.com/images/joomlart/demo/client-2.jpg" border="0" alt="" />
            </div>
          </div>
          <div class="col-sm-4">
            <div class="client-logo">
              <img src="http://www.joomlart.com/images/joomlart/demo/client-3.jpg" border="0" alt="" />
            </div>
            <div class="client-logo">
              <img src="http://www.joomlart.com/images/joomlart/demo/client-4.jpg" border="0" alt="" />
            </div>
          </div>
          <div class="col-sm-4">
            <div class="client-logo">
              <img src="http://www.joomlart.com/images/joomlart/demo/client-5.jpg" border="0" alt="" />
            </div>
            <div class="client-logo">
              <img src="http://www.joomlart.com/images/joomlart/demo/client-6.jpg" border="0" alt="" />
            </div>
          </div>
        </div>
      </div>
      <div class="client-slider-control">
        <a class="left carousel-control" href="http://www.joomlart.com/#client-slider" data-slide="prev">
          <i class="fa fa-angle-left"></i>
        </a>
        <a class="right carousel-control" href="http://www.joomlart.com/#client-slider" data-slide="next">
          <i class="fa fa-angle-right"></i>
        </a>
      </div>
    </div>
  </div>
</div>

• Module Back-end Settings
• Front-end Appearance

4. Footer Logo

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

HTML code:

<p><img src="http://www.joomlart.com/images/logo-white.png" border="0" alt="" /></p>

• Module Back-end Settings
• Front-end Appearance

5. Maps

  Module Position: footer-map
  Module Suffix:  NOT USED

HTML code:

{jamap}
<div class="office-info">
<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>

• Module Back-end Settings
• Front-end Appearance

6. Video - Welcome

  Module Position: position-1
  Module Suffix:  NOT USED

HTML code:

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

• Module Back-end Settings
• Front-end Appearance

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="http://www.joomlart.com/index.php?option=com_contact&view=category&id=82&Itemid=455">Read more</a>
  </div>
  <div class="article-image grid-2x1">
    <img src="http://www.joomlart.com/images/joomlart/demo/sam-2.jpg" alt="" />
  </div>
</div>

• Module Back-end Settings
• Front-end Appearance

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="http://www.joomlart.com///s7.addthis.com/js/300/addthis_widget.js#pubid=xa-525b746c4d879b01"></script>
<!-- AddThis Follow END -->

• Module Back-end Settings
• Front-end Appearance

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="http://www.joomlart.com/images/joomlart/demo/about-img.jpg" border="0" alt="" />
        </div>
        <div class="item">
          <img src="http://www.joomlart.com/images/joomlart/demo/about-img.jpg" border="0" alt="" />
        </div>
      </div>
      <a class="left carousel-control" href="http://www.joomlart.com/#about-slideshow" data-slide="prev">
        <i class="fa fa-angle-left"></i>
      </a>
      <a class="right carousel-control" href="http://www.joomlart.com/#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>

• Module Back-end Settings
• Front-end Appearance

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="http://www.joomlart.com/#" 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="http://www.joomlart.com/images/joomlart/demo/300x300.gif" alt="" />
</div>
<a href="http://www.joomlart.com/#" class="btn btn-default ">View</a>
</div>
<div class="article-content grid-1x1">
 <h4><a href="http://www.joomlart.com/#" 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="http://www.joomlart.com/images/joomlart/demo/300x300-gray.gif" alt="" />
</div>
<a href="http://www.joomlart.com/#" class="btn btn-default ">View</a>
</div>
<div class="article-content grid-1x1">
 <h4><a href="http://www.joomlart.com/#" 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="http://www.joomlart.com/images/joomlart/demo/300x300.gif" alt="" />
</div>
<a href="http://www.joomlart.com/#" class="btn btn-default ">View</a>
</div>
<div class="article-content grid-1x1">
 <h4><a href="http://www.joomlart.com/#">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>

• Module Back-end Settings
• Front-end Appearance

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

• Module Back-end Settings
• Front-end Appearance

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="http://www.joomlart.com/images/joomlart/demo/client-1.jpg" border="0" alt="" />
            </div>
            <div class="client-logo">
              <img src="http://www.joomlart.com/images/joomlart/demo/client-2.jpg" border="0" alt="" />
            </div>
          </div>
          <div class="col-sm-4">
            <div class="client-logo">
              <img src="http://www.joomlart.com/images/joomlart/demo/client-3.jpg" border="0" alt="" />
            </div>
            <div class="client-logo">
              <img src="http://www.joomlart.com/images/joomlart/demo/client-4.jpg" border="0" alt="" />
            </div>
          </div>
          <div class="col-sm-4">
            <div class="client-logo">
              <img src="http://www.joomlart.com/images/joomlart/demo/client-5.jpg" border="0" alt="" />
            </div>
            <div class="client-logo">
              <img src="http://www.joomlart.com/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="http://www.joomlart.com/images/joomlart/demo/client-1.jpg" border="0" alt="" />
            </div>
            <div class="client-logo">
              <img src="http://www.joomlart.com/images/joomlart/demo/client-2.jpg" border="0" alt="" />
            </div>
          </div>
          <div class="col-sm-4">
            <div class="client-logo">
              <img src="http://www.joomlart.com/images/joomlart/demo/client-3.jpg" border="0" alt="" />
            </div>
            <div class="client-logo">
              <img src="http://www.joomlart.com/images/joomlart/demo/client-4.jpg" border="0" alt="" />
            </div>
          </div>
          <div class="col-sm-4">
            <div class="client-logo">
              <img src="http://www.joomlart.com/images/joomlart/demo/client-5.jpg" border="0" alt="" />
            </div>
            <div class="client-logo">
              <img src="http://www.joomlart.com/images/joomlart/demo/client-6.jpg" border="0" alt="" />
            </div>
          </div>
        </div>
      </div>
      <div class="client-slider-control">
        <a class="left carousel-control" href="http://www.joomlart.com/#client-slider" data-slide="prev">
          <i class="fa fa-angle-left"></i>
        </a>
        <a class="right carousel-control" href="http://www.joomlart.com/#client-slider" data-slide="next">
          <i class="fa fa-angle-right"></i>
        </a>
      </div>
    </div>
  </div>
</div>

• Module Back-end Settings
• Front-end Appearance

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>

• Module Back-end Settings
• Front-end Appearance

1. Off-canvas and Collapsed menu

JA Decor inherits the Off-canvas feature of T3 Framework. Follow the steps below to configure the Off-canvas menu for JA Decor.

Step 1: Enable collapse navigation for small screens

Open JA Decor setting panel, open Navigation tab then collapse navigation for small screens.

Step 2: Enable Off-canvas

Open JA Decor setting panel, open the Add-on tab then enable the Off-canvas option.

Step 3: Assign a Menu to Off-canvas

First off, you have to have a menu. If you haven't done this before, please refer to this link. Once you have successfully created a menu, please open Module Manager to continue. If you have create a menu module, or using an existing menu module and select this menu module with the above menu (meaning you're connecting them together).

Front-end Appearance

To move the Off-canvas to the left side, please open the off-canvas.php file in /templates/ja_decor/tpls/blocks.

Now, find the following code:

data-pos="right"

Then change it to:

data-pos="left"

2. Megamenu Configuration

JA Decor supports Megamenu, which is a core feature of T3 Framework.

To enable Megamenu, from JA Decor template back end, navigate to the Navigation tab.

Select the menu that will be displayed as the main menu (mainnav position), then enable Megamenu.

After you successfully save the configuration above, we will move onto configuring the Megamenu by clicking the "Megamenu" button.

It is pretty straight forward. However, please note that in JA Decor's Megamenu, the submenu of the two menu item Explore and Products, we should select Alignment = left

Documentation   Video Tutorial

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

The following screenshots are for Step 4.

• Access: Components >> Easyblog >> Themes

• Change the default theme to ja_decor

1.3 Configure EasyBlog Component

1.4 Configure Easyblog Slide

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".

1.5 EasyBlog Module Configuration

1.5.1 Blog Categories Module

  Module Position: sidebar-2
  Module Suffix:  easyblog-module-gray

• Back-end Settings
• Front-end Appearance

1.5.2 EasyBlog Archive Module

  Module Position: sidebar-2
  Module Suffix: NOT USED

• Back-end Settings
• Front-end Appearance

1.5.3 EasyBlog Latest Blogs Module

  Module Position: sidebar-2
  Module Suffix: background-primary

• Back-end Settings
• Front-end Appearance

1.5.4 EasyBlog Tag Cloud Module

  Module Position: sidebar-2
  Module Suffix: NOT USED

• Back-end Settings
• Front-end Appearance

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

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

• Back-end Settings
• Front-end Appearance

Theme Settings

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

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.

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.

Step 2: Select the theme to customize

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 Structure

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

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

Responsive Layouts

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

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

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

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

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

In Category Options tab: Select to show all Subcategory levels

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

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

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

Frontend Appearance

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

Typography page

Step 1: Get the typo markup

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

#1: Using Firebug

#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.

Access demo builder

Step 2: Add markup of the typo to your content

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

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.

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

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

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.