Drupal 7 - Hermio 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 Hermio to look exactly like the demo site.

1. Package

Included content:

  • README.txt
  • Hermio theme: hermio-7.x-1.0.zip
  • Demo Profile for Hermio: hermio-demo-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.4 or higher 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. Screenshots

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

Home

About us

Blog

Blog Grid

Blog Details

Event

Donation

Shop

Shop Detail

Contact Us

Multi colors

Responsive Layout

4. Module requirements

Core Modules

  • Blog
  • Contact
  • Update manager

Third-party Modules

  1. Address Field
  2. Admin Menu
  3. Backup and Migrate
  4. Bean
  5. Better Exposed Filters
  6. Block Class
  7. Commerce
  8. Commerce Donate
  9. Commerce PayPal
  10. Chaos tools
  11. Devel
  12. Entity
  13. Entity Reference
  14. Facet Api
  15. FAQ
  16. Field Collection
  17. Field Formatter Class
  18. Field Formatter Settings
  19. Field Group
  20. Field Slideshow
  21. Flexslider
  22. Flickr
  23. Fontawesome
  24. i18n
  25. Image Delta Formatter
  26. Inline Entity Form
  27. Jcarousel
  28. Jquery Update
  29. Lang Dropdown
  30. Languageiconse
  31. Libraries
  32. Link
  33. Module Filter
  34. Node Class
  35. Page Title
  36. Path Auto
  37. Quicktabs
  38. Rules
  39. Search Api
  40. Search Api DB
  41. Search Api Ranges
  42. Search Api Solr
  43. Search Api Sorts
  44. Search Facet Api
  45. Select Or Other
  46. Sharethis
  47. Shortcode
  48. Simplenews
  49. Superfish
  50. Tag Clouds
  51. Taxonomy Menu
  52. TB Megamenu
  53. Title
  54. Token
  55. Variable
  56. Video embed Field
  57. Views
  58. Views Bootstrap
  59. Views Bulk Operations
  60. Views Field View
  61. Views Fieldsets
  62. Views Scattered Polaroids
  63. Views Slideshow
  64. Webform
  65. Wee Shortcode
  66. Weebpal banner

Required libraries by the modules

  • Ddslick
  • Flexslider
  • Fontawesome
  • Jquery Cycle
  • Jquery Jcarousel
  • Superfish

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


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. Hermio package included:

  • Hermio theme: hermio-7.x-1.0.zip
  • Demo Profile for Hermio: hermio-demo-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 Hermio Full Demo.

  • Hermio theme: hermio-demo-7.x-1.0.zip

2. Extract hermio-demo-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. Hermio) and user account. Don't forget to add correct permissions to new user to access the database

4. In the demo directory database/ (latest version of package) or profiles/weebpal/ (old version), you can find database dump named sample_data.sql. Import this file into new database.

Quick Installation

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

Quick Installation

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

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

Installation Hermio 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 Hermio 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 Hermio Theme

  1. Extract Hermio theme .ZIP file:
    • hermio-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 Hermio theme

    Download Drupal 7

3. Install Required Modules

Now that you've enabled Hermio 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 hermio-demo-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

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

Vocabulary

Then, add terms for each vocabulary

Step 2:Terms of Blog Types:

Vocabulary

Step 3:Terms of Event Types:

Vocabulary

Step 4:Terms of Gender:

Vocabulary

Step 5:Terms of Position:

Vocabulary

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 Store

Step 1: Navigate to Store > Product add following fields:

Product type

Step 2: Add fiedls and set following properties for Product types: Event

Product type

Step 3: Go to Manage Display > Default tab, set following properties:

Product type

Step 4: Go to Manage Display > Line Item tab, set following properties:

Product type

Step 5: Go to Manage Display > Teaser tab, set following properties:

Product type

Step 6: Add fiedls and set following properties for Product types: Donation

Product type

Step 7: Go to Manage Display > Default tab, set following properties:

Product type

Step 8: Go to Manage Display > Line Item tab, set following properties:

Product type

Step 9: Go to Manage Display > Teaser tab, set following properties:

Product type

Step 10: Add fiedls and set following properties for Product types: Product

Product type

Step 11: Go to Manage Display > Default tab, set following properties:

Product type

Step 12: Go to Manage Display > Line Item tab, set following properties:

Product type

Step 13: Go to Manage Display > Teaser tab, set following properties:

Product type

Step 14:Click Save button

Modify Blog entry type

Step 1: Navigate to Structure > Content Type > Blog entry . In Blog entry , go to Manage fields tab, add following fields:

Blog Entry types

Step 2:Set properties for Images field

Blog Entry types

Step3:Set properties for Content field

Blog Entry types

Step 4:Set properties for Blog Type field

Blog Entry types

Step 5:Set properties for Slideshow field

Blog Entry types

Step 6: Go to Manage display tab > Default tab, set following properties:

Blog type

Step 7: Modify Teaser tab, set following properties:

Blog type

After you finish these steps, you can add some products but they weren't displayed anywhere because you should create a content type for their display.

We built Hermio based on Drupal Commerce,
so you should read Drupal commerce guide to understand more how to use our product.

Modify Article type

Step 1:Navigate to Structure > Content Type > Article . In Donation , go to Manage fields tab, add following fields:

Article settings

Setup 2: Set properties for Image field:

Article settings

Setup 3: Go to Manage Dislay > Default tab, add following field:

Article settings

Step 4: Modify Teaser tab, set following properties:

Article settings

Modify Donation type

Step 1:Navigate to Structure > Content Type > Donation . In Donation , go to Manage fields tab, add following fields:

Donation settings

Setup 2: Set properties for Image field:

Donation settings

Setup 3: Go to Manage Dislay > Default tab, add following field:

Donation settings

Donation settings

Create Ads type

Setup 1: Navigate to Structure > Content Type. Click Add Content Type link to create content type Ads

Setup 2:Go to Manage Fields and add following fields:

Ads settings

Setup 3:Set properties for Image fields:

Ads settings

Create Event type

Setup 1: Navigate to Structure > Content Type. Click Add Content Type link to create content type Event

Setup 2:Go to Manage Fields and add following fields:

Event settings

Setup 3:Set properties for Image fields:

Event settings

Setup 4:Set properties for Gallery fields:

Event settings

Event settings

Setup 5:Set properties for Type fields:

Event settings

Event settings

Setup 6:Set properties for Product fields:

Event settings

Setup 7:Set properties for Donate Counter fields:

Event settings

Event settings

Setup 8:Set properties for Donate Total fields:

Event settings

Event settings

Setup 9:Set properties for Donate Goal fields:

Event settings

Event settings

Setup 10:Go to Manage display tab > Default set following properties:

Event settings

Event settings

Event settings

Event settings

Setup 11:Go to Manage display tab > Teaser set following properties:

Event settings

Event settings

Create Gallery type

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

Setup 2:Go to Manage Fields and add following fields:

Event settings

Setup 3:Set properties for Gallery fields:

Event settings

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

Gallery settings

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

Gallery settings

Create Product type

Setup 1: Navigate to Structure > Content Type. Click Add Content Type link to create content type Product

Setup 2:Go to Manage Fields and add following fields:

Product settings

Setup 3:Set properties for Image fields:

Product settings

Product settings

Setup 4:Set properties for Product fields:

Product settings

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

Product settings

Product settings

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

Product settings

Create Sponsor type

Setup 1: Navigate to Structure > Content Type. Click Add Content Type link to create content type Sponsor

Setup 2:Go to Manage Fields and add following fields:

Sponsor settings

Setup 3:Set properties for Image fields:

Sponsor settings

Setup 4:Set properties for Link fields:

Sponsor settings

Sponsor settings

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

Sponsor settings

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

Sponsor settings

Modify Users Profile structure

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

Users type

Setup 2: Navigate to People > Permissions > Roles add following role

Users type

Create Block types About

After installing many modules of Block

Setup 1: Navigate to Structure > Block types click Add block type link. Create block type About with following properties:

about block types

Setup 2: Go to Manager Display tab and set following properties:

about block types

Setup 3: Click Saveto button

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

Setup 1: In Field_content find field_content. Go to Manage fields tab, add following fields:

Field Collection settings

Step 2:Set properties for Images field

Field Collection settings

Step 3:Modify Manage Display tab, set following properties:

Field Collection settings

Setup 4: In Field_content find field_bean_content. Go to Manage fields tab, add following fields:

Field Collection settings

Step 5:Set properties for Images field

Field Collection settings

Step 6:Modify Manage Display tab, set following properties:

Field Collection settings

Step 7:Click Save button

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


Create Homepage

Headerline menu block

Front end Display

Header menu block

Configure block

Step 1: Navigate to Structure > Blocks, click Add Block link, Create Headerline info block with following properties:

Header menu

Header menu

Step 2: Navigate to Structure > Blocks, click Add Block link, Create Contact phone block with following properties:

Header menu

Header menu

Step 3: Navigate to Structure > Blocks, find Search form block, click configure link and set the following properties:

Header menu

Slideshow

Front end Display

Slideshow display

1. Create Slideshow view

Step 1: Navigate to Structure > Views, click Add new view, then create Bootstrap Slideshow view with following settings:

Slideshow configuration

Step 2: Click Continue and edit button. Next to steps below to set properties for following fields:

Slideshow configuration

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

Step 4: Set properties for Content: Body

Slideshow configuration

Step 5: Set properties for Content: Slideshow

Slideshow configuration

Step 6: Set properties for Global: Fieldset

Slideshow configuration

Step 7: Set properties for Global: Fieldset

Slideshow configuration

Step 8: Set properties for Link

Slideshow configuration

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

Slideshow configuration

Step 10: At FORMAT area, set following properties:

Slideshow configuration

Step 11: At FILTER CRITERIA area, Content: Type , Content: Slideshow:fid

Step 12: Click Add button to add Content: Type

Slideshow configuration

Step 13: Click Add button to add Content: Slideshow:fid

Slideshow configuration

Step 14: Click Save to save view

2. Configure Slideshow block

Step 1: Navigate to Structure > Blocks

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

Configure Slideshow block

Configure Slideshow block

Step 3: Click Save block button.

Together, We Can Build Awareness for Change : Custom block

Front end Display

Up to sale Block display

Create and configure Help us view block

1. Create Help us view

Step 1: Navigate to Structure > Views, click Add new view, then create Help us view with following settings:

Help us configuration

Step 2: Click Continue and edit button. Next to steps below to set properties for following fields:

Help us configuration

Step 3: At FIELDS area, click Add button to add fields: Content: Donate Goal , Content: Donate Total, Content: Link, Global: Fieldset, Content : Custom text , Content : Custom text .

Step 4: Set properties for Content: Donate Goal

Help us configuration

Step 5: Set properties for Content: Donate Total

Help us configuration

Step 6: Set properties for Global: Fieldset

Help us configuration

Step 7: Set properties for Global: Custom text

Help us configuration

Help us configuration

Refer to following HTML code:

							

Step 8: Set properties for Global: Custom text

Help us configuration

Help us configuration

Refer to following HTML code:

							
Training Equipment Building

Step 9: Set properties for Link

Help us configuration

Step 10: At FIELDS area, click Rearrange button, click remove Content: Tittle and set following arrange

Help us configuration

Step 11: At FILTER CRITERIA area : Content: Type, Content: Promoted to front page, Content: Sticky

Step 12: Click Add button to add Content: Type

Help us configuration

Step 13: Click Add button to add Content: Promoted to front page

Help us configuration

Step 14: Click Add button to add Content: Sticky

Help us configuration

Step 15: At HEADER area, click Global: Unfiltered text and set following header

Help us configuration

Step 16: At Advanced > OTHER area, add CSS class:

Help us configuration

Step 17: Click Save to save view

2. Configure Help us block

Step 1: Navigate to Structure > Blocks

Step 2: Find View: Help us click configure link, set following properties

Configure Help us block

Configure Help us block

Step 3: Click Save block button.

Create and configure Together, We Can Build Awareness for Change block

Step 1: Navigate to Structure > Blocks, click Add block link, Create Together, We Can Build Awareness for Change block with following properties:

Up to sale block

Up to sale block

Step 2: Click Save block button.

Change order block in the Panel First list

Step 1: Navigate to Structure > Blocks, find Panel First list, and change order:

Panel First  block

Step 2: Click Save block button.

Featured Posts: Custom block

Front end Display

Featured Posts Block display

Create and configure block

Step 1: Navigate to Structure > Blocks, click Add block link, Create Featured Posts block with following properties:

Featured Posts block

Featured Posts block

Step 2: Click Save block button.

Featured Post Tab block

Front end Display

Create a Blog view

Step 1: Navigate to Structure > Views, click Add new view, then create Blog view with following settings:

Blog configuration

Step 2: Click Continue and edit button. Next to steps below to set properties for following fields:

1. Edit Blog Block and set properties for following fiedls

Blog configuration

Step 3: At FIELDS area, click Add button to add fields: Field: Image, Content : Body

Step 4: Set properties for Field: Image

Blog configuration

Blog configuration

Step 5: Set properties for Content : Body

Blog configuration

Blog configuration

Step 6: At FIELDS area, click Rearrange button and set following arrange

Blog configuration

Step 7: At FORMAT Format: Grid area, click Settings and set following properties:

Blog configuration

Step 8: At FILTER CRITERIA area

Step 9:Click Add button to add Content: Type

Blog configuration

Step 10:Click Add button to add Content: Has taxonomy term

Blog configuration

Step 11:Click Add button to add Content: Field: Image:fid

Blog configuration

Step 12: At PAGE area, set User pager:

Blog configuration

Step 13: At PAGE area, set More link:

Blog configuration

Step 14: At Advanced > OTHER area, set CSS class

Blog configuration

Step 15: Click Title and set following properties:

Blog configuration

Step 16: Click Display name and rename the Blog Block block :

Step 17: Click Save to save view

2. Add Laster News block view and set following properties:

Step 1: Click Clone Blog Block and set following properties:

Blog configuration

Step 2: Click Display name and set following properties:

Blog configuration

Step 3: At FIELDS area, click Content: Body set following properties:

Blog configuration

Blog configuration

Step 4: At FILTER CRITERIA area, click Content: Has taxonomy termset following properties:

Blog configuration

Step 5: Click Save to save view

3. Create Event view and set following properties:

Step 1: Navigate to Structure > Views, click Add new view, then create Event view with following settings:

Event configuration

Step 2: Click Continue and edit button. Next to steps below to set properties for following fields:

Event configuration

Step 3: At FIELDS area, click Add button to add fields: Field: Image, Content : Body

Step 4: Set properties for Field: Image

Event configuration

Step 5: Set properties for Content: Body

Event configuration

Event configuration

Step 6: At FIELDS area, click Rearrange button and set following arrange

Event configuration

Step 7: At FILTER CRITERIA area

Step 8:Click Add button to add Content: Type

Event configuration

Step 9:Click Add button to add Content: Field: Image:fid

Event configuration

Step 10: At PAGE area, set More link:

Event configuration

Step 11: At HEADER area, click Add button add field Global: Unfiltered text

Step 12: Click Title and set following properties:

Event configuration

Step 13: Click Display name and rename the Block Tab block :

Step 14: Click Save to save view

4. Create Quick Tab and set following properties:

Step 1: Navigate to Structure > Quicktab , click Add Quicktabs Intance, then create Featured Post Tab quicktab with following settings:

Quicktab configuration

Quicktab configuration

Step 2: Click Edit quicktab Featured Post Tab and set following properties:

Quicktab configuration

Step 3: Click Save to save quicktab

5. Configuration block Quicktab Featured Post Tab

Step 1: Navigate to Structure > Blocks,find Featured Post Tab link, block with following properties:

Featured Posts Tab

Featured Posts Tab

Step 2: Click Save block button.

Sentences That Fit block view

Front end Display

Sentences That Fit display

1.Create Sentences That Fit view

Step 1: Navigate to Structure > Views, click Add new view, then create Sentences That Fit view with following settings:

Sentences That Fit display

Step 2: Click Continue and edit button. Next to steps below to set properties for following fields:

Sentences That Fit display

Step 3: At FIELDS area, Click Add button to add Global: Custom text, Content: Body, Global: Fieldset, Content: Link, Global: Custom text

Step 4:Set properties for Global: Custom text

Sentences That Fit display

Step 5:Set properties for Content: Body

Sentences That Fit display

Step 6:Set properties for Global: Fieldset

Sentences That Fit display

Step 7:Set properties for Content: Link

Sentences That Fit display

Step 8:Set properties for Global: Custom text

Sentences That Fit display

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

Sentences That Fit display

Step 10: At FILTER CRITERIA area, Click Add button to add Content: Nid

Step 11:Set properties for Content: Nid

Sentences That Fit display

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

Sentences That Fit display

Step 13: Click Save to save view

2. Configure Sentences That Fit view block

Step 1: Navigate to Structure > Blocks,find View: Sentences That Fit link, block with following properties:

Sentences That Fit display

Sentences That Fit display

Step 2: Click Save block button.

Scattered Polaroids Gallery block

Front end Display

Scattered Polaroids Gallery configuration

1. Create Recent Products view

Step 1: Navigate to Structure > Views, click Add new view, then create Scattered Polaroids Gallery view with following settings:

Scattered Polaroids Gallery configuration

Step 2: Click Continue and edit button. Next to steps below to set properties for following fields:

Scattered Polaroids Gallery configuration

Step 3: At FORMAT area, click Fiedls and set following properties:

Scattered Polaroids Gallery configuration

Step 4: At FORMAT Show : Scattered Polaroids area, click Settings and set following properties:

Scattered Polaroids Gallery configuration

Step 5: At FIELDS area, Click Add button to add Content: Gallery

Scattered Polaroids Gallery configuration

Step 6: At HEADER area, click Add button add field Global: Unfiltered text

Step 7: At Advanced > OTHER area, add CSS class:

Scattered Polaroids Gallery configuration

Step 8: Click Save to save view

2. Configure View: Scattered Polaroids Gallery block

Step 1: Navigate to Structure > Blocks, Find View: Scattered Polaroids Gallery click configure link, set following properties

Configure Scattered Polaroids Gallery configuration block

Configure Scattered Polaroids Gallery configuration block

Step 2: Click Save block button.

What's new block

Front end Display

What's new Block display

Create and configure block

Step 1: Navigate to Structure > Blocks, click Add block link, Create What's new block with following properties:

What's new block

What's new block

Step 2: Click Save block button.

Refer to following HTML code:

							

from 2011 to 2014

Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Donec id justo. Nulla sit amet est. Etiam vitae tortor.

Static block

Front end Display

Static Block display

1. Create and configure block type Static

Step 1: Navigate to Structure > Blocks Type, click Add block types link, Create Static block type with following properties:

Static block type

Step 2: Go to Manage Display tab link, and block type with following properties:

Static block type

Step 3: Click Save block type button.

2. Create Charity events Blocks and configure blocks

Step 1: Navigate to Content > Blocks, click Add blocks link, Create Charity events block type with following properties:

Static block type

Static block type

Step 2: Navigate to Structure > Blocks, find Charity events blocks link, with following properties:

Static block type

Step 3: Click Save blocks button.

3. Create Programs Blocks and configure blocks

Step 1: Navigate to Content > Blocks, click Add blocks link, Create Programs block type with following properties:

Static block type

Static block type

Step 2: Navigate to Structure > Blocks, find Programs blocks link, with following properties:

Static block type

Step 3: Click Save blocks button.

4. Create Statistic Donation Blocks and configure blocks

Step 1: Navigate to Content > Blocks, click Add blocks link, Create Statistic Donation block type with following properties:

Static block type

Static block type

Step 2: Navigate to Structure > Blocks, find Statistic Donation blocks link, with following properties:

Static block type

Step 3: Click Save blocks button.

5. Create Volunteers Blocks and configure blocks

Step 1: Navigate to Content > Blocks, click Add blocks link, Create Volunteers block type with following properties:

Static block type

Static block type

Step 2: Navigate to Structure > Blocks, find Volunteers blocks link, with following properties:

Static block type

Step 3: Click Save blocks button.

The World Face Extinction Everyday

Front end Display

The World Face Extinction Everyday display

1.Create The World Face Extinction Everyday view

Step 1: Navigate to Structure > Views, click Add new view, then create The World Face Extinction Everyday view with following settings:

The World Face Extinction Everyday display

Step 2: Click Continue and edit button. Next to steps below to set properties for following fields:

The World Face Extinction Everyday display

Step 3: At FIELDS area, Click Add button to add Global: Custom text, Content: Body, Global: Fieldset, Content: Link

Step 4:Set properties for Global: Custom text

The World Face Extinction Everyday display

Step 5:Set properties for Content: Body

The World Face Extinction Everyday display

Step 6:Set properties for Global: Fieldset

The World Face Extinction Everyday display

Step 7:Set properties for Content: Link

The World Face Extinction Everyday display

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

The World Face Extinction Everyday display

Step 9: At FILTER CRITERIA area, Click Add button to add Content: Nid

Step 10:Set properties for Content: Nid

The World Face Extinction Everyday display

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

The World Face Extinction Everyday display

Step 12: Click Save to save view

2. Configure The World Face Extinction Everyday view block

Step 1: Navigate to Structure > Blocks,find View: The World Face Extinction Everyday link, block with following properties:

The World Face Extinction Everyday display

The World Face Extinction Everyday display

Step 2: Click Save block button.

Sponor

Front end Display

Sponor display

1.Create Sponor view

Step 1: Navigate to Structure > Views, click Add new view, then create Sponor view with following settings:

Sponor display

Step 2: Click Continue and edit button. Next to steps below to set properties for following fields:

Sponor display

Step 3: At FIELDS area, Click Add button to add Field: Image, Content: Link

Step 4:Set properties for Field: Image

Sponor display

Step 5:Set properties for Content: Link

Sponor display

Sponor display

Step 6: At FIELDS area, click Rearrange button, remove Title and set following arrange

Sponor display

Step 7: At Advanced > OTHER area, add CSS class

Sponor display

Step 8: Click Setting jCarousel add set following properties:

Sponor display

Step 9: Click Save to save view

2. Configure Sponor view block

Step 1: Navigate to Structure > Blocks,find View: Sponor link, block with following properties:

Sponor display

Sponor display

Step 2: Click Save block button.

External links block

Front end Display

External links Block display

Create and configure block

Step 1: Navigate to Structure > Blocks, click Add block link, Create External links block with following properties:

External links block

External links block

Step 2: Click Save block button.

Refer to following HTML code:

							

Upcoming Events

Front end Display

Upcoming Events display

1.Create Upcoming Events block view

Step 1: Navigate to Structure > Views, find Event click Add Block create Block Footer

Step 2: Click Continue and edit button. Next to steps below to set properties for following fields:

Upcoming Events display

Step 3: At FIELDS area, Click Add button to add Content: Post Date

Step 4:Set properties for Content: Post Date

Upcoming Events display

Upcoming Events display

Upcoming Events display

Step 5:Set properties for Content: Title

Upcoming Events display

Step 6: At FIELDS area, click Rearrange button, removeField: Image and set following arrange

Upcoming Events display

Step 7: At Advanced > OTHER area, add CSS class

Upcoming Events display

Step 8: Click Format add set following properties:

Upcoming Events display

Step 9: At PAGE area, click Use Pager button, and set following arrange

Upcoming Events display

Step 10: Click Save to save view

2. Configure View: Events: Block Footer block

Step 1: Navigate to Structure > Blocks,find View: Events: Block Footer link and block with following properties:

Upcoming Events display

Step 2: Click Save block button.

Gallery

Front end Display

Gallery display

1.Create Gallery block view

Step 1: Navigate to Structure > Views, Click Add new view create view Gallery and set following properties:

Gallery display

Step 2: Click Continue and edit button. Next to steps below to set properties for following fields:

Gallery display

Step 3: At FIELDS area, Click Add button to add Content: Gallery

Step 4:Set properties for Content: Gallery

Gallery display

Gallery display

Step 5: At FIELDS area, click Rearrange button, remove Content: Title

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

Gallery display

Step 7: Click Display name add set name block: Footer Block

Step 8: Click Save to save view

2. Configure View: Photo Gallery: Footer Block block

Step 1: Navigate to Structure > Blocks,find View: Photo Gallery: Footer Block link and block with following properties:

Gallery display

Step 2: Click Save block button.

Welcome Hermio

Front end Display

Welcome display

1.Set following Page of Front Page view

Step 1: Navigate to Structure > Views, find view Front page and click Enable view. Go to Page link and set following properties:

Welcome display

Step 2: At FIELDS area, Click Add button to add Content: Title, Content: Body, Content: Link, Global: Fieldset, Field: Image

Step 3:Set properties for Content: Title. Find Rewrite results and set properties:

Welcome display

Step 4:Set properties for Content: Body

Welcome display

Step 5:Find Rewrite resultsat FIELDS Content: Body and set properties:

Welcome display

Step 6:Set properties for Content: Link

Welcome display

Step 7:Set properties for Field: Image

Welcome display

Step 8:Set properties for Global: Fieldset

Welcome display

Step 9: At FIELDS area, click Rearrange button and set following properties:

Welcome display

Step 10: At FIELDS CRITERIA area, click Add button to add Content : Type and set properties:

Welcome display

Step 11: At FIELDS CRITERIA area, click Rearrange button and set following properties:

Welcome display

Step 12: Click Title add set Title page: Welcome to Hermio!

Step 13: Click Fomat add set following properties:

Welcome display

Welcome display

Step 14: Click Show add set following properties:

Welcome display

Step 15: At HEADER click Add button to add Global: Unfiltered text set following properties:

Welcome display

Step 16: At Advanced > OTHER area, add CSS class

Welcome display

Step 17: Click Save to save view

Newsletter: Hermio newsletter block

Front end Display

Newsletter display

Configure block

Step 1: Go to Module, find Simplenews module. Click Permission link

Step 2: Find Simplenews section, set following properties:

Newsletter display

Step 3: Click on Configure link, set following properties

Newsletter display

Step 4: Go to Structure > Blocks, find Simplenews block. Click Configure link and set following properties:

Newsletter display

Newsletter display

Step 5: Click Save block button.

Contact Info

Front end Display

Contact Info display

Create and configure block

Step 1: Navigate to Structure > Blocks, click Add block link, Create Contact Info block with following properties:

Contact Info block

Contact Info block

Ste p 2: Click Save block button.

Refer to following HTML code:

							

We provide original, quality, attractive and functional design. Sed bibendum, arcu ac rhoncus adipiscing, nulla lectus dictum mauris, non volutpat massa ipsum in nibh. Nulla lectus dictum mauris, non volutpat.

5651 W. Pine Shade Place, Salt Lake City, USA

(803) 900-8067

info@hermio.com

Copyright: Custom block

Front end Display

Copyright display

Create & configure block

Step 1: Navigate to Structure > Blocks, click Add block link, Create Copyright block with following properties:

Copyright display

Copyright display

Step 2: Click Save block button.

Refer to following HTML code:

							

© Copyright 2014 Hermio. All rights reserved.

Powered by WeebPal: Custom block

Front end Display

Copyright display

Create & configure block

Step 1: Navigate to Structure > Blocks, click Add block link, Create Powered by WeebPal block with following properties:

Powered by WeebPal display

Powered by WeebPal display

Step 2: Click Save block button.

Refer to following HTML code:

							Site by: WeebPal
						

HomePage 2: Donation block

Front end Display

Blog configuration

1. Create Donation view page

Step 1: Navigate to Structure > Views, click Add new view, then create Donation view with following settings:

Donation configuration

Step 2: Click Continue and edit button. Next to below steps to set properties for following fields:

Donation configuration

Step 3: Att TITLE Title click and rename the Donation block

Step 4: At FORMAT Format area, click Setting and set following propesties:

Donation configuration

Step 5: At FILTER CRITERIA area, Click Add button to add Field : Image, Global: Fiedset, Content: Body, Content: Link field with following properties:

Step 6: Set properties for Field : Image

Donation configuration

Step 7: Set properties for Global: Fiedset

Donation configuration

Step 8: Set properties for Content: Body

Donation configuration

Donation configuration

Step 9: Set properties for Content:Link

Donation configuration

Step 10: At FIELDS area, click Rearrange button and set following arrange

Donation configuration

Step 11: At FILTER CRITERIA area , click Add button to add field Content: Sticky with following properties:

Donation configuration

Step 12: At PAGE User page area , click Settings following properties:

Donation configuration

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

Donation configuration

Step 14: Click Save button to save settings.

2. Configure View: Donation block

Step 1: Navigate to Structure > Blocks

Step 2: Find View: Donation click configure link, set following properties

Donation configuration

Donation configuration

Step 3: Click Save block button.

HomePage 2: Block Grid 3 detail

Front end Display

Blog configuration

1. Clone Block Grid 3 detail block view

Step 1: Click Clone Blog Block block view and set following properties:

Blog configuration

Step 2: Click Display name and set following properties:

Blog configuration

Step 3: At FIELDS area, click Add button to add fields: Content: Video, Content: Blog Type, Content: Post date

Step 4:Set propertiesContent: Body fields

Blog configuration

Step 5:Set properties Field: Image fields

Blog configuration

Step 6:Set properties Content: Video fields

Blog configuration

Blog configuration

Step 7:Set properties Content: Blog Type fields

Blog configuration

Step 8:Set properties Content: Post date fields

Blog configuration

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

Blog configuration

Step 10: At FILTER CRITERIA area, click Remove following fields: Content: Has taxonomy term, Content: Field: Image:fid

Step 11:At FORMAT Format: Grid area, click Settings and set following properties:

Blog configuration

Step 12:At HEADER area, click Add button to add field Global: Unfiltered text and set properties:

Blog configuration

Step 13:At PAGE User pager area, set properties:

Blog configuration

Step 14: At Advanced > OTHER area, set CSS class

Blog configuration

Step 15: Click Save to save view

2. Configure View: Blog: Block grid homepage 3 block

Step 1: Navigate to Structure > Blocks

Step 2: Find View: Blog: Block grid homepage 3 click configure link, set following properties

Configure Slideshow block

Configure Slideshow block

Step 3: Click Save block button.

HomePage 2: Help us block

Front end Display

Help us configuration

1. Clone Help us block view

Step 1: Navigate to Structure > Views, Find Help us link. Click Clone Block

Help us

Step 2: Click Save to view

2. Configure View: Help us block

Step 1: Navigate to Structure > Blocks

Step 2: Find View: Help us click configure link, set following properties

Help us configuration

1. Clone Help us block view

Help us configuration

Step 3: Click Save block button.

HomePage 2: Testimonials block

Front end Display

Testimonials configuration

1. Create Testimonials block view

Step 1: Navigate to Structure > Views, click Add new view, then create Testimonials view with following settings:

Testimonials configuration

Step 2: Click Continue and edit button. Next to below steps to set properties for following fields:

Testimonials configuration

Step 3: Att TITLE Title click and rename the Testimonials block

Step 4: At FORMAT Format area, click Setting and set following propesties:

Testimonials configuration

Step 5: At FILTER CRITERIA area, Click Add button to add Content: Body field with following properties:

Step 6: Set properties for Content: Body

Testimonials configuration

Testimonials configuration

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

Testimonials configuration

Step 8:At PAGE User pager area, set properties:

Testimonials configuration

Step 9:At PAGE More area, set properties:

Testimonials configuration

Step 10: At Advanced > OTHER area, set CSS class

Testimonials configuration

Step 11: Click Save to save view

2. Configure View: Testimonials block

Step 1: Navigate to Structure > Blocks

Step 2: Find Testimonials click configure link, set following properties

Testimonials configuration

Testimonials configuration

Step 3: Click Save block button.

HomePage 2: Welcome Hermio

Front end Display

Welcome display

1.Set following Page of Front Page view

Step 1: Navigate to Structure > Views, find view Front page and click Clone page view. Go to Page link and set following properties:

Welcome display

Step 2: At Display name set name page: Home 2

Step 3: At PAGE SETTINGS Path aere set path page view

Welcome display

Step 4: At HEADER click Remove button to remove Global: Unfiltered text

Step 5: Click Save to save view


Create Subpages

WeebPal banner

Step 1: Navigate to Structure > Block Find The default display of Weebpal Banner then configure:

WeebPal banner

WeebPal banner

Step 2: Click Save button

Blog Sidebar region

Front end Display

Quicktab

1.Create Blog Quictab view

Step 1: Navigate to Structure > View click Add new view, then create Blog Quicktab view and set following properties:

Blog Block

Step 2: Click Continue and edit button. Next to steps below to set properties for following fields:

Blog Block

Step 3: Click Display name add set name block

Blog Block

Step 4: At FIELDS area, click Add button to add fields: Field: Image, Content : Post Date

Step 5: Set properties for Field: Image

Blog Block

Step 6: Set properties for Content: Post Date

Blog Block

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

Blog Block

Step 8: Click Save to save view

2.Create Blog Quictab : Recent view

Step 1: Navigate to Structure > View,find Blog Quicktab > Most popular view, Click Clone Most popular page and set following properties:

Quicktab

Step 2: Click Display name add set name block

Quicktab

Step 3: Att TITLE Title add set name title

Quicktab

Step 4: Click Save to save view

3. Create Quicktab : Blog Sidebar

Step 1: Navigate to Structure > Quicktab > Add Quicktab Instance create Blog Sidebar and block with following properties:

Quicktab

Quicktab

Step 2: Click Save block button.

4. Configure Blog Sidebar block

Step 1: Navigate to Structure > Blocks,find Blog Sidebar Block. Click configure link and block with following properties:

Quicktab

Quicktab

Step 2: Click Save block button.

Photo Gallery region

Front end Display

Photo Gallery

1.Create Photo Gallery : Blog Block view

Step 1: Navigate to Structure > View, find Photo Gallery : Footer Block page view. Click Clone Footer Block button and set following properties:

Photo Gallery

Step 2: Click Display name add set name block

Photo Gallery

Step 3: At FIELDS area, Click Content : Gallery link and set following properties:

Photo Gallery

Step 4: At FORMAT Format area, Click Setting link and set following properties:

Photo Gallery

Step 5: At PAGER > User pager area, click link and set following properties:

Photo Gallery

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

Photo Gallery

Step 7: Click Save to save view

2. Configura View: Photo Gallery: Blog Block block

Step 1: Navigate to Structure > Blocks,find View: Photo Gallery: Blog Block link and block with following properties:

Photo Galley

Photo Galley

Step 2: Click Save block button.

Advertisement region

Front end Display

Ads

1.Create Ads view

Step 1: Navigate to Structure > Views, click Add new view, then create Ads view with following settings:

Ads

Step 2: Click Continue and edit button. Next to steps below to set properties for following fields:

Ads

Step 3: At FIELDS area, click Add button to add fields: Field: Image, Content : Link

Step 4: Set properties for Field: Image

Ads

Step 5: Set properties for Content: Link

Ads

Ads

Step 6: At FIELDS area, click Rearrange button, Click removeContent: Title link and set following arrange

Ads

Step 7: At Advanced > OTHER area, set CSS class

Ads

Step 8: Click Save to save view

2. Configura View: Ads block

Step 1: Navigate to Structure > Blocks,find View: Ads link and block with following properties:

Ads

Ads

Step 2: Click Save block button.

Configure the block Sidebar First in the following order

Navigate to Structure > Block find Sidebar Fisrt area and configure as image below:

Sidebar First

About page

1. Create About content

Step 1: Navigate to Content > Add content, find Basic page link click and set following properties:

about hermio

about hermio

Step 2: Click Save button

2.Create About Hermio block

Front end Display

about hermio

Step 1: Navigate to Content >Bloks, click Add block link, Create About Hermio block with following properties:

about hermio

about hermio

about hermio

about hermio

Step 2: Click Save button content blocks

3. Configuration block About Hermio

Step 1: Navigate to Structure > Blocks,find About Hermio link, block with following properties:

about hermio

about hermio

Step 2: Click Save block button.

4.Create What we do view

Front end Display

What we do

Step 1: Navigate to Structure > Views, click Add block link, Create What we do block with following properties:

What we do

Step 2: Click Continue and edit button. Next to below steps to set properties for following fields:

What we do

Step 3: At FIELD area, Click Add button to add Field: Image, Content: Body

Step 4:Set properties for Field: Image

What we do

Step 5:Set properties for Content: Body

What we do

What we do

Step 6: At FIELDS area, click Rearrange button. Click remove button Content: Title and set following arrange

What we do

Step 7: At FILTER CRITERIA area, Click Add button to add Content: Nid field with following properties:

What we do

Step 8: At HEADER area, add Global: Text area:

What we do

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

What we do

Step 10: Click Save to save all settings

5. Configuration block View: About: What we do

Step 1: Navigate to Structure > Blocks,find View: About: What we do link, block with following properties:

What we do

What we do

Step 2: Click Save block button.

6.Create Our Team view

Front end Display

Our Team

Step 1: Navigate to Structure > Views, click Add block link, Create Our Team block with following properties:

Our Team

Step 2: Click Continue and edit button. Next to below steps to set properties for following fields:

Our Team

Step 3: At FIELD area, Click Add button to add User: Picture, User: Full Name, User: Position, Field: Description, User: Email, User: Phone, Global: Fieldset, User: Facebook, User: Gplus, User: LinkedIn, User: Twitter

Step 4:Set properties for User: Picture

Our Team

Step 5:Set properties for User: Full Name

Our Team

Step 6:Set properties for User: Position

Our Team

Step 7:Set properties for Field: Description

Our Team

Our Team

Step 8:Set properties for User: Email

Our Team

Our Team

Refer to following HTML code:

							 [field_email]
						

Step 9:Set properties for User: Phone

Our Team

Our Team

Refer to following HTML code:

								 [field_phone]
							

Step 10:Set properties for Global: Fieldset

Our Team

Step 11:Set properties for User: Facebook

Our Team

Our Team

Refer to following HTML code:

								
							

Step 12:Set properties for User: Gplus

Our Team

Our Team

Refer to following HTML code:

								
							

Step 13:Set properties for User: LinkedIn

Our Team

Our Team

Refer to following HTML code:

								
							

Step 14:Set properties for User: Twitter

Our Team

Our Team

Our Team

Refer to following HTML code:

								
							

Step 15: At FIELDS area, click Rearrange button. Click remove button User: Name and set following arrange

Our Team

Step 16: At FILTER CRITERIA area, click Add button to add field User: Roles and set following properties:

Our Team

Step 17: At HEADER area, add Global: Text area and set properties:

Our Team

Step 18: At Advanced > OTHER area, add CSS class:

Our Team

Step 19: Click Save to save all settings

7. Configuration block View: Our Team

Step 1: Navigate to Structure > Blocks,find View: Out Team link, block with following properties:

Our Team

Our Team

Step 2: Click Save view button.

Blog Default page

Create Featured Stories & Updates block

Step 1: Navigate to Structure > Blocks, click Add block link. Create Featured Stories & Updates block with following properties:

Blog

Blog

Step 2: Click Save button.

Blog Full Width page

Create Blog Full Width page view

Step 1: Navigate to Structure > View,find Blog view link and click Add > Page button and set following properties:

Blogconfiguration

Step 2: At FIELDS area, click Add button to add fields: Field: Image, Content : Body, Content: Video, Content: Blog Type, Content: ShareThis Link, Content: Post date, Content: Link

Step 3: Set properties for Field: Image

Blogconfiguration

Blogconfiguration

Step 4: Set properties for Content : Body

Blogconfiguration

Step 5: Set properties for Content: Video

Blogconfiguration

Blogconfiguration

Step 6: Set properties for Content: Blog Type

Blogconfiguration

Step 7: Set properties for Content: ShareThis Link

Blogconfiguration

Step 8: Set properties for Content: Post date

Blogconfiguration

Step 9: Set properties for Content: Link

Blogconfiguration

Step 10: At FIELDS area, click Rearrange button and set following arrange

Blogconfiguration

Step 11: At PAGE SETTING Path area, click Settings and set following properties:

Blogconfiguration

Step 12: At TITLE Title area, click Settings and set following properties:

Blogconfiguration

Step 14: At FILTER CRITERIA area, click Rearrange button and Remove Content: Has taxonomy term (= Blog)

Step 15: At PAGE area, set User pager:

Blog configuration

Step 16: At PAGE area, set More link:

Blog configuration

Step 17: At HEADER click Add button to add Global: Unfiltered text set following properties:

Welcome display

						

Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc vel aliquet ante. Curabitur massa elit, pretium et tempus ultricies, dignissim vel quam.

Step 18: At Advanced > OTHER area, set CSS class

Blog configuration

Step 19: At Display name click and rename page :

Blog configuration

Step 20: Click Save to save view

Blog Grid page

Create Blog Grid page view

Step 1: Navigate to Structure > View,find Blog view > Blog Full With page view link and click clone Blog Full With button and set following properties:

Blogconfiguration

Step 2: Click Display name and rename the Blog Full Width block :

Blogconfiguration

Step 3: At FORMAT Format area, click link and set following propesties:

Blogconfiguration

Step 4: At FORMAT Setting area, click link and set following propesties:

Blogconfiguration

Step 5: At FIELDS area, click Field: Image field and set properties:

Blogconfiguration

Step 5: At FIELDS area, click Rearrange button and Remove Content: ShareThis Link, Content: Link and set following propesties:

Blogconfiguration

Step 6: At PAGE SETTING Path area, click Settings and set following properties:

Blogconfiguration

Step 7: At PAGE SETTING Menu area, click Settings and set following properties:

Blogconfiguration

Step 8: At PAGE area, set User pager:

Blog configuration

Step 9: At Advanced > OTHER area, set CSS class

Blog configuration

Step 10: Click Save to save view

Event page

Add Event page view

Step 1: Navigate to Structure > View, find Event view. Click Add Page button and set following properties:

Event configuration

Step 2: Att TITLE Title click and rename the Upcoming Events page:

Event configuration

Step 3: At FORMAT Format area, click Setting and set following propesties:

Event configuration

Step 4: At Advanced > RELATIONSHIPS area, click Add button to add fields:

Event configuration

Step 5: At FIELDS area, click Add button to add fields: Global: Fieldset, Field: Image, Content: Gallery, Content: Video, (term from field_type)Field: Image, Content: Post date, Content: Body, Content: Donate Counter, Content: Donate Total, Content: Donate Goal, Global: Custom text and set following propesties:

Step 6: Set properties for Field: Image

Event configuration

Event configuration

Step 7: Set properties for Global: Fieldset

Event configuration

Step 8: Set properties for Content: Gallery

Event configuration

Event configuration

Event configuration

Event configuration

Event configuration

Step 9: Set properties for Content: Video

Event configuration

Event configuration

Step 10: Set properties for (term from field_type)Field: Image

Event configuration

Event configuration

Step 11: Set properties for Content: Post Date

Event configuration

Step 12: Set properties for Content: Body

Event configuration

Event configuration

Step 13: Set properties for Content: Donate Counter

Event configuration

Event configuration

Step 14: Set properties for Content: Donate Total

Event configuration

Step 15: Set properties for Content: Donate Goal

Event configuration

Step 16: Set properties for Global: Custom text

Event configuration

Refer to following HTML code:

						
[field_donate_counter] [field_donate_total] / [field_donate_goal]

Step 17: At FIELDS area, click Rearrange button and set following arrange

Event configuration

Step 18: At PAGE SETTING Path area, click Settings and set following properties:

Event configuration

Step 19: At PAGE area, set User pager:

Event configuration

Event configuration

Step 20: At Advanced > OTHER area, set CSS class

Event configuration

Step 21: Click Save to save view

Event Full Width page

1. Create Upcoming Events content

Step 1: Navigate to Content > Add content, find Basic page link click and set following properties:

Event configuration

Event configuration

Step 2: Click Save button

2. Add Event Full Width block view

Step 1: Navigate to Structure > View, click Add block button and set following properties:

Event configuration

Step 2: Att TITLE Title click and rename title:

Event configuration

Step 3: At FORMAT Format area, click Setting and set following propesties:

Event configuration

Step 4: At FIELDS area, click Add button to add fields: Global: Fieldset, Content: Gallery, Content: Video, (term from field_type)Field: Image, Global: Fieldset, Content: Post date, Content: Donate Counter, Content: Donate Total, Content: Donate Goal, Global: Custom text and set following propesties:

Step 5: Set properties for Field: Image

Event configuration

Step 6: Set properties for Global: Fieldset

Event configuration

Step 7: Set properties for Content: Gallery

Event configuration

Event configuration

Event configuration

Event configuration

Step 8: Set properties for Content: Video

Event configuration

Event configuration

Step 9: Set properties for (term from field_type)Field: Image

Event configuration

Event configuration

Step 10: Set properties for Global: Fieldset

Event configuration

Step 11: Set properties for Content: Post Date

Event configuration

Step 12: Set properties for Content: Body

Event configuration

Event configuration

Step 13: Set properties for Content: Donate Counter

Event configuration

Event configuration

Step 14: Set properties for Content: Donate Total

Event configuration

Step 15: Set properties for Content: Donate Goal

Event configuration

Step 16: Set properties for Global: Custom text

Event configuration

Refer to following HTML code:

				
[field_donate_counter] [field_donate_total] / [field_donate_goal]

Step 17: At FIELDS area, click Rearrange button and set following arrange

Event configuration

Step 18: At PAGE area, set More:

Event configuration

Step 19: At Advanced > OTHER area, set CSS class

Event configuration

Step 20: Click Save to save view

Donation page

Add Donation view page

Step 1: Navigate to Structure > Views, find Donation block view. Click Add page button. Next to below steps to set properties for following fields:

Donation configuration

Step 2: Att TITLE Title click and rename the Get Involved page:

Donation configuration

Step 3: At PAGE SETTINGS Path area , set properties:

Donation configuration

Step 4: At FILTER CRITERIA area

Step 5: Set properties for Content: Body

Donation configuration

Step 6: At FIELDS area, click Rearrange button and set following arrange

Donation configuration

Step 7: At HEADER area, click Add button and set the following properties:

Donation configuration

Step 8: At PAGE User page area , click Settings following properties:

Donation configuration

Donation configuration

Step 9: At FILTER CRITERIA area , click Remove button to field Content: Sticky

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

Donation configuration

Step 11: Click Save button to save settings.

Donation detail page

1. Add Browse More block view

Step 1: Navigate to Structure > Views, find Donation block view. Click clone Block button. Next to below steps to set properties for following fields:

Donation configuration

Step 2: At Display name click and rename the Browse More block view

Step 3: At TITLE Title click and rename the Browse More title block view

Step 4: At FORMAT Format area, click and set properties:

Donation configuration

Step 5: At FILTER CRITERIA area

Step 6: Set properties for Content: Body

Donation configuration

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

Donation configuration

Step 8: At PAGE User page area , click Settings following properties:

Donation configuration

Step 9: At FILTER CRITERIA area , click Remove button to field Content: Sticky

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

Donation configuration

Step 11: Click Save button to save settings.

2. Configure View: Browse More block

Step 1: Navigate to Structure > Blocks

Step 2: Find View: Donation click configure link, set following properties

Donation configuration

Donation configuration

Step 3: Click Save block button.

Shop page

Create Shop view page

Step 1: Navigate to Structure > Views, click Add new view, then create Shop view with following settings:

Shop configuration

Step 2: Click Continue and edit button. Next to below steps to set properties for following fields:

Shop configuration

Step 3: At Advanced > RELATIONSHIPS area, add Content: Product :

Shop configuration

Step 4: At FILTER CRITERIA area, Click Add button to add Content: Image, Commerce Product: Price, Commerce Product: Add to Cart form field with following properties:

Step 5: Set properties for Content: Image

Shop configuration

Shop configuration

Step 6: Set properties for Product: Price:

Shop configuration

Step 7: Set properties for Commerce Product: Add to Cart form:

Shop configuration

Shop configuration

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

Shop configuration

Step 9: At HEADER area, click Add button and set the following properties:

Shop configuration

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

Shop configuration

Step 11: Click Save button to save settings.

Shop Full Width page

1. Add Shop Full Width page view

Step 1: Navigate to Structure > View, find Shop view click Add Page button and set following properties:

Shop configuration

Step 2: Att Display name click and rename the Shop width sidebar page:

Shop configuration

Step 3: Att FORMAT > Format are, click Setting and set following propperties:

Shop configuration

Step 4 At FIELDS area and set properties for Content: Title:

Shop configuration

Step 5: Att PAGE SETTING Path are, click link and set following propperties:

Shop configuration

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

Shop configuration

Step 7: Click Save to save view

2. Add Most popular block view

Step 1: Navigate to Structure > View, find Shop view click Add Block button and set following properties:

Shop configuration

Step 2: Att Display name click and rename the Most popular block:

Shop configuration

Step 3: Att FORMAT > Format are, click Show and set following propperties:

Shop configuration

Step 4 At FIELDS area and set properties for Content: Image, Commerce Product: Price, Content: Title

Step 5: Set properties for Content: Image

Shop configuration

Shop configuration

Step 6: Set properties for Commerce Product: Price

Shop configuration

Step 7: Set properties for Content: Title

Shop configuration

Step 8: At FIELDS area, click Rearrange button. Click link Remove: Commerce Product: Add to Cart form and set following arrange

Shop configuration

Step 9: Att PAGER > User Pager are, click link and set following propperties:

Shop configuration

Shop configuration

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

Shop configuration

Step 11: At SORT CRITERIA area, click Content: Post date link and set following properties:

Shop configuration

Step 12: Click Save to save view

3. Add Recent block view

Step 1: Navigate to Structure > View, find Shop > Most popular block view click Clone Most popular button and set following properties:

Shop configuration

Step 2: Att Display name click and rename the Most popular block:

Shop configuration

Step 3: At SORT CRITERIA area, click Content: Post date link and set following properties:

Shop configuration

Step 4: Click Save to save view

4. Create Quicktab Shop sidebar

Front end Display

Shopping cart

Step 1: Navigate to Structure > Quicktab > Add Quicktab Instance create Shop Sidebarand block with following properties:

Quicktab

Quicktab

5. Configure Blog Sidebar block

Step 1: Navigate to Structure > Blocks,find Shop Sidebar Block link and block with following properties:

Quicktab

Quicktab

Step 2: Click Save block button.

Contact information block

Front end Display

Contact information

1. Create Contact information view

Step 1: Navigate to Structure > Views, click Add block link, Create Contact information block with following properties:

Contact information

Step 2: Click Continue and edit button. Next to below steps to set properties for following fields:

Contact information

Step 3: At FILTER CRITERIA area, Click Add button to add Global: Custom text, Content: Body, Content: Link field with following properties:

Step 4: Set properties for Global: Custom text

Contact information

Refer to the following HTML code:

				

Contact Information

Glocal Foundation, Inc.
12345 Name Snow Dr.
Keller, Tx 76248


T: 817-123-4567
F: 817-123-4568


info@hermiofoundation.org
Share this site with a friend


Step 5: Set properties for Content: Body

Contact information

Contact information

Step 6: Set properties for Content: Link

Contact information

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

Contact information

Step 8: At FILTER CRITERIA area, Click Add button to add Content: Nid field with following properties:

Contact information

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

Contact information

Step 10: Click Save to save all settings

2.Contact information block

Step 1: Navigate to Structure > Blocks Find View: Contact information click configure link, set following properties

Contact information

Contact information

Step 3: Click Save block button.

Contact

First, we need to make sure that Webform module installed.

1. Create webform type

Step 1: Navigate to Content > Add content > Webform

Contact

Step 2: Click URL path settings tab, set the following properties:

Contact

Step 3: Click Save button.

Step 4: Navigate to Webform tab and Add fields:

Contact

Step 5: Click Save button.

2. Create Contact Us block

Step 1: Navigate to Structure > Blocks, click Add block link. Create Contact Us block with following properties:

Contact

Contact

Step 2: Click Save button.

Shopping cart page

1.Configure Shopping cart block view

Step 1: Navigate to Structure > Views, find Shopping cart block link. Click Edit and set following properties:

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

Shopping cart

Step 3: Click Save to save all settings

2.Configure Shopping cart form view

Step 1: Navigate to Structure > Views, find Shopping cart form link. Click Edit and set with following properties:

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

Shopping cart

Step 3: Click Save to save all settings


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: hermio/sites/all/themes/hermio, you can find file hermio.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: hermio/sites/all/themes/hermio/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: hermio/sites/all/themes/hermio, you can find file, open file hermio.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: hermio/sites/all/themes/hermio/images

Background Configuration

Step 5: Navigate to the directory: hermio/sites/all/themes/hermio/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 hermio 7.32, 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. Hermio 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

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.