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

1. Forum Plus Package

Included content:

  • README.txt
  • Forum Plus theme: forum_plus-7.x-1.0.zip
  • Demo Profile for Forum Plus: forum-plus-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. Screenshots

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

Forums

Calendar

FAQ

Articles

Articles Three Columns

Articles Two Columns

Articles Detail

Blogs

Blogs Mix

Blogs Teaser

Blogs Three Columns

Blogs Two Columns

Blogs Default

Blogs Detail

What's New

Color

Contact Us

Contact Us 2

Multi colors

4. Module requirements

Core Modules

  • Blog
  • Contact
  • Update manager

Third-party Modules

  1. Addtoany
  2. Admin Menu
  3. Advanced Forum
  4. Author Pane
  5. Bean
  6. Better Exposed Filters
  7. Block Class
  8. Calendar
  9. Captcha
  10. Colorbox
  11. Countries
  12. Contact Form Blocks
  13. Contact Forms
  14. Chaos tools
  15. Date
  16. Entity
  17. Entity Reference
  18. Facet Api
  19. Eva
  20. FAQ
  21. Field Collection
  22. Features
  23. Fivestar
  24. Field Group
  25. Flexslider
  26. Flickr
  27. Fontawesome
  28. i18n
  29. Gallery Formatter
  30. Google Analytics
  31. Gravatar
  32. i18n
  33. Jcarousel
  34. Jquery Update
  35. Jump Menu
  36. Lang Dropdown
  37. Languageiconse
  38. Libraries
  39. Link
  40. Manage Multiple Terms
  41. M Menu Breadcrumb
  42. Message
  43. Modal Forms
  44. Module Filter
  45. Newsletter
  46. Node Class
  47. Page Title
  48. Path Auto
  49. Quicktabs
  50. Rate
  51. Remember Me
  52. Rules
  53. Sharethis
  54. Shortcode
  55. Sitemap
  56. Strongarm
  57. Tag Clouds
  58. Taxonomy Menu
  59. TB Megamenu
  60. Token
  61. Userpickit
  62. Variable
  63. Video embed Field
  64. Views
  65. Views Bulk Operations
  66. Views Field View
  67. Views Fieldsets
  68. Views Slideshow
  69. Votingapi
  70. Webform
  71. Webform Hints
  72. Wee Shortcode
  73. Wysiwyg

Required libraries by the modules

  • Colorbox
  • Ddslick
  • Flexslider
  • Fontawesome
  • Jquery Cycle
  • Jquery Jcarousel
  • Form Defaults

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.

1. Download one theme package of your choice (e.g. ForumPlus)

Files included:

  • README.txt
  • Forum Plus theme: forum_plus-7.x-1.0.zip
  • Demo Profile for Forum Plus: forum-plus-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.

  • forum_plus-7.x-1.0.zip

2. Extract forum_plus-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. forum-plus) 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"

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 Forum Plus Demo

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

Installation ForumPlus 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 ForumPlus 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 Forum Plus Theme

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

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

3. Install Required Modules

Now that you've enabled Forum Plus 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 forum_plus-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

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

Vocabulary

Then, add terms for each vocabulary

2. Terms of Categories:

Vocabulary

3. Terms of: Section

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

Video Embed Styles Configuration

1. Go to Module, find Video Embed Fields module. Click Enable button

2. Navigate to Configuration, In MEDIA area, click Video Embed Style, then create video embeb styles as the following:

Video Embed Styles

3. Create Four Columns and set properties video embed

Video Embed Styles

4. Find Vimeo link and set properties for Four Columns

Video Embed Styles

5. Create Large and set properties video embed

Video Embed Styles

6. Find Vimeo link and set properties for Large

Video Embed Styles

7. Create Three Columns and set properties video embed

Video Embed Styles

8. Find Vimeo link and set properties for Three Columns

Video Embed Styles

9. Create Two Columns and set properties video embed

Video Embed Styles

10. Find Vimeo link and set properties for Two Columns

Video Embed Styles

FlexSlider Configuration

1. Go to Module, find FlexSlider Fields, FlexSlider View Style, FlexSlider Slider module. Click Enable button

2. Navigate to Configuration, In MEDIA area, click FlexSlider, then create flexSlider as the following:

flexsdider

3. Find Navigation and Control Settings link and set following properties:

flexsdider

4. Click Save button

Content type configuration

Modify Blog entry type

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

Blog Entry types

2. Set properties for Images field

Blog Entry types

3. Set properties for Vote field

Blog Entry types

4. Set properties for Extra content field

Blog Entry types

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

Blog Entry

6. Modify Teaser tab, set following properties:

Blog type

7. Click Save button

Modify Article type

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

Article

2. Set properties for Sections field

Article

3. Set properties for Category field

Article

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

Article

5. Modify Teaser tab, set following properties:

Article

6. Click Save button

Modify Forum topic type

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

Forum topic

2. Set properties for Forums field

Forum topic

Forum topic

3. Set properties for Body field

Forum topic

4. Set properties for Vote field

Forum topic

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

Forum topic

6. Modify Teaser tab, set following properties:

Forum topic

7. Click Save button

Modify Webform type

1. Navigate to Structure > Content Type > Webform . In Webform , go to Manage Dislay > Default tab, set following fields:

Webform settings

2. Click Save button

Create Product type

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

2. Go to Manage Fields and add following fields:

Product settings

3. Set properties for Image fields:

Product settings

4. Click Save button

Create Video type

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

2. Go to Manage Fields and add following fields:

Video settings

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

Video settings

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

Video settings

5. Click Save button

Configure Field Collection

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

Field Collection settings

1. In field_extra_content. Click manage fields tab, add following fields:

Field Collection settings

2. Set properties for Images field

Field Collection settings

3. Modify Manage Display tab, set following properties:

Field Collection settings

4. Click Save button

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


Create Homepage

Headline menu block

Front end Display

Header menu block

Configure block

1. Navigate to Structure > Blocks, click Add Block link, Create Social Menu block with following properties:

Header menu

Header menu

Refer to following HTML code:

<ul class="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>
<li><a class="fa fa-rss" href="#" title="RSS"><span>RSS</span></a></li>
</ul>
    

2. Navigate to Structure > Menu, find User Menu , click list link and set with following properties:

Header menu

3. Navigate to Structure > Blocks, find User Menu block, click configure link and set with following properties:

Header menu

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

Header menu

5. Navigate to Structure > Blocks, find Headline block area and change the order

Header menu

6. Click Save button

Welcome forum

Front end Display

Welcome

1. Navigate to Structure > Blocks, click Add Block link, Create Welcome to forum block with following properties:

Welcome

Welcome

Refer to following HTML code:

<span class="welcome-message">Welcome To Forum Plus <img src="<?php print base_path(); ?><?php print path_to_theme()?>/images/logo.png" /></span>

2. Click Save button

Main menu

Front end Display

Main menu

1. Navigate to Structure > Blocks, find Main menu block, click configure link and set the following properties:

Main menu

2. Click Save button

Date

Front end Display

Date

1. Navigate to Structure > Blocks, click Add Block link, Create Date block with following properties:

Date

Date

Refer to following PHP code:

  <?php echo date('l, F d, Y'); ?>
    

2. Click Save button

Custom block

Front end Display

Custom

1. Navigate to Structure > Blocks, click Add Block link, Create Custom block block with following properties:

Custom

Custom

Refer to following PHP code:

If this is your first visit, be sure to check out the <a href="<?php echo base_path(); ?>/faq-page" title="FAQ">FAQ</a> by clicking the link above. You may have to <a href="<?php echo base_path(); ?>/user/register" title="register ">register </a>before you can post click the register link above to proceed. To start viewing messages, select the forum that you want to visit from the selection below.  
    

2. Click Save button

Forum content

Front end Display

 Forum Content

1. Add Forums

1. Navigate to Structure > Forums, click Add container or Add forum

Forums content

2. Click Save button

2. Configure Advanced Forum

1. Navigate to Configuration > Content authoring > Advanced Forum and set following properties:

Forums content

Forums content

2. Click Save button

Language

Front end Display

Language

1. Create Language French

1. Navigate to Configuration > Regional and language > Languages, click Add Languages, then create French language

Languages

2. Click Apply language button

2. Configure Language switcher dropdown (User interface text) block

1. Navigate to Structure > Blocks, find Language switcher dropdown (User interface text) block, click configure link and set the following properties:

Language

Language

2. Click Save button

New Forum Posts block

Front end Display

New Forum Posts

1. Create New Forum Posts view

1. Navigate to Structure > Views, click Add new view, then create New Forum Posts view with following settings:

New Forum Posts

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

New Forum Posts configuration

3. At Advanced > RELATIONSHIPS area, add Relationships.

New Forum Posts configuration

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

5. Set properties for User: Picture

New Forum Posts configuration

6. Set properties for User: Name

New Forum Posts configuration

7. Set properties for Content: Post date

New Forum Posts configuration

8. Set properties for Content: Title

New Forum Posts configuration

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

New Forum Posts configuration

10. Click Save to save view

2. Configure New Forum Posts block

1. Navigate to Structure > Blocks Find View: New Forum Posts click configure link, set following properties

Configure New Forum Posts block

2. Click Save block button.

Tags in Tags block

Front end Display

Tags in Tags Block display

Create and configure block

1. Navigate to Structure > Blocks, Find Tags in Tags link, Create configure block with following properties:

Tags in Tags

Tags in Tags

2. Click Save block button.

Active forum topics block

Front end Display

Active forum topics

1. Navigate to Structure > Blocks, find Active forum topics block, then set the following properties:

Active forum topics

Active forum topics

2. Click Save button

About US block

Front end Display

About US display

Create and configure block

1. Navigate to Structure > Blocks, click Add block link, Create About US block with following properties:

About US

2. Click Save block button.

Refer to following HTML code:

        

We are a web development team with a concentration on open-source Content Management Systems (CMS), especially drupal.

Links Menu

Front end Display

Links Menu

1. Create Links Menu

1. Navigate to Structure > Menu, click Add menu, then create Links Menu

Links Menu

2. Click Save button

2. Configure Links Menu

1. Navigate to Structure > Blocks, find Links menu block, click configure link and set the following properties:

Links Menu

2. Click Save button

Recent Topic block

Front end Display

Recent topic

1. Create Recent Topic view

1. Navigate to Structure > Views, click Add new view, then create Recent Topic view with following settings:

Recent topic

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

Recent Topic configuration

3. At Advanced > RELATIONSHIPS area, add Relationships:

Recent Topic configuration

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

5. Set properties for User: Picture

Recent Topic configuration

6. Set properties for User: Name

Recent Topic configuration

7. Set properties for Content: Post date

Recent Topic configuration

8. Set properties for Content: Title

Recent Topic configuration

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

Recent Topic configuration

10. At FILTER CRITERIA area, click Add button to add fields: fields

Recent Topic configuration

11. At Advanced > OTHER area, add CSS class

Recent Topic configuration

12. Click Save to save view

2. Configure Recent topic block

1. Navigate to Structure > Blocks Find View: Recent topic click configure link, set following properties

Configure Recent topic block

2. Click Save block button.

Contact Info block

Front end Display

Contact Info display

1.Create and configure Contact Info block

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

Contact Info block

Contact Info block

2. Click Save block button.

Refer to following HTML code:

<div class="contact-info">
<address class="contact-info">
<span>(123) 123-4567<span>
<span>7801 NW 15 Street Ste #CO32314<br>Doral, Florida 33126</span>
<span>Email: <a href="mailto:contact@weebpal.com">contact@weebpal.com</a></span>
</address> </div>
        

2. Create and configure Social Menu 1 block

1. Navigate to Structure > Blocks, click Add block link, Create Social Menu 1 block with following properties:

Social Menu 1 block

Social Menu 1 block

2. Click Save block button.

Refer to following HTML code:

Footer menu block

Footer menu

1. Create Footer menu

1. Navigate to Structure > Menu, click Add menu, then create Footer menu

Footer menu

2. Click Save button

2. Configure Footer menu

1. Navigate to Structure > Blocks, find Footer menu block, click configure link and set the following properties:

Footer menu

2. Click Save button

Copyright: Custom block

Front end Display

Copyright display

Create & configure block

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

Copyright display

Refer to following HTML code:


      

2. Click Save block button.


Create Subpages

Sidebar First: Sections block

Front end Display

Sections

1. Add link menu Section

1. Navigate to Structure > Menu find Sections menu and add link menu:

Sections

2. Click Save button

2. Configure Sections block

1. Navigate to Structure > Blocks find Sections block. Click configure link and set following properties:

Sections

Sections

2. Click Save block button.

Sidebar First: Categories block

Front end Display

Categories

1. Add link menu Categories

1. Navigate to Structure > Menu find Categoriess menu and add link menu:

Categories

2. Click Save button.

2. Configure Categories block

1. Navigate to Structure > Blocks find Categories block. Click configure link and block with following properties:

Categories

Categories

2. Click Save block button.

Sidebar First: Who's new block

Front end Display

Who's new

1. Navigate to Structure > Blocks find Who's new block. Click configure link and block with following properties:

Who's new

Who's new

2. Click Save block button.

Sidebar First: Who's online block

Front end Display

Who's online

1. Navigate to Structure > Blocks find Who's online block. Click configure link and block with following properties:

Who's online

Who's online

2. Click Save block button.

Sidebar First: Quicktab region

Front end Display

Quicktab

1. Create Recent Blogs view

1. Navigate to Structure > View click Add new view, then create Recent Blogs view and set following properties:

Entities Block

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

Entities Block

3. Click Display name link add set name blockRecent Entities

4. At Advanced > RELATIONSHIPS area, add Relationships

Entities Block

5. At FIELDS area, click Add button to add fields: User: Picture, User: Name, Content : Post Date

6. Set properties for User: Picture

Entities Block

7. Set properties for User: Name

Entities Block

Entities Block

8. Set properties for Content: Post Date

Entites Block

9. Set properties for Content: Title

Entities Block

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

Blog Block

11. Click Save to save view

2. Clone Recent Blog view to create Most Popular block

1. Navigate to Structure > View,find Recent Blogs > Recent Entities block view, Click Clone Recent Entities block and set following properties:

Most Popular

2. Click Display name link add set name blockMost Popular

3. Att TITLE area, click Title link add set name title

Most Popular

4. At SORT CRITERIA area, click Add button to add fields: Content statistics: Total views

Most Popular

5. At SORT CRITERIA area, click Rearrange button and set following arrange

Most Popular

6. Click Save to save view

3. Clone Most Popular view to create Best Blogs block

1. Navigate to Structure > View,find Recent Blogs > Most Popular block view, Click Clone Most Popular block and set following properties:

Best Blogs

2. Click Display name link add set name blockBest Blogs

3. Att TITLE area, click Title link add set name title

Best Blogs

4. At SORT CRITERIA area, click Add button to add fields: Field: Vote:rating

Best Blogs

5. At SORT CRITERIA area, click Rearrange button and set following arrange

Best Blogs

6. Click Save to save view

4. Create Quicktab

1. Navigate to Structure > Quicktab > Add Quicktab Instance create Quicktaband block with following properties:

Quicktab

Quicktab

2. Click Save block button.

5. Configure Quicktab block

1. Navigate to Structure > Blocks,find Quicktab.Clickconfigure link and block with following properties:

Quicktab

Quicktab

2. Click Save block button.

Sidebar First: Comments region

Front end Display

Comment

1.Create Comment view

1. Navigate to Structure > View click Add new view, then create Comment view and set following properties:

Comment Block

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

Comment Block

3. At Advanced > RELATIONSHIPS area, add Relationships

Comment Block

4. At FIELDS area, click Add button to add fields: User: Picture, User: Name, Content : Post Date

5. Set properties for User: Picture

Comment Block

6. Set properties for User: Name

Comment Block

Comment Block

7. Set properties for Content: Post Date

Comment Block

8. Set properties for Content: Title

Comment Block

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

Comment Block

10. Click Save to save view

2. Configure View: Comment block

1. Navigate to Structure > Blocks,find View: Comment.Clickconfigure link and block with following properties:

Comment Block

Comment Block

2. Click Save block button.

Sidebar First: Hot Video region

Front end Display

Hot Video

1.Create Hot Video view

1. Navigate to Structure > View click Add new view, then create Hot Video view and set following properties:

Hot Video Block

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

Hot Video Block

3. At FIELDS area, click Add button to add fields: Field: Video Link

Hot Video Block

4. At FIELDS area, click Rearrange button and click remove Content: Titlelink

5. Click Save block button.

2. Configure View: Hot Video block

1. Navigate to Structure > Blocks,find View: Hot Video. Click configure link and block with following properties:

Hot Video Block

Hot Video Block

2. Click Save block button.

Sidebar First: Get Products region

Front end Display

Get Products

1.Create Get Products view

1. Navigate to Structure > View click Add new view, then create Get Products view and set following properties:

Get Products Block

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

Get Products Block

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

4. Set properties for Content: Link

Get Products Block

5. Set properties for Field: Image

Get Products Block

Get Products Block

Get Products Block

6. At FIELDS area, click Rearrange button and click remove Content: Title link and set following properties:

Get Products Block

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

Get Products Block

8. At FORMAT area, find Format click Setting link and set following properties:

Get Products Block

9. Click Save block button.

2. Configure View: Get Products block

1. Navigate to Structure > Blocks,find View: Get Products. Click configure link and block with following properties:

Get Products Block

Get Products Block

2. Click Save block button.

Calendar page

Calendar view page

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

Calendar configuration

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

Calendar configuration

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

Calendar configuration

4. At FORMAT Format area, click Show link and set following propesties:

Calendar configuration

5. At FILTER CRITERIA area, Click Add button to add Content: Post Date field with following properties:

6. Set properties for Content: Post Date

Calendar configuration

7. At PAGE SETTING area, click Menu link and set the following properties:

Calendar configuration

8. At PAGE area, click User pager link and set the following properties:

Calendar configuration

9. At Advanced > CONTEXTUAL FILTER area, add Contextual filters:

Calendar configuration

Calendar configuration

10. Click Save button to save settings.

FAQ page

Configure Frequently Asked Questions

1. Navigate to Configuration > Content authoring > Frequently Asked Questions and set following properties:

FAQ configure

FAQ configure

2. Click Save button

Articles page

Create Articles view page

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

Articles configuration

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

Articles configuration

3. At FIELDS area, Click Add button to add Content: Post date , Field : Image, Content: Body , Content: Tags, Content: Link, Global: Fiedset, Content: Comment count, Content statistics: Total views, Content: ShareThis Link fields, then set properties as the following steps:

4. Set properties for Content: Post date

Articles configuration

5. Set properties for Field : Image

Articles configuration

Articles configuration

6. Set properties for Content: Body

Articles configuration

Articles configuration

7. Set properties for Content: Tags

Articles configuration

Articles configuration

8. Set properties for Content: Link

Articles configuration

9. Set properties for Global: Fiedset

Articles configuration

10. Set properties for Content: Comment count

Articles configuration

Articles configuration

11. Set properties for Content statistics: Total views

Articles configuration

Articles configuration

12. Set properties for Content: ShareThis Link

Articles configuration

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

Articles configuration

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

Articles configuration

15. At PAGER SETTING area, add Menu:

Articles configuration

16. Click Save button to save settings.

Articles Teaser page

Create Articles Teaser view

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

Articles Teaser configuration

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

Articles Teaser configuration

Articles Teaser configuration

3. At FIELDS area, click Rearrange button and remove all fields arrange

4. At PAGE SETTING Path area and set following properties:

Articles Teaser configuration

5. At PAGE SETTING Menu area and set following properties:

Articles Teaser configuration

6. At Advanced > OTHER area, set CSS class

Articles Teaser configuration

7. Click Save to save view

Articles Two Column page

Create Articles Two Column view

Navigate to Structure > View,find Blogs view, click "Edit". In Blogs view, open Page view and click clone Page button

Blogs Two Column configuration

Then set the following properties for new display:

1. Navigate to Structure > View,find Articles > Page view the frist link and click clone Page button and set following properties:

Articles Two Column configuration

2. At FORMAT area, click Format link and set following properties

Articles Two Column configuration

Articles Two Column configuration

3. At FIELDS area and set following properties Field:Image

Articles Two Column configuration

4. At PAGE SETTING Path area and set following properties:

Articles Two Column configuration

5. At PAGE SETTING Menu area and set following properties:

Articles Two Column configuration

6. At Advanced > OTHER area, set CSS class

Articles Teaser configuration

7. Click Save to save view

Articles Three Column page

Create new view

1. Navigate to Structure > View,find Articles > Page view the frist link and click clone Page button and set following properties:

Articles Three Column configuration

2. At FORMAT area, click Format link and set following properties

Articles Three Column configuration

3. At FIELDS area and set following properties Field:Image

Articles Three Column configuration

4. At PAGE SETTING Path area and set following properties:

Articles Three Column configuration

5. At PAGE SETTING Menu area and set following properties:

Articles Three Column configuration

6. At Advanced > OTHER area, set CSS class

Articles Three configuration

7. Click Save to save view

Blogs Teaser page

Create Blogs view

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

Blogs Teaser configuration

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

Blogs Teaser configuration

3. At PAGE SETTING Menu area and set following properties:

Blogs Teaser configuration

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

Blogs Teaser configuration

5. At Advanced > RELATIONSHIPS area, add Relationships

Blogs Teaser configuration

6. At Advanced > OTHER area, set CSS class

Blogs Teaser configuration

7. Click Save to save view

Blogs page

Create Blogs page

1. Navigate to Structure > View,find Blogs view, click "Edit". In Blogs view, click Add > Page and set following properties:

Blogs configuration

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

Blogs configuration

3. At FILTER CRITERIA area, Click Add button to add Field : Image, Field: Video Link , User: Picture , Global: Fieldset (Fieldset) , User: Name, User: Created date ,Content: Body , Content: Tags, Content: Link, Global: Fiedset, Content: Comment count, Content statistics: Total views, Content: ShareThis Link field with following properties:

4. Set properties for Field : Image

Blogs configuration

Blogs configuration

5. Set properties for Field: Video Link

Blogs configuration

Blogs configuration

6. Set properties for User: Picture

Blogs configuration

Blogs configuration

7. Set properties for Global: Fieldset

Blogs configuration

8. Set properties for User: Name

Blogs configuration

Blogs configuration

9. Set properties for User: Create date

Blogs configuration

10. Set properties for Content: Body

Blogs configuration

Blogs configuration

11. Set properties for Content: Tags

Blogs configuration

12. Set properties for Content: Link

Blogs configuration

13. Set properties for Global: Fiedset

Blogs configuration

14. Set properties for Content: Comment count

Blogs configuration

Blogs configuration

15. Set properties for Content statistics: Total views

Blogs configuration

Blogs configuration

16. Set properties for Content: ShareThis Link

Blogs configuration

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

Blogs configuration

18. At PAGER SETTING area, add Menu:

Blogs configuration

19. At PAGER SETTING area, add Path:

Blogs configuration

20. Click Save button to save settings.

Blogs Two Column page

Create Blogs Two Column page

1. Navigate to Structure > View,find Blogs view, click "Edit". In Blogs view, open Page view and click clone Page button

Blogs Two Column configuration

Then set the following properties for new display:

Blogs Two Column configuration

2. At FORMAT area, click Format link and set following properties

Blogs Two Column configuration

Blogs Two Column configuration

3. At FIELDS area and set following properties Field: Image

Blogs Two Column configuration

4. At FIELDS area and set following properties Field: Video Link

Blogs Two Column configuration

5. At FIELDS area and set following properties Content: Body

Blogs Two Column configuration

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

Blogs  Two Column configuration

7. At PAGE SETTING Path area and set following properties:

Blogs Two Column configuration

8. At PAGE SETTING Menu area and set following properties:

Blogs Two Column configuration

9. At Advanced > OTHER area, set CSS class

Blogss Teaser configuration

10. Click Save to save view

Blogs Three Column page

Create Blogs Three Column view

1. Navigate to Structure > View,find Blogs view, click "Edit". In Blogs view, open Blogs Two Column page and click clone Page button

Blogs Two Column configuration

Then set the following properties for new display:

Blogs Three Column configuration

2. At FORMAT area, click Setting link and set following properties

Blogs Three Column configuration

3. At FIELDS area and set following properties Field:Image

Blogs Three Column configuration

4. At FIELDS area and set following properties Field: Video Link

Blogs Three Column configuration

5. At PAGE SETTING Path area and set following properties:

Blogs Three Column configuration

6. At PAGE SETTING Menu area and set following properties:

Blogs Three Column configuration

7. At Advanced > OTHER area, set CSS class

Blogs Three Column configuration

8. Click Save to save view

Blogs Mix page

Create Blogs Mix view

1. Navigate to Structure > View,find Blogs view, click "Edit". In Blogs view, open Page view and click clone Page button

Blogs Two Column configuration

Then set the following properties for new display:

Blogs Mix configuration

2. At FIELDS area and set following properties Field:Image

Blogs Mix configuration

3. At FIELDS area and set following properties Field: Video Link

Blogs Mix configuration

4. At PAGE SETTING Path area and set following properties:

Blogs Mix configuration

5. At PAGE SETTING Menu area and set following properties:

Blogs Mix configuration

6. At Advanced > OTHER area, set CSS class

Blogs Mix configuration

7. Click Save to save view

What's news page

Create Activity Stream view page

1. Navigate to Structure > Views, click Add new view, then create Activity Stream view with following settings:

Activity Stream configuration

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

Activity Stream configuration

3. At Advanced > RELATIONSHIPS area, add Relationships fields Message: User uid, Entity Reference: Node reference

4. Set properties for Message: User uid

Activity Stream configuration

5. Set properties for Entity Reference: Node reference

Activity Stream configuration

6. At FIELDS area, Click Add button to add User: Picture, Content: Post date, Message: Render message (Get text), Field : Image, Message: User uid, Content: Comment count, Content statistics: Total views field with following properties:

7. Set properties for User: Picture

Activity Stream configuration

8. Set properties for Content: Post date

Activity Stream configuration

9. Set properties for Message: Render message (Get text)

Activity Stream configuration

10. Set properties for Field : Image

Activity Stream configuration

Activity Stream configuration

11. Set properties for Message: User uid

Activity Stream configuration

12. Set properties for Message: Message ID

Activity Stream configuration

13. Set properties for Content: Comment count

Activity Stream configuration

Activity Stream configuration

Activity Stream configuration

14. Set properties for Content statistics: Total views

Activity Stream configuration

Activity Stream configuration

Activity Stream configuration

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

Activity Stream configuration

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

Activity Stream configuration

17. At PAGER SETTING area, add Menu:

Activity Stream configuration

18. Click Save button to save settings.

Create and configure Gmap block

Front end Display

Gmap

1. Navigate to Structure > Blocks click Add block, create Gmap block and block with following properties:

Gmap

Gmap

2. Click Save block button.

Refer to following HTML code:

<div class="iframe-map">
<iframe class="contact_map" height="380" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=vi&amp;q=795+Folsom+Ave+%236000,+Hayward,+Alameda,+California+94544&amp;sll=37.0625,-95.677068&amp;sspn=56.112526,114.169922&amp;ie=UTF8&amp;geocode=FZQfPgIdJnC5-A&amp;split=0&amp;hq=&amp;hnear=795+Folsom+Ave+%236000,+Hayward,+Alameda,+California+94544&amp;t=m&amp;z=14&amp;ll=37.625748,-122.064858&amp;output=embed"></iframe>
</div>
    

Contact page

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

Create and configure Get In Touch block

1. Navigate to Structure > Blocks click Add block, create Get In Touch block and block with following properties:

Get In Touch

Get In Touch

2. Click Save block button.

Refer to following HTML code:

<div class="contact-content clearfix">
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto .</p>

<address>
<i class="fa fa-map-marker"></i> Alexander Street. Vancouver, BC<br> V6A 1E1 Canada<br><i class="fa fa-phone"></i> 012.345.6789<br><i class="fa fa-print"></i> 012.345.6789<br><i class="fa fa-envelope"></i> support@weebpal.com</address>
</div>
    

Contact Us page

1. Add and configure content Contact Us webform

1. Navigate to Content > Add Content click Webform, addd Contact Us webform and configure with following properties:

Contact Us

2. Click Menu settings link, set the following properties:

Contact Us

3. Click Url path settings link, set the following properties:

Contact Us

4. Click Comment settings link, set the following properties:

Contact Us

5. Click Node Class settings link, set the following properties:

Contact Us

6. Click Publishing options link, set the following properties:

Contact Us

7. Click Save block button.

Refer to the following HTML code:

<div class="contact-content clearfix">
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto .</p>

<address>
<i class="fa fa-map-marker"></i> Alexander Street. Vancouver, BC<br> V6A 1E1 Canada<br><i class="fa fa-phone"></i> 012.345.6789<br><i class="fa fa-print"></i> 012.345.6789<br><i class="fa fa-envelope"></i> support@weebpal.com</address>
</div>
    

2. Add fields Webform tab

1. Navigate to Webform tab and Add fields:

Contact Us

2. Go to Display link and set following for Your Name:

Contact Us

3. Go to Display link and set following for Email:

Contact Us

4. Go to Display link and set following for Subject:

Contact Us

5. Go to Display link and set following for Your Comment:

Contact Us

6. Click Save button

Contact Us 2 page

1. Add and configure content Contact Us 2 webform

1. Navigate to Content > Add Content click Webform, addd Contact Us2 webform and configure with following properties:

Contact Us 2

2. Click Menu settings link, set the following properties:

Contact Us 2

3. Click Url path settings link, set the following properties:

Contact Us 2

4. Click Comment settings link, set the following properties:

Contact Us 2

5. Click Node Class settings link, set the following properties:

Contact Us 2

6. Click Publishing options link, set the following properties:

Contact Us 2

7. Click Save block button.

Refer to the following HTML code:

<div class="contact-content clearfix">
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto .</p>

<address>
<i class="fa fa-map-marker"></i> Alexander Street. Vancouver, BC<br> V6A 1E1 Canada<br><i class="fa fa-phone"></i> 012.345.6789<br><i class="fa fa-print"></i> 012.345.6789<br><i class="fa fa-envelope"></i> support@weebpal.com</address>
</div>
      

2. Add fields Webform tab

1. Navigate to Webform tab and Add fields:

Contact Us 2

2. Click Save button


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.

Appearance Settings

1. Create a new color.

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

Color Configuration

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

Color Configuration

3. Save file.

4. Navigate to the directory: forum-plus\sites\all\themes\forum_plus\css\colors, clone a folder, then rename it "news_color"

Color Configuration

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

1. Navigate to the directory: forum-plus\sites\all\themes\forum_plus, you can find file, open file forum_plus.info

Background Configuration

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

Background Configuration

3. Save file.

4. Move your background image into the directory: forum-plus\sites\all\themes\forum_plus\images

Background Configuration

5. Navigate to the directory: forum-plus\sites\all\themes\forum_plus\css, open file base.css, and add new code row:

Background Configuration

6. Save file.

3. Configuration

1. Log into website by administrator account.

2. Go to Appearance find forum-plus 7.34, click on Settings

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. ForumPlus Theme supports both Left to Right and Right to Left languages.

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

Language Configuration

2. Check to enable and set default language

3. Go to Detection and selection tab

Language Configuration

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