Overview

Starting with a new theme, it's sometimes takes a lot of time for first time users to really understand how it works. You may want to know how to customize layouts, typography, block styles and make it look the way you want.

In most cases you won't need to know PHP or database queries, but basic knowledge would be very helpful to get great results.

If you're an experienced Drupal developer or if you want to build the theme from zero with only the basic appearance of your theme, find this guide in handy. This guide will give you the detailed step by step installation guide to help you start building the content for Aloha to look exactly like the demo site.

1. Aloha Package

Included content:

README.txt
Aloha theme: aloha-7.x-1.0.zip
Demo Profile for Aloha: aloha-profile-7.x-1.0.zip

2. System Requirements

Database

MySQL 5.0.15 or higher with PDO
PostgreSQL 8.3 or higher with PDO
SQLite 3.3.7 or higher

PHP

PHP 5.2.5 or higher (5.3 recommended)
PHP5 GD library installed
Disabled error_reporting flag on production server
Enabled mod_rewrite in Apache for clean URLs
Memory limit set up at least 128MB

If you are new to Drupal, please take a reference to System requirements on drupal.org.

3. Module requirements

Core Modules

Comment
Contact
Search

Third-party Modules

Required libraries by the modules

Chosen
Colorbox
Ddslick
Fontawesome
Jquery Cycle
Jquery Isotope
Owl Carousel
Rooms Fullcalendar
Superfish

Download Drupal core files, and extend your site with modules at here.

4. Screenshots

Let's glance through the theme's design & some features:

Home

News Three Column

News Details

Accommodation

Special Offers

Gallery

About Us

Contact

Multi colors & Megamenu

Responsive Layout & Mobile menu

Installation

Quick Installation Demo Profile

We created an installation profile with demo content for each of our theme, so that you can quickly download and reproduce the whole site content as presented on our live demo. This way you will get a quicker overview of the features. If it's convenient you may also use the given demo content as a starting point to build your custom sites.

Quick Installation

1. Aloha package included:

README.txt
Aloha theme: aloha-7.x-1.0.zip
Demo Profile for Aloha: aloha-profile-7.x-1.0.zip

The below steps will give you the installation guide so that you can build your website to look exactly like the Forum Plus Full Demo.

aloha-profile-7.x-1.0.zip

2. Extract aloha-profile-7.x-1.0.zip above and copy it into your host, and rename the directory

3. Access your MySQL database and create a new DB (e.g. aloha ) and user account. Don't forget to add correct permissions to new user to access the database

4. In the demo directory profiles/weebpal/ you can find database dump named sample_data.sql. Import this file into new BD

5. Now, you need to modify sites/default/default.settings.php file. Clone default.settings.php file, then rename it "settings.php"

6. Open settings.php, then locate the $database array and set proper credentials.

                                $databases['default']['default'] = array(                                    'driver' => 'mysql',                                    'database' => 'databasename',                                    'username' => 'username',                                    'password' => 'password',                                    'host' => 'localhost',                                    'prefix' => '',                                );

When using this installation, you are installing everything from our preview server. So don't forget to set proper values to access to your database: db name, db admin username, db admin password, host, etc.

7. Open the browser and visit your website with the prepopulated content & layout exactly like our Aloha Demo

Now, you can visit administrator site with the admin account admin/admin to delete the unnecessary contents and add the new ones.

Installation Aloha Theme for Drupal developers

If you're an experienced Drupal user or if you want to build the theme from zero with only the basic appearance of Forum Plus Theme, find this guide in handy.

1. Install Drupal

Go to Drupal download page and download the latest version of Drupal 7.
Extract and copy Drupal folder to your host and rename the directory.
Follow this tutorial to install Drupal with the standard profile.

2. Install Aloha Theme

Extract Aloha theme .ZIP file:
- aloha-7.x-1.0.zip
Move this theme into your Drupal folder: sites/all/themes
Navigate to Appearance > Choose Enable and set default Aloha theme

3. Install Required Modules

Now that you've enabled Aloha theme, you will install and enable the required modules (listed in the Module Requirements section) to customize and use them.

If you don't know how to install the contributed modules, this tutorial is an essential guide.

Cheat to install modules & theme:

Extract aloha-profile-7.x-1.0.zip
Open extracted folder, go to sites/all and copy all folders inside (modules, themes, libraries)
Paste them to your host, folder sites/all

Note: See this guide to get more details about installation

Taxonomy configuration

Quick Information

Taxonomy: Taxonomy can be simply understood as category management using organizational keywords known in other systems as categories, tags or metadata. It allows you to connect, relate and classify your website's content. In Drupal, these terms are gathered within "vocabularies". The Taxonomy module allows you to create, manage and apply those vocabularies.
Vocabulary: for example product category, tag, provider name, ...
Term: the items in each vocabulary. For example: vocabulary product category has some terms: laptop, pc, mobile, tablet, camera, headphone, ...
For more information about taxonomy, please see: Organizing content with taxonomies

Navigate to Structure > Taxonomy to create vocabularies as the following:

Then, add terms for each vocabulary.

Terms of Category:

Terms of Gallery Category:

Terms of Member Position:

Terms of Room Type:

Terms of Tags:

Note: See this guide to get more details about taxonomy configuration

Media configuration

Image Style Configuration

Image styles are the presets of image settings. Image styles are used to define how the images are shown.

Navigate to Configuration, In MEDIA area, click Image styles, then create image styles as the following:

Content type configuration

Configure Rooms

A. Configure Bookable Unit Type setting

1. Navigate to Rooms > Bookable Unit > Bookable Unit Type

2. Click Add bookable unit type link to create bookable unit type Standard and set properties for Standard

3. Go to Manage Fields and add following fields:

4. Go to Manage display set following properties:

Create the same, Add bookable unit type, Manage Fields and Manage display for: Premier, Deluxe

B. Configure Bookable Unit setting

1. Navigate to Rooms > Bookable Unit

2. Click Add a Bookable Unit > Add Standard unit link to create standard unit Room 101 and set properties for Room 101

Do the step above to create other links for: Standard, Premier, and Deluxe

Configure Store

A. Configure Rooms Packages Type setting

1. Navigate to Store > Product add following fields:

2. Add fiedls and set following properties for Product types: Rooms Packages

3. Set properties for Room unit types field

4. Set properties for Room unit field

B. Configure Rooms product Type setting

1. Navigate to Store > Product add following fields:

2. Add fiedls and set following properties for Product types: Rooms product

3. Set properties for Unit Type field

C. Create Product type

1. Navigate to Store > Product link, click Add a product link to create product type Month Package and set properties for Month Package

3. Set properties for Unit Type field

Modify Article type

1. Navigate to Structure > Content Type

2. In Article row, click "manage fields" link.

3. To add new field, you can fill in "Add new field" row

4. Set properties for Image field

5. Set properties for Slideshow field

6. Set properties for Book link field

7. Go to Manage display tab > Default set following properties:

8. Go to Manage display tab > Teaser set following properties:

Modify Basic page type

1. Navigate to Structure > Content Type

2. In Basic page row, click "manage fields" link.

3. To add an existing field, you can take action on "Add existing field" row and set properties for Basic page

4. Go to Manage display tab > Default set following properties:

5. Go to Manage display tab > Teaser set following properties:

Modify Rooms package type

Note: Required Modules: Rooms Package

1. Navigate to Structure > Content Type

2. In Rooms package row, click "manage fields" link.

3. To add an existing field, you can take action on "Add existing field" row and set properties for Rooms package

4. Set properties for Image field

5. Go to Manage display tab > Default set following properties:

6. Go to Manage display tab > Teaser set following properties:

Modify Unit Description type

Note: Required Modules: Fivestar

1. Navigate to Structure > Content Type

2. In Unit Description row, click "manage fields" link.

3. To add new field, you can fill in "Add new field" row

4. Set properties for Customer vote field

5. Go to Manage display tab > Default set following properties:

Modify Webform type

Note: Required Modules: Webform

1. Navigate to Structure > Content Type

2. In Webform row, click "manage fields" link.

3. To add an existing field, you can take action on "Add existing field" row and set properties for Webform

4. Set properties for Body field

5. Go to Manage display tab > Default set following properties:

6. Go to Manage display tab > Teaser set following properties:

Create Accommodation type

1. Navigate to Structure > Content Type. Click Add Content Type link to create content type Accommodation and set properties for Accommodation

2. Go to Manage Fields and add following fields:

3. Set properties for Images field

4. Set properties for Customer vote field

5. Set properties for Book link field

6. Set properties for From Price field

7. Set properties for Room type field

8. Go to Manage display tab > Default set following properties:

Create FAQ type

1. Navigate to Structure > Content Type. Click Add Content Type link to create content type FAQ

2. Go to Manage Fields and add following fields:

Create Gallery type

1. Navigate to Structure > Content Type. Click Add Content Type link to create content type Gallery

2. Go to Manage Fields and add following fields:

3. Set properties for Image field

4. Set properties for Gallery Category field

5. Go to Manage display tab > Default set following properties:

Create Gmap type

1. Navigate to Structure > Content Type. Click Add Content Type link to create content type Gmap and set properties for Gmap

2. Go to Manage Fields and add following fields:

Create Team member type

1. Navigate to Structure > Content Type. Click Add Content Type link to create content type Team member

2. Go to Manage Fields and add following fields:

3. Set properties for Image field

4. Set properties for Position field

5. Set properties for Mobile field

6. Set properties for Email field

7. Set properties for Facebook field

8. Set properties for Google plus field

9. Set properties for Twitter field

10. Set properties for Tumblr field

11. Go to Manage display tab > Default set following properties:

Create Testimonial type

1. Navigate to Structure > Content Type. Click Add Content Type link to create content type Testimonial

2. Go to Manage Fields and add following fields:

3. Set properties for Customer vote field

Create Timeline type

1. Navigate to Structure > Content Type. Click Add Content Type link to create content type Timeline

2. Go to Manage Fields and add following fields:

3. Set properties for Image field

4. Set properties for Year field

5. Go to Manage display tab > Default set following properties:

Create Venue type

1. Navigate to Structure > Content Type. Click Add Content Type link to create content type Venue

2. Go to Manage Fields and add following fields:

3. Set properties for Images field

4. Set properties for Amenities field

5. Set properties for Floor Plan field

6. Set properties for Customer vote field

7. Go to Manage display tab > Default set following properties:

Modify Users Profile structure

Navigate to Configuration > People section > Account settings > Manage Fields to view fields

Configure Field Collection

After installing many modules of Drupal Commerce, you will see the store menu in administrator menu bar. Now you can manipulate store through it.

To configure this future, you must install Field Collection module, then navigating to Structure > Field Collection and edit field collection :

1. Go to Manage fields tab, add following fields:

2. Set properties for Image field

3. Set properties for Description field

4. Modify Manage Display tab, set following properties:

Note You can read this article to understand more about Field Collection.

Configure Context

Create home context

1. Navigate to Structure > Context. Click Add link to create home

2. In Add a conditon and Add a reaction add condition and reaction: Path, Blocks and set following properties:

4. Then set following properties for accommodation_details

Home Page

Configure Chosen

1. Navigate to Configuration > User interface > Chosen set following properties:

                                .rooms-availability-search .form-select, .comment-form .form-select, #commerce-checkout-form-checkout .form-select, #newsletter-manage-subscriptions-form .form-select

Weather Block

A. Configure Weather setting

1. Navigate to Configuration > User interface > Weather . Click Add display link to create display System-wide display (#1) set properties for them.

2. In table System-wide display (#1). Click Add location to this display link to create location Aberdeen, South Dakota and set properties for Aberdeen, South Dakota

B. Configure Weather block setting

Front end Display

Configure Weather block

1. Navigate to Structure > Blocks

2. Find Weather: system-wide display (#1) link to configure block, for example: Weather: system-wide display (#1) block and set properties for them.

Languages Block

A. Languages setting

1. Navigate to Configuration > Regional and language > Languages . Click Add language link to create language French set properties for them.

2. Go to Detection and selection set following properties:

B. Configure Language switcher dropdown (User interface text)

Front end Display

Configure Language switcher dropdown block

1. Navigate to Structure > Blocks

2. Find Language switcher dropdown: system-wide display (#1) link to configure block, for example: Language switcher dropdown: system-wide display (#1) block and set properties for them.

Slideshow view

Front end Display

1. Create Slideshow view

1. Navigate to Structure > Views

2. Click Add new view, then create Slideshow view and set following properties:

3. At FIELDS area, click Add button to add fields: Content: Slideshow, Global: Fieldset, Content: Body, Content: Book link .

4. Set properties for Content: Slideshow

5. Set properties for Global: Fieldset

6. Set properties for Content: Body

7. Set properties for Content: Book link

8. At FIELDS area, click Rearrange button and set following arrange

9. At FILTER CRITERIA area, Content: Type , Content: Slideshow:fid

10. Click Add button to add Content: Type

11. Click Add button to add Content: Slideshow:fid

12. At Advanced > OTHER area, add CSS class:

2. Configure Slideshow block

1. Navigate to Structure > Blocks

2. Find View: Slideshow click configure link, set following properties

3. Find View: SlideShow: Bootstrap Slideshow click Configure link, set following properties

Special Offer view

Front end Display

A. Create Special Offer block view

1. Navigate to Structure > Views

2. Click Add new view, then create Special Offer block and set following properties:

3. At Advanced > REALATIONSHIPS area, click Add button to add fields: Content: Referenced products

4. At FIELDS area, Click Add button to add Field: Image, Global: Fieldset (Info), Content: Body, Commerce Product: Price (From), Commerce Product: Add to Cart form

5. Set properties for Field: Image

6. Set properties for Global: Fieldset (Info)

7. Set properties for Content: Body

8. Set properties for Commerce Product: Price (From)

9. Set properties for Commerce Product: Add to Cart form

10. At FILTER CRITERIA area, Click Add button to add Content: Type

11. Set properties for Content: Type

12. At FOOTER area, Click Add button to add Global: Text area and set the following properties:

13. At Advanced > OTHER area, add CSS class:

Refer to following HTML code:

                                    <i class="fa fa-caret-right"></i> <a href="<?php print base_path(); ?>offers">MORE SPECIAL OFFER</a>

B. Create Special Offer link view

Stay open Special Offer view, click Add button add Page new.

Next to steps below to set properties for the following fields:

At PAGE SETTINGS > Path area, set the following properties:

C. Create Special Offer page view

Stay open Special Offer view, click Add button add Page new.

Next to steps below to set properties for the following fields:

1. At FORMAT Format: Grid area, click Settings and set following properties:

2. At PAGE SETTINGS > Path area, set the following properties:

3. At PAGE SETTINGS > Menu area, set the following properties:

4. At PAGER > Use link area, set following propesties:

5. At Advanced > OTHER area, add CSS class:

D. Configure Special Offer block

1. Navigate to Structure > Blocks

2. Find View: Slideshow click configure link, set following properties

Accommodation view

Front end Display

A. Create Accommodation block view

1. Navigate to Structure > Views

2. Click Add new view, then create Accommodation block and set following properties:

3. At FORMAT Format: jCarousel area, click Settings and set following properties:

4. At FIELDS area, click Add button to add fields: Content: Images, Content: From Price, Content: Title, Content: Body, Content: Customer vote (Customer vote), Content: Book link .

5. Set properties for Content: Images

6. Set properties for Content: From Price

                                    $[field_from_price-value]

7. Set properties for Content: Body

8. Set properties for Content: Customer vote (Customer vote)

9. Set properties for Content: Booklink

10. At FILTER CRITERIA area, Content: Type

11. Click Add button to add Content: Type

12. At Advanced > Exposed form area, set following properties:

13. At Advanced > OTHER area, add CSS class:

B. Create Accommodation Grid page view

Stay open Accommodation view, click Add button add Page new.

Next to steps below to set properties for the following fields:

1. At FORMAT Format: Grid area, click Settings and set following properties:

2. At FIELDS area, click Add button to add fields: Global: Fieldset (Fieldset)

3. At FIELDS area, click Rearrange button and set following arrange

4. At FILTER CRITERIA area, Content: Room type (exposed)

5. Click Add button to add Content: Room type (exposed)

6. At PAGE SETTINGS > Path area, set the following properties:

7. At PAGER > Use link area, set following propesties:

8. At Advanced > Exposed form area, set following properties:

9. At Advanced > OTHER area, add CSS class:

C. Create Accommodation Line page view

Stay open Accommodation view, click Add button add Page new.

Next to steps below to set properties for the following fields:

1. At FORMAT Format: Unformatted list area, click Settings and set following properties:

2. At FIELDS area, click Add button to add fields: Global: Fieldset (Fieldset), Global: Fieldset (Fieldset), Global: Fieldset (Fieldset), Global: Fieldset (Fieldset)

3. Set properties for Global: Fieldset (Fieldset)

4. Set properties for Global: Fieldset (Fieldset)

5. Set properties for Global: Fieldset (Fieldset)

6. Set properties for Global: Fieldset (Fieldset)

7. At FIELDS area, click Rearrange button and set following arrange

8. At PAGE SETTINGS > Path area, set the following properties:

9. At PAGE SETTINGS > Menu area, set the following properties:

10. At Advanced > OTHER area, add CSS class:

D. Configure Accommodation block

1. Navigate to Structure > Blocks

2. Find View: Accommodation click configure link, set following properties

Testimonials block view

Front end Display

A. Create Testimonials block view

1. Navigate to Structure > Views

2. Click Add new view, then create Testimonials block and set following properties:

3. At FORMAT Format: jCarousel area, click Settings and set following properties:

4. At Advanced > REALATIONSHIPS area, click Add button to add fields: Content: Author

5. At FIELDS area, click Add button to add fields: (author) User: Picture, Global: Fieldset (Info Body), Content: Body, (author) User: Name, Content: Customer vote (Customer vote)

6. Set properties for User: Picture

7. Set properties for Global: Fieldset (Info Body)

8. Set properties for Content: Body

9. Set properties for User: Name

10. Set properties for Content: Customer vote

11. At Advanced > OTHER area, add CSS class:

B. Configure Testimonials block

1. Navigate to Structure > Blocks

2. Find View: Accommodation click configure link, set following properties

Why Choose Us view

Front end Display

A. Create Why Choose Us block view

1. Navigate to Structure > Views

2. Click Add new view, then create Why Choose Us block and set following properties:

3. At FORMAT Format: Views Accordion area, click Settings and set following properties:

4. At FIELDS area, click Add button to add fields: Content: Body

5. Set properties for Content: Body

6. At Advanced > OTHER area, add CSS class:

B. Create Why Choose Us page view

Stay open Accommodation view, click Add button add Page new.

Next to steps below to set properties for the following fields:

1. At Title area, set following properties:

2. At PAGE SETTINGS > Path area, set the following properties:

3. At PAGE SETTINGS > Menu area, set the following properties:

4. At Advanced > OTHER area, add CSS class:

C. Configure Why Choose Us block

1. Navigate to Structure > Blocks

2. Find View: Why Choose Us click configure link, set following properties

Address block

Front end Display

Create & configure Address block

1. Navigate to Structure > Blocks

2. Click Add block link to create block, for example: Address block and set properties for them.

Refer to following HTML code:

                                    <address>Street No 123, main road, city name, country <strong>Phone:</strong> 555 666 777 <strong>Fax:</strong> 444 333 222 <strong>Email:</strong> [email protected]</address>

Quick Links block

Front end Display

A. Create Quick links menu

1. Navigate to Structure > Menus

2. Click Add menu link to create menu, for example: Quick links menu and set properties for them.

B. Configure Quick links block

1. Navigate to Structure > Blocks

2. Find Quick links click configure link, set following properties

Room & Suites block

Front end Display

A. Create Room & Suites menu

1. Navigate to Structure > Menus

2. Click Add menu link to create menu, for example: Room & Suites menu and set properties for them.

B. Configure Room & Suites block

1. Navigate to Structure > Blocks

2. Find Room & Suites click configure link, set following properties

Configure Tags block

1. Navigate to Structure > Blocks

2. Find Tags in Tags click configure link, set following properties

Configure Don't Miss Out block

1. Navigate to Structure > Blocks

2. Find Newsletter: localhost newsletter click configure link, set following properties

Social Icons block

Front end Display

Create & configure Social Icons block

1. Navigate to Structure > Blocks

2. Click Add block link to create block, for example: Social Icons block and set properties for them.

Refer to following HTML code:

                                    <div class="line-through"> <ul class="list-inline social-list"> <li><a class="fa fa-facebook" href="#" title="Facebook"><span>Facebook</span></a></li> <li><a class="fa fa-twitter" href="#" title="Twitter"><span>Twitter</span></a></li> <li><a class="fa fa-google-plus" href="#" title="Google+"><span>Google+</span></a></li> <li><a class="fa fa-pinterest" href="#" title="Pinterest"><span>Pinterest</span></a></li> </ul> </div>

Copyright block

Front end Display

Create & configure Copyright block

1. Navigate to Structure > Blocks

2. Click Add block link to create block, for example: Copyright block and set properties for them.

Refer to following HTML code:

                                    Copyright © 2014 Aloha Resort & Spa. All rights reserved. Designed by <a href="https://weebpal.com" target="_blank">WeebPal</a>. Powered by <a href="https://www.drupal.org/" target="_blank">Drupal</a>.

Main Menu: main-menu block or TB Mega Menu

Drupal Main Menu block

1. Navigate to Structure > Menus > Main menu

2. Click Add link link to create menu, set properties for them.

TB Mega Menu

Create Subpages

Gallery filter view

Create Gallery filter view

1. Navigate to Structure > Views

2. Click Add new view, then create Gallery filter block and set following properties:

3. At FORMAT Format: Grid area, click Settings and set following properties:

4. At FIELDS area, Click Add button to add Taxonomy term: Name

5. Set properties for Taxonomy term: Name

6. At FILTER CRITERIA area, Click Add button to add Taxonomy vocabulary: Machine name

7. Set properties for Taxonomy vocabulary: Machine name

Gallery view

Front end Display

1. Create Gallery view

1. Navigate to Structure > Views

2. Click Add new view, then create Gallery block and set following properties:

3. At FORMAT Format: Grid area, click Settings and set following properties:

4. At FIELDS area, Click Add button to add Field: Image, Content: Gallery Category

5. Set properties for Field: Image

6. Set properties for Content: Gallery Category

7. At FILTER CRITERIA area, Click Add button to add Content: Type, Content: Has taxonomy term

8. Set properties for Content: Type

9. Set properties for Content: Has taxonomy term

10. At PAGE SETTINGS > Path area, set the following properties:

11. At PAGE SETTINGS > Menu area, set the following properties:

12. At Header area, Click Add button to add Global: View area and set the following properties:

13. At Advanced > OTHER area, click Use Ajax set the following properties:

14. At Advanced > OTHER area, add CSS class:

News page

Front end Display

A. Create News page view

1. Navigate to Structure > Views

2. Click Add new view, then create New page and set following properties:

3. At Advanced > REALATIONSHIPS area, click Add button to add fields: Content: Author

4. At FORMAT Format: Unformatted listare, click and set following properties:

5. In FIELDS area, click Add button to add fields: Field: Image, Global: Fieldset (Fieldset), Global: Fieldset (Fieldset),(author) User: Name, Content: Post date, Content: Comment count, Content: Body, Content: Link field and set following properties:

6. Set properties for Field: Image

7. Set properties for Global: Fieldset (Fieldset)

8. Set properties for Global: Fieldset (Fieldset)

9. Set properties for User: Name

10. Set properties for Content: Post date

11. Set properties for Content: Comment count

12. Set properties for Content: Body

13. Set properties for Content: Link

14. At FIELDS area, click Rearrange button and set following arrange

15. At PAGE SETTINGS > Path area, set the following properties:

16. At PAGE SETTINGS > Menu area, set the following properties:

17. At Advanced > OTHER area, add CSS class:

B. Create News Two Columns view

Stay open News view, click Add button add Page new.

Front end Display

Next to steps below to set properties for the following fields:

1. At FORMAT Format: Grid area, click Settings and set following properties:

2. At FIELDS area, click Add button to add Global: Fieldset (Fieldset)

3. Set properties for Global: Fieldset (Fieldset)

4. At FIELDS area, click Rearrange button and set following arrange

5. At FILTER CRITERIA area, Click Add button to add Field: Image (field_image:fid)

6. Set properties for Field: Image (field_image:fid)

7. At PAGE SETTINGS > Path area, set the following properties:

8. At PAGE SETTINGS > Menu area, set the following properties:

9. At Advanced > OTHER area, add CSS class:

C. Create News Three Columns view

Stay open News view, click Add button add Page new.

Front end Display

Next to steps below to set properties for the following fields:

1. At FORMAT Format: Grid area, click Settings and set following properties:

2. At FIELDS area, click Add button to add Global: Fieldset (Fieldset)

3. Set properties for Global: Fieldset (Fieldset)

4. At FIELDS area, click Rearrange button and set following arrange

5. At FILTER CRITERIA area, Click Add button to add Field: Image (field_image:fid)

6. Set properties for Field: Image (field_image:fid)

7. At PAGE SETTINGS > Path area, set the following properties:

8. At PAGE SETTINGS > Menu area, set the following properties:

D. Create News Teaser view

Stay open News view, click Add button add Page new.

Front end Display

Next to steps below to set properties for the following fields:

1. At FORMAT Format: Unformatted list area, click Settings and set following properties:

2. At FORMAT Show: Content area, click Teaser and set following properties:

3. At PAGE SETTINGS > Path area, set the following properties:

4. At PAGE SETTINGS > Menu area, set the following properties:

5. At Advanced > OTHER area, add CSS class:

E. Create News block view

Stay open News view, click Add button add Block new.

Next to steps below to set properties for the following fields:

1. At FORMAT Format: Unformatted list area, click Settings and set following properties:

2. At FIELDS area, click Add button to add Field: Image, Content: Body

3. Set properties for Field: Image

4. Set properties for Content: Body

5. At PAGER > Use link area, set following propesties:

Activities page

Front end Display

A. Create Activities page view

1. Navigate to Structure > Views

2. Click Add new view, then create Activities page and set following properties:

A. Create Activities page view

3. At Title area, set following properties:

4. At FORMAT Format: jCarousel area, click Settings and set following properties:

5. In FIELDS area, click Add button to add fields: Global: Fieldset (Info Body), Content: Body, Field: Image field and set following properties:

6. Set properties for Global: Fieldset (Info Body)

7. Set properties for Content: Body

8. Set properties for Field: Image

9. At FIELDS area, click Rearrange button and set following arrange

10. At PAGE SETTINGS > Path area, set the following properties:

11. At PAGE SETTINGS > Menu area, set the following properties:

12. At Advanced > OTHER area, add CSS class:

B. Create Activities block view

Stay open Activities view, click Add button add Block new.

Next to steps below to set properties for the following fields:

1. At Title area, set following properties:

2. At FORMAT Format: Grid area, click Settings and set following properties:

3. At FIELDS area, click Add button to add Field: Image, Content: Post date

4. Set properties for Field: Image

5. Set properties for Content: Post date

6. At FILTER CRITERIA area, Click Add button to add Content: Special

7. Set properties for Content: Special

8. At HEADER area, Click Add button to add Global: Result summary and set the following properties:

Refer to following HTML code:

                                Curabitur a felis in nunc fringilla tristique. Proin pretium, leo ac pellentesque mollis, felis nunc ultrices eros, sed gravida augue augue mollis justo. Phasellus dolor. Sed libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus.

9. At Advanced > OTHER area, add CSS class:

C. Configure Activities block

1. Navigate to Structure > Blocks

2. Find View: Activities click configure link, set following properties

Latest News page

Front end Display

A. Create Latest News block view

1. Navigate to Structure > Views

2. Click Add new view, then create Activities page and set following properties:

3. At Title area, set following properties:

4. In FIELDS area, click Add button to add fields: Field: Image, Content: Post date field and set following properties:

5. Set properties for Field: Image

6. Set properties for Content: Post date

7. At FILTER CRITERIA area, Click Add button to add Field: Image (field_image:fid)

8. Set properties for Field: Image (field_image:fid)

9. At Advanced > OTHER area, add CSS class:

B. Create Most Popular block view

Stay open Latest News view, click Add button add Block new.

Front end Display

Next to steps below to set properties for the following fields:

1. At FILTER CRITERIA area, Click Add button to add Content statistics: Views today

2. Set properties for Content statistics: Views today

3. At Advanced > OTHER area, add CSS class:

C. Create Recent block view

Stay open Latest News view, click Add button add Block new.

Front end Display

Next to steps below to set properties for the following fields:

1. At FILTER CRITERIA area, Click Add button to add Content: Updated/commented date

2. Set properties for Content: Updated/commented date

D. Configure Latest News block

1. Navigate to Structure > Blocks

2. Find View: Latest News click configure link, set following properties

E. Create News quicktab

1. Navigate to Structure > Quicktabs

2. Click Add Quicktabs Instance link to create quicktab News quicktab set following properties:

F. Configure Most Popular & Recent block

1. Navigate to Structure > Blocks

2. Find News quicktab click configure link, set following properties

Sidebar Testimonials block view

Front end Display

A. Create Sidebar Testimonials block view

1. Navigate to Structure > Views

2. Click Add new view, then create Sidebar Testimonials block and set following properties:

3. At FORMAT Format: jCarousel area, click Settings and set following properties:

4. At Advanced > REALATIONSHIPS area, click Add button to add fields: Content: Author

5. At FIELDS area, click Add button to add fields: (author) User: Picture, Global: Fieldset (Info Body), Content: Body,(author) User: Name, Content: Customer vote (Customer vote)

6. Set properties for User: Picture

7. Set properties for Global: Fieldset (Info Body)

8. Set properties for Content: Body

9. Set properties for User: Name

10. Set properties for Content: Customer vote

11. At Advanced > OTHER area, add CSS class:

B. Configure Sidebar Testimonials block

1. Navigate to Structure > Blocks

2. Find View: Sidebar Testimonials click configure link, set following properties

Our team block view

Front end Display

A. Create Our team block view

1. Navigate to Structure > Views

2. Click Add new view, then create Our team block and set following properties:

3. At Title area, set following properties:

4. At FORMAT Format: Grid area, click Settings and set following properties:

5. At FIELDS area, click Add button to add fields: Field: Image, Content: Title, Content: Position, Content: Body, Content: Mobile, Global: Fieldset (Social Info), Content: Email, Content: Facebook, Content: Google plus, Content: Twitter, Content: Tumblr

6. Set properties for Field: Image

7. Set properties for Content: Position

8. Set properties for Global: Fieldset (Social Info)

9. At FIELDS area, click Rearrange button and set following arrange

10. At Advanced > OTHER area, add CSS class:

B. Configure Our team block

1. Navigate to Structure > Blocks

2. Find View: Our team click configure link, set following properties

Gmap block view

Front end Display

A. Create Gmap block view

1. Navigate to Structure > Views

2. Click Add new view, then create Gmap block and set following properties:

3. At FORMAT Format: GMap area, click Settings and set following properties:

Refer to following HTML code:

                                [gmap align=Center |zoom=13 |center=37.62574799999993,237.93514 |width=auto |height=380px |id=contact_map |control=Small |type=Map]

4. At FIELDS area, click Add button to add fields: Content: Title, Content: latitude, Content: longitude

5. Set properties for Content: latitude

6. Set properties for Content: longitude

B. Create Gmap2 block view

Stay open Gmap view, click Add button add Block new.

Next to steps below to set properties for the following fields:

1. At Title area, set following properties:

2. At Advanced > OTHER area, add CSS class:

C. Configure Gmap block

1. Navigate to Structure > Blocks

2. Find View: Gmap click configure link, set following properties

D. Configure Gmap2 block

1. Navigate to Structure > Blocks

2. Find View: Gmap click configure link, set following properties

Timeline block view

Front end Display

A. Create Timeline block view

1. Navigate to Structure > Views

2. Click Add new view, then create Timeline block and set following properties:

3. At Title area, set following properties:

4. At FORMAT Format: HTML list area, click Settings and set following properties:

5. At FIELDS area, click Add button to add fields: Global: Fieldset (Fieldset), Field: Image, Global: Fieldset (Fieldset), Content: Title, Content: Body, Content: Year

6. Set properties for Global: Fieldset (Fieldset)

7. Set properties for Field: Image

8. Set properties for Global: Fieldset (Fieldset)

9. Set properties for Content: Body

10. Set properties for Content: Year

11. At FIELDS area, click Rearrange button and set following arrange

12. At SORT CRITERIA area, Click Add button to add Content: Year

13. Set properties for Content: Year

14. At Advanced > OTHER area, add CSS class:

B. Configure Timeline block

1. Navigate to Structure > Blocks

2. Find View: Timeline click configure link, set following properties

Venues page view

Front end Display

A. Create Venues page view

1. Navigate to Structure > Views

2. Click Add new view, then create Venues page and set following properties:

3. At FORMAT Format: HTML list area, click Settings and set following properties:

4. At FIELDS area, click Add button to add fields: Content: Images, Content: From Price, Global: Fieldset (Fieldset),Content: Title, Content: Body, Content: Customer vote (Customer vote), Content: Link

5. Set properties for Content: Images

6. Set properties for Content: From Price

7. Set properties for Global: Fieldset (Fieldset)

8. Set properties for Content: Body

9. Set properties for Content: Customer vote

10. Set properties for Content: Link

11. At FIELDS area, click Rearrange button and set following arrange

12. At PAGE SETTINGS > Path area, set the following properties:

13. At PAGE SETTINGS > Menu area, set the following properties:

14. At Advanced > OTHER area, add CSS class:

B. Create Venues block view

Stay open Latest News view, click Add button add Block new.

Front end Display

Next to steps below to set properties for the following fields:

1. At FORMAT Format: HTML list area, click Settings and set following properties:

2. At FIELDS area, click Add button to add fields: Content: Images, Content: Title

3. Set properties for Content: Images

4. At PAGER > Use link area, set following propesties:

5. At Advanced > OTHER area, add CSS class:

C. Configure Venues block

1. Navigate to Structure > Blocks

2. Find View: Venues click configure link, set following properties

Taxonomy term page view

A. Configure Taxonomy term page view

1. Navigate to Structure > Views. Enable "Taxonomy term" view

2. Find Tags in Tags click configure link, set following properties

3. At Advanced > REALATIONSHIPS area, click Add button to add fields: Content: Author

4. At FIELDS area, click Add button to add fields: Global: Fieldset (Fieldset), (author) User: Name, Content: Post date, Content: Comment count

5. Set properties for Global: Fieldset (Fieldset)

6. Set properties for (author) User: Name

7. Set properties for Content: Post date

8. Set properties for Content: Comment count

9. At FIELDS area, click Rearrange button and set following arrange

10. At Advanced > OTHER area, add CSS class:

B. Configure Feed page

Stay open Taxonomy term view, click Add button add Page new.

Next to steps below to set properties for the following fields:

1. At Advanced > REALATIONSHIPS area, click Add button to add fields: Content: Author

More Configurations

Site Information

In this section, you can change basic settings, such as the site name, slogan, e-mail address.

1. Log in to Administration site page by administrator account

2. Navigate to the Site Information page Configuration > System: Site information

3. Change site details from the view:

Site name
Slogan
E-mail address
Set Default Front page

4. Click on Save configuration to finish editing.

Color Configuration

1. Create a new color.

Step 1: Navigate to the directory: aloha/sites/all/themes/aloha, you can find file aloha.info, open this file.

Step 2: Locate the skins[ ] arrays and add new code row:

Step 3: Save file.

Step 4: Navigate to the directory: aloha/sites/all/themes/aloha/css/colors, clone a folder, then rename it "new_color"

Step 5: new_color folder includes images folder and style.css file.

Now, you can style new color for theme by modifying style.css file.

2. Create a new background.

Step 1: Navigate to the directory: aloha/sites/all/themes/aloha, you can find file, open file aloha.info

Step 2: Locate the backgrounds[ ] arrays and add new code row:

Step 3: Save file.

Step 4: Move your background image into the directory: aloha/sites/all/themes/aloha/images

Step 5: Navigate to the directory: aloha/sites/all/themes/aloha/css, open file base.css, and add new code row:

Step 6: Save file.

3. Configuration.

Step 1: Log into website by administrator account.

Step 2: Go to Appearance find autox 7.34, click on Settings

Step 3: At CONFIGS area, select one of options for Layout, Skin, Background to set default, (e.g: New Color), and at TOGGLE DISPLAY area, check Show Skins Menu option if you want to display Skins menu on front-end pages.

Language Configuration

This section guides you how to have multiple languages for your site. Autox Theme supports both Left to Right and Right to Left languages.

Step 1: Navigate to Configuration > Regional and Language > Languages then add new language.

Step 2: Check to enable and set default language

Step 3: Save configuration

Banner

Drupal 7 - Aloha Theme Guide for Developers

Overview

1. Aloha Package

2. System Requirements

Database

PHP

3. Module requirements

Core Modules

Third-party Modules

Required libraries by the modules

4. Screenshots

Home

News Three Column

News Details

Accommodation

Special Offers

Gallery

About Us

Contact

Multi colors & Megamenu

Responsive Layout & Mobile menu

Installation

Quick Installation Demo Profile

Quick Installation

Installation Aloha Theme for Drupal developers

1. Install Drupal

2. Install Aloha Theme

3. Install Required Modules

Cheat to install modules & theme:

Taxonomy configuration

Quick Information

Media configuration

Image Style Configuration

Content type configuration

Configure Rooms

A. Configure Bookable Unit Type setting

B. Configure Bookable Unit setting

Configure Store

A. Configure Rooms Packages Type setting

B. Configure Rooms product Type setting

C. Create Product type

Modify Article type

Modify Basic page type

Modify Rooms package type

Modify Unit Description type

Modify Webform type

Create Accommodation type

Create FAQ type

Create Gallery type

Create Gmap type

Create Team member type

Create Testimonial type

Create Timeline type

Create Venue type

Modify Users Profile structure

Configure Field Collection

Configure Context

Create home context

Home Page

Configure Chosen

Weather Block

A. Configure Weather setting

B. Configure Weather block setting

Front end Display

Configure Weather block

Languages Block

A. Languages setting

B. Configure Language switcher dropdown (User interface text)

Front end Display

Configure Language switcher dropdown block

Slideshow view

Front end Display

1. Create Slideshow view

2. Configure Slideshow block

Special Offer view

Front end Display

A. Create Special Offer block view

B. Create Special Offer link view

C. Create Special Offer page view