JUX Dreamer

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.

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.

Footer

Backend

Footer 1: Create custom HTML and copy code below:

	<div class="site-info">
	  <h3 class="footer-title">About Dreamer</h3>
	  <h3 class="footer-title">About Dreamer</h3>
	  <div class="text-block">
	  <p>Proin lacinia metus eget nunc fringilla sagittis. Etiam molestie feugiat lorem non maximus. Quisque cursus mauris nec eros.</p>
	  </div>
	  </div>
	  <div class="connect-with-us">
	  <h3 class="footer-title">Connect With Us</h3>
	  <ul class="social-list footer-social clearfix">
	  <li><a href="#" title="Facebook" target="_blank"><i class="fa fa-facebook"></i></a></li>
	  <li><a href="#" title="Twitter" target="_blank"><i class="fa fa-twitter"></i></a></li>
	  <li><a href="#" title="Google Plus" target="_blank"><i class="fa fa-google"></i></a></li>
	  <li><a href="#" title="Pinterest" target="_blank"><i class="fa fa-pinterest"></i></a></li>
	; </ul>
	</div>

Footer 2:

Step 1: Newsletter Logo -Create custom HTML and copy code below:

	<div class="footer-logo">
	           <div class="logo-image">
	           <a href="index.html" title="NooTheme Dreamer">
	             <img src="images/jux_dreamer/logo/logo-footer.png" alt="logo-footer">
	           </a>
	          </div>
	 </div>

Step 2: Register Newsletter -Create AcyMailing Module

Configure for it

Footer 3: Useful Links

Step 1: Create menu item in Joomla

Step 2: Create menu module

Step 3:Assign menu item for menu module and configure for it

Footer 4: Please do it same footer 3

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

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:[email protected]">[email protected]</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

JUX Dreamer

General introduction

1. What is JUX Dreamer ?

2. Our Extension Support

3. 3rd Party extension Support

4. Helix 3 Framework

Download & Install

1. Plan your site developer

2. When purchasing successfully our template from JoomlaUX, you will need to download template package. The template package contains:

3. Once you successfully download the files you need, you’ll have to:

Basic Configure Dreamer Template

Presets Configure

Layout Configure

Menu Configure

Typography Configure

Create New Page by SP Page Builder

Contact Information

Search Module

Logo

Menu

SlideShow

About Dreamer

Feature Cause

Feature Box

Meet Our Agents

Recent Causes

Why Choose Dreamer

Testimonial

Recent News

Guide how to create & configure Map vertical(horizontal)

Call To Action

Footer

Copyright

Cause Grid, Cause List and Cause Single Page

Blog Page

Joomla Page

Contact Page