JUX Citilights

Created: 09/24/2015

Lastest update: 09/24/2015

By: Joomlaux

Need Support

General introduction

1. What is JUX Citilights ?

Citilights is a premium responsive Template dedicatedly crafted for Property listing portal, as well as Agent and Agency’s website. Understanding what online real estate business demands, we included in this template viable functions such as Front-end submission, Membership Subscription, Google map integration, Advanced search, Property Featuring support and more. To turn to the design, we make sure that it brings out premium look and feel to boost your credibility. Various property listing layouts are available and all are fully responsive. Whether you are building a Property Sales & Rentals website, or you are an agent/agency looking to expand your online presence, Citilights is the right fit for you. Ready to own the best looking real estate website around? Let’s scroll down. Full feature List

2. Our Extension Support

  • JUX Real Estate component
  • JUX Real Estate our agents module
  • JUX Real Estate Slideshow module
  • JUX Real Estate Properties module
  • JUX Real Estate Map realty module
  • JUX Real Estate Realty Search module

3. 3rd Party extension Support

  • SP Page Builder
  • Module Noo Login
  • Module Mini Calendar

4. Helix 3 Framework

Helix 3 is a user-friendly, modern, highly customizable and easy to integrate solution to build your next joomla 3+ website based on your idea. Perfect to use as is or as a blank, genesis, start template development. You can refer more about Helix framework, please visit here

Download & Install

1. Plan your site developer

  • 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.
  • 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.
  • JUX Real Estate Slideshow module
  • JUX Real Estate Properties module
  • JUX Real Estate Map realty module
  • JUX Real Estate Realty Search module
2. When purchasing successfully our template from JoomlaUX, you will need to download template package. The template package contains:

  • Citilights template file: includes jux_citilight.zip file that consist of everything you need to install the template
  • Document folder: includes citilights documentation file that helps you get to know about Citilights and guides you to buid your site with our template
  • Quickstart package: this is a full package that includes: template, extension, database, images… and once you install the quickstart successfully, you will have a complete website that is exactly same as our demo.
3. Once you successfully download the files you need, you’ll have to:

  • Install the template files into Joomla system.
  • At default, during the installation process, JUX Citilights template will be installed with the settings we’re used as on the demo website. Therefore, if you would like to make any change in configuration, it’s recommended that you should complete the setup (including installing all the modules and plugins along with the template as on demo) then carry our any customization afterwards.

    View how to install extension guide

Basic Configure

After install Citilights template, you have some basic configuration the below:

This is configuration for Basic tab

  • Header: Enable to get the header content are to stay visible at the top of the screen as you scroll through that content. And you can upload an image that will be your favicon.
  • Boxed Layout: You can use Citilights in wide (default) or boxed layout variants.
  • Logo: The Logo feature controls the out of the template’s main logo.
    Logo Type - you can set the logo type as image or text type.
    Logo position - logo can be placed on every available module position. Not only on default "logo" position.
    Image - if you choose Image logo type, you can upload & use your own logo image (PNG, GIF or JPG).
    Retina Logo - upload & use a double size of your logo to keep look great of higher resolution devices like retina or 5k display.
    Mobile logo - use separate logo for mobile devices only, in most cases use smaller version of default logo, which will be suitable for small displays screens in smartphones. Leave it empty if you do not want to show different logo for mobile devices.
  • Body Background Image
    If you chose Boxed Layout (before) you can use that option which allows you to set background image for without editing or adding custom CSS code.
    Select Image - select image (JPG, PNG, GIF) which will be used as the background. To remove a background image, simply delete the URL from the settings field.
    Background Repeat - sets how a background image will be repeated. By default, a background-image is no repeated, and the image is placed at the top left corner. Available options: No Repeat, Repeat All, Repeat Horizontally, Repeat Vertically, Inherit from default settings. These values allow you to tile images across either axis of an element (or both axes) but don’t allow for any finer control than that.
    Background Size - sets the size of the background image. Default value is cover - is means scale the background image to be as large as possible so that the background area is completely covered by the background image. The contain keyword sets the image should to scale (proportionately) as large as possible, without exceeding either the height or width of the containing element. Available options are: Cover, Contain or Inherit from default settings.
    Background Attachment - sets whether a background image attachment is fixed or scrolls. Available options: Fixed, Scroll or Inherit from default settings.
    Background Position - sets the starting/initial position of a background image.
  • Footer: Template settings allows you also to add custom footer copyright note also with html tags linked to use link inside. You can select the position where footer section will be published. By default is using "copyright" module position created from Layout Manager. Of course instead using this feature you can publish their alternative module, also Custom HTML. But that solution is much faster.
  • Social Icons: You can easily disable/enable this feature and choose which social icons must be shown. Remove "#" in input fields to hide icon on front-end.
  • Coming soon: This mode can be used to replace default off-line mode. It creates a Coming Soon page for your website while it's under construction and shows countdown timer & short message from your visitors, instead login module.

Presets Configure

You can select Presets style for your site this here, also change color for background, text and Major that you want

Layout Configure

  • (1) Switch layout for any template style: open any template style, go to “layout” tab, switch layout for current template style
  • (2) Clone layout: to quickly create new layout, clone layout in the layout setting panel, all you have to do is hit the “Save as copy” button
  • (3) Column setting: To assign module position, hover the position you want to change, select any suitable module position from the list. Do not set one module position for multiple position.
    Make Component Area- Enable this option to make this column as a Component area. If you already selected component area for another column then unselect that one first then select this one. Joomla message section will also be loaded inside this column. Only one column in whole layout can be used for showing component (!).
    Module Position - Select any suitable module position from the list. Do not set one module position for multiple position. Each such have unique name.
    Hide on Mobile/Tablet/Desktop - Allows you to choose where this block should be displayed and where shouldn't be. For example some module position can be displayed only on desktop/laptops but not on smartphones nor tablets.
    Custom CSS Class - If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.
  • (4) add a section: you can add a section for template by click “Add Row” and add column for a section, please click “add column”.
  • (5)Setting for a section: you can setting for a section as Title, background, text color, link, padding and margin.

Typography Configure

It allows you to choose menu from available in your system. You can set type as Mega menu, Off Canvas, Dropdown.

Right now using Google Font is much easier and we also want to introduce our "Update Font List" feature. It allows you to refresh the list of available Google fonts. So if there are any new one, this button allows you to quickly update fonts with just one click, and they will be automatically added in to Helix 3 Framework which allows you to use them faster.
Typography settings allows you to choose font and its settings for popular HTML tags: body, h1, h2, h3, h4, h5, h6 and navigation. Subsets (like Latin Extended, Vietnamese is also no problem - just choose the character sets you want. Of course if they are available for selected font set. All settings are from template settings, so you have got now a simple and efficient way to embed Google fonts of your choosing to your website with a few clicks of your mouse.

Create New Page by SP Page Builder

Now, we will guide you create & configure this page and make it look like our demo site.

Create New Page by SP Page Builder

You have install SP page Builder and create Home Page. SP Page Builder is a full responsive component (Joomla 3.x only) that allows you to easily create Joomla pages, add them into menu and display with useful and cool effects inside. Whether you’re a beginner, web designer or developer building commercial sites for clients or a business owner managing and maintaining your own website, SP builder’s flexibility and functionality means one thing: web content design made easy. It can be used for constructing unique-looking pages. Take full control over your Joomla 3.x site with our backend page builder extension. You can refer more about SP Page Builder, please visit here

Create a page as page home

After you install SP Page Builder, Please create new page following these steps:
  • Step 1: SP Page Builder / Click New button
  • Step 2: Enter Title and Create layout by add Row or Column

  • Step 3: You can select types as module, feature box.. that will show in your site as image below by click “Addon” button:

  • Step 4: Currently you can set some information for it as Title, font size, color, assign module…

    • The page Home on our demo that create by SP Page Builder

  • Step 5: Go to menu main and assign home page for it.

Social Icons

In Citilights template, we provide some social icon which will help you input URLs of your social media profile. We supported Facebook, Twitter, Goole+, pinterest, Linkedln, RSS Feed, Youtube … To add social media on your header.

Please go to Exensions/Template Manager/JUX_Citilights/Basic/Social Icons and enter information for socials

Login

Module style: Noo Login
Position: top2

Configure for Login module

Contact Information

Show base information for user contact when access your site as email, phone

Please Go to Exensions/Template Manager/JUX_Citilights/Basic/Contact Information and set information for it

Callus Now

Module style: Custom HTML
Position: Call action

  • First you have to create module custom, go to Extension/modules/new module/ select Custom HTMl

  • And copy this code and paste as image below:
    • 		<div class="calling-info">

		     <i class="fa fa-mobile"></i>

		          <div class="calling-desc">

		             CALL US NOW<br>

		           <span><a href="tel:(+01)-793-7938">(+01)-793-7938</a></span>

		          </div>

		</div>

SlideShow

Module style: JUX Real Estate Slideshow
Position: slideshow

NOTE: If you use Module in SP Page Builder, You don't need select position for this module and assign it for Page that you want show in Menu item
But when you don't use SP Page Builder, You have to select position and assign page for it.

  • First you have install JUX Real estate Component and configure for it. Please refer this document
  • After configuration for JUX Real Estate Slideshow module.

  • Click “Addon” button in SP Page Builder and Select Joomla Module Type

  • Select module JUX Real Estate Slideshow

Find Your Place

You can create it in SP Page Builder
  • Create and configure for Text Block

  • Install module JUX Real Estate Realty Search and configure for it

Recent properties

Citilights use JUX Real Estate Properties module that show

  • Configure for JUX Real Estate properties

  • Select JUX Real Estate properties module for SP Page Builder

    • NOTE: Similar with Featured properties module

Feature Box

Citilights use SP Page Builder that show them.

Configuration for feature box

Meet Our Agents

We use JUX Real Estate Our agents module that show Agents

Configuration for JUX Real Estate Our agents

Only In July

Citilights use SP Page Builder that show them

Configuration in SP Page Builder

Testimonial

Use SP Page Builder that show testimonial

Configuration testimonial in SP Page Builder

Client

Use SP Page Builder that show Client

Configuration client in SP Page Builder

Guide how to create & configure Map vertical(horizontal)

Map Vertical style

Map Horizontal style
  • Create Map and Search module in SP Page Builder

  • Configuration for Map

  • Assign module in SP Page Builder

  • Configuration for Search for Property

  • After assign module in SP Page Builder

Guide how to create & configure Properties Page

You show Properties by grid or List with sidebar or no sidebar as our demo:

List style with sidebar

Grid style with no sidebar

Create the content of JUX Real Estate
To have content of JUX Real Estate like our demo site, please follow these steps:

  • Step1: Go to backend: Component/JUX Real Estate/Create content for component, Please go to link:click here to learn more about this
  • Step 2: Go to Menu/main menu/Create menu type/select

    • Slidebar
    We use JUX Real Estate Search module with vertical layout, and JUX Real Estate properties. You can refer configuration before

    JUX Real Estate Search Module

    JUX Real Estate Properties module

    NOTE: Similarly, you can do the same steps with other pages, such as Agents.

Guide how to create & configure Blog page

    Guide How to create The article of Joomla

  • Step1: First create category, please go to Content/categories

  • Step2: Create article for category, please go to Content/Articles

    • Example create an article for blog.

  • Step 3: Configure the article in Global Configuration
    • You can configuration for the article that show in your blog
    Go to System/Global Configuration/Articles

    Frontend

    Guide how to create Search module

  • Step1: Create new module custom/ Select Smart search type

  • Step2: After Configure for it

    • Guide how to create Article- Category module

  • Step1: Please create new module custom/select Articles-Category type

  • Step2: After Configure for it

  • NOTE: Please enter class for module in tab advanced

    • Frontend

    Guide how to create Tags module

  • Step1: Create module custom/ select Tags-popular type

  • Step2: After Configure for it

    • Frontend

Guide how to create & configure Contact Page

    Create Contact Page by SP Page Builder page

  • Guide how to create Google Map
    Create Google Map from SP Page Builder, Please go to new Row/Addon/select Google map. After that you can set color, address Location, zoom… for google map.

  • Guide how to create Contact Info
    Create module custom HTML and You can copy our code
    • 		<div class="contact_info">
    
		<div class="text-block">
    
		            <h4>Contact Info</h4>
    
		</div>
    
		        <div class="text-form">
    
		                         <ul>
    
		                        <li><b>Address</b>376 Baker Str., NYC</li>
    
		                        <li>&nbsp&nbsp&nbsp&nbsp<b>Phone</b>(+01)-486-2857</li>
    
		                       <li>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<b>Email</b>info@citilights.com</li>
    
		                       <li>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<b>Fax</b>(+01)-486-2858</li>
    
		                    <li><b>Website</b>http://citilights.com</li>
    
		                </ul>
    
		 </div>
    
		</div>

  • After Please add and configure this module in SP Page Builder

  • Guide how to create Contact Form
    Create Contact Form from SP Page Builder, Please go to new Row/Addon/select Contact Form type. After you can set Title, Captcha… for Contact Form..

    • NOTE: Create other Page as our demo, Please Read the document of JUX Real Estate