JUX Dreamer

Created: 10/23/2015

Lastest update: 10/23/2015

By: Joomlaux

Need Support

General introduction

1. What is JUX Dreamer ?

Dreamer is a clean, elegant, and flexible Joomla template which designed for charity, non-profit organizations, NGO, donation, fund-raising websites to feature their Events and collect Donations. But more than that, the template can be used for any other business thank to a large number of features and powerful theme customizer.

2. Our Extension Support

  • JUX Charity Hub Component
  • JUX Causes Category module
  • JUX Charity Slideshow module
  • JUX List Causes module
  • JUX List Events module
  • JUX Social Tabs

3. 3rd Party extension Support

  • SP Page Builder

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.
2. When purchasing successfully our template from JoomlaUX, you will need to download template package. The template package contains:

  • Dreamer template file: includes jux_dreamer.zip file that consist of everything you need to install the template
  • Document folder: includes Dreamer documentation file that helps you get to know about Dreamer 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 Dreamer 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 Dreamer Template

After install Dreamer template, go to Extensions/Template manager/ JUX Dreamer Template. You can saw the 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

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

    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.

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

Contact Information

You can enable your contact with some information such as phone, email on your site

Backend

Go to Dreamer template/ Basic/ Contact Information

Search Module

Module style: search
Position: top2

Backend

Go to Extensions/Modules/new/select search module as image below:

After please configure for it.

SlideShow

Backend

Step 1:First you have to install JUX Charity Hub component and configure events, cause… for it.
You can refer this document

Step 2:Please install JUX Charity Slideshow module and set basic config for it as the below:

step 3: Assign Slideshow module for SP Page Builder

About Dreamer

Backend

You create Image, Text Block and Button by SP Page Builder

  • Configure for image

  • Configure for Text Block

  • Configure for Button

Feature Cause

Backend

Step 1:Please install JUX Charity Hub Component and configure for it. Please refer this document

Step 2:Install JUX List Causes module and configure for it

Step 3:Assign JUX List Causes module in SP Page Builder

Feature Box

Backend

Step 1: Go to SP Page Builder and Select Feature Box type

Step 2:Configure for it as image below

Meet Our Agents

We use JUX Real Estate Our agents module that show Agents

Configuration for JUX Real Estate Our agents

Recent Causes

Backend

Step 1:Please install JUX Charity Hub Component and configure for it. Please refer this document

Step 2:Install JUX List Causes module and configure for it

Step 3:Assign JUX List Causes module in SP Page Builder

Why Choose Dreamer

Backend

Step 1:Create they by SP Page Builder

Step 2:Configure for Testimonial Pro

Step 3:Configure for Image

Testimonial

Backend

Step 1:Create Testimonial pro type in SP Page Builder

Step 2:Configure for it the below:

Recent News

Backend

Step 1:Create category and article in Joomla

Step 2: Create Last Posts type in SP Page Builder

Step 3: Configure for it

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

Call To Action

Backend

Step 1:Create Call To Action type in SP Page Builder

Step 2:Configure for it

Cause Grid, Cause List and Cause Single Page

Please install Charity Hub component and events, cause… for it.
You can refer this document

Backend
  • Causes Grid, causes List

    • Create Menu item and select List Events type for it.

    Configure for it

  • Cause Single

    • Create menu item and select cause detail type for it

  • Cause Category

    • Install JUX Causes Category module and configure for it.

  • Recent Causes

    • Use JUX List Causes module.

  • Tweets

    • Use JUX Social Tabs module, you can refer document of this module by link here

NOTE:Please create Events page same

Blog Page

Backend
  • Blog article

    • Please go to Content/Create Category and articles in Joomla

    Example an article by HTML

    Step 1:You can copy code line and paste in article:

    		<p style="box-sizing: border-box; margin: 0px 0px 0.8em; color: #2e2e2e; font-family: Raleway, sans-serif; font-size: 14px; letter-spacing: 0.5px; line-height: 23.8px;">Nulla quis lorem ut libero malesuada feugiat. Sed porttitor lectus nibh. Proin eget tortor risus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi</p>
		<hr id="system-readmore" />
		<p style="box-sizing: border-box; margin: 0px 0px 0.8em; color: #2e2e2e; font-family: Raleway, sans-serif; font-size: 14px; letter-spacing: 0.5px; line-height: 23.8px;"><span style="line-height: 23.8px;">Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec rutrum congue leo eget malesuada. Proin eget tortor risus. Pellentesque in ipsum id orci porta dapibus.</span></p>
		<p style="box-sizing: border-box; margin: 0px 0px 0.8em; color: #2e2e2e; font-family: Raleway, sans-serif; font-size: 14px; letter-spacing: 0.5px; line-height: 23.8px;">Sed porttitor lectus nibh. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Donec sollicitudin molestie malesuada. Curabitur aliquet quam id dui posuere blandit. Vivamus suscipit tortor eget felis porttitor volutpat. Sed porttitor lectus nibh. Sed porttitor lectus nibh. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Nulla porttitor accumsan tincidunt. Nulla quis lorem ut libero malesuada feugiat.</p>
		<ul style="box-sizing: border-box; margin-top: 0px; margin-bottom: 11.5px; color: #2e2e2e; font-family: Raleway, sans-serif; font-size: 14px; letter-spacing: 0.5px; line-height: 23.8px;">
		<li style="box-sizing: border-box;">Proin eget tortor risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
		<li style="box-sizing: border-box;">Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vestibulum ante ipsum.</li>
		<li style="box-sizing: border-box;">Primis in faucibus orci luctus et ultrices posuere cubilia Curae;</li>
		</ul>
		<p style="box-sizing: border-box; margin: 0px 0px 0.8em; color: #2e2e2e; font-family: Raleway, sans-serif; font-size: 14px; letter-spacing: 0.5px; line-height: 23.8px;">Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Proin eget tortor risus. Nulla quis lorem ut libero malesuada feugiat. Sed porttitor lectus nibh. Pellentesque in ipsum id orci porta dapibus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Quisque velit nisi, pretium ut lacinia in, elementum id enim.</p>

  • Tags Module

    • Create Tag custom HTML module

    And configure for it

  • Calendar module

    • Create calendar custom HTML module

    And configure for it

Joomla Page

Backend

Step 1: Please go to Content/Create Category and articles in Joomla

Step 2: Create menu item and Select article that you want to show

Contact Page

Backend

First Create contact page by SP Page Builder

  • Google Map

    • Create Google Map by SP Page Builder and configure for it

  • Contact Info

    • First create custom HTML module and copy code line below:

    		<div class="contact-info-wrap">
		  <div class="contact-title">
		  <h4>Our Address</h4>
		  </div>
		  <div class="contact-info">
		  <div class="contact-desc">
		 <p>In bibendum diam leo, et fermentum nibh tincidunt at.Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.Phasellus nisl dui, molestie ac nulla nec, laoreet tincidunt risus.</p>
		 </div>
		  <div class="contact-detail">
		  <ul>
		  <li><i class="fa fa-map-marker"></i>336 Baker Str., NYC</li>
		  <li><i class="fa fa-envelope"></i><a href="mailto:info@dreamer.com">info@dreamer.com</a></li>
		  <li><i class="fa fa-phone"></i>(+84)-486-2858</li>
		  <li><i class="fa fa-fax"></i>+84987654321</li>
		  </ul>
		  </div>
		  </div>
		  </div>

    After create Joomla module by SP Page Builder and assign custom HTML module

  • Contact Form

    • Create Contact Form by SP Page Builder and configure for it the below