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

1. Magazine D8 Package

If you have been acquainted to Magazine, this is the Drupal 8 version of the theme.

This template will turn your demand to create your own portal, news, magazine, and blog in reality. With all of the necessary functions of a Magazine website, and the modern polished appearance of a responsive website in Drupal 8, Magazine D8 will not let your satisfaction down.

Included content:

  • README.txt
  • Magazine D8 theme: magazine_d8-8.1.1.zip
  • Demo Profile for Magazine D8: magazine_d8-demo-8.1.1.zip

2. System Requirements

Database

  • MySQL 5.5.3/MariaDB 5.5.20/Percona Server 5.5.8 or higher with PDO and an InnoDB-compatible primary storage engine,
  • PostgreSQL 9.1.2 or higher with PDO,
  • SQLite 3.7.11 or higher

PHP

  • PHP 5.5.9 or higher
  • 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

Blog

Gallery

Bed/Odds

Video

Contact

Livescore

4. Module requirements

Core Modules

  • Admin_toolbar
  • Memcache
  • Taxonomy_menu
  • Video_embed_field

Third-party Modules

  1. Admin Toolbar
  2. Memcache
  3. Taxonomy_menu
  4. Video Embed Field

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

Installation

How to install a WeebPal demo package

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

Files included:

  • README.txt
  • Magazine D8 theme package:magazine_d8-8.1.1.zip
  • Magazine D8 demo package: magazine_d8-demo-8.1.1.zip
  • This demo package includes all source codes and content, including sample images. This package will be used to build a site like our demo for the theme easily.

Package

The below steps will give you the installation guide so that you can build your website to look exactly like the Magazine D8 Demo

  • magazine_d8-demo-8.1.1.zip

2. Extract magazine_d8-demo-8.1.1.zip above and copy it into your host, and rename the directory to magazine

Quick Installation

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

Quick Installation

4. In the demo directory database/, you can find database dump named sample_data.sql.

Quick Installation

Import this file into new database.

Quick Installation

When using this installation, you are installing everything from our preview server. So don't forget to set proper values for settings: email address, admin password, etc.

5. Open the browser and visit your website with the prepopulated content & layout exactly like our Magazine D8 Demo

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

How to install a WeebPal 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 magazine_d8 Theme, find this guide in handy.

1. Install Drupal

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

Install Drupal 8

2. Extract and copy Drupal folder to your host and rename the directory (e.g: magazine_d8)

Follow steps below to install a Drupal site only:

3. Access to database and create a new database with a name such as magazine_d8.

Install Drupal 8

4. Open browser and navigate to your website.

5. Choose language => click Save and continue button.

Install Drupal 8

6. Select Standard => click Save and continue button.

Install Drupal 8

7. Choose continue anyway => click link.

Install Drupal 8

8. Enter database parameters => click Save and continue button.

Install Drupal 8

9. Enter site information => click Save and continue button.

Install Drupal 8

10. Click Visit your new site and you will have a new site.

You can refer the guide from drupal.org to delve more details about drupal installation.

2. Install magazine_d8 Theme

  1. Extract magazine_d8 theme .ZIP file:
    • magazine_d8-8.1.1.zip
  2. Move this theme into your Drupal folder: /themes

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

3. Install Required Modules

Now that you've enabled Magazine 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 magazine_d8-demo-8.1.1.zip
  2. Open extracted folder, go to themes, modules 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 Categories:

Taxonomy

Step 3: Terms of Leagues:

Taxonomy

Step 3: Terms of Tags:

Taxonomy

Step 3: Terms of Team:

Taxonomy

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

Media configuration

Image Style Configuration

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

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

Image Styles

Content type configuration

Modify Article type

Step 1: Navigate to Structure > Content Type

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

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

Article

Step 4: Set properties for Category field

Article

Step 5: Set properties for Image field

Article

Step 6: Set properties for Slideshow field

Article

Step 7: Set properties for Tags field

Article

Step 8: Set properties for Team field

Article

Step 9: Go to Manage form display tab, set following properties:

Article

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

Article

Step 11: Click Save button

Modify Basic page type

Step 1: Navigate to Structure > Content Type

Step 2: In Basic page row, click "manage form display" link.

Basic page

Step 3: Click Save button

Create BBC Tweets type

Step 1: Navigate to Structure > Content Type. Click Add Content Type link to create content type BBC Tweets

BBC Tweets

Step 2: Click Save and add fields button, then Add field with following settings:

BBC Tweets

Step 3: Set properties for Html Title field

BBC Tweets

Step 4: Set properties for Image field

BBC Tweets

Step 5: Set properties for Show Images field

BBC Tweets

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

BBC Tweets

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

BBC Tweets

Step 8: Click Save button

Create Bet Odds type

Step 1: Navigate to Structure > Content Type. Click Add Content Type link to create content type Bet Odds

Bet Odds

Step 2: Click Save and add fields button, then Add field with following settings:

Bet Odds

Step 3: Set properties for Away field

Bet Odds

Step 4: Set properties for Category field

Bet Odds

Step 5: Set properties for Draw field

Bet Odds

Step 6: Set properties for Home field

Bet Odds

Step 7: Go to Manage form display tab, set following properties:

Bet Odds

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

Bet Odds

Step 9: Click Save button

Create Blogs type

Step 1: Navigate to Structure > Content Type. Click Add Content Type link to create content type Blogs

Blogs

Step 2: Click Save and add fields button, then Add field with following settings:

Blogs

Step 3: Set properties for Category field

Blogs

Step 4: Set properties for Image field

Blogs

Step 5: Set properties for Tags field

Blogs

Step 6: Set properties for Team field

Blogs

Step 7: Go to Manage form display tab, set following properties:

Blogs

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

Blogs

Step 9: Click Save button

Create Gallery type

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

Gallery

Step 2: Click Save and add fields button, then Add field with following settings:

Gallery

Step 3: Set properties for Category field

Gallery

Step 4: Set properties for Images field

Gallery

Step 5: Set properties for Tags field

Gallery

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

Gallery

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

Gallery

Step 8: Click Save button

Create Match type

Step 1: Navigate to Structure > Content Type. Click Add Content Type link to create content type Match

Match

Step 2: Click Save and add fields button, then Add field with following settings:

Match

Step 3: Set properties for Category field

Match

Step 4: Set properties for Match Result field

Match

Step 5: Set properties for TeamA field

Match

Step 6: Set properties for TeamB field

Match

Step 7: Set properties for Time field

Match

Step 8: Go to Manage form display tab, set following properties:

Match

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

Match

Step 10: Click Save button

Create Team type

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

Team

Step 2: Click Save and add fields button, then Add field with following settings:

Team

Step 3: Set properties for Draw field

Team

Step 4: Set properties for Image field

Team

Step 5: Set properties for Leagues field

Team

Step 6: Set properties for Lose field

Team

Step 7: Set properties for Point field

Team

Step 8: Set properties for Win field

Team

Step 9: Go to Manage form display tab, set following properties:

Team

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

Team

Step 11: Click Save button

Create Video type

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

Video

Step 2: Click Save and add fields button, then Add field with following settings:

Video

Step 3: Set properties for Category field

Video

Step 4: Set properties for Tags field

Video

Step 5: Set properties for Video field

Video

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

Video

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

Video

Step 8: Click Save button

Modify User type

Step 1: Navigate to Configuration > People > Account settings link

Step 2: In Account settings row, click "manage fields" link, add field with following settings:

User

Step 3: Set properties for Description

User

Step 4: Go to Manage form display tab, set following properties:

User

Step 5: Go to Manage display tab, set following properties:

User

Step 6: Click Save button

Create Homepage

Search form

Front end Display

Search form

Step 1: Navigate to Structure > Block layout

Step 2: Find block Search form and set region "Header 2"

Search form

Step 3: Click Save button

Login form

Front end Display

Login

Step 1: Navigate to Structure > Block layout

Step 2: At User button block, click Place block link.

Step 3: Find User login click Place block link, set following properties

Login

Step 4: Click Save button

Sport menu

1. Create Sport menu block

Step 1: Navigate to Structure > Menu, click Add menu, then create Sport menu view with following settings:

Sport-menu

Step 2: Click Add link, then create and set with following settings:

Sport-menu

Step 3: Click Save button

Find Add link button , then click add Swimming menu item

Sport-menu

Find Add link button , then click add Tennis menu item

Sport-menu

Find Add link button , then click add Tennis Video menu item

Sport-menu

Find Add link button , then click add WTA Schedule menu item

Sport-menu

Find Add link button , then click add Tennis Photo menu item

Sport-menu

Find Add link button , then click add Tenis News menu item

Sport-menu

Find Add link button , then click add ATP Schedule menu item

Sport-menu

Find Add link button , then click add Rankings menu item

Sport-menu

Find Add link button , then click add Sailing menu item

Sport-menu

Find Add link button , then click add Golf menu item

Sport-menu

Find Add link button , then click add European Tour menu item

Sport-menu

Find Add link button , then click add Open Championship menu item

Sport-menu

Find Add link button , then click add Ryder Cup menu item

Sport-menu

Find Add link button , then click add US PGA Tour menu item

Sport-menu

Find Add link button , then click add Football menu item

Sport-menu

Find Add link button , then click add Bundesliga menu item

Sport-menu

Find Add link button , then click add Champions League menu item

Sport-menu

Find Add link button , then click add Championship menu item

Sport-menu

Find Add link button , then click add Europa League menu item

Sport-menu

Find Add link button , then click add Internationals menu item

Sport-menu

Find Add link button , then click add La Liga menu item

Set properties for La Liga

Sport-menu

Find Add link button , then click add League One menu item

Sport-menu

Find Add link button , then click add League Two menu item

Sport-menu

Find Add link button , then click add Ligue 1 menu item

Sport-menu

Find Add link button , then click add Live Fixtures menu item

Sport-menu

Find Add link button , then click add Premier League menu item

Sport-menu

Find Add link button , then click add Scottish Premier menu item

Sport-menu

Find Add link button , then click add Series A menu item

Sport-menu

Find Add link button , then click add Motorsport menu item

Sport-menu

Find Add link button , then click add Cricket menu item

Sport-menu

Find Add link button , then click add County Cricket menu item

Sport-menu

Find Add link button , then click add Cricket AM menu item

Sport-menu

Find Add link button , then click add Indian Premier League menu item

Sport-menu

Find Add link button , then click add Ashes menu item

Sport-menu

Find Add link button , then click add International Cricket menu item

Sport-menu

Find Add link button , then click add Rugby Union menu item

Sport-menu

Find Add link button , then click add Aviva Premiership menu item

Sport-menu

Find Add link button , then click add British and Irish Lions menu item

Sport-menu

Find Add link button , then click add Heineken Cup menu item

Sport-menu

Find Add link button , then click add Rugby League News menu item

Sport-menu

Find Add link button , then click add Rugby Live on Sky menu item

Sport-menu

Find Add link button , then click add Rugby Worldcup menu item

Sport-menu

Find Add link button , then click add Skiing menu item

Sport-menu

2. Configure Sport menu block

Step 1: Navigate to Structure > Block layout

Step 2: At Sports Menu block, click Place block link.

Step 3: Find Sports menu click Place block link, set following properties

Sport-menu

Step 4: Click Save block button.

SlideShow

Front end Display

SlideShow

1. Create SlideShow view

Step 1: Navigate to Structure > Views, click Add views link, Create SlideShow view with following properties:

SlideShow

Step 2: Click Continue & edit button and set following properties:

SlideShow

Step 3: At FIELDS area, click Add button to add fields: Content: Slideshow field and set following properties:

Step 4: Set properties for Content: Slideshow

SlideShow

Step 5: At FILTER CRITERIA area, click Add button and add file Slideshow (field_slideshow:target_id)

Step 6: Set properties for Slideshow (field_slideshow:target_id)

SlideShow

Step 7: At BLOCK SETTINGS > Block name area, set the following properties:

SlideShow

Step 8: Click Save button.

2. Configure SlideShow block

Step 1: Navigate to Structure > Block layout

Step 2: At Slideshow block, click Place block link.

Step 3: Find view:slideshow click Place block link, set following properties

SlideShow

Step 4: Click Save block button.

Frontpage view

1. Create Frontpage view

Step 1: Navigate to Structure > View ,find Frontpage view, click Enable button. Then click Edit button , find and click Page button and set following properties:

Front page

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

Front page

Step 3: In FIELDS area, click Add button to add fields: Content: Image, Content: Title, Content: Body, Content: Link to Content, Content: Category field and set following properties:

Step 4: Set properties for Content: Image

Front page

Step 5: Set properties for Content: Body

Front page

Step 6: Set properties for Content: Link to Content

Front page

Step 7: Set properties for Content: Category

Front page

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

Front page

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

Front page

Step 10: At PAGE SETTINGS > Access area, set the following properties:

Front page

Step 11: At PAGER area, click User page link, then set following properties:

Front page

Front page

Step 12: Click Save button.

2. Create Page:Rugby Union view

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

Rugby Union

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

Rugby Union

Step 2: At Display name area, set following properties:

Rugby Union

Step 3: At Title area, set following properties:

Rugby Union

Step 4: At FIELDS area, click Add button to add fields: Content: Image, Content: Title, Content: Body, Content: Link to Content, Content: Category field and set following properties:

Step 5: Set properties for Content: Image

Rugby Union

Step 6: Set properties for Content: Body

Rugby Union

Step 7: Set properties for Content: Link to Content

Rugby Union

Step 8: Set properties for Content: Category

Rugby Union

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

Rugby Union

Step 10: At FILTER CRITERIA area, click Add button and add file Has taxonomy terms (with depth) set the following properties:

Rugby Union

Rugby Union

Step 11: At FILTER CRITERIA area, click Rearrange button and set following arrange

Rugby Union

Step 12: At NO RESULTS BEHAVIOR area, click Rearrange button and set following arrange

Rugby Union

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

Rugby Unions

Step 14: Click Save button.

3. Create Block1 block view

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

Block1

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

Block1

Step 2: At Display name area, set following properties:

Block1

Step 3: At Title area, set following properties:

Block1

Step 4: In Advanced > Contextual filters area, click Add button to add fields: Global: Null, Content: Category and set following properties:

Step 5: Set properties for Global: Null

Block1

Step 6: Set properties for Content: Category

Block1

Step 7: At FIELDS area, field and set following properties:

Step 8: Set properties for Content: Image

Block1

Step 9: Set properties for Content: Body

Block1

Step 10: Set properties for Content: Link to Content

Block1

Step 11: Set properties for Content: Category

Block1

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

Block1

Step 13: At FILTER CRITERIA area, click Add button and add file Content: Image (field_image:target_id) set the following properties:

Block1

Step 14: At FILTER CRITERIA area, click Rearrange button and set following arrange

Block1

Step 15: Click Save button.

4. Configure Block1 block

Step 1: Navigate to Structure > Block layout

Step 2: At Content block, click Place block link.

Step 3: Find Frontpage: Block1 click Place block link, set following properties

Block1

Step 4: Click Save block button.

Premier League view

1. Create Block:Premier League 1 view

Front end Display

Premier League 1

Step 1: Navigate to Structure > Views, click Add views link, Create Premier League view with following properties:

Premier League 1

Step 2: Click Continue & edit button and set following properties:

Premier League 1

Step 3: At Display name area, set following properties:

Premier League 1

Step 4: At FIELDS area, click Add button to add fields: Content: Win, Content: Draw,Content: Lose, Content: Point field and set following properties:

Step 5: Set properties for Content: Title

Premier League 1

Step 6: Set properties for Content: Win

Premier League 1

Step 7: Set properties for Content: Draw

Premier League 1

Step 8: Set properties for Content: Lose

Premier League 1

Step 9: Set properties for Content: Points

Premier League 1

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

Premier League 1

Step 11: At FILTER CRITERIA area, click Add button and add file Leagues (field_leagues) set the following properties:

Step 12: Set properties for Content: Leagues

Premier League 1

Premier League 1

Step 13: At SORT CRITERIA area, Click Add button to add Point (field_point), Win (field_win) and set following properties:

Step 14: Set properties for Point (field_point)

Premier League 1

Step 15: Set properties for Win (field_win)

Premier League 1

Step 16: At SORT CRITERIA area, click Rearrange button and set following arrange

Premier League 1

Step 17: Click Save button.

2. Configure Block:Premier League 1 block

Step 1: Navigate to Structure > Block layout

Step 2: Find Sidebar first click Place block button

Step 3: Find Premier League: Block:Premier League 1 click Place block button and set following properites:

Premier League 1

Step 4: Find Sidebar second click Place block button

Step 5: Find Premier League: Block:Premier League 1 click Place block button and set following properites:

Premier League 1

Step 6: Click Save block button.

3. Create Block:Premier League 2 view

Stay open Premier League view, click Add button add Block new.

Premier League 2

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

Premier League 2

Step 2: At Display name area, set following properties:

Premier League 2

Step 3: Click Save button.

Trending Now view

1. Create Trending Now view

Front end Display

Trending Now

Step 1: Navigate to Structure > Views, click Add views link, Create Trending Now view with following properties:

Trending Now

Step 2: Click Continue & edit button and set following properties:

Trending Now

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

Trending Now

Step 4: At FIELDS area, click Add button to add fields: Content: Image, Content: Changed, Content: Body field and set following properties:

Step 5: Set properties for Content: Image

Trending Now

Step 6: Set properties for Content: Changed

Trending Now

Step 7: Set properties for Content: Body

Trending Now

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

Trending Now

Step 9: At PAGER area, click User page link, then set following properties:

Trending Now

Step 10: Click Save button.

2. Create Trending Now block view

Front end Display

Trending Now

Stay open Trending Now view, click Add button add Block new.

Trending Now

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

Trending Now

Step 2: At FORMAT format: Unformatted list area, click and set following properties:

Trending Now

Step 3: At FIELDS area, field and set properties for the following fields:

Step 4: Set following properties for Content: Title

Trending Now

Step 5: Set following properties for Content: Body

Trending Now

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

Trending Now

Step 7: At PAGER area, click User page link, then set following properties:

Trending Now

Trending Now

Step 8: At Advanced > OTHER area, add CSS class change following properties:

Trending Now

Step 9: Click Save button

3. Configure Trending Now block

Step 1: Navigate to Structure > Block layout

Step 2: Find Sidebar second click Place block button

Step 3: Find Trending Now click Place block button and set following properites:

Trending Now

Step 4: Click Save block button.

Recent Updated view

1. Create Block:Recent Updated block view

Front end Display

Recent Updated

Step 1: Navigate to Structure > Views, click Add views link, Create Recent Updated view with following properties:

Recent Updated

Step 2: Click Continue & edit button and set following properties:

Recent Updated

Step 3: At Display name area, set following properties:

Recent Updated

Step 4: At FORMAT format: Grid area, click and set following properties:

Recent Updated

Step 5: At FIELDS area, click Add button to add fields: Content: Image, Content: Changed, Content: Body, Content: Link to Content field and set following properties:

Step 6: Set properties for Content: Image

Recent Updated

Step 7: Set properties for Content: Title

Recent Updated

Step 8: Set properties for Content: Changed

Recent Updated

Step 9: Set properties for Content: Body

Recent Updated

Step 10: Set properties for Content: Link to Content

Recent Updated

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

Recent Updated

Step 12: At SORT CRITERIA area, Click Add button to add Content: Changed and set following properties:

Recent Updated

Step 13: At SORT CRITERIA area, click Rearrange button and set following arrange

Recent Updated

Step 14: At Advanced > OTHER area, add CSS class change following properties:

Recent Updated

Step 15: Click Save button.

2. Configure Block:Recent Updated block

Step 1: Navigate to Structure > Block layout

Step 2: Find Content click Place block button

Step 3: Find Recent Updated: Block:Recent Updated click Place block button and set following properites:

Recent Updated

Step 4: Click Save block button.

Top Headlines view

1. Create Top Headlines block view

Front end Display

Top Headlines

Step 1: Navigate to Structure > Views, click Add views link, Create Top Headlines view with following properties:

Top Headlines

Step 2: Click Continue & edit button and set following properties:

Top Headlines

Step 3: At FIELDS area, click Add button to add fields: Content: Image, Content: Authored on field and set following properties:

Step 4: Set properties for Content: Image

Top Headlines

Step 5: Set properties for Content: Authored on

Top Headlines

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

Top Headlines

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

Top Headlines

Step 8: Click Save button.

2. Configure Top Headlines block

Step 1: Navigate to Structure > Block layout

Step 2: Find Content click Place block button

Step 3: Find Top Headlines click Place block button and set following properites:

Top Headlines

Step 4: Click Save block button.

Other Lastest News view

1. Create Other Lastest News block view

Front end Display

Other Lastest News

Step 1: Navigate to Structure > Views, click Add views link, Create Other Lastest News view with following properties:

Other Lastest News

Step 2: Click Continue & edit button and set following properties:

Other Lastest News

Step 3: At Display name area, set following properties:

Other Lastest News

Step 4: At BLOCK SETTINGS > Block name area, set the following properties:

Other Lastest News

Step 5: At Advanced > OTHER area, add CSS class change following properties:

Other Lastest News

Step 4: Click Save button.

2. Configure Other Lastest News block

Step 1: Navigate to Structure > Block layout

Step 2: Find Sidebar first click Place block button

Step 3: Find Other Lastest News click Place block button and set following properites:

Other Lastest News

Step 4: Click Save block button.

Carousel view

1. Create Carousel block view

Front end Display

Carousel

Step 1: Navigate to Structure > Views, click Add views link, Create Carousel view with following properties:

Carousel

Step 2: Click Continue & edit button and set following properties:

Carousel

Step 3: At Title area, set following properties:

Carousel

Step 4: At FIELDS area, click Add button to add fields: Content: Category, Content: Image, Content: Changed, Content: Body field and set following properties:

Step 5: Set properties for Content: Image

Carousel

Step 6: Set properties for Content: Title

Carousel

Step 7: Set properties for Content: Changed

Carousel

Step 8: Set properties for Content: Body

Carousel

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

Carousel

Step 10: At FILTER CRITERIA area, click Add button and add file Category (field_category), Image (field_image:target_id) set the following properties:

Step 11: Set properties for Category (field_category)

Carousel

Carousel

Step 12: Set properties for Image (field_image:target_id)

Carousel

Step 13: Click Save button.

2. Configure Carousel block

Step 1: Navigate to Structure > Block layout

Step 2: Find Panel first click Place block button

Step 3: Find Carousel click Place block button and set following properites:

Carousel

Step 4: Click Save block button.

Select Your Team For Team News view

1. Create Select Your Team For Team News block view

Front end Display

Select Your Team For Team News

Step 1: Navigate to Structure > Views, click Add views link, Create Select Your Team For Team News view with following properties:

Select Your Team For Team News

Step 2: Click Continue & edit button and set following properties:

Select Your Team For Team News

Step 3: At FORMAT format: Grid area, click Settings and set following properties:

Select Your Team For Team News

Step 4: At FIELDS area, click Add button to add fields: Content: ID, Content: Image field and set following properties:

Step 5: Set properties for Content: Title

Select Your Team For Team News

Step 6: Set properties for Content: ID

Select Your Team For Team News

Step 7: Set properties for Content: Image

Select Your Team For Team News

Step 8: At Advanced > OTHER area, add CSS class change following properties:

Select Your Team For Team News

Step 9: Click Save button.

2. Configure Select Your Team For Team News block

Step 1: Navigate to Structure > Block layout

Step 2: Find Panel second click Place block button

Step 3: Find Select Your Team For Team News click Place block button and set following properites:

Select Your Team For Team News

Step 4: Click Save block button.

ThumbnailSlider view

1. Create ThumbnailSlider block view

Front end Display

ThumbnailSlider

Step 1: Navigate to Structure > Views, click Add views link, Create ThumbnailSlider view with following properties:

ThumbnailSlider

Step 2: Click Continue & edit button and set following properties:

ThumbnailSlider

Step 3: At Title area, set following properties:

ThumbnailSlider

Step 4: At FIELDS area, click Add button to add fields: Content: Changed, Content: Body, Content: Link to Content, Content: Image field and set following properties:

Step 5: Set properties for Content: Changed

ThumbnailSlider

Step 6: Set properties for Content: Body

ThumbnailSlider

Step 7: Set properties for Content: Link to Content

ThumbnailSlider

Step 8: Set properties for Content: Image

ThumbnailSlider

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

ThumbnailSlider

Step 10: Click Save button.

2. Configure ThumbnailSlider block

Step 1: Navigate to Structure > Block layout

Step 2: Find Panel third click Place block button

Step 3: Find ThumbnailSlider click Place block button and set following properites:

ThumbnailSlider

Step 4: Click Save block button.

Videos view

1. Create Videos block view

Front end Display

Videos

Step 1: Navigate to Structure > Views, click Add views link, Create Videos view with following properties:

Videos

Step 2: Click Continue & edit button and set following properties:

Videos

Step 3: At Display name area, set following properties:

Videos

Step 4: At FIELDS area, click Add button to add fields: Content: Video field and set following properties:

Step 5: Set properties for Content: Video

Videos

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

Videos

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

Videos

Step 8: Click Save button.

2. Configure Videos block

Step 1: Navigate to Structure > Block layout

Step 2: Find Panel fourth click Place block button

Step 3: Find Videos: Block:Videos click Place block button and set following properites:

Videos

Step 4: Click Save block button.

Footer view

1. Create Footer block view

Front end Display

Footer

Step 1: Navigate to Structure > Views, click Add views link, Create Footer view with following properties:

Footer

Step 2: Click Continue & edit button and set following properties:

Footer

Step 3: At Display name area, set following properties:

Footer

Step 4: At Title area, set following properties:

Footer

Step 5: At FILTER CRITERIA area, click Add button and add file Parent term set the following properties:

Footer

Step 6: Click Save button.

2. Configure Footer block

Step 1: Navigate to Structure > Block layout

Step 2: Find Panel fifth 1 click Place block button

Step 3: Find Footer: Block:Football click Place block button and set following properites:

Footer

Step 4: Click Save block button.

3. Create Rugby Union block view

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

Rugby Union

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

Rugby Union

Step 2: At Display name area, set following properties:

Rugby Union

Step 3: At Title area, set following properties:

Rugby Union

Step 4: At FILTER CRITERIA area, then and set the following properties:

Rugby Union

Step 5: Click Save button.

4. Configure Rugby Union block

Step 1: Navigate to Structure > Block layout

Step 2: Find Panel fifth 2 click Place block button

Step 3: Find Footer: Block:Rugby Union click Place block button and set following properites:

Rugby Union

Step 4: Click Save block button.

5. Create Cricket block view

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

Cricket

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

Cricket

Step 2: At Display name area, set following properties:

Cricket

Step 3: At Title area, set following properties:

Cricket

Step 4: At FILTER CRITERIA area, then and set the following properties:

Cricket

Step 5: Click Save button.

6. Configure Cricket block

Step 1: Navigate to Structure > Block layout

Step 2: Find Panel fifth 2 click Place block button

Step 3: Find Footer: Block:Cricket click Place block button and set following properites:

Cricket

Step 4: Click Save block button.

7. Create Golf block view

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

Golf

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

Golf

Step 2: At Display name area, set following properties:

Golf

Step 3: At Title area, set following properties:

Golf

Step 4: At FILTER CRITERIA area, then and set the following properties:

Golf

Step 5: Click Save button.

8. Configure Golf block

Step 1: Navigate to Structure > Block layout

Step 2: Find Panel fifth 3 click Place block button

Step 3: Find Footer: Block:Golf click Place block button and set following properites:

Golf

Step 4: Click Save block button.

9. Create Tennis block view

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

Tennis

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

Tennis

Step 2: At Display name area, set following properties:

Tennis

Step 3: At Title area, set following properties:

Tennis

Step 4: At FILTER CRITERIA area, then and set the following properties:

Tennis

Step 5: Click Save button.

10. Configure Tennis block

Step 1: Navigate to Structure > Block layout

Step 2: Find Panel fifth 3 click Place block button

Step 3: Find Footer: Block:Tennis click Place block button and set following properites:

Tennis

Step 4: Click Save block button.

More Sports

1. Create More Sports block

Front end Display

More Sports

Step 1: Navigate to Structure > Block layout, click Custom block library tab.

Step 2: Click Add custom block link. Create More Sports block with following properties:

More Sports

Step 3: Click Save button

Refer to following HTML code:

					

2. Configure More Sports block

Step 1: Navigate to Structure > Block layout

Step 2: Find Panel fifth 4 click Place block button

Step 3: Find More Sports click Place block button and set following properites:

More Sports

Step 4: Click Save block button.

BBC Tweets view

1. Create BBC Tweets block view

Front end Display

BBC Tweets

Step 1: Navigate to Structure > Views, click Add views link, Create BBC Tweets view with following properties:

BBC Tweets

Step 2: Click Continue & edit button and set following properties:

BBC Tweets

Step 3: At Display name area, set following properties:

BBC Tweets

Step 4: At FIELDS area, click Add button to add fields: Content: Image, Content: Html Title, Content: Body, Content: Show Images field and set following properties:

Step 5: Set properties for Content: Show Images

BBC Tweets

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

BBC Tweets

Step 7: At BLOCK SETTINGS > Block name area, set the following properties:

BBC Tweets

Step 8: At Advanced > OTHER area, add CSS class change following properties:

BBC Tweets

Step 9: Click Save button.

2. Configure BBC Tweets block

Step 1: Navigate to Structure > Block layout

Step 2: Find Panel fifth 5 click Place block button

Step 3: Find BBC Tweets click Place block button and set following properites:

BBC Tweets

Step 3: Click Save block button.

Connect with us

1. Create Connect with us block

Front end Display

Connect with us

Step 1: Navigate to Structure > Block layout, click Custom block library tab.

Step 2: Click Add custom block link. Create Connect with us block with following properties:

Connect with us

Step 3: Click Save button

Refer to following HTML code:

                        

Or connect with us

2. Configure Connect with us block

Step 1: Navigate to Structure > Block layout

Step 2: Find Panel fifth 5 click Place block button

Step 3: Find Connect with us click Place block button and set following properites:

Connect with us

Step 4: Click Save block button.

Copyright

1. Create Copyright block

Front end Display

Copyright

Step 1: Navigate to Structure > Block layout, click Custom block library tab.

Step 2: Click Add custom block link. Create Copyright block with following properties:

Copyright

Step 3: Click Save button

Refer to following HTML code:

						

Copyright © 2014 Sport Magazine. All Rights Reserved. Designed by WeebPal. Powered by Drupal

2. Configure Copyright block

Step 1: Navigate to Structure > Block layout

Step 2: Find Footer click Place block button

Step 3: Find Copyright click Place block button and set following properites:

Copyright

Step 4: Click Save block button.

Footer menu link

1. Create Footer menu item

Step 1: Navigate to Structure > Menu, find and click Footer link

Footer menu

Step 2: Click Save button

Find Add link button , then click add Home menu item

Footer menu

Find Add link button , then click add Contact menu item

Footer menu

2. Configure Footer menu block

Step 1: Navigate to Structure > Block layout

Step 2: Find Footer click Place block button

Step 3: Find Footer click Place block button and set following properites:

Footer menu

Step 4: Click Save block button.

Main navigation link

Step 1: Navigate to Structure > Menu, find and click Main navigation link

Step 2: Find Add link button , then click add menu item

Main navigation link

Step 3: Click Save button

Find Add link button , then click add Home menu item

Main navigation link

Set properties for Blogs

Main navigation link

Set properties for Gallery

Main navigation link

Set properties for Bed/Odds

Main navigation link

Set properties for Video

Main navigation link

Set properties for Contact

Main navigation link

Set properties for Livescore

Main navigation link

Create Subpages

Banner block

1. Create Banner block

Front end Display

Banner Block

Step 1: Navigate to Structure > Blocks, click Custom block library tab.

Step 2: Click Add block link. Create Banner Block block with following properties:

Banner Block

Step 3: Click Save button

Refer to following HTML code:

					
					

2. Configure Banner block

Step 1: Navigate to Structure > Block layout

Step 2: Find Banner click Place block button

Step 3: Find Banner Block click Place block button and set following properites:

Banner Block

Step 4: Click Save configuration button.

About Us page

Create About Us page

Step 1: Navigate to Content , click Add content link, Create About Us view with following properties:

About Us

Step 2: Click Save and publish button

FAQ page

Create FAQ page

Step 1: Navigate to Content , click Add content link, Create FAQ view with following properties:

FAQ

Step 2: Click Save and publish button

Privacy Policy page

Create Privacy Policy page

Step 1: Navigate to Content , click Add content link, Create Privacy Policy view with following properties:

Privacy Policy

Step 2: Click Save and publish button

Terms & Conditions page

Create Terms & Conditions page

Step 1: Navigate to Content , click Add content link, Create Terms & Conditions view with following properties:

Terms & Conditions

Step 2: Click Save and publish button

Blogs page

Front end Display

Blogs

Step 1: Navigate to Structure > Views, click Add views link, Create Blogs view with following properties:

Blogs

Step 2: Click Continue & edit button and set following properties:

Blogs

Step 3: At FIELDS area, click Add button to add fields: Content: Image, Content: Changed, Content: Body, Content: Link to Content field and set following properties:

Step 4: Set properties for Content: Image

Blogs

Step 5: Set properties for Content: Changed

Blogs

Step 6: Set properties for Content: Body

Blogs

Step 7: Set properties for Content: Link to Content

Blogs

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

Blogs

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

Blogs

Step 10: At PAGER area, click User pager link, then set following properties:

Blogs

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

Blogs

Step 12: Click Save button.

Categories view

Front end Display

Categories

1. Create Categories block view

Step 1: Navigate to Structure > Views, click Add views link, Create Categories view with following properties:

Categories

Step 2: Click Continue & edit button and set following properties:

Categories

Step 3: In FILTER CRITERIA area, click Add button to add Parent term and set following properties:

Categories

Step 4: At SORT CRITERIA area, Click Add button to add Name

Categories

Step 5: At Advanced > OTHER area, add CSS class change following properties:

Categories

Step 6: Click Save button.

2. Configure Categories block

Step 1: Navigate to Structure > Block layout

Step 2: Find Sidebar first click Place block button

Step 3: Find Categories click Place block button and set following properites:

Categories

Step 4: Click Save block button.

Quote

1. Create Quote block

Front end Display

Quote

Step 1: Navigate to Structure > Block layout, click Custom block library tab.

Step 2: Click Add custom block link. Create Quote block with following properties:

Quote

Step 3: Click Save button

Refer to following HTML code:

                        

Brian Cashman

IT'S A GOAL, NOT A MANDATE

2. Configure Quote block

Step 1: Navigate to Structure > Block layout

Step 2: Find Sidebar second click Place block button

Step 3: Find Quote click Place block button and set following properites:

Quote

Step 4: Click Save block button.

Recent Posts view

1. Create Recent Posts block view

Front end Display

Recent Posts

Step 1: Navigate to Structure > Views, click Add views link, Create Recent Posts view with following properties:

Recent Posts

Step 2: Click Continue & edit button and set following properties:

Recent Posts

Step 3: At Display name area, set following properties:

Recent Posts

Step 4: In FIELDS area, click Add button to add fields: Content: Image, Content: Changed field and set following properties:

Step 5: Set properties for Content: Image

Recent Posts

Step 6: Set properties for Content: Title

Recent Posts

Step 7: Set properties for Content: Changed

Recent Posts

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

Recent Posts

Step 9: At SORT CRITERIA area, Click Add button to add Content: Changed

Recent Posts

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

Recent Posts

Step 11: Click Save button.

2. Configure Recent Posts block

Step 1: Navigate to Structure > Block layout

Step 2: Find Sidebar first click Place block button

Step 3: Find Recent Posts: Block:Recent Posts click Place block button and set following properites:

Recent Posts

Step 4: Click Save block button.

3. Create Block:Featured News view

Front end Display

Featured News

Stay open Recent Posts view, click Add button add Block new.

Featured News

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

Featured News

Step 2: At Display name area, set following properties:

Featured News

Step 3: At Title area, set following properties:

Featured News

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

Featured News

Step 5: In FIELDS area, click Add button to add fields: Content: Video field and set following properties:

Step 6: Set properties for Content: Video

Featured News

Step 7: Set properties for Content: Changed

Featured News

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

Featured News

Step 9: In FILTER CRITERIA area, set following properties:

Featured News

Step 10: At SORT CRITERIA area, Click Add button to add Content statistics: Views today,
Content statistics: Total views
and set following properties:

Step 11: Set properties for Content statistics: Views today

Featured News

Step 12: Set properties for Content statistics: Total views

Featured News

Step 13: At SORT CRITERIA area, click Rearrange button and set following arrange

Featured News

Step 14: At Advanced > OTHER area, add CSS class change following properties:

Featured News

Step 15: Click Save button.

4. Configure Block:Featured News block

Step 1: Navigate to Structure > Block layout

Step 2: Find Sidebar second click Place block button

Step 3: Find Recent Posts: Block:Featured News click Place block button and set following properites:

Featured News

Step 4: Click Save block button.

5. Create Block:Latest Blog Posts view

Front end Display

Latest Blog Posts

Stay open Recent Posts view, click Add button add Block new.

Latest Blog Posts

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

Latest Blog Posts

Step 2: At Display name area, set following properties:

Latest Blog Posts

Step 3: At Title area, set following properties:

Latest Blog Posts

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

Latest Blog Posts

Step 5: In FIELDS area, field and set following properties:

Step 6: Set properties for Content: Image

Latest Blog Posts

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

Latest Blog Posts

Step 8: At SORT CRITERIA area, Click Add button to add Content: Authored on and set following properties:

Step 9: Set properties for Content: Authored on

Latest Blog Posts

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

Latest Blog Posts

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

Latest Blog Posts

Step 12: Click Save button.

6. Configure Block:Latest Blog Posts block

Step 1: Navigate to Structure > Block layout

Step 2: Find Sidebar second click Place block button

Step 3: Find Recent Posts: Block:Latest Blog Posts click Place block button and set following properites:

Featured News

Step 4: Click Save block button.

Sport Specialist view

Front end Display

Sport Specialist

1. Create Sport Specialist block view

Step 1: Navigate to Structure > Views, click Add views link, Create Sport Specialist view with following properties:

Sport Specialist

Step 2: Click Continue & edit button and set following properties:

Sport Specialist

Step 3: In FIELDS area, click Add button to add fields: User: Picture, User: Description field and set following properties:

Step 4: Set properties for User: Picture

Sport Specialist

Step 5: Set properties for User: Description

Sport Specialist

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

Sport Specialist

Step 7: At SORT CRITERIA area, Click Add button to add Created

Sport Specialist

Step 8: In Advanced > OTHER area, add CSS class change following properties:

Sport Specialist

Step 9: Click Save button.

2. Configure Sport Specialist block

Step 1: Navigate to Structure > Block layout

Step 2: Find Sidebar second click Place block button

Step 3: Find Sport Specialist click Place block button and set following properites:

Sport Specialist

Step 4: Click Save block button.

Recent comments view

1. Create Recent comments page view

Step 1: Navigate to Structure > View ,find Recent comments view. Then click Delete button.

Step 2: Click Add views link, Create Recent comments view with following properties:

Recent comments

Step 3: Click Continue & edit button and set following properties:

Recent comments

Step 4: In FIELDS area, click Add button to add fields: Content: Title, Comment: Updated date, Comment: Comment field and set following properties:

Step 5: Set properties for Content: Title

Recent comments

Step 6: Set properties for Comment: Updated date

Recent comments

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

Recent comments

Step 8: In FILTER CRITERIA area, click Add button to add Published status or admin user field and set following properties:

Recent comments

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

Recent comments

Step 10: At SORT CRITERIA area, Click Add button to add Comment: Updated date and set following properties:

Recent comments

Step 11: At NO RESULTS BEHAVIOR area, Click Add button to add Global: Unfiltered text and set the following properties:

Recent comments

Step 12: At PAGER area, click User pager link, then set following properties:

Recent comments

Step 13: Click Save button.

2. Create Recent comments block view

Front end Display

Recent comments

Stay open Recent comments view, click Add button add Block new.

Tennis

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

Recent comments

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

Recent comments

Step 3: At BLOCK SETTINGS > Block name area, set the following properties:

Recent comments

Step 4: At PAGER > More link area, click link

Recent comments

Step 5: In Advanced > OTHER area, add CSS class change following properties:

Recent comments

Step 6: Click Save button.

3. Configure Recent comments block

Step 1: Navigate to Structure > Block layout

Step 2: Find Sidebar first click Place block button

Step 3: Find Recent comments click Place block button and set following properites:

Recent comments

Step 4: Click Save block button.

Most Viewed view

1. Create Block:Most Viewed view

Front end Display

Most Viewed

Stay open Recent Updated view, click Add button add Block new.

Most Viewed

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

Most Viewed

Step 2: At Display name area, set following properties:

Most Viewed

Step 3: At Title area, set following properties:

Most Viewed

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

Most Viewed

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

Most Viewed

Step 6: At SORT CRITERIA area, Click Add button to add Content statistics: Total views and set following properties:

Most Viewed

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

Most Viewed

Step 8: In Advanced > OTHER area, add CSS class change following properties:

Most Viewed

Step 9: Click Save button.

2. Configure Block:Most Viewed block

Step 1: Navigate to Structure > Block layout

Step 2: Find Sidebar second click Place block button

Step 3: Find Recent Updated: Block:Most Viewed click Place block button and set following properites:

Most Viewed

Step 4: Click Save block button.

Motorsport block

Front end Display

Motorsport

1. Create Block:Recent Updated view

Step 1: Navigate to Structure > Views, click Add views link, Create Motorsport view with following properties:

Recent Updated

Step 2: Click Continue & edit button and set following properties:

Recent Updated

Step 3: At Display name area, set following properties:

Recent Updated

Step 4: At Title area, set following properties:

Recent Updated

Step 5: At FORMAT Format: Grid area, and set following properties:

Recent Updated

Step 6: In FIELDS area, click Add button to add fields: Content: Image, Content: Changed, Content: Body, Content: Link to Content field and set following properties:

Step 7: Set properties for Content: Image

Recent Updated

Step 8: Set properties for Content: Changed

Recent Updated

Step 9: Set properties for Content: Body

Recent Updated

Step 10: Set properties for Content: Link to Content

Recent Updated

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

Recent Updated

Step 12: At SORT CRITERIA area, Click Add button to add Content: Changed and set following properties:

Recent Updated

Step 13: At SORT CRITERIA area, click Rearrange button and set following arrange

Recent Updated

Step 14: In Advanced > OTHER area, add CSS class change following properties:

Recent Updated

Step 15: Click Save button

2. Configure Block:Recent Updated block

Step 1: Navigate to Structure > Block layout

Step 2: Find Content click Place block button

Step 3: Find Motorsport: Block:Recent Updated click Place block button and set following properites:

Recent Updated

Step 4: Click Save block button.

Tags in Tags block

Front end Display

Tags in Tags

1. Create Tags view

Step 1: Navigate to Structure > Views, click Add views link, Create Tags view with following properties:

Tags in Tags

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

Tags in Tags

Step 3: In Advanced > OTHER area, add CSS class change following properties:

Tags in Tags

Step 4: Click Save button

2. Configure Tags block

Step 1: Navigate to Structure > Block layout

Step 2: Find Sidebar first click Place block button

Step 3: Find Tags click Place block button and set following properites:

Tags in Tags

Step 4: Click Save block button.

Gallery page

1. Create Gallery view

Front end Display

Gallery

Step 1: Navigate to Structure > Views, click Add views link, Create Gallery view with following properties:

Gallery

Step 2: Click Continue & edit button and set following properties:

Gallery

Step 3: In FIELDS area, click Add button to add fields: Content: Images field and set following properties:

Step 4: Set properties for Content: Images

Gallery

Step 5: At PAGE SETTINGS > Menu area, set the following properties:

Gallery

Step 6: At HEADER area, Click Add button to add Global: Text area and set the following properties:

Gallery

Step 7: At PAGER area, click User pager link, then set following properties:

Gallery

Step 8: In Advanced > OTHER area, add CSS class change following properties:

Gallery

Step 9: Click Save button.

2. Create Gallery(row) view

Front end Display

Gallery(row)

Stay open Gallery view, click Add button add Pager new.

Most Viewed

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

Gallery(row)

Step 2: At Display name area, set following properties:

Gallery(row)

Step 3: At FORMAT Format: Unformatted list area,click and set following properties:

Gallery(row)

Step 4: In FIELDS area, click Add button to add fields: Content: Changed, Content: Body field and set following properties:

Step 5: Set properties for Content: Changed

Gallery(row)

Step 6: Set properties for Content: Body

Gallery(row)

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

Gallery(row)

Step 8: At HEADER area, Click Add button to add Global: Text area and set the following properties:

Gallery(row)

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

Gallery(row)

Step 10: At PAGE SETTINGS > Menu area, set the following properties:

Gallery(row)

Step 11: Click Save button.

Bet/Odds page

1. Create Bet/Odds pages view

Front end Display

Bet/Odds

Step 4: Navigate to Structure > Views, click Add views link, Create Bet/Odds view with following properties:

Bet/Odds

Step 4: Click Continue & edit button and set following properties:

Bet/Odds

Step 4: In Advanced > Contextual filters area, click Add button to add fields: Content: Category and set following properties:

Bet/Odds

Step 4: In FIELDS area, click Add button to add fields: Content: Category, Content: Changed, Content: Draw, Content: Home, Content: Away, Content: Body, Content: Authored by field and set following properties:

Step 4: Set properties for Content: Changed

Bet/Odds

Step 4: Set properties for Content: Draw

Bet/Odds

Step 4: Set properties for Content: Home

Bet/Odds

Step 4: Set properties for Content: Away

Bet/Odds

Step 4: Set properties for Content: Body

Bet/Odds

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

Bet/Odds

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

Bet/Odds

Step 7: At PAGER area, click User pager link, then set following properties:

Bet/Odds

Step 4: In Advanced > OTHER area, add CSS class change following properties:

Bet/Odds

Step 4: Click Save button.

2. Create Match of the day block view

Stay open Bet/Odds view, click Add button add Block new.

Match of the day

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

Match of the day

Step 2: At Title area, set following properties:

Match of the day

Step 3: In Advanced > Contextual filters area, set following properties:

Match of the day

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

Match of the day

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

Match of the day

Match of the day

Step 6: In Advanced > OTHER area, add CSS class change following properties:

Match of the day

Step 7: Click Save button.

3. Configure Match of the day block

Step 1: Navigate to Structure > Block layout

Step 2: Find Sidebar second click Place block button

Step 3: Find Bet/Odds click Place block button and set following properites:

Match of the day

Step 4: Click Save block button.

Videos page

1. Create Videos page view

Front end Display

Videos page

Stay open Videos view, click Add button add Pager new.

Videos Viewed

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

Videos page

Step 2: In FIELDS area, field and set following properties:

Step 3: Set properties for Content: Video

Videos page

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

Videos page

Step 5: At PAGE SETTINGS > Menu area, set the following properties:

Videos page

Step 6: At PAGER area, click User pager link, then set following properties:

Videos page

Videos page

Step 7: In Advanced > OTHER area, add CSS class change following properties:

Videos page

Step 8: Click Save button.

2. Create Block:Videos2 view

Front end Display

Videos2

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

Videos2

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

Videos2

Step 2: At FORMAT Format: Unformatted list area, click Settings and set following properties:

Videos2

Step 3: In FIELDS area, click Add button to add fields: Content: Changed, Content: Body field and set following properties:

Step 4: Set properties for Content: Video

Videos2

Step 5: Set properties for Content: Changed

Videos2

Step 6: Set properties for Content: Body

Videos2

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

Videos2

Step 8: At PAGER area, click User pager link, then set following properties:

Videos2

Videos2

Step 9: In Advanced > OTHER area, add CSS class change following properties:

Videos2

Step 10: Click Save button.

3. Configure Block:Videos2 block

Step 1: Navigate to Structure > Block layout

Step 2: Find Sidebar second click Place block button

Step 3: Find Videos: Block:Videos2 click Place block button and set following properites:

Videos block

Step 4: Click Save block button.

Contact page

1. Create Contact block

Front end Display

Contact

Step 1: Navigate to Structure > Blocks, click Custom block library tab.

Step 2: Click Add block link. Create Contact block with following properties:

Contact

Step 3: Click Save button

Refer to following HTML code:

                        

HOW TO CONTACT US

Maecenas lectus tellus, faucibus id auctor vitae, egestas nec turpis. Proin accumsan interdum lacus nec convallis. Sed vestibulum placerat auctor. Maecenas scelerisque nibh nec eros mattis id suscipit sem viverra. Maecenas lectus tellus, faucibus id auctor vitae.

  • ABC Building street 111, New Something 789, Country UK.
  • Telephone: +123.456789 – +22.1478523
  • Email: support@weebpal.com
  • Fax: +22.1478523
  • Web: www.weebpal.com

2. Configure Contact block

Step 1: Navigate to Structure > Block layout

Step 2: Find Content click Place block button

Step 3: Find Contact click Place block button and set following properites:

Contact

Step 4: Click Save configuration button.

Livescore page

Create Livescore view

Front end Display

Livescore

Step 1: Navigate to Structure > Views, click Add views link, Create Livescore view with following properties:

Livescore

Step 2: Click Continue & edit button and set following properties:

Livescore

Step 3: In FIELDS area, click Add button to add fields: Content: Time, Content: TeamA, Content: Match Result, Content: TeamB, Content: Category field and set following properties:

Step 4: Set properties for Content: Time

Livescore

Step 5: Set properties for Content: TeamA

Livescore

Step 6: Set properties for Content: Match Result

Livescore

Step 7: Set properties for Content: TeamB

Livescore

Step 8: Set properties for Content: Category

Livescore

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

Livescore

Step 10: At PAGE SETTINGS > Menu area, set the following properties:

Livescore

Step 11: At PAGER area, click User pager link, then set following properties:

Livescore

Step 12: In Advanced > OTHER area, add CSS class change following properties:

Livescore

Step 13: Click Save button.

Top News block

1. Create Block:Top News view

Front end Display

Top News

Stay open Recent Updated view, click Add button add Block new.

Top News

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

Top News

Step 2: At Display name area, set following properties:

Top News

Step 3: At Title area, set following properties:

Top News

Step 4: In FIELDS area, field and set following properties:

Step 5: Set properties for Content: Changed

Top News

Step 6: Set properties for Content: Body

Top News

Step 7: At SORT CRITERIA area, set following properties:

Step 8: Set properties for Content statistics: Views today

Top News

Step 9: Set properties for Content statistics: Total views

Top News

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

Top News

Step 11: In Advanced > OTHER area, add CSS class change following properties:

Top News

Step 12: Click Save button.

2. Configure Block:Top News block

Step 1: Navigate to Structure > Block layout

Step 2: Find Content click Place block button

Step 3: Find Recent Updated: Block:Top News click Place block button and set following properites:

Top News

Step 4: Click Save configuration button.

Taxonomy term view

Create Taxonomy term view

Step 1: Navigate to Structure > View ,find Taxonomy term view, click Enable button. Then click Edit button , find and click Page button and set following properties:

Taxonomy term

Step 2: At FORMAT show: Grid area, click Settings and set following properties:

Taxonomy term

Step 3: Expand Advanced panel, at RELATIONSHIPS area, click Add to add relationship Content author

Taxonomy term

Step 4: In FIELDS area, click Add button to add fields: Content: Image, Content: Video, Content: Title, Content: Changed, Content: Body, Content: Link to Content field and set following properties:

Step 5: Set properties for Content: Image

Taxonomy term

Step 6: Set properties for Content: Video

Taxonomy term

Step 7: Set properties for Content: Changed

Taxonomy term

Step 8: Set properties for Content: Body

Taxonomy term

Step 9: Set properties for Content: Link to Content

Taxonomy term

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

Taxonomy term

Step 11: In FILTER CRITERIA area, click Add button to add Content: Published status or admin user, Content: Content type field and set following properties:

Step 12: Set properties for Content: Published status or admin user

Taxonomy term

Step 13: Set properties for Content: Content type

Taxonomy term

Step 14: At FILTER CRITERIA area, click Rearrange button and set following arrange

Taxonomy term

Step 15: At HEADER area, then and set the following properties:

Taxonomy term

Step 16: At PAGER area, click User pager link, then set following properties:

Taxonomy term

Taxonomy term

Step 17: Click Save button.

Football view

1. Create Football page view

Front end Display

Football page

Step 1: Navigate to Structure > View ,find Taxonomy term view, click Duplicate button. Then created Football button and set following properties:

Football page

Step 2: Click Continue & edit button and set following properties:

Football page

Step 2: At Title area, set following properties:

Football page

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

Football page

Football page

Step 4: In FILTER CRITERIA area, click Add button to add Content: Has taxonomy terms field and set following properties:

Football page

Step 5: At FILTER CRITERIA area, click Rearrange button and set following arrange

Football page

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

Football page

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

Football page

Step 8: At PAGER area, click User pager link, then set following properties:

Football page

Football page

Step 9: Click Save button.

2. Create Champions League block view

Front end Display

Champions League

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

Champions League

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

Champions League

Step 2: At Display name area, set following properties:

Champions League

Step 3: At Title area, set following properties:

Champions League

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

Champions League

Champions League

Step 5: In FIELDS area, field and set following properties:

Step 6: Set properties for Content: Video

Champions League

Step 7: Set properties for Content: Changed

Champions League

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

Champions League

Step 9: In FILTER CRITERIA area, click Add button to add Content: Has taxonomy terms field and set following properties:

Step 10: Set properties for Content: Has taxonomy terms

Champions League

Step 11: At FILTER CRITERIA area, click Rearrange button and set following arrange

Champions League

Step 12: At PAGER area, click User pager link, then set following properties:

Champions League

Champions League

Step 13: In Advanced > OTHER area, add CSS class change following properties:

Champions League

Step 14: Click Save button.

3. Configure Champions League block

Step 1: Navigate to Structure > Block layout

Step 2: Find Content click Place block button

Step 3: Find Football: Block:Champions League click Place block button and set following properites:

Champions League

Step 4: Click Save block button.

Top Headlines2 block

1. Create Top Headlines2 block view

Front end Display

Top Headlines2

Stay open Top Headlines view, click Add button add Block new.

Top Headlines2

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

Top Headlines2

Step 2: At Display name area, set following properties:

Top Headlines2

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

Top Headlines2

Top Headlines2

Step 4: In FIELDS area, set following properties:

Step 5: Set properties for Content: Image

Top Headlines2

Step 6: In Advanced > OTHER area, add CSS class change following properties:

Top Headlines2

Step 7: Click Save button.

2. Configure Top Headlines2 block

Step 1: Navigate to Structure > Block layout

Step 2: Find Content click Place block button

Step 3: Find Top Headlines: Top Headlines 2 click Place block button and set following properites:

Top Headlines2

Step 4: Find Content click Place block button

Step 5: Find Top Headlines: Top Headlines 2 click Place block button and set following properites:

Top Headlines2

Step 6: Click Save configuration button.

Latest News page

1. Create Latest News page view

Front end Display

Latest News

Step 1: Navigate to Structure > Views, click Add views link, Create Latest News view with following properties:

Latest News

Step 2: Click Continue & edit button and set following properties:

Latest News

Step 3: In FIELDS area, click Add button to add fields: Content: Image, Content: Video field and set following properties:

Step 4: Set properties for Content: Image

Latest News

Step 5: Set properties for Content: Video

Latest News

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

Latest News

Step 7: In FILTER CRITERIA area, set following properties:

Latest News

Step 8: At PAGER area, click User pager link, then set following properties:

Latest News

Step 9: In Advanced > OTHER area, add CSS class change following properties:

Latest News

Step 10: Click Save button.

2. Create Latest News (4cols) block view

Front end Display

Latest News (4cols)

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

Latest News (4cols)

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

Latest News (4cols)

Step 2: At Display name area, set following properties:

Latest News (4cols)

Step 3: At PAGER area, click User pager link, then set following properties:

Latest News (4cols)

Latest News (4cols)

Step 4: At PAGER > More link area, click link

Latest News (4cols)

Step 5: In Advanced > OTHER area, add CSS class change following properties:

Latest News (4cols)

Step 6: Click Save button.

3. Configure Latest News (4cols) block

Step 1: Navigate to Structure > Block layout

Step 2: Find Panel third click Place block button

Step 3: Find Latest News: Block:Latest News (4cols) click Place block button and set following properites:

Latest News (4cols)

Step 4: Click Save block button.

4. Create Latest News (6cols) block view

Front end Display

Latest News (6cols)

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

Latest News (6cols)

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

Latest News (6cols)

Step 2: At Display name area, set following properties:

Latest News (6cols)

Step 3: In FIELDS area, field and set following properties:

Step 4: Set properties for Content: Image

Latest News (6cols)

Step 5: Set properties for Content: Video

Latest News (6cols)

Step 6: At PAGER area, click User page link, then set following properties:

Latest News (6cols)

Latest News (6cols)

Step 7: At PAGER > More link area, click link

Latest News (6cols)

Step 8: In Advanced > OTHER area, add CSS class change following properties:

Latest News (6cols)

Step 9: Click Save button.

5. Configure Latest News (6cols) block

Step 1: Navigate to Structure > Block layout

Step 2: Find Panel third click Place block button

Step 3: Find Latest News: Block:Latest News (4cols) click Place block button and set following properites:

Latest News (6cols)

Step 4: Click Save block button.

6. Create Latest News (1col) block view

Front end Display

Latest News (1col)

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

Latest News (1col)

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

Latest News (1col)

Step 2: At Display name area, set following properties:

Latest News (1col)

Step 3: At FORMAT Format: Unformatted list area, and set following properties:

Latest News (1col)

Step 4: In FIELDS area, click Add button to add fields: Content: Changed, Content: Body, Content: Link to Content field and set following properties:

Step 5: Set properties for Content: Video

Latest News (1col)

Step 6: Set properties for Content: Changed

Latest News (1col)

Step 7: Set properties for Content: Body

Latest News (1col)

Step 8: Set properties for Content: Link to Content

Latest News (1col)

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

Latest News (1col)

Step 10: At PAGER area, click User pager link, then set following properties:

Latest News (1col)

Latest News (1col)

Step 11: At PAGER > More link area, click link

Latest News (1col)

Step 12: In Advanced > OTHER area, add CSS class change following properties:

Latest News (1col)

Step 13: Click Save button.

7. Configure Latest News (1cols) block

Step 1: Navigate to Structure > Block layout

Step 2: Find Content click Place block button

Step 3: Find Latest News: Block:Latest News (1col) click Place block button and set following properites:

Latest News (1col)

Step 4: Click Save block 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.

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.