Drupal 7 - Aloha Theme Guide for Developers

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

  1. Address Field
  2. Administration menu
  3. Better Exposed Filters
  4. Block Class
  5. Chosen
  6. Colorbox
  7. Commerce
  8. Commerce Cart Expiration
  9. Commerce PayPal
  10. Commerce Product Attributes
  11. Commerce Stock
  12. Context
  13. Chaos tools
  14. Date
  15. Entity
  16. Entity Reference
  17. Facebook Like Button
  18. Field collection
  19. Field Group
  20. Fivestar
  21. Font Awesome Icons
  22. Gallery Formatter
  23. GMap Module
  24. Google Analytics
  25. Internationalization
  26. Jcarousel
  27. Jquery plugins
  28. Jquery Update
  29. Language Switcher Dropdown
  30. Language Icons
  31. Libraries
  32. Link
  33. Location Map
  34. Memcache API and Integration
  35. Menu attributes
  36. Module Filter
  37. OAuth
  38. Owl Carousel
  39. Panels
  40. Path Auto
  41. Quicktabs
  42. Rooms
  43. Rooms Package
  44. Rules
  45. Simplenews
  46. Site map
  47. Superfish
  48. Tag Clouds
  49. Taxonomy Menu
  50. TB Megamenu
  51. Token
  52. Twitter
  53. Variable
  54. Views
  55. Views Accordion
  56. Views Field View
  57. Views Fieldsets
  58. Views Isotope - jQuery Isotope
  59. Views Slideshow
  60. Voting API
  61. Weather
  62. Webform
  63. Webform Hints

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

Quick Installation

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

Quick Installation

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.

Quick Installation

                                $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

  1. Go to Drupal download page and download the latest version of Drupal 7.


    Download Drupal 7

  2. Extract and copy Drupal folder to your host and rename the directory.
  3. Follow this tutorial to install Drupal with the standard profile.

2. Install Aloha Theme

  1. Extract Aloha theme .ZIP file:
    • aloha-7.x-1.0.zip
  2. Move this theme into your Drupal folder: sites/all/themes


    Download Drupal 7

  3. Navigate to Appearance > Choose Enable and set default Aloha theme


    Download Drupal 7

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:

  1. Extract aloha-profile-7.x-1.0.zip
  2. Open extracted folder, go to sites/all and copy all folders inside (modules, themes, libraries)
  3. 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:


Taxonomy

Then, add terms for each vocabulary.

Terms of Category:


Taxonomy

Terms of Gallery Category:


Taxonomy

Terms of Member Position:


Taxonomy

Terms of Room Type:


Taxonomy

Terms of Tags:


Taxonomy

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:


Image Styles


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


Rooms

3. Go to Manage Fields and add following fields:


Rooms

4. Go to Manage display set following properties:


Rooms

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


Rooms

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


Rooms

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


Rooms

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


Store

3. Set properties for Room unit types field


Store

4. Set properties for Room unit field


Store

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


Store

3. Set properties for Unit Type field


Store

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


Store

3. Set properties for Unit Type field


Store

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


Article

4. Set properties for Image field


Article

5. Set properties for Slideshow field


Article

6. Set properties for Book link field


Article

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


Article

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


Article

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


Basic


Basic

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


Basic

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


Basic

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


Rooms package


Rooms package

4. Set properties for Image field


Rooms package

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


Rooms package

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


Rooms package

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


Unit Description

4. Set properties for Customer vote field


Unit Description

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


Unit Description

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


Webform


Webform

4. Set properties for Body field


Webform

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


Webform

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


Webform

Create Accommodation type

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


Accommodation

2. Go to Manage Fields and add following fields:


Accommodation

3. Set properties for Images field


Accommodation

4. Set properties for Customer vote field


Accommodation

5. Set properties for Book link field


Accommodation

6. Set properties for From Price field


Accommodation

7. Set properties for Room type field


Accommodation

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


Accommodation

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:


FAQ

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:


Gallery

3. Set properties for Image field


Gallery

4. Set properties for Gallery Category field


Gallery

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


Gallery

Create Gmap type

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


Gmap

2. Go to Manage Fields and add following fields:


Gmap

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:


Team member

3. Set properties for Image field


Team member

4. Set properties for Position field


Team member

5. Set properties for Mobile field


Team member

6. Set properties for Email field


Team member

7. Set properties for Facebook field


Team member

8. Set properties for Google plus field


Team member

9. Set properties for Twitter field


Team member

10. Set properties for Tumblr field


Team member

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


Team member

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:


Testimonial

3. Set properties for Customer vote field


Testimonial

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:


Timeline

3. Set properties for Image field


Timeline

4. Set properties for Year field


Timeline

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


Timeline

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:


Venue

3. Set properties for Images field


Venue

4. Set properties for Amenities field


Venue

5. Set properties for Floor Plan field


Venue

6. Set properties for Customer vote field


Venue

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


Venue

Modify Users Profile structure

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


Users type

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 :


Field Collection settings

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


Field Collection settings

2. Set properties for Image field


Field Collection settings

3. Set properties for Description field


Field Collection settings

4. Modify Manage Display tab, set following properties:


Field Collection settings

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:


Context

4. Then set following properties for accommodation_details


Context


Home Page

Configure Chosen

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

Chosen

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

Weather

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

Weather

B. Configure Weather block setting

Front end Display

Weather

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.

Weather

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:

Languages

B. Configure Language switcher dropdown (User interface text)

Front end Display

Languages

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.

Languages

Slideshow view

Front end Display

Slideshow

1. Create Slideshow view

1. Navigate to Structure > Views

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

Slideshow

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

Slideshow

5. Set properties for Global: Fieldset

Slideshow

6. Set properties for Content: Body

Slideshow

7. Set properties for Content: Book link

Slideshow

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

Slideshow

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

10. Click Add button to add Content: Type

Slideshow

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

Slideshow

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

Slideshow

2. Configure Slideshow block

1. Navigate to Structure > Blocks

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

Slideshow

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

Slideshow

Special Offer view

Front end Display

Special Offer

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:

Special Offer

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

Special Offer

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

Special Offer

6. Set properties for Global: Fieldset (Info)

Special Offer

7. Set properties for Content: Body

Special Offer

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

Special Offer

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

Special Offer

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

11. Set properties for Content: Type

Special Offer

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

Special Offer

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

Special Offer

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.


Special Offer

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


Special Offer

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


Special Offer

C. Create Special Offer page view

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

Special Offer

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


Special Offer

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


Special Offer

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


Special Offer

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


Special Offer

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


Special Offer

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


Special Offer

D. Configure Special Offer block

1. Navigate to Structure > Blocks

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


Special Offer

Accommodation view

Front end Display


Accommodation

A. Create Accommodation block view

1. Navigate to Structure > Views

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


Accommodation

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


Accommodation

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


Accommodation

6. Set properties for Content: From Price


Accommodation

                                    $[field_from_price-value]
                        

7. Set properties for Content: Body


Accommodation

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


Accommodation

9. Set properties for Content: Booklink


Accommodation

10. At FILTER CRITERIA area, Content: Type

11. Click Add button to add Content: Type


Accommodation

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


Accommodation

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


Accommodation

B. Create Accommodation Grid page view

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


Accommodation

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


Accommodation

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


Accommodation

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


Accommodation

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


Accommodation

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

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


Accommodation

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


Accommodation

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


Special Offer

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


Accommodation

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


Accommodation

C. Create Accommodation Line page view

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

Special Offer

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


Accommodation

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


Accommodation

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)


Accommodation

4. Set properties for Global: Fieldset (Fieldset)


Accommodation

5. Set properties for Global: Fieldset (Fieldset)


Accommodation

6. Set properties for Global: Fieldset (Fieldset)


Accommodation

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


Accommodation

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


Accommodation

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


Accommodation

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


Accommodation

D. Configure Accommodation block

1. Navigate to Structure > Blocks

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


Accommodation

Testimonials block view

Front end Display


Testimonials

A. Create Testimonials block view

1. Navigate to Structure > Views

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


Testimonials

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


Testimonials

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


Testimonials

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


Testimonials

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


Testimonials

8. Set properties for Content: Body


Testimonials

9. Set properties for User: Name


Testimonials

10. Set properties for Content: Customer vote


Testimonials

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


Testimonials

B. Configure Testimonials block

1. Navigate to Structure > Blocks

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


Testimonials

Why Choose Us view

Front end Display


Why Choose Us

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:


Why Choose Us

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


Why Choose Us

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

5. Set properties for Content: Body


Why Choose Us

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


Why Choose Us

B. Create Why Choose Us page view

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


Why Choose Us

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


Why Choose Us

1. At Title area, set following properties:


Why Choose Us

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


Why Choose Us

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


Why Choose Us

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


Why Choose Us

C. Configure Why Choose Us block

1. Navigate to Structure > Blocks

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


Why Choose Us

Address block

Front end Display


Address

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.


Address

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> info@autodealer.com</address>
                        

Quick Links block

Front end Display


Quick Links

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.


Quick Links

B. Configure Quick links block

1. Navigate to Structure > Blocks

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


Quick Links

Room & Suites block

Front end Display


Room & Suites

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.


Room & Suites

B. Configure Room & Suites block

1. Navigate to Structure > Blocks

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


Room & Suites

Configure Tags block

1. Navigate to Structure > Blocks

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


Tags

Configure Don't Miss Out block

1. Navigate to Structure > Blocks

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


Don't Miss Out

Social Icons block

Front end Display


Social Icons

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.


Social Icons

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


Copyright

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.


Copyright

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.


Main Menu

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:


Gallery filter

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


Gallery filter

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

5. Set properties for Taxonomy term: Name


Gallery filter

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

7. Set properties for Taxonomy vocabulary: Machine name


Gallery filter

Gallery view

Front end Display


Gallery

1. Create Gallery view

1. Navigate to Structure > Views

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


Gallery

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


Gallery

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

5. Set properties for Field: Image


Gallery

6. Set properties for Content: Gallery Category


Gallery

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

8. Set properties for Content: Type


Gallery

9. Set properties for Content: Has taxonomy term


Gallery

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


Gallery

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


Gallery

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


Gallery

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


Gallery

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


Gallery

News page

Front end Display


New

A. Create News page view

1. Navigate to Structure > Views

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


New

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


New

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


New

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


New

7. Set properties for Global: Fieldset (Fieldset)


New

8. Set properties for Global: Fieldset (Fieldset)


New

9. Set properties for User: Name


New

10. Set properties for Content: Post date


New

11. Set properties for Content: Comment count


New

12. Set properties for Content: Body


New

13. Set properties for Content: Link


New

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


New

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


New

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


New

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


New

B. Create News Two Columns view

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


New Two Columns

Front end Display


New Two Columns

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


New Two Columns

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


New Two Columns

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

3. Set properties for Global: Fieldset (Fieldset)


New Two Columns

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


New Two Columns

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

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


New Two Columns

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


New Two Columns

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


New Two Columns

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


New

C. Create News Three Columns view

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


New Three Columns

Front end Display


New Three Columns

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


New Three Columns

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


New Three Columns

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

3. Set properties for Global: Fieldset (Fieldset)


New Three Columns

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


New Three Columns

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

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


New Three Columns

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


New Three Columns

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


New Three Columns

D. Create News Teaser view

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


New Teaser

Front end Display


New Teaser

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


New Three Columns

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


New Teaser

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


New Teaser

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


New Teaser

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


New Teaser

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


New Teaser

E. Create News block view

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


New Block

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


New Block

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


New Block

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

3. Set properties for Field: Image


New Block

4. Set properties for Content: Body


New Block

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


New Block

Activities page

Front end Display


Activities

A. Create Activities page view

1. Navigate to Structure > Views

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


Activities

A. Create Activities page view

3. At Title area, set following properties:


Activities

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


Activities

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)


Activities

7. Set properties for Content: Body


Activities

8. Set properties for Field: Image


Activities

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


Activities

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


Activities

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


Activities

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


Activities

B. Create Activities block view

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


Activities

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


Activities

1. At Title area, set following properties:


Activities

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


Activities

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

4. Set properties for Field: Image


Activities

5. Set properties for Content: Post date


Activities

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

7. Set properties for Content: Special


Activities

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


Activities

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:


Activities

C. Configure Activities block

1. Navigate to Structure > Blocks

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


Activities

Latest News page

Front end Display


Latest News

A. Create Latest News block view

1. Navigate to Structure > Views

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


Latest News

3. At Title area, set following properties:


Latest News

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


Latest News

6. Set properties for Content: Post date


Latest News

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

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


Latest News

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


Latest News

B. Create Most Popular block view

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


Most Popular

Front end Display


Most Popular

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


Most Popular

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

2. Set properties for Content statistics: Views today


Most Popular

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


Most Popular

C. Create Recent block view

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


Recent

Front end Display


Recent

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


Recent

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

2. Set properties for Content: Updated/commented date


Recent

D. Configure Latest News block

1. Navigate to Structure > Blocks

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


Latest News

E. Create News quicktab

1. Navigate to Structure > Quicktabs

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


News quicktab

F. Configure Most Popular & Recent block

1. Navigate to Structure > Blocks

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


News quicktab

Sidebar Testimonials block view

Front end Display


Sidebar Testimonials

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:


Sidebar Testimonials

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


Sidebar Testimonials

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


Sidebar Testimonials

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


Sidebar Testimonials

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


Sidebar Testimonials

8. Set properties for Content: Body


Sidebar Testimonials

9. Set properties for User: Name


Sidebar Testimonials

10. Set properties for Content: Customer vote


Sidebar Testimonials

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


Sidebar Testimonials

B. Configure Sidebar Testimonials block

1. Navigate to Structure > Blocks

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


Sidebar Testimonials

Our team block view

Front end Display


Our Team

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:


Our Team

3. At Title area, set following properties:


Our Team

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


Our Team

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


Our Team

7. Set properties for Content: Position


Our Team

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


Our Team

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


Our Team

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


Our Team

B. Configure Our team block

1. Navigate to Structure > Blocks

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


Our Team

Gmap block view

Front end Display


Gmap

A. Create Gmap block view

1. Navigate to Structure > Views

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


Gmap

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


Gmap

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


Gmap

6. Set properties for Content: longitude


Gmap

B. Create Gmap2 block view

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


Gmap2

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


Gmap2

1. At Title area, set following properties:


Gmap2

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


Gmap2

C. Configure Gmap block

1. Navigate to Structure > Blocks

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


Gmap

D. Configure Gmap2 block

1. Navigate to Structure > Blocks

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


Gmap2

Timeline block view

Front end Display


Timeline

A. Create Timeline block view

1. Navigate to Structure > Views

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


Timeline

3. At Title area, set following properties:


Timeline

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


Timeline

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)


Timeline

7. Set properties for Field: Image


Timeline

8. Set properties for Global: Fieldset (Fieldset)


Timeline

9. Set properties for Content: Body


Timeline

10. Set properties for Content: Year


Timeline

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


Timeline

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

13. Set properties for Content: Year


Timeline

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


Timeline

B. Configure Timeline block

1. Navigate to Structure > Blocks

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


Timeline

Venues page view

Front end Display


Venues

A. Create Venues page view

1. Navigate to Structure > Views

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


Venues

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


Venues

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


Venues

6. Set properties for Content: From Price


Venues

7. Set properties for Global: Fieldset (Fieldset)


Venues

8. Set properties for Content: Body


Venues

9. Set properties for Content: Customer vote


Venues

10. Set properties for Content: Link


Venues

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


Venues

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


Venues

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


Venues

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


Timeline

B. Create Venues block view

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


Recent

Front end Display


Venues

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


Venues

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


Venues

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

3. Set properties for Content: Images


Venues

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


Venues

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


Venues

C. Configure Venues block

1. Navigate to Structure > Blocks

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


Venues

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


Taxonomy term

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


Taxonomy term

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)


Taxonomy term

6. Set properties for (author) User: Name


Taxonomy term

7. Set properties for Content: Post date


Taxonomy term

8. Set properties for Content: Comment count


Taxonomy term

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


Taxonomy term

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


Taxonomy term

B. Configure Feed page

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


Feed

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


Feed

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


Feed


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

Site Information

3. Change site details from the view:

  1. Site name
  2. Slogan
  3. E-mail address
  4. 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.

Color Configuration

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

Color Configuration

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"

Color Configuration

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.

Color Configuration

2. Create a new background.

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

Background Configuration

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

Background Configuration

Step 3: Save file.

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

Background Configuration

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

Background Configuration

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.

Appearance Settings

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.

Language Configuration

Step 2: Check to enable and set default language

Step 3: Save configuration

From our blog

News & Events

Max
Tuesday, 03 November 2015
Max
Saturday, 24 October 2015
admin
Sunday, 15 February 2015
admin
Thursday, 08 January 2015
admin
Wednesday, 17 December 2014

Subscribe to our mailing list

Get a 20% off coupon and be the first to receive exclusive offer, and important events from WeebPal.

Connect with us

We're on Social Networks. Follow us & get in touch.

▲ Top
Subscribe

Get a 20% off coupon and be the first to receive exclusive offer, and important events from WeebPal.