Drupal 8 - Zircon Theme Guide for Developers

Overview

Starting with a new theme, it 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 Zircon D8 to look exactly like the demo site.

1. Zircon D8 Package

This is our first project for Drupal 8 themes. Based on the Zircon theme, the most popular Drupal theme of WeebPal in the Drupal community, our team has published the latest version of Zircon in Drupal 8.

We’ve taken advantage of all of the up to date web technologies, and designs for the theme. We believe this will be a good place to start your business or personal website in Drupal 8.

Included content:

  • README.txt
  • Zircon D8 theme: zircon_d8-8.0.0.zip
  • Demo Profile for Zircon D8: zircon_d8-demo-8.0.0.zip

2. Features

  • Documentation included.
  • Browser compatibility
  • Web Technology (Html5/Css3, Twitter Bootstrap 3.1.1, Font Awesome 4.0.3,…)
  • Fully responsive.
  • Color variations.
  • Easy customization.
  • High usability
  • Support both Left to Right and Right to Left Languages

3. 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.6.8 or higher

PHP

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

4. Screenshots

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

Home

About Us page

Articles page

Business page

Finance page

Health Care page

Idea page

Investment page

Forum page

Help

Contact

5. Module requirements

Core Modules

  • forum
  • color

Two Modules

  1. admin_toolbar
  2. memcache

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: Zircon D8)

Files included:

  • README.txt
  • Zircon D8 theme package: zircon_d8-8.0.0.zip
  • Zircon D8 demo package: zircon_d8-demo-8.0.0.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 Zircon D8 Demo

  • zircon_d8-demo-8.0.0.zip

2. Extract zircon_d8-demo-8.0.0.zip above and copy it into your host, and rename the directory to zircon

Quick Installation

3. Access your MySQL database and create a new database (e.g: zircon-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

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, locate the $database array and set proper credentials. Then move the $database code to the bottom of the file.

Quick Installation

                    $databases['default']['default'] = array (
                      'database' => 'databasename',
                      'username' => 'username',
                      'password' => 'password',
                      'prefix' => '',
                      'host' => 'localhost',
                      'port' => '3306',
                      'namespace' => 'Drupal\\Core\\Database\\Driver\\mysql',
                      'driver' => 'mysql',
                       );
                   $settings['install_profile'] = 'standard';
                

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

Now, you can visit administrator site with the admin account admin/admin 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 zircon_d8 Theme, find this guide in handy.

1. Install Drupal

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

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

Follow steps below to install a Drupal site only:

3. Access to database and create a new database with a name such as zircon-d8.

Install theme package

4. Open browser and navigate to your website.

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

Install Drupal 8

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

Install Drupal 8

7. Choose continue anyway => click link.

Install Drupal 8

8. Enter Database configuration => click Save and continue button.

Install Drupal 8

9. Click existing site and you will have a new site.

Install Drupal 8

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

2. Install Zircon D8 Theme

  1. Extract Zircon D8 theme .ZIP file:
    • zircon_d8-8.0.0.zip
  2. Move this theme into your Drupal folder: zircon_d8/themes

  3. Navigate to Appearance > Choose Install and set default Zircon-D8 theme

3. Install Required Modules

Now that you've enabled Zircon II 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 zircon_d8-demo-8.0.0
  2. Open extracted folder, go to sites/all and copy all folders inside (modules, themes, libraries)
  3. Paste them to your host, folder sites/all

Note: See this guide to get more details about installation


Taxonomy configuration

Quick Information

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

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

Vocabulary

Then, add terms for each vocabulary

Step 2 :Terms of: Forums.

Navigate to Structure -> Forums to create add forum and add container as the following:

Taxonomy

Step 3:Terms of: Categories

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 -> MEDIA area -> Image styles, then create image styles as the following:

Image Styles

Configure for each image style:

  1. Medium(200x200):
  2. Vocabulary

  3. Slideshow(1170x390)
  4. Vocabulary


Content type configuration

Modify Article type

Step 1: Navigate to Structure > Content Type find Article to click link

Step 2: In Article row, click "manage fields" --> add "Slideshow" field with following settings:

Article

Step 3: Click Save and continue button, then click Save field settings button > Set following properties:

Article

Step 4:Click Save setting button.

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

Article

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

Article

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

Article

Step 8: Click Save button

Create Ads type

Step 1: Navigate to Structure > Content Type. Click Add Content Type link to create content type Ads with following properties:

Gallery

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

Gallery

Step 3: Set properties for Image field

Gallery

Step 4:Click Save setting button.

Create Book type

Step 1: Navigate to Structure > Content Type. Click Add Content Type link to create content type Book with following properties:

Our Partners

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

Our Partners

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

Our Partners

Step 4: Click Save button.

Create Forum type

Step 1: Navigate to Structure > Content Type. Click Add Content Type link to create content type Forum with following properties:

forum

Step 2: Go to Manage Fields and add Comments fields:

forum

Step 3: Go to manage display to add fields:

Our Product

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

Our Product

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

Our Product

Step 6: Click Save button


Create Homepage

Search form block

Front end Display

Search form

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

Search form

Step 2: Click Save button

Site branding block

Front end Display

Search form

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

Search form

Step 2: Click Save button

Main menu

Front end Display

Main menu

Configure Main menu block

Step 1: Navigate to Structure > Blocks, find Main menu block. Click Configure link and set following properties:

Main menu

Step 2: Click Save block button.

Slideshow block

Front end Display

Slideshow

1. Create Slideshow view

Step 1: Navigate to Structure > Views, click Add new view 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: Publishing status (Yes), Content: Type(= Article), Content: Slideshow:target_id ( not empty ).

Step 4: Set properties for Content: Publishing status (Yes)

Slideshow

Step 5: Set properties for Content: Type(= Article)

Slideshow

Step 6: Set properties for Content: Slideshow:target_id ( not empty )

Slideshow

Step 7: Set properties for Content: Title

Slideshow

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

Slideshow

Step 8: Click Apply the button.

2. Configure View: Slideshow block

Step 1: Navigate to Structure > Blocks

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

Slideshow

Slideshow

Step 3: Click Save block button.

Feature block

Front end Display

Feature

1. Create Feature view

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

Service

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

Service

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

Step 4: Set properties for Content: Image

Service

Step 5: Set properties for Content: Body

Service

Step 6: Set properties for Content: Link to content

Service

Step 7: Set properties for Content: Title

Service

Step 8: At FILTER CRITERIA area, click Add button and add file Content: Publishing status (Yes),Content: Type (= Article)

Step 9: Set properties for Content: Publishing status (Yes)

Service

Step 10: Set properties for Content: Type (= Article)

Service

Step 11: Click Save block button.

2. Configure View: Feature block

Step 1: Navigate to Structure > Blocks

Step 2: Find View: Feature block, click place block link, set following properties

Service

Step 3:Click Save block button.

Sidebar second: Quote block

Front end Display

Quote

Step 1: Navigate to Structure > Blocks, click Add blocks link to create Quote block with following properties:

Quote

Quote

Quote

Step 2: Click Save block button.

Sidebar second: Our Products block

Front end Display

Our Products

1. Create Our Products view

Step 1: Navigate to Structure > Views, click Add views link, create Our Products view with following properties:

Our Products

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

Our Products

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

Step 4: Set properties for Content: Image

Our Products

Step 5: Set properties for Content: Title

Our Products

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

Our Products

Step 7: At FILTER CRITERIA area, click Add button and add file Content: Type (= Article)

Our Products

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

Our Products

Step 9: At Advanced > OTHER area, add Catching

Our Products

Step 10: Click Save block button.

2. Configure View: Our Products block

Step 1: Navigate to Structure > Blocks

Step 2: Find View: Our Products block, click configure link, set following properties

Our Products

Our Products

Step 3:Click Save block button.

Sidebar second: Recent Content block

Front end Display

Latest Articles

1. Create Recent Content view

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

Latest Articles

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

Latest Articles

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

Step 4: Set properties for Content: Image

Recent content

Step 5: Set properties for Content: Title

Latest Articles

Step 6: Set properties for Content: Body

Latest Articles

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

Latest Articles

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

Latest Articles

Step 9: At Advanced > OTHER area, add Catching

Latest Articles

Step 10: Click Save block button.

2. Configure View: Recent content block

Step 1: Navigate to Structure > Blocks

Step 2: Find View: Recent content block, click configure link, set following properties

Latest Articles

Latest Articles

Step 3:Click Save block button.

Sidebar First: User menu block

Front end Display

Custom Sreach 1

Configure User menu block

Step 1: Navigate to Structure > Blocks,find User menu.Click configure link and block with following properties:

User menu

User menu

Step 2: Click Save block button.

Sidebar first: Main Menu

Front end Display

Main Menu

Step 1: Navigate to Structure > Blocks

Step 2: Find Main Menu block, click configure link, set following properties

Main Menu

Main Menu

Step 3:Click Save block button.

Sidebar first: Category block

Front end Display

Most recent poll

1. Configure Category block

Step 1: Navigate to Structure > Blocks

Step 2: Find Category block, click configure link, set following properties

Most recent poll

Most recent poll

Step 3: Click Save block button.

2. Add link for menu

Step 1: Navigate to Content > Add content

Step 2: Find Poll content type link. Then click and create content with following properties:

Most recent poll

Step 3: Click Save button.

Sidebar first: Ads block

Front end Display

Tags in Tgas

Step 1: Navigate to Structure > Blocks

Step 2: Find Ads block, click configure link, set following properties

ads

ads

Step 3:Click Save block button.

Pannel first col 1: Carousel block

Front end Display

Carousel

1. Create Carousel view

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

Carousel

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

Our Partners

Step 3: At FIELDS area, click Add button to add fields: Content: Image, Content: Type, Content: Publishing status

Step 4:Set properties for >Content: Image

Our Partners

Step 5:Set properties for >Content: Type

Our Partners

Step 6:Set properties for >Content: Publishing status

Our Partners

Step 7:At >FIELDS area, click Rearrange button following properties:

Carousel

Step 8:At >Advanced > OTHER area, add Catching

Carousel

Step 9: Click >Save to save view

2. Configure View: Carousel block

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

Carousel

Step 2: Click Save block button.

Pannel first col 1: Contact block

Front end Display

Contact

1. Create and configure Contact block

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 2: Click Save block button.

Refer to following PHP code:

                        
                            

7801 NW 15 Street Ste #CO32314
Doral, Florida 33126

Email: contact@weebpal.com
Phone: (123) 123-4567
Fax: (123) 123-4567

Pannel second col 2: Useful Links block

Front end Display

Resources

Create and configure Useful block

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

Step 2: Click Add block link, CreateUseful Links block with following properties:

Useful links

Resources

Step 3: Click Save block button.

Refer to following HTML code:

                        

Pannel second col 3: Recent Comments block

Front end Display

Recent Comments

1. Create Recent Comments view

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

Most Popular

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

Most Popular

Step 3: At FIELDS area, click Add button to add fields: Content: Update date, Content: Title

Step 4: Set properties for Content: Update date

Most Popular

Step 5: At Filter Criteria area, click Add button to add field: Comment: Approved status and set properties:

Most Popular

Step 6:Set properties for Comment: Comment ID

Recent comments

Step 7: At Format area, set following with the properties:

Recent comments

Step 8: At Block Setting area, click Block name to rename :

Recent comments

Step 9:At No results behavior area, add Global: Unfiltered text following properties:

Most Popular

Step 10: At Advanced > OTHER area, add Caching

Most Popular

Step 11: Click Save to save view

2. Configure View: Recent comments block

Step 1:Navigate to Structure > Blocks,find View: Recent comments.Click configure link and block with following properties:

Most Popular

Step 2:Click Save block button.

Pannel second col 4: Newsletters block

Front end Display

Newsletters

Create and configure Newsletters block

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

Step 2: Click Add Newsletter link. Then create Newsletter , set following properties:

Connect with us

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

Connect with us

Step 4:Click Save button.

Footer: Coppyright block

Front end Display

Coppyright

Create and configure Coppyright block

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

Coppyright

Coppyright

Step 2: Click Save block button.

Refer to following HTML code:

Powered by Drupal. Designed by WeebPal Drupal Themes.

©2015. All rights reserved

Footer: Footer menu block

Front end Display

Coppyright

Configure Footer menu block

Step 1: Navigate to Structure > menu, find Footer click edit menu.then click add link to add link for Footer menu

Superfish 2

Step 2: Navigate to Structure > block, find Footer link click Configure to set following properties:

Superfish 2

Step 3: Click Save block button.

Create Subpages

About Us page

Create and configure About Us content

Step 1: Navigate to Content > Add content link, find Basic page click and create About Me content with following properties:

About Us

Step 2: Find Menu settings to click and set following properties

About Us

Step 3: Click Save block button.

Articles page

Create and configure Article view

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

article

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

article

Step 3: At FILTER CRITERIA area, find Content: Type to click and set following properties:

article

Step 4: Click Save to save view

Forum page

Create and configure Forum block

Step 1: Navigate to Structure >Forums, click Add forum link to create Forum link with following properties:

Forum

Forum

Step 2: Click Save block button.

Help page

Create and configure Help page block

Step 1: Navigate to Structure > Block click Add new block, then create Help block and set following properties:

Portfolio

Step 2: Click Save button.

Contact page

Add Contact view

Step 1: Navigate to Structure > block find Contact block. Then click Add button to add Contact block and set following properties:

Portfolio 3

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

From our blog

News & Events

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

Subscribe to our mailing list

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

Connect with us

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

▲ Top
Subscribe

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