DOCUMENTATION
From
JOOMLAUX
All Joomlaux templates run on Joomla 3.x version (Joomla 3.0, 3.1…). Therefore, your site must install Joomla 3.x version to use our template. The installation of Joomla 3.x only requires a few steps and you can do within a minute!
The user guide provided is to help you to quickly learn about JUX RealEstate template and how to use it easily. This
documentation is recommended for both non-advanced & advanced users. Please read carefully.
Main aspects covered in the user guide:
Layout
Here are 3 different layouts used in JUX RealEstate template:
Content- Sidebar
Sidebar-Content
No-Sidebar
Module positions
Take a look at the picture below for all modules’ position on JUX RealEstate
T3 framework is a popular Template framework for Joomla 3.0 using Bootstrap. JUX RealEstate uses T3V3
framework which comes with brand-new look, design approach and incredibly powerful customization feature. Please
follow the links provided below to learn more about T3 framework and its implementation.
8.1 T3 Framework Introduction
More about T3 framework, please visit HERE
8.2 T3 Installation
Please visit HERE
8.3 T3 Setting
Please visit HERE
8.4 Layout System
Please visit HERE
8.5 Customization
Please visit HERE
1.1 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.
1.2 Install 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.
After purchasing our menu, please follow the instruction to download the package. You’ll then find our template
zip file inside the package
Once you successfully Downloaded the files you need, You'll have to:
- Install the template files into your Joomla system.
- At default, during the installation process,JUX Real Estate template will be installed with the settings we used on our demo website
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
On homepage, we used many modules type as Unite Revolution Slider 1, JUX Real Estate… In this documentation we will guide you how to build look like in our demo site.
Let’s scroll to see how to create & configure each modules on Real Estate:
Module type: Custom HTML Position: top-a Custom HTML <div class="phone-number">Call us <span>(+01)-82-286-1860</span></div>
Frontend
Module type: Custom HTML Position: top-b Custom HTML <div class="social-media"> <ul class="menu"> <li><a class="fa fa-facebook" href="#"><span class="social-title">Facebook</span></a></li> <li><a class="fa fa-twitter" href="#"><span class="social-title">Twitter</span></a></li> <li><a class="fa fa-google-plus" href="#"><span class="social-title">G+</span></a></li> <li><a class="fa fa-pinterest" href="#"><span class="social-title">Pinterest</span></a></li> <li><a class="fa fa-dribbble" href="#"><span class="social-title">Dribbble</span></a></li> </ul> </div>
Frontend
Module type: JUX Login Position: top-c
Frontend
Module type: Search Position: top-d
Frontend
Module type: Unite Revolution Slider 2 Position: slideshow
Frontend
Module type: JUX Real Estate Realty Search Position: search-property
Frontend
To learn more about this, please see OUR DOCUMENTATION
Module type: JUX Real Estate Slider Position: navheader Module Class Suffix : mod-featured-properties
Frontend
Module type: Custom HTML Position: navcontent Custom HTML <div class="client-testimonial parallax"> <div class="bg parallax-bg"></div> <div class="overlay"></div> <div class="testimonial-inner"> <div class="section-title"> <h3>Testimonial</h3> </div> <div class="testimonial-content"> <div class="carousel slide" id="carousel-testimonial"> <ol class="carousel-indicators"> <li data-target="#carousel-testimonial" data-slide-to="0" class=""></li> <li data-target="#carousel-testimonial" data-slide-to="1" class=""></li> <li data-target="#carousel-testimonial" data-slide-to="2" class="active"></li> <li data-target="#carousel-testimonial" data-slide-to="3"></li> </ol> <div class="carousel-inner"> <div class="item"> <div class="slide-content"> <i class="fa fa-comment-o"></i> <div class="testimonial-desc">“Real Estate helped me to find my apartment quickly and it pretty matched our criterias. The service was so good that we received recommendation very near to what we were looking for. Real Estate is really a great choice for your home search.”</div> <div class="our-customer-info"> <div class="avatar"> <a href="#"> <img src="images/joomlaux/demo/client.png" alt="" /> </a> </div> <div class="custom-desc"> <h4>Dave Softel</h4> <p>Happy Buyer of June</p> </div> </div> </div> </div> <div class="item"> <div class="slide-content"> <i class="fa fa-comment-o"></i> <div class="testimonial-desc">“Real Estate helped me to find my apartment quickly and it pretty matched our criterias. The service was so good that we received recommendation very near to what we were looking for. Real Estate is really a great choice for your home search.”</div> <div class="our-customer-info"> <div class="avatar"> <a href="#"> <img src="images/joomlaux/demo/client.png" alt="" /> </a> </div> <div class="custom-desc"> <h4>Dave Softel</h4> <p>Happy Buyer of June</p> </div> </div> </div> </div> <div class="item active"> <div class="slide-content"> <i class="fa fa-comment-o"></i> <div class="testimonial-desc">“Real Estate helped me to find my apartment quickly and it pretty matched our criterias. The service was so good that we received recommendation very near to what we were looking for. Real Estate is really a great choice for your home search.”</div> <div class="our-customer-info"> <div class="avatar"> <a href="#"> <img src="images/joomlaux/demo/client.png" alt="" /> </a> </div> <div class="custom-desc"> <h4>Dave Softel</h4> <p>Happy Buyer of June</p> </div> </div> </div> </div> <div class="item"> <div class="slide-content"> <i class="fa fa-comment-o"></i> <div class="testimonial-desc">“Real Estate helped me to find my apartment quickly and it pretty matched our criterias. The service was so good that we received recommendation very near to what we were looking for. Real Estate is really a great choice for your home search.”</div> <div class="our-customer-info"> <div class="avatar"> <a href="#"> <img src="images/joomlaux/demo/client.png" alt="" /> </a> </div> <div class="custom-desc"> <h4>Dave Softel</h4> <p>Happy Buyer of June</p> </div> </div> </div> </div> </div> </div> </div> </div> </div>
Frontend
Module type: Custom HTML Position: our-agents Custom HTML <div class="meet-our-agents"> <div class="list-agents row"> <div class="agent col-md-4 col-sm-6 col-xs-12"> <div class="agentImage"> <div class="agentimg"> <img alt="" src="images/joomlaux/demo/our-agents/1.jpg" /> </div> <div class="agentSocial"> <a href="#" target="_blank"><i class="fa fa-facebook"> </i></a> <a href="#" target="_blank"><i class="fa fa-twitter"> </i></a> <a href="#" target="_blank"><i class="fa fa-google-plus"> </i></a> <a href="#" target="_blank"><i class="fa fa-linkedin"> </i></a> </div> </div> <div class="agentDesc"> <span class="spanName">JAMES LANE</span> <span class="spanPosition">(+01) 28-285-2915</span> <span class="spanDesc">Vestibulum id felis arcu. In suscipit, tortor id accum interdum, urna ligula eleifend mi, eu ornare leo dui vitae sem. </span> </div> </div> <div class="agent col-md-4 col-sm-6 col-xs-12"> <div class="agentImage"> <div class="agentimg"> <img alt="" src="images/joomlaux/demo/our-agents/2.jpg" /> </div> <div class="agentSocial"> <a href="#" target="_blank"><i class="fa fa-facebook"> </i></a> <a href="#" target="_blank"><i class="fa fa-twitter"> </i></a> <a href="#" target="_blank"><i class="fa fa-google-plus"> </i></a> <a href="#" target="_blank"><i class="fa fa-linkedin"> </i></a> </div> </div> <div class="agentDesc"> <span class="spanName">ZACHARY MORRIS</span> <span class="spanPosition">(+01) 58-181-6836</span> <span class="spanDesc">Vestibulum id felis arcu. In suscipit, tortor id accum interdum, urna ligula eleifend mi, eu ornare leo dui vitae sem. </span> </div> </div> <div class="agent col-md-4 col-sm-6 col-xs-12"> <div class="agentImage"> <div class="agentimg"> <img alt="" src="images/joomlaux/demo/our-agents/3.jpg" /> </div> <div class="agentSocial"> <a href="#" target="_blank"><i class="fa fa-facebook"> </i></a> <a href="#" target="_blank"><i class="fa fa-twitter"> </i></a> <a href="#" target="_blank"><i class="fa fa-google-plus"> </i></a> <a href="#" target="_blank"><i class="fa fa-linkedin"> </i></a> </div> </div> <div class="agentDesc"> <span class="spanName">JANET REID</span> <span class="spanPosition">(+01) 38-367-1024</span> <span class="spanDesc">Vestibulum id felis arcu. In suscipit, tortor id accum interdum, urna ligula eleifend mi, eu ornare leo dui vitae sem. </span> </div> </div> </div> </div>
Frontend
Module type: Custom HTML Position: client Module Class Suffix: client Custom HTML <div class=" animatedParent"> <h2 class="fadeInUp animated">SOME FAMOUS CLIENTS WE WORK WITH SO FAR</h2> <div class="all-logo"> <div class="row logos fadeInUp animated"> <div class="col-no-pd col-md-2 col-sm-4 "><a href="#"><img src="images/joomlaux/demo/client/client1.png" alt="" /></a></div> <div class="col-no-pd col-md-2 col-sm-4 "><a href="#"><img src="images/joomlaux/demo/client/client2.png" alt="" /></a></div> <div class="col-no-pd col-md-2 col-sm-4 "><a href="#"><img src="images/joomlaux/demo/client/client3.png" alt="" /></a></div> <div class="col-no-pd col-md-2 col-sm-4 "><a href="#"><img src="images/joomlaux/demo/client/client4.png" alt="" /></a></div> <div class="col-no-pd col-md-2 col-sm-4 "><a href="#"><img src="images/joomlaux/demo/client/client5.png" alt="" /></a></div> <div class="col-no-pd col-md-2 col-sm-4 "><a href="#"><img src="images/joomlaux/demo/client/client6.png" alt="" /></a></div> </div> </div> <p class="fadeInUp animated">Pellentesque id consectetur est. Fusce lacus justo, hendrerit non tortor a, rutrum rutrum tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p> </div>
Frontend
Module type: Custom HTML Position: footer-1 Custom HTML <div class="about-us"> <div class="about-us-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id fermentum lorem.</div> </div> <ul class="address-info"> <li> <i class="fa fa-paper-plane"><span class="hidden">fa-paper-plane</span></i> <div class="address-detail"> <a href="mailto:[email protected]">Contaccompany.com</a> </div> </li> <li> <i class="fa fa-phone"><span class="hidden">fa-phone</span></i> <div class="address-detail"> <span>P: +1 234567890</span><br /> <span>F: +0987654321</span> </div> </li> <li> <i class="fa fa-map-marker""><span class="hidden"> fa-map-marker"</span></i> <div class="address-detail"> <span>1234 Street Name, City Name, United States</span> </div> </li> </ul>
Frontend
Module type: K2 Content Module Class Suffix: recent_news
Frontend
Module type: Menu Position: footer-3 Module Class Suffix : mod-company
Frontend
Module type: AcyMailing Position: footer-4
Module type: Footer Position: footer
Frontend
Here is frontend Property page
1.1 Guide how to create & configure module in “jux-banner” positition
1.1.1 Module Banner Properties
Module type: Custom HTML Position: jux-banner Custom HTML <div class="container"> <h2>Properties</h2> <p>Lorem ipsum doltor sit amet, consectetur adipiscing elit.</p> </div>
Frontend
1.1.2 Module Banner Map
Module type: Custom HTML Position: jux-banner Custom HTML <div class="container"> <h2>Map Realty</h2> <p>Real estate matching your search</p> </div>
Frontend
1.1.3 Module Banner Agent
Module type: Custom HTML Position: jux-banner Custom HTML <div class="container"> <h2>Agents</h2> <p>Lorem ipsum doltor sit amet, consectetur adipiscing elit.</p> </div>
Frontend
1.1.4 Module Banner Blog
Module type: Custom HTML Position: jux-banner Custom HTML <div class="container"> <h2>Blog</h2> <p>Lorem ipsum doltor sit amet, consectetur adipiscing elit.</p> </div>
Frontend
1.2 Guide how to create& configure modules in “sidebar” position
1.2.1 Module Categories
Type: JUX Real Estate Categories Position: sidebar
Frontend
1.2.2 Module Realty Search
Module type: JUX Real Estate Realty Search Position: sidebar
Frontend
1.2.3 Module Types
Module type: JUX Real Estate Types Position: sidebar
Frontend
1.3 Guide how to create content of JUX Real Estate
To have content of JUX Real Estate look like in our demo site, please follow these steps:
Step 1: Go to backend: Component→ JUX Real Estate→ Create content for component, please go to HERE to learn more about this.
Step 2: Go to Menu→ Main menu→ Create menu type: JUX Real Estate category with these options
With Options
Note : Similarly, you can do the same steps with other pages, such as Map Realty, Agents.
Here is frontend of Contact page
2.1 Guide how to create & configure “contact”position
2.1.1 Module Contact Us Custom
Module type: Custom HTML Position: contact Custom HTML <div class="contact-us-custom container"> <h3>Contact Us</h3> <div class="text-small">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div> </div>
Frontend
2.1.2 Module JUX Google Map
Module type: JUX Google Map Position: contact
Frontend
2.2. Guide how to create& configure Contact component.
To have contact form look like as this picture, please follow these steps:
Step 1: Go to backend: Component→ Contact→ Create Contact name: Contact Us
K2 is a powerful & ideal extension that allows you to powerfully control your Joomla content. K2 provides out-of-the-box integrated solutions featuring rich content forms for items.
To get K2 on your site, download K2 component from the website http://getk2.org/
If you are new to K2, go to K2 guide to install and configure the component in your Joomla site.
To install & configure K2 pages, please follow these steps:
Step 1: Go to backend: Extensions→ Module manager and upload K2 you’ve downloaded
After uploading successfully, you will have the message and K2 information as below:
Step 2: Global Configuration
You will find general settings for K2 in Global Configuration. Navigate to System→Global Configuration:
Step 3: K2 Categories
To build K2 for your website like our demo, navigate to Components --> K2 --> Categories:
Frontend of blog page
3.1 Guide how to create & configure “jux-banner” and “sidebar” position, please see ANOTHER PAGE SETTING section
3.2 Create Blog Page
To have blog page like in our demo site, please follow these steps:
Step 1: Go to backend: Components→ K2→Categories→Select category you want to display in Blog Classic page and configure:
You can change frontend by changing leading count and Primary count in category.
Step 2: You can configure to display or hide items, please configure in Item view options in category listings tabs, you can Show/Hide fields you want to display on frontend.
To override template, please clone your style then edit as you wish. After that, assign the cloned style to specific menus. The assigned menus will override the same menu in the default style.
Each style can be configured to use a theme and layout so in one website, you can have menus with different themes and layouts.
2.1 Select layout for style
In Real Estate, each style will use one layout (but please keep in mind that one site use many styles --> so one site can use multiple layouts simultaneously because T3 uses multiple styles simultaneously)
2.2 Layout Configuration
In the layout setting, there are 2 parts to be configured: Layout Structure and Responsive Layout configuration
Layout Structure
Set number of columns in each spotlight block
Responsive Layout Configuration
Select responsive layout
In each responsive layout, you can enable/disable content resize module position in each spotlight block
In JUX Real Estate, we support some other options, you can enable/disable Animation Css or styles for theme.
3.1 Enable Animate CSS
Enable Animate CSS: Enable CSS3 animation, for more information please visit https://daneden.me/animate.
Enable Animate: On → If enabled, animate css will be able to load on homepage.
Enable Animate: Off → If disabled, animate css will not be able to load on homepage.
3.2 Dark style
Dark Style: On→ Change the template style to dark.
Dark Style: Off→ Change the template style to default style.
Frontend Demo
3.3 Boxed Layout
Boxed Layout: On → Change the template layout to boxed style.
Boxed Layout: Off → Change the template layout to default style.
Frontend Demo
Here is frontend of Real Estate
There are 2 ways to change logo for Real Estate template
#1: Change logo from Template Manager
Each style can go with different logo. To set style for the logo, please go to Extensions→Template Manager→ select Theme you’re using. Select image for logo on your site as shown in picture below:
#2: Change the Logo from the variable.less file
Another way to change logo is changing logo image path in variables.less file, which is located in template/jux_realty/less
// TEMPLATE LOGO // -------------------------------------------------- @t3-logo-image: "@{t3-image-path}/logo.png";
2. Logo Styling
To customize style for logo, open file style.css that is located in the template/jux_realty/less/style.css folder. Search for the logo text, you’ll find the style where you can either add more styles or customize it as you want.
// Logo // ---- .logo { text-align: center; // Left align the logo on Tablets / Desktop @media screen and (min-width: @screen-sm) { text-align: left; } a { display: inline-block; line-height: 1; margin: 0; } } // Logo Image // ---------- .logo-image { text-align: center; // Hide sitename and slogan span, small { display: none; } } // Logo Text // ---------- .logo-text { a { text-decoration: none; font-size: ceil(@font-size-base * 2); font-weight: bold; } &:hover a, a:hover, a:active, a:focus { text-decoration: none; } // Taglines .site-slogan { display: block; font-size: @font-size-base; margin-top: 5px; } }