Dreamer

Donation

Dreamer - Donation Settings

To change Currency and Payment settings, go to in Donation>Settings
• Area Unit: enter the unit that follows the area number.
• Currency: choose a currency.
• Currency Position: choose how the currency symbol is associated with the price number.
• Thousand Separator: Enter the mark that separates groups of thousands.
• Decimal Separator: Enter the mark that separates the integer part from the fractional part of the price number.
• Number of Decimals: the number of digits that follows decimal separator.
• Donate Modal Header Image: Select a picture to display as the Donate Modal Header Image.
• Donate Money Options: Enter 4 suggested donation amounts to display on the Donate Modal.
• PayPal Merchant Account (ID or Email): enter the ID or email address of your Paypal account.
• Enable PayPal Sandbox Testing: enable this when testing payment.
• Disable SSL secure connection (Not recommended): We recommend that you only disable this if your host has problem with SSL secure connection.
• Email for sending payment notification: insert the email address where payment notifications are sent to.
After everything is set, click Save Changes.

Extras

Dreamer Shortcodes

Beside regular Visual Composer shortcodes, Dreamers has custom shortcodes designed specifically for its purpose. To use these shortcodes, switch to Visual Composer’s Backend Editor, click Add Element button select Dreamer tab, then choose the shortcode you want.

Noo Events

This shortcode is used to create a list/grid of all recent events.

Noo Causes

This shortcode is used to create a list/grid of all recent causes.

Noo Recent News

This shortcode is used to create a grid of all recent posts.

Noo Staff

This shortcode is used to create a grid of all staff. To use it to create Staff listing page, please check Set up your pages>Staff listing page section.

Event Slider

This shortcode is used to create a slider featuring any event.

Cause Slider

This shortcode is used to create a slider featuring any cause.

Woo Commerce

To install the plugin, you can go to Plugin>Add New, search for WooCommerce and Install it. Alternatively, you can download it from here.

When you activate the plugin, you may be asked for the permission to install WooCommerce default pages. We recommend that you go through with this so that all the pages are created correctly.

After WooCommerce is activated successfully, you can use all its features, including widgets and shortcodes.

For further guide, please check WooCommerce’s official documentation.

Translation

The theme is compatible with WPML plugin, thus can be translated into multiple languages. Follow this link for guide.
You can also use POEdit plugin for translation.

Located the .po file in folder /languages.
Open the file with POEdit and translate the texts into your preferred language.
When complete, you’ll want to save the file twice, as two separate files – a .po file and a .mo file. When you save the files, you must name them according to your language code. Find a list of language codes at WordPress in your Language. As an example, the language code for English is en_EN, so you would save the translated files as en_EN.po first, then en_EN.mo.
When that’s done, simply upload the files to your theme folder.

Codestyling Localization is a good alternative for POEdit. It also works with .po/.mo files and is very easy to use.

Visual Composer Shortcodes

Dreamers is equipped with powerful shortcode set that enables you to build any layouts you can imagine of. All shortcodes can be accessed in the Visual Editor after you complete installing the theme. If you use Visual Composer to edit content, all our shortcodes were already built into its Elements.

To use shortcodes to shape your layouts in Visual Editor, open visual editing tab of a page or post in Admin Panel. In top bar of editing field, hit Noo Shortcodes icon and navigate to a shortcode you want to use. A pop up window with some attributes of the shortcode then will appear for you to make change easily. Finally, click Save to generate the shortcodes. Be noted that values of shortcodes have always to be inserted in quotation mark “ ”. Insert any shortcode you need to make up your perfect pages and posts.

Widgets

Widgets can be added to main sidebar and footer. To activate widgets, navigate to Appearance>Widgets, you will see number of available widgets. To activate a widget, drag it to a Sidebar, or Footer. You can also click on it to assign to Main Sidebar or Footer. To remove them, just drag it back. If you want to remove a widget from sidebar or footer but keep its settings, drag it to Inactive Widgets. Below are location you can add widgets to:

Main Sidebar: Main sidebar will be displayed when you choose Classic Site Layout and With Sidebar page template.

Footer Column #i: Number of Footer Column #i here depends on the number of column you set in Customizer > Footer.

In addition to WordPress default widgets, there are 6 custom widgets of the theme:

Noo Cause: shows causes by latest order or by most commented order. You can choose to show only causes in a certain category too.
Noo Cause Categories: shows all Cause categories
Noo Event: shows events by latest order or by most commented order. You can choose to show only events in a certain category too.
Noo Event Categories: shows all Event categories
Recent tweets: shows latest tweets from your Twitter account. You’ll need to enter Consumer key, Consumer Secret, Access Token and Access Token Secret. To get these keys, first you need to create a Twitter app. Go to https://apps.twitter.com/ and sign in. Click Create new app. Fill out name, description and website. Leave Callback URL empty, accept the terms and create the app. On the new page, in the middle you should now have all the keys and secrets you need.

Footer

The Footer is composed of two parts that are Footer Columns or Widget area and Footer Bottom. Thus, now you can guess that you will have to use not only Customizer but also Appearance>Widgets to make adjustments to the Footer.
You can see available widgets on the left side and 3 sidebars belonging to Footer: Noo – Footer Column #1, Noo – Footer Column #2, Noo – Footer Column #3.

1. Noo-Footer Column #1

Drag 2 Text widgets on the left to this sidebar> Click the triangle on the left of the widget > complete options > Save.

2. Noo- Footer Column #2

Drag Text and Noo Mailchimps widgets on the left side to this sidebar> Click the triangle on the left of the widget> Complete options> Save.

3. Noo- Footer Column #3

Drag Custom Menu widget on the left side to this sidebar > Click the triangle on the left of the widget > Complete options > Save
Options of Custom Menu widget are:
Title: Enter a title here
Select Menu: Choose a menu in the drop-down list and this menu is created in Appearance> Menus

Header

Set Up Menu

Follow these steps so that menu items can be shown in Header

Step 1: Navigate to Appearance–> Menu section of your admin sidebar.
Step 2: Click the Create A New Menu link to make a new menu. Enter the name then click the Create Menu
Step 3: To add menu item, select one of your created pages on the left hand side and click the Add To Menu button. You can also add different posts from the left side.
Step 4: To add a custom menu item, enter a custom name and link into the Links box.
Step 5: Manage your menus by using the drag and drop functionality. To create a dropdown menu in Menu Structure, simply drag a menu item on the left side to the area on the right side.
Step 6: After setting up your menu, scroll down to the bottom of the page to assign the menu on the Theme Location box.
Step 7: Once It’s all done, make sure you click Save Menu.

Now returning to the site, you will see the menu shown on the header like this:

Yet when you see the header on our demo site:

You can wonder yourself “why is the header of my site different from that of your site?”.To achieve such design, refer to this link

An Introduction To Header

Perhaps Header is the first place visitors look at when they go to your site. The first impression is always important; therefore, if the Header can convey your message to users, that is very great! The simple message given to them can be an understandable and clear menu or an amazing and eye-catching design of the header or diversified header styles of your site also make the most choosy customers feel satisfied.
In the most essential respect, a header should contain three parts which are menu area, logo and top bar

Installation

Update Theme

Automatic Update

Please follow these steps to update theme:

Step 1: Hover into username then choose Download
Step 2: Select “License certificate and purchase code”
Step 3: In Admin Panel, choose Settings, click “NOO Dreamer License”. You will see the message Please enter your license key to enable updates to NOO Dreamer.
Step 4: Enter code into License key

Dreamer Installation

There are 2 ways to install the theme. It is up to you to choose your preference.

Installation via WordPress: all you need to do is simply to login to your WordPress Admin Panel, navigate to Appearance > Themes, click Install Themes on the top then hit “Upload” Find “noo-dreamer.zip” file on your computer and click “Install Now”. You have done. Just wait for the theme to be uploaded and installed.

Note: If you see this message “Are You Sure You Want To Do This” when installing noo-dreamer.zip file via WordPress, it means that you have an upload file size limit. Try to install the theme via FTP instead, or contact your host to increase the limit.

Installation via FTP: this way of installing take a little more action, but not much of course. First, login to your FTP account. Extract the noo-dreamer.zip file then upload ONLY the unzipped folder to wp – content/themes You have just done installing.

Download Dreamer Package

When purchasing successfully our theme from ThemeForest, you will need to download theme package for your use. To download the package, please login to your Themeforest account, navigate to “Downloads”, click the “Download” button in the left of the theme, choose “All files & documentation” to download our theme package to your computer. The theme package contains:

Dreamer Theme File: Includes noo-dreamer.zip file that consists of everything you need to install the theme.
Document Folder: Includes Dreamer Documentation file that helps you get to know about Dreamer and guides you to build your site with our theme.
Licensing Folder: Includes the licensing files of Themeforest purchase.
Demo Content Folder: Includes the .xml file you will need to import our demo data.

Pages

Contact Page

Here is image of shortcodes used to create Contact Page

♣ It has a Row shortcode whose style is 2 columns (2/3+1/3)
♣ The first column comprises a Google Maps, a Map and 2 Text Block shortcodes
♣ The second one includes a Text Block, Gap and Contact Form 7 shortcode

Our Staffs Page

Here is image of shortcodes used to create Our Staffs Page

♣ It has a Row shortcode whose style is one column
♣ The column contains a Noo Staff shortcode
Title: Enter a title here
Show Archive Link: Choose Show/Hide Archive Link
Categories: Choose staff categories in the drop-down list
Grid Columns: Choose the number of shown columns
Posts per page: the number of posts is displayed per page
Show pagination: Choose Hide or Show the pagination

Blog Page

To build this page, you only need to enter title of the page and click the Publish button. After that, you will carry out one further step: Navigate to Settings>Reading> opt Blog in Posts page section> Save changes.“Why does this page not have any shortcodes but it will still contain content when the page is exhibited on the site?”You may be intrigued by this question. The reason is that you decided on Blog in above-mentioned Posts Page section. In this case, it takes all the latest blog posts originating from Posts in Admin Panel.

Events Page

1. Events Grid

Here is image of the shorcodes used to create Events Grid Page

♣ It has a Row shortcode whose style is one column
♣ The column contains a Noo Events shortcode
Title: Enter a title here
Show Archive Link: Select Show or Hide the link
Style: There are 2 styles that are List and Grid. If you are partial to Grid then you will have an extra option called Grid Columns (choose the number of shown columns)
Categories/Locations: Select categories/locations that will be shown
Posts per page: the number of posts is displayed per page
Show pagination: select show or hide pagination
Event status: Select event statuses in the drop-down list (All/ Upcoming/ Past events
Order Events By: Start Date (the date on which events start) or Added Date
Order Direction: Descending (Newest) or Ascending (Oldest)

2. Events List

♣ It has a Row shortcode whose style is one column
♣ The column contains a Noo Events of which style is List

3. Event Calendar

Here is image of shortcodes used to create

♣ It has a Row shortcode whose style is one column
The column contains a Gap and a Noo Event Calendar shortcode
Noo Event Calendar settings:
Visibility: Choose devices on which this section is displayed or hidden
Class: Enter a unique class name

Causes Page

1. Causes Grid

Here is image of the shortcode used to create Causes Grid Page

♣ It has a Row shortcode whose style is one column
♣ The column comprises a Noo Causes of which style is Grid

2. Causes List

♣ It has a Row shortcode whose style is one column
♣ The column includes a Noo Causes of which style is List

Home Cause

Here are images of shortcodes used to create Home Cause page

1. Red Row 1

♣ It has a Row shortcode whose style is one column
♣ The column comprises a Cause Slider shortcode to which 2 Cause Slide are added
Cause Slider settings:
Animation: Slide or Fade
Slide Time/ Height/ Speed: You can set time, height and speed for the slide
Auto Play Slider: Tick this box so that slider can play automatically
Show Slide Indicator/ Previous/ Next Pagination: Tick these boxes to show corresponding items
Cause Slide settings:
Background Type: Choose Featured image that is taken form Cause posts or Custom image (you will have an extra option to upload image)
Cause: Select a cause post in the drop-down list

2. Red Row 2

♣ It has a Row shortcode whose style is one column
♣ The column includes the following shortcodes: Single Image, Text Block, Gap and Button 1

Display of Red Row 2 on the site

3. Red Row 3

♣ It has a Row shortcode whose style is one column
♣ The column includes a Noo Causes shortcode

4. Red Row 4

♣ It has a Row shortcode whose style is one column
♣ The column comprises the following shortcodes: Text Block and a Row shortcode of which style is 3 columns
♣ Each column contains an Icon and a Text Block

Row settings

5. Red Row 5

♣ It has a Row shortcode whose style is one column
♣ The column contains three shortcodes: Text Block, Gap and Noo Causes

Display of Red Row 5 on the site

6. Red Row 6

♣ It has a Row shortcode whose style is one column
♣ The column includes a Responsive Slider to which 3 Slide shortcodes are added

7. Red Row 7

Shortcodes of Red Row 6 are the same as those of Red Row 7

Row settings

8. Red Row 8

♣ It has a Row shortcode whose style is one column
♣ The column contains 3 shortcodes: Text Block, Gap and Noo Recent News

9. Red Row 9

♣ It has a Row shortcode whose style is one column
♣ The column comprises a Call To Action shortcode

Row setitngs

Home Page

Here are images of shortcodes used in building Home Page

1. Red Row 1

♣ It has a Row shortcode whose style is one column
♣ The column contains an Event Slider shortcode to which 3 Event Slide shortcodes are added
Event Slider setting
Animation: Choose Slide or fade
Slide Time/ Speed/ Height: Set a number in these sections
Auto Play Slider: Check this box so that the slider can play automatically
Show Slide Indicator: Tick this box to show this one
Show Previous/ Next Navigation: Check this box to show previous

Event Slide settings:
Background Type: There are 2 types of background. If you pick Featured Image, the image will be the featured one set in each event post. Meanwhile, if you choose Custom image, you will have an extra option to upload an image
Event: Select an event in the drop-down list

2. Red Row 2

♣ It has a Row shortcode whose style is one column
♣ The column comprises the following shortcodes: Single Image, Text Block, Gap, Text Block, Gap and Button

3. Red Row 3

♣ It has a Row shortcode whose style is one column
♣ The column contains a Noo Cause shortcode
Title: Enter a title
Show Archive Link: Choose Show or Hide Archive Link
Style: There are 3 styles that are Grid, List and Slider
Categories: Select cause categories in the drop-down list
Locations: Select cause location in the drop-down list
Posts per page: Enter a number of shown posts per page
Excerpt Length: The number you enter here is equal to the number of words contained in the excerpt
Show Pagination: Choose Show or Hide this one (this option is only used for Grid and List Style)
When you choose Grid style, you will have options like
Grid Columns: Choose number of shown columns

4. Red Row 4

♣ It has a Row shortcode whose style is one column
♣ The column contains the following shortcodes: Text Block and a Row shortcode whose style is 3 columns.
♣ The first column comprises Icon, Text Block and Raw HTML
♣ The second and third ones include Icon and Text Block

5. Red Row 5

♣ It has a Row shortcode whose style is one column
♣ The column contains the following shortcodes: Text Block, Gap and Noo Causes

6. Red Row 6

♣ It has a Row shortcode whose style is one column
♣ The column contains a Responsive Slide shortcode to which 3 Slide shortcodes are added

Row settings

7. Red Row 7

♣ Shortcodes of Red Row 7 are similar to those of Red Row 6

8. Red Row 8

♣ It has a Row shortcode whose style is one column
♣ The column contains the following shortcodes: Text Block, Gap and Noo Recent News
Noo Recent News settings:
Title: Enter a title here
Column: Choose the number of shown columns. It fluctuates between 2 and 4
Posts per page: The number of posts is displayed per page
Excerpt length: Excerpt is a short paragraph taken from a post. The number you enter here is equal to the number of words included in the excerpt

9. Red Row 9

♣ It has a Row shortcode whose style is one column
♣ The column contains a Call to Action shortcode

Row settings

Dreamer - Contact Page

After importing demo data, you’ll see the Contact page in Pages>All pages. Click Edit page and replace the dummy data with your information.

Google map:

Adress:

Contact form: click Edit Contact form. Select a contact form from the dropdown list. To edit or create new contact form, navigate to Contact tab on WP Menu. For detailed guide, please check Contact 7 documentation.

After everything is set, update the page.

Dreamer - Page Settings

You can choose various settings for your page in this box.

Body Custom CSS Class: Add custom CSS class to <body> element.

Hide Page Title: Uncheck to hide Page title.

Enable Menu Transparent: option to make the menu transparent. If checked, you’ll have to upload a new logo to display on the menu, as the default logo inserted in Customizer>Header logo is use for non-transparent menu only.

Revolution Slider (only available if plugin is installed): Select Slider to be displayed on your site or just set No Slider if you don’t need a slider for your page.

Home Slider: enable this option if you want to set up a header for the page. Page header can be slider or video background.

Dreamer - Homepage

After importing demo data, you’ll see 2 Home pages in Pages>All pages. One is Homepage with Event slider, the other is Homepage with Cause Slider. They are made entirely by Shortcodes and HTML. Click Edit page and modify any element as you wish. We recommend that you switch to Visual Composer’s Backend Editor for a visualized interface.

After everything is set, Publish or Update the page.

To assign a page as default Homepage, navigate to Settings>Reading, in Front page displays section, check A static page, then select a page from the dropdown list. Save changes.

Create new page

You may need a page such as About or Contact page. We also did some change to the default WordPress page setup by adding some page templates and preset options for you to build your page fluidly.

Please follow these steps to create your pages:

Step 1: In Admin Panel, choose Page, click “Add New” on the top then enter your page title. If you need to know more about Pages in WordPress, use the Help tab in the upper right of your screen.

Step 2: In Page Attributes box on the right side, choose your Parent page. It is set by default as no parent. Pages are usually ordered alphabetically, but you can choose your own order by entering a number (1 for first, etc.) in Order field.

Step 3: Also in Page Attributes box, choose your Page Template in dropdown list. See below Page Template list for more detail. For a regular page, select Default Template. You can choose to edit your content using Visual or Text editor. To build content for your page, you will need our provided Shortcodes. Check out in below section.

Step 4: Start editing your page content in the editing field.

Step 5: Make other settings for the page in meta-boxes under the editing field. Once you get your settings done, click Publish your page.

Cause Listing Page

A cause listing page with the slug …/causes is automatically generated when you add new causes. You can customize its layout and style by navigating to Customizer>Cause>Cause page. After you are done, simply add the page to the menu.

You can also assign any other page as Cause listing page, once you do, its slug will be your Cause’s main slug.

Event Listing Page

An event listing page with the slug …/events is automatically generated when you add new events. You can customize its layout and style by navigating to Customizer>Event>Event page. After you are done, simply add the page to the menu.

You can also assign any other page as Event listing page, once you do, its slug will be your Event’s main slug.

Portfolio

Dreamer - Portfolio

With Dreamers’ built-in Portfolio, you can showcase your images, sliders, videos or links in a clean, simple grid layout.
To add new item, go to Portfolio>Add New.
• Enter Item name.
• Set Project Category.
• Select Media Type: specify whether your item is an Image, a Link, a Video or a Gallery.
• Media Data: Depending on the item’s type, the options in this section will vary. For example, if the Media Type is Link, you’ll get a meta-box to insert URL, if it’s Video, then you’ll get to insert video URL or embedded code, and so on.

Post Types

Dreamer contains 3 kinds of Post Types that are Blog post, Causes and Staff

1. Blog Post

It is obvious that blog posts will be shown on Blog page In Admin panel, please go to Posts. You can see subordinate parts like All posts (to see all created posts), Add New (to create a new post), Categories (to classify posts) and Tags (to classify posts but in a more specific way, tags can be keywords that are indicated in a post).When you intended to create posts, you had surely thought of generating all categories for posts. So we will begin with building categories:

Adding a new category is very easy: enter name of category and click on Add New Category button

Add A New Post

Add a new post
Step 1: Enter title and content of the post.
Step 2: Now turning to the right side, you will complete some sections such as Format, Categories, Tags and Featured image.
Step 3: Remember to click Publish to complete creating the post.

2.Causes

Add A New Cause Location
Go to Causes> Cause Location> enter a new location in Name section> Click Add New Cause Location
Add A New Cause Category
Go to Causes> Cause Category> enter a new category in Name section> Click Add New Cause Category
Add A New Cause
Step 1: Go to Causes> Add A New Cause> Enter title, content.
Step 2: Complete options of Cause Settings
Goal Donate: Enter a number that is equal to the targeted sum of email
Address: Enter an address
Custom Donate Link: Enter a donate link which directs users to the donation form. Leave it blank to use the default donation form.
PDF File: Enter a download link so that users can download the PDF file
Step 3: On the right side, you will complete options like Cause Category, Cause Location, Upload a featured image
Step 4: Click on Publish button

3. Staff

Add A New Staff Category
Go to Staff> enter a new staff category in Name section > Add New Staff Category
Add A New Staff
Step 1: Go to Staff> Add New Staff> Enter title and content
Step 2: Complete options such as Position (Position of the staff), Email, Mobile, Social – Twitter, Social – Facebook, Social – Google Plus, Social – LinkedIn.
Step 3: On the right side, choose a Staff Category, upload a featured image then click on Publish button

Posts

Add Staff

To add a New Staff, go to Staffs>Add New Staff

Enter Staff name.
Add description about the staff in the content section.
Set staff’s picture in Featured Image The image should be 237px width at minimum.
Select Staff category
Settings: fill in the details about the staff.

After everything is set, click Publish or Update.

Add Cause

To add a New Cause, go to Causes>Add New Cause

Enter Cause name.
Add description about the cause in the content section.
Set cause’s image in Featured Image The image should be 770px width at minimum.
Select Cause category
Cause Settings: insert the Adress/Location of the Cause and the Goal Amount (note: the money currency can be changed in Settings>Donate Settings)
File upload: upload a PDF document about the event if any.
Place in map: place a pin where the event takes place on Google map.

After everything is set, click Publish or Update the cause.

Add Event

To add a New Event, go to Events>Add New Event

Enter Event name.
Add description about the event in the content section.
Set event’s image in Featured Image The image should be 770px width at minimum.
Select Event category
Event Settings: fill in the details of the event.
File upload: upload a PDF document about the event if any.
Place in map: place a pin where the event takes place on Google map.

After everything is set, click Publish or Update the event.

Sidebars&widgets

Sidebars and Widgets

Dreamer allows you to create an unlimited number of sidebar. Each page or post can come with a unique sidebar. To select a sidebar for post or page, make sure you set page template with sidebar then you can choose a sidebar you want to display from Sidebar dropdown list on the right side. You may need to create several separate sidebars to use for different pages and posts. Follow these steps to generate a sidebar and add widgets to it.

Create A Sidebar

Step 1: Navigate to Appearance–> Sidebar Generator and click the Add New button, enter sidebar title then save. You can add as many sidebars as you need.
Step 2: Once you are done, you need to add Widgets to the sidebar you just created.
Step 3: Navigate to Appearance–> Widgets and find your sidebar on the right side.
Step 4: On the left hand side you will see all the widgets you can use, simply drag and drop the widget you want into your sidebar on the right hand site.
Step 5: Make sure you click Save to save the widgets added to your sidebar

Add Widgets to A Sidebar

You can add any widget and any number of widgets to your sidebar. All widgets are accessible from Appearance–>Widgets and easily dragged and dropped to your sidebar.
Step 1: Navigate to Appearance–> Widgets to access the list of widgets and widget section that they can be added. The left hand side shows all the widgets you can use. The right hand side shows all different sections you can add widgets to.
Step 2: Simply drag and drop the widget you want into the widgets section you want the right hand side.
Step 3: Don’t forget to click save changes after you customize any widget in sidebar.

1. Cause Sidebar

This sidebar is shown on Causes Page
Drag Noo Cause Categories, Recent Tweet and Noo Cause widgets on the left side to this sidebar> Click the triangle on the right side of widgets> complete options> Save

2. Event Sidebar

♣ This sidebar is shown on Events Page
♣ Drag Search, Calendar, Noo Event Categories, 2 Noo Event widgets to this sidebar> Click the triangle on the right side of widgets> complete options> Save

3. Main Sidebar

♣ This sidebar is displayed on Blog page
♣ Drag Noo Mailchimps, Search, Calendar and Tag Cloud widgets to this sidebar> Click the triangle on the right side of widgets> complete options> Save

4. Shop Sidebar

♣ This sidebar is shown on Shop page
Drag Woocommerce Cart/ Layered Nav/ Product Categories/ Price Filter/ Product Search/ Product Tags/ Recently Viewed/ Recent Reviews/ Top Rated Products to this sidebar

Theme Customizer

Import/Export settings

All themes of NooTheme share the same theme settings structure so that you can export then import setting from one theme to another one conveniently.

Import Settings: Click Upload button then choose a JSON file (.json) from your computer to import setting to this theme. All the settings will be loaded for preview here and will not be saved until you click button “Save and Publish”.
Export Setting: Simply click Download button to export all your settings to a JSON file (.json). You then can use that file to restore theme settings to any theme of NooTheme.

Custom code

In this section you can add custom JavaScript and CSS to your site. You Google analytics tracking code should be added to Custom JavaScript field.

Woocommerce

1. Shop Page

Shop Layout: The layout can be Full-width, With Left or Right Sidebar
Shop Sidebar: Choose a shop sidebar in the drop-down list
Products Per Page: The number of products is shown per page

2. Single Product

Check Same as Shop Layout so that the layout of single product page is similar to that of product page

Portfolio

Portfolio Page: Set a page to be Portfolio page
Show Portfolio Filters: Check this box to show portfolio filters
Grid Columns: select the number of shown columns
Items Per Page: The number of items is displayed per page

Event

1. Event List

Event Page: Set a page to be Event Page in the drop-down list
Event List Layout: The layout can be Full-width, With Left or Right Sidebar
Event List Sidebar: Choose an event sidebar in the drop-down list
Event List Style: The style can be Grid or List
Order Events By: The events can be arranged according to Start Date or Added Date
Order Direction: The direction is Descending (Newest) or Ascending (Oldest)
Hide Past Event: Turn this button on to hide past events

2. Single Event Layout

Single Event Layout: Tick Same as Event List Layout box so that layout of single events is similar to the event list
Moreover, you can select media via which single events are shared

Cause

1. Cause List

Cause Page: Set a page to be Cause Page in the drop-down list
Cause List Layout: The layout is Full-with, With Left or Right Sidebar
Cause List Sidebar: Choose a sidebar for the Cause List Page in the drop-down list
Cause List Style: The style can be Grid or List. If you are interested in Grid, you will have an extra option like Grid Columns (the number of columns can be Two or Three)

2. Single Cause

Single Cause Layout: Tick Same as Cause List Layout box so that layout of single causes will be the same as that of Cause List
Besides, you can select media via which single causes will be shared.

Blog

1. Post List

Blog Layout: The layout of Post list is Full-width , With Right Sidebar or With Left Side bar. Choose the first style if you do not want sidebar to be displayed on Blog page. In contrast, the last ones will let sidebar be shown on the page
Blog Sidebar: choose a sidebar that will be shown on Blog page
Show Post Meta, Show Readmore Link: Tick these boxes to show these items
Excerpt length: the number entered is equal to the number of words included in the excerpt

2. Single Post

Post Layout: Tick this box so that single posts have the same layout as Post list. Uncheck to opt another layout.
Enable Related Post: Turn this button on then related posts will be shown
Show Post Tags, Show Author`s Bio: Tick these boxes to show these items on each post
Enable Social Sharing: Enable/Disable Social Sharing. If enable, you enable visitors to share your post by Facebook, Twitter, Google+, Pinterest and LinkedIn

Widgets

This section enables you to customize Widgets situated in Footer. Besides, you can also add widgets to Noo-Footer Column #.

Footer

Footer Columns: Choose the number of shown columns
Bottom Bar Content (HTML): Add content to the bottom bar of footer

Header

1. Navigation Bar

NavBar Position: Position of NavBar includes Static Top and Fixed Top. Static Top, in this case, the NavBar does not move. It means that when you scroll down on the page and let the mouse pass the NavBar, you will not see the NavBar displayed on top. However, Fixed Top will allow you to see the NavBar when you scroll down the mouse.
Show Donate Button: Turn this button on to show donate button on the navigation bar
Custom Donate Link: Incorporate link of
Show Shopping Cart: Turn this button on to show shopping cart on the navigation bar
Use Custom Navbar Font and Color: Enable this button to change NavBar Font, Size, Link Color and Link Hover Color
Transform to Uppercase: Tick this box so that font of menu items will be in Uppercase.

2. Logo

Dreamer allows you to add image file or use text for logo. If turning off Use image for Logo button, you will have options to enter Blog name (site name), select logo font from Google font, font size, font color, uppercase or lowercase for text logo. If turning on this button then you can upload logo, a retina logo shown on mobile and change its height.

3. NavBar Alignment

You can make adjustments to NavBar Height, NavBar Link Spacing and Mobile Icon Size

4. Top bar

Enable Top Bar: Turn this button on so that you will have extra options like
Custom Content (HTML): Add content here
Show Search box: Tick this one to show search box on the top bar

Typography

You can customize your Typography settings here. Carle integrated all Google Fonts. See font preview at Google Fonts

1. Custom Fonts and Custom Font Color

Use Custom Fonts, Custom Font Color: Enable these buttons to customize font, font size and other settings for heading and body text.

2. Headings

Headings Font: opt a font type in the drop-down list
Font Color: select a font color
Transform to Uppercase: If ticking this box, you will have headings <h1><h2><h3> which are in uppercase

3. Body

Body font: Choose a body font in the drop-down list
Font size: Opt a font size
Font Color: Select a font color

Design and Layout

1. Site Layout

Site Width, Site Max Width: these options handle width of the site
Background color, Background Image: If you opt yellow for background, background of your site will be filled with this color. However, when you set up background image, background of the site will be replaced with a new image.
Background repeat: Background Repeat will work effectively if you use patterned background image. When you let the image repeated, its copies will cover the whole background.

Background image attachment: There are two types that are Fixed image and Scroll with site. Fixed image means that when you scroll down on the page, you will still see the background image. Yet Scroll with site does not allow you to do this.
Auto Resize: if you turn on the button, image will appear in the whole background area. Yet, turning off this button will make background image be displayed only in a part of one side. Position of background image in this case may be left top, left center, left bottom, center top, center center, etc of the side. It depends on your choice in Background Image Alignment box.

2. Color

You can select a color for links and various elements of your site

Site Enhancement

• Custom Favicon: A favicon is a simple square image viewable in browsers for users to identify your website among many tabs. Ideally, it should be a 32×32 pixels or a 16×16 pixels. Most modern browsers can display a favicon in PNG format but older versions of Internet Explorer may not. To make sure your favicon be shown nicely, it is recommended to be in .ico format. Add your favicon in our customizer simply by clicking “Open Library” button in “Custom Favicon”, selecting your existing image or uploading new image.

• Enable Mailchimp subscribe: Turn off this button, Mailchimp subscribe part in Footer will disappear. If you turn on it then you will have an extra option, Mailchimp settings, to enter API key.

Learn more about showing Mailchimp subscribe in Footer:
Maichimp documentation

Menus

You can create a new menu, change order of items in a formed menu or add items to the menu

Dreamer - Customizer

Our theme customizer works as the original WordPress customizer feature but be much more versatile. All our theme options can be changed in our Customizer on the left side and live previewed instantly in previewed site on right side. With its intuitive interface, you can customize your website as you wish at your fingertips without writing a line of code.

To start using Customizer, in Admin Panel, navigate to Customizer, you will be redirected to a live preview screen where you can change options on left side and preview your site on your right side promptly. All your change will not be committed and viewed on your site until you click Save & Publish on top right of Customizer bar. You also are able to Export your settings in Customizer and Import to apply for other sites.

Let’s take a quick overview throughout all options in our Customizer. When using Customizer, you also will get our short guide for each option right in Customizer bar.

Site Enhancement

Custom Favicon: A favicon is a simple square image viewable in browsers for users to identify your website among many tabs. Ideally, it should be a 32×32 pixels or a 16×16 pixels image. Most modern browsers can display a favicon in PNG format but older versions of Internet Explorer may not. To make sure your favicon be shown nicely, it is recommended to be in .ico format. Add your favicon in our customizer simply by clicking “Open Library” button in “Custom Favicon“, selecting your existing image or uploading new image.

Smooth Scrolling: Enable/disable the smooth scrolling feature.

Design & Layout

Site Layout: Choose Full-width or Boxed layout for your site. With Boxed layout, you will have additional below options for background setting:

Site Width: Set width of the boxed layout in regard to full-width layout

Site Max Width: Set max width of the boxed layout in any screen size.

Background Color: Choose color of background

Background Image: Upload your background image along with some settings: Background Image Repeat, Background Image Alignment, and Background Image Attachment.

Link Color: Choose color of links on your site and color when you hover in.

Typography

Custom Font: Dreamers integrated all Google Fonts. Enable Custom Font to customize font, font size and other settings for heading and body text.

Custom Font Color: Enable Custom Font Color to customize font color of headings and body

Header

Customize your settings for your Header including Navigation Bar (Logo and Navigation) and an optional Top Bar.

Navigation Bar: Control the navigation bar with all the related settings here: its position, font, link color, link hover color and more. Check the box beside Custom Dropdown Style to change background color, font size, link color and link hover color on dropdown bar.

Logo: Upload your logo image and retina one (a larger image, with double the amount of pixels that your image will be displayed at). Enter your image height you want to display on navigation bar and we will do the calculation part for you to make it look great on all screen size.

NavBar Alignment: Adjust link alignment, height of navigation bar and size of mobile navigation button.

Top Bar: Enable/disable top bar. Top bar lays on top of your site, above Navigation Bar. It is suitable for placing contact information and social media link. You can choose to display social icons, set it as a top menu or custom content by checking each option. By checking Custom Content option, you are able to add content for top bar. Choose layout to display social icon and content of top bar.

Footer

This section contains all settings for Footer in your site.

Footer Columns: Set the number of column shown in footer.

Upload Footer Logo: select a photo to be displayed at the right bottom corner of the footer.

Bottom Bar Content: Add content shown in bottom bar.

Widgets

You can create widgets with various type of contents to put in the footer. To create a widget, click Add a Widget.

Blog

Blog Layout: Choose page layout for your blog page. It can be full-width, with right sidebar or left sidebar. If you choose layout with sidebar, select blog sidebar for your blog.

Blog Sidebar: Choose a sidebar for your blog pages.

Single Post: Choose Post layout same as blog layout by checking the box beside the option or uncheck to choose another layout. You also can choose to show or hide Post Meta, Tags and Author’s Bio. In addition, by enabling Social Sharing, you enable visitors to share your post. Enter Social Sharing Title and decide which social media your post can be shared.

Cause/Event

Cause/Event page: Assign a page as Cause/Event listing page. Once you chose a page as Cause/Event Page, its slug will be your Cause/Event’s main slug.

Cause/Event List Layout: Choose page layout for your cause/event page. It can be full-width, with right sidebar or left sidebar. If you choose layout with sidebar, select cause sidebar for your cause/event page.

Cause/Event List Sidebar: Choose a sidebar for your cause/event pages.

Cause/Event List Style: Choose between List or Grid Style.

Single Cause/Event: Choose Single Cause/Event layout same as Cause/Event page layout by checking the box beside the option or uncheck to choose another layout. In addition, by enabling Social Sharing, you enable visitors to share your cause/event. Enter Social Sharing Title and decide which social media your cause/event can be shared.

Portfolio

Portfolio page: Assign a page as Portfolio page. Once you chose a page as Portfolio Page, its slug will be your Portfolio’s main slug.

Grid Columns: select the number of columns.

Items per page: the number of items to be shown one page.

WooCommerce

Shop Layout: Choose page layout for your shop page. It can be full-width, with right sidebar or left sidebar. If you choose layout with sidebar, select cause sidebar for your shop page.

Shop Sidebar: Choose a sidebar for your shop pages.

Products per page: the number of items to be shown one page.

Single Product: Choose Single Product layout same as Shop page layout by checking the box beside the option or uncheck to choose another layout.

Custom Code

In this section you can add custom JavaScript and CSS to your site. Your Google analytics tracking code should be added to Custom JavaScript field.

Import/Export Settings

All themes from NooTheme share the same theme setting structure so you can export then import settings from one theme to another conveniently without any problem.

Import Settings: Click Upload button then choose a JSON file (.json) from your computer to import settings to this theme. All the settings will be loaded for preview here and will not be saved until you click button “Save and Publish“.

Export Settings: Simply click Download button to export all your settings to a JSON file (.json). You then can use that file to restore theme settings to any theme of NooTheme.

Woocommerce pages

Woocommerce Pages

After Woocommerce plugin is installed, it creates the following new pages:

Cart
Checkout
My account
Shop page

Learn more about Woocommerce pages:

http://docs.woothemes.com/document/woocommerce-pages/

Yet if it is unfortunate that those pages are not automatically created, you can do the following steps to build them:

1. Cart Page

• Navigate to Pages > Add New.
• Enter Title (Cart), paste this shortcode [woocommerce_cart] into content area of the page
• Opt Default Template in Page Attributes on the right side
• Click on Publish button

2. Checkout Page

• Navigate to Pages > Add New.
• Enter Title (Checkout), paste this shortcode [woocommerce_checkout] into content area of the page.
• Opt Default Template in Page Attributes on the right side.
• Click on Publish button

3. My account

• Navigate to Pages > Add New.
• Enter Title (My Account), paste this shortcode [woocommerce_my_account] into content area of the page.
• Opt Default Template in Page Attributes on the right side.
• Click on Publish button