Drupal 8 - Zircon Theme Guide For Developers

09/05/2017 Drupal 8 Zircon Theme Guide for Developers | WeebPal
 Your cart (0)

Drupal 8 (/drupal-8-themes) FAQ (/faq) Downloads (/downloads) Payment Guide (/guides/weebpal-standard-payment-process-guideline)
Support (http://support.weebpal.com) Contact us (/contact) Register (/user/register) Login (/user/login)
(/)
DRUPAL 8 - ZIRCON THEME GUIDE FOR

 DEVELOPERS
https://www.weebpal.com/guides/drupal8zirconthemeguidedevelopers 1/65
Doc Navigation
The Basic - Before You Start
Installation
Taxonomy Configurations
Media Configurations
Content Type Configurations


Create Homepage
Create Subpages
More Configurations
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
(http://www.weebpal.com/drupal-themes/zircon-d8) to look exactly like the demo site (http://demo.weebpal.com/drupal8/zircon/).
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 (http://www.drupal.org/), please take a reference to System requirements (http://drupal.org/requirements) on
drupal.org (http://www.drupal.org).
4. Screenshots
Let's glance through the theme's design & some features:
Home
(/sites/default/files/guide_static/guides_d8/zircon_d8/screenshot/homepage.png)
About Us page
(/sites/default/files/guide_static/guides_d8/zircon_d8/screenshot/about-us.png)
Articles page
(/sites/default/files/guide_static/guides_d8/zircon_d8/screenshot/articles.png)
 Business page
(/sites/default/files/guide_static/guides_d8/zircon_d8/screenshot/business-page.png)
Finance page
(/sites/default/files/guide_static/guides_d8/zircon_d8/screenshot/finance.png)
Health Care page
(/sites/default/files/guide_static/guides_d8/zircon_d8/screenshot/health-care.png)
Idea page
(/sites/default/files/guide_static/guides_d8/zircon_d8/screenshot/idea.png)
Investment page
(/sites/default/files/guide_static/guides_d8/zircon_d8/screenshot/investment.png)
Forum page
(/sites/default/files/guide_static/guides_d8/zircon_d8/screenshot/forums.png)
Help
(/sites/default/files/guide_static/guides_d8/zircon_d8/screenshot/help.png)
Contact
(/sites/default/files/guide_static/guides_d8/zircon_d8/screenshot/contact.png)
5. Module requirements
Core Modules
forum
color 
Two Modules
Two Modules
1. admin_toolbar (https://www.drupal.org/project/admin_toolbar)
2. memcache (https://www.drupal.org/project/memcache)
Download Drupal core files, and extend your site with modules at here (https://www.drupal.org/download).
Installation
How to install a WeebPal demo package
1. Download one theme package of your choice (e.g: Zircon D8 (http://www.weebpal.com/drupal-themes/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 (http://demo.weebpal.com/zircon_ii) for the theme easily.
(/sites/default/files/guide_static/guides_d8/zircon_d8/structure/package.png)
The below steps will give you the installation guide so that you can build your website to look exactly like the Zircon D8 Demo
(http://demo.weebpal.com/zircon_ii)
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
(/sites/default/files/guide_static/guides_d8/zircon_d8/structure/quick_install_demo_package.png)
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
(/sites/default/files/guide_static/guides_d8/zircon_d8/structure/database-create.png)
4. In the demo directory database/ , you can find database dump named sample_data.sql.

(/sites/default/files/guide_static/guides_d8/zircon_d8/structure/quick_install_database.png)
Import this file into new database.


(/sites/default/files/guide_static/guides_d8/zircon_d8/structure/database-import.png)
5. Now, you need to modify sites/default/default.settings.php file. Clone default.settings.php file, then rename it "settings.php"
(/sites/default/files/guide_static/guides_d8/zircon_d8/structure/quick_install_settings.png)
6. Open settings.php, locate the $database array and set proper credentials. Then move the $database code to the bottom of the file.
(/sites/default/files/guide_static/guides_d8/zircon_d8/structure/quick_install_settings_database.png)
1 $databases['default']['default'] = array (
1 $databases['default']['default'] = array (
2 'database' => 'databasename',
3 'username' => 'username',
4 'password' => 'password',
5 'prefix' => '',
6 'host' => 'localhost',
7 'port' => '3306',
8 'namespace' => 'Drupal\\Core\\Database\\Driver\\mysql',
9 'driver' => 'mysql',
10 );
11 $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
(http://demo.weebpal.com/drupal8/zircon/)
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 (http://drupal.org/project/drupal) and download the latest version of Drupal 8.
(/sites/default/files/guide_static/guides_d8/zircon_d8/structure/preparation-download-drupal8.png)
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.
(/sites/default/files/guide_static/guides_d8/zircon_d8/structure/database-create.png)
4. Open browser and navigate to your website.
5. Choose language => click Save and continue button.
(/sites/default/files/guide_static/guides_d8/zircon_d8/structure/intall-drupal-step1.png)
6. Choose Standard => click Save and continue button.
7. Choose continue anyway => click link.
8. Enter Database configuration => click Save and continue button.
9. Click existing site and you will have a new site.
(/sites/default/files/guide_static/guides_d8/zircon_d8/structure/existing-site.png)
You can refer the guide (https://www.drupal.org/documentation/install) from drupal.org (http://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
(/sites/default/files/guide_static/guides_d8/zircon_d8/structure/preparation-extract.png)

3. Navigate to Appearance > Choose Install and set default Zircon-D8 theme
(/sites/default/files/guide_static/guides_d8/zircon_d8/structure/preparation-set-default.png)
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 (http://drupal.org/documentation/install/modules-themes/modules-8) 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 (http://www.weebpal.com/guide/how-install-weebpal-theme-drupal-developers) 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
(http://drupal.org/documentation/modules/taxonomy)
STEP 1: Navigate to Structure > Taxonomy to create vocabularies as the following:
(/sites/default/files/guide_static/guides_d8/zircon_d8/structure/taxonomy.png)
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:
(/sites/default/files/guide_static/guides_d8/zircon_d8/structure/taxonamy-add-term-forums.png) 
STEP 3: Terms of: Categories

(/sites/default/files/guide_static/guides_d8/zircon_d8/structure/taxonamy-add-term- Categories.png)
Note: See this guide (http://www.weebpal.com/guide/how-know-main-features-drupal-quickly#tutorial-section-3-5) 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
(/sites/default/files/guide_static/guides_d8/zircon_d8/structure/image-style.png)
Configure for each image style:
1. Medium(200x200):
Vocabulary
(/sites/default/files/guide_static/guides_d8/zircon_d8/structure/image-style-medium.png)
2. Slideshow(1170x390)
Vocabulary
(/sites/default/files/guide_static/guides_d8/zircon_d8/structure/image-style-slideshow.png)
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:
(/sites/default/files/guide_static/guides_d8/zircon_d8/structure/ctt-article-img.png)
STEP 3: Click Save and continue button, then click Save field settings button > Set following properties:
(/sites/default/files/guide_static/guides_d8/zircon_d8/structure/ctt-article-img-setting.png)
STEP 4: Click Save setting button.
STEP 5: Go to Manage form display tab, set following properties:
(/sites/default/files/guide_static/guides_d8/zircon_d8/structure/ctt-article-form-display.png)
STEP 6: Go to Manage display tab set following properties:
(/sites/default/files/guide_static/guides_d8/zircon_d8/structure/ctt-article-default.png)

STEP 7: Go to Manage display tab --> Teaser set following properties:
(/sites/default/files/guide_static/guides_d8/zircon_d8/structure/ctt-article-teaser.png)
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:
(/sites/default/files/guide_static/guides_d8/zircon_d8/structure/ctt-ads.png)
STEP 2: Click Save and add fields button, then Add "Images" field with following settings:
(/sites/default/files/guide_static/guides_d8/zircon_d8/structure/ctt-ads-field.png)
STEP 3: Set properties for Image field
(/sites/default/files/guide_static/guides_d8/zircon_d8/structure/ctt-gallery-img-1.png)
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:
(/sites/default/files/guide_static/guides_d8/zircon_d8/structure/ctt-book.png)
STEP 2: Go to Manage Fields and add following fields:
(/sites/default/files/guide_static/guides_d8/zircon_d8/structure/ctt-book-field.png)

STEP 3: Go to Manage form display tab > Default set following properties:
(/sites/default/files/guide_static/guides_d8/zircon_d8/structure/ctt-manage-display-form.png)
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:
(/sites/default/files/guide_static/guides_d8/zircon_d8/structure/ctt-forum.png)
STEP 2: Go to Manage Fields and add Comments fields: 
(/sites/default/files/guide_static/guides_d8/zircon_d8/structure/ctt-add-field.png)
STEP 3: Go to manage display to add fields:
(/sites/default/files/guide_static/guides_d8/zircon_d8/structure/ctt-manage-field-forum.png)
STEP 4: . Go to Manage display tab > Default set following properties:
(/sites/default/files/guide_static/guides_d8/zircon_d8/structure/ctt-forum-manage-display.png)
STEP 5: Go to Manage display tab > Teaser set following properties:


(/sites/default/files/guide_static/guides_d8/zircon_d8/structure/ctt-forum-teaser.png)
Create Homepage
Search form block
Front end Display
(/sites/default/files/guide_static/guides_d8/zircon_d8/homepage/search-form.png)
STEP 1: Navigate to Structure > Blocks, find Search form block, click configure link and set the following properties:
(/sites/default/files/guide_static/guides_d8/zircon_d8/homepage/search-form-block.png)
Site branding block 

Front end Display
(/sites/default/files/guide_static/guides_d8/zircon_d8/homepage/branding-form.png)
STEP 1: Navigate to Structure > Blocks, find Search form block, click configure link and set the following properties:
(/sites/default/files/guide_static/guides_d8/zircon_d8/homepage/branding-form-block.png)
Main menu
Front end Display
(/sites/default/files/guide_static/guides_d8/zircon_d8/homepage/tb-menu-block.png)
Configure Main menu block
STEP 1: Navigate to Structure > Blocks, find Main menu block. Click Configure link and set following properties:
(/sites/default/files/guide_static/guides_d8/zircon_d8/homepage/tb-menu.png)
STEP 2: Click Save block button.

Slideshow block
Front end Display
Front end Display
(/sites/default/files/guide_static/guides_d8/zircon_d8/homepage/slideshow.png)
1. Create Slideshow view
STEP 1: Navigate to Structure > Views, click Add new view link, Create Slideshow view with following properties:
(/sites/default/files/guide_static/guides_d8/zircon_d8/homepage/slideshow-create.png)
STEP 2: Click Continue & edit button and set following properties:
(/sites/default/files/guide_static/guides_d8/zircon_d8/homepage/slideshow-view.png)
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)
(/sites/default/files/guide_static/guides_d8/zircon_d8/homepage/publish-img.png)
STEP 5: Set properties for Content: Type(= Article)
(/sites/default/files/guide_static/guides_d8/zircon_d8/homepage/article-img.png)
STEP 6: Set properties for Content: Slideshow:target_id ( not empty )
(/sites/default/files/guide_static/guides_d8/zircon_d8/homepage/slideshow-img.png)
STEP 7: Set properties for Content: Title
(/sites/default/files/guide_static/guides_d8/zircon_d8/homepage/slideshow-title.png)

STEP 8: At FIELDS area, click Rearrange button and set following arrange
(/sites/default/files/guide_static/guides_d8/zircon_d8/homepage/slideshow-rearr.png)
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
(/sites/default/files/guide_static/guides_d8/zircon_d8/homepage/slideshow-block-1.png)
(/sites/default/files/guide_static/guides_d8/zircon_d8/homepage/slideshow-block-2.png)
Feature block
Front end Display
(/sites/default/files/guide_static/guides_d8/zircon_d8/homepage/feature.png)
1. Create Feature view
STEP 1: Navigate to Structure > Views, click Add views link, create Feature view with following properties:
(/sites/default/files/guide_static/guides_d8/zircon_d8/homepage/feature-create.png)
(/sites/default/files/guide_static/guides_d8/zircon_d8/homepage/feature-view.png)
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
(/sites/default/files/guide_static/guides_d8/zircon_d8/homepage/feature-img.png)
STEP 5: Set properties for Content: Body
(/sites/default/files/guide_static/guides_d8/zircon_d8/homepage/feature-body.png)

STEP 6: Set properties for Content: Link to content
(/sites/default/files/guide_static/guides_d8/zircon_d8/homepage/feature-link.png)
(/sites/default/files/guide_static/guides_d8/zircon_d8/homepage/feature-title.png)

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)
(/sites/default/files/guide_static/guides_d8/zircon_d8/homepage/publish-type.png)
STEP 10: Set properties for Content: Type (= Article)
(/sites/default/files/guide_static/guides_d8/zircon_d8/homepage/feature-article.png)
2. Configure View: Feature block
STEP 2: Find View: Feature block, click place block link, set following properties
(/sites/default/files/guide_static/guides_d8/zircon_d8/homepage/view-feature.png)
Sidebar second: Quote block

Front end Display
(/sites/default/files/guide_static/guides_d8/zircon_d8/homepage/quote.png)
STEP 1: Navigate to Structure > Blocks, click Add blocks link to create Quote block with following properties:
(/sites/default/files/guide_static/guides_d8/zircon_d8/homepage/quote-block-1.png)
Sidebar second: Our Products block

Front end Display
(/sites/default/files/guide_static/guides_d8/zircon_d8/homepage/our-product.png)
1. Create Our Products view
STEP 1: Navigate to Structure > Views, click Add views link, create Our Products view with following properties:
(/sites/default/files/guide_static/guides_d8/zircon_d8/homepage/our-product-create.png)
(/sites/default/files/guide_static/guides_d8/zircon_d8/homepage/our-product-view.png)
STEP 3: At FIELDS area, click Add button to add fields: Content: Image
(/sites/default/files/guide_static/guides_d8/zircon_d8/homepage/our-product-img.png)
(/sites/default/files/guide_static/guides_d8/zircon_d8/homepage/our-product-title.png)
STEP 6: At FIELDS area, click Arrange button and set following arrange
(/sites/default/files/guide_static/guides_d8/zircon_d8/homepage/our-product-rearr.png)
STEP 7: At FILTER CRITERIA area, click Add button and add file Content: Type (= Article)
(/sites/default/files/guide_static/guides_d8/zircon_d8/homepage/product-type.png)
STEP 8: At Advanced > OTHER area, add CSS class
(/sites/default/files/guide_static/guides_d8/zircon_d8/homepage/our-product-css.png)
STEP 9: At Advanced > OTHER area, add Catching
(/sites/default/files/guide_static/guides_d8/zircon_d8/homepage/catching-product.png)
2. Configure View: Our Products block
STEP 2: Find View: Our Products block, click configure link, set following properties
(/sites/default/files/guide_static/guides_d8/zircon_d8/homepage/our-product-block-1.png)
(/sites/default/files/guide_static/guides_d8/zircon_d8/homepage/our-product-block-2.png)
Sidebar second: Recent Content block

Front end Display
(/sites/default/files/guide_static/guides_d8/zircon_d8/homepage/recent-content.png)

1. Create Recent Content view
STEP 1: Navigate to Structure > Views, click Add views link, Create Latest Articles view with following properties:
(/sites/default/files/guide_static/guides_d8/zircon_d8/homepage/recent-view.png)
(/sites/default/files/guide_static/guides_d8/zircon_d8/homepage/recent-view-1.png)
STEP 3: At FIELDS area, click Add button to add fields: Content: Image, Content: Title, Content: Body.
(/sites/default/files/guide_static/guides_d8/zircon_d8/homepage/recent-content-img.png)
(/sites/default/files/guide_static/guides_d8/zircon_d8/homepage/recent-content-title.png)
STEP 6: Set properties for Content: Body
(/sites/default/files/guide_static/guides_d8/zircon_d8/homepage/recent-content-body.png)
STEP 7: At FIELDS area, click Rearrange button and set following arrange
(/sites/default/files/guide_static/guides_d8/zircon_d8/homepage/recent-content-arr.png)
STEP 8: At Advanced > OTHER area, add CSS class
(/sites/default/files/guide_static/guides_d8/zircon_d8/homepage/recent-css.png)

STEP 9: At Advanced > OTHER area, add Catching
(/sites/default/files/guide_static/guides_d8/zircon_d8/homepage/recent-catching.png)
2. Configure View: Recent content block
STEP 2: Find View: Recent content block, click configure link, set following properties
(/sites/default/files/guide_static/guides_d8/zircon_d8/homepage/recent-content-block.png)
(/sites/default/files/guide_static/guides_d8/zircon_d8/homepage/recent-content-block-1.png)
Sidebar First: User menu block

Front end Display
(/sites/default/files/guide_static/guides_d8/zircon_d8/homepage/user-menu.png)
Configure User menu block
 STEP 1: Navigate to Structure > Blocks,find User menu.Click configure link and block with following properties:
(/sites/default/files/guide_static/guides_d8/zircon_d8/homepage/user-menu-block-1.png)
(/sites/default/files/guide_static/guides_d8/zircon_d8/homepage/user-menu-block-2.png)
Sidebar first: Main Menu

Front end Display
(/sites/default/files/guide_static/guides_d8/zircon_d8/homepage/main-menu.png)
STEP 2: Find Main Menu block, click configure link, set following properties
(/sites/default/files/guide_static/guides_d8/zircon_d8/homepage/main-menu-block-1.png)
(/sites/default/files/guide_static/guides_d8/zircon_d8/homepage/main-menu-block-2.png)
Sidebar first: Category block 

Front end Display

(/sites/default/files/guide_static/guides_d8/zircon_d8/homepage/category.png)
1. Configure Category block
STEP 2: Find Category block, click configure link, set following properties
(/sites/default/files/guide_static/guides_d8/zircon_d8/homepage/category-block-1.png)
(/sites/default/files/guide_static/guides_d8/zircon_d8/homepage/category-block-2.png)
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:
 (homepage/category-link.png)
STEP 3: Click Save button.
Sidebar first: Ads block

Front end Display
(/sites/default/files/guide_static/guides_d8/zircon_d8/homepage/ads.png)
STEP 2: Find Ads block, click configure link, set following properties
(/sites/default/files/guide_static/guides_d8/zircon_d8/homepage/ads-block-1.png)
 (/sites/default/files/guide_static/guides_d8/zircon_d8/homepage/ads-block-2.png)
Pannel first col 1: Carousel block

Front end Display
(/sites/default/files/guide_static/guides_d8/zircon_d8/homepage/carousel.png)
1. Create Carousel view
STEP 1: Navigate to Structure > View click Add new view, then create Carousel view and set following properties:
(/sites/default/files/guide_static/guides_d8/zircon_d8/homepage/carousel-view.png)
STEP 2: Click Continue and edit button. Next to steps below to set properties for following fields:
(/sites/default/files/guide_static/guides_d8/zircon_d8/homepage/carousel-view-1.png)
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
(/sites/default/files/guide_static/guides_d8/zircon_d8/homepage/carousel-img.png)
STEP 5: Set properties for >Content: Type

Drupal 8 - Zircon Theme Guide For Developers

Uploaded by

Copyright:

Available Formats

You might also like

Drupal 8 - Zircon Theme Guide For Developers

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Drupal 8 - Zircon Theme Guide For Developers

Uploaded by

Copyright:

Available Formats

09/05/2017 Drupal 8 ­ Zircon Theme Guide for Developers | WeebPal

 Your cart (0)

DRUPAL 8 - ZIRCON THEME GUIDE FOR

The Basic - Before You Start

Content Type Conﬁgurations

Zircon D8 theme: zircon_d8-8.0.0.zip

Demo Proﬁle for Zircon D8: zircon_d8-demo-8.0.0.zip

Web Technology (Html5/Css3, Twitter Bootstrap 3.1.1, Font Awesome 4.0.3,…)

Support both Left to Right and Right to Left Languages

SQLite 3.6.8 or higher

PHP 5.5.9 or higher

PHP 5GD library installed

Disabled error_reporting ﬂag on production server

Enabled mod_rewrite in Apache for clean URLs

Memory limit set up at least 128MB

Health Care page

Zircon D8 theme package: zircon_d8-8.0.0.zip

Zircon D8 demo package: zircon_d8-demo-8.0.0.zip.

Import this ﬁle into new database.

How to install a WeebPal theme for Drupal developers

Follow steps below to install a Drupal site only:

4. Open browser and navigate to your website.

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

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

7. Choose continue anyway => click link.

8. Enter Database conﬁguration => click Save and continue button.

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

2. Install Zircon D8 Theme

1. Extract Zircon D8 theme .ZIP ﬁle:

2. Move this theme into your Drupal folder: zircon_d8/themes

3. Install Required Modules

Cheat to install modules & theme:

3. Paste them to your host, folder sites/all

Vocabulary: for example product category, tag, provider name, ...

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

Then, add terms for each vocabulary

STEP 2 : Terms of: Forums.

STEP 3: Terms of: Categories

Note: See this guide (http://www.weebpal.com/guide/how-know-main-features-drupal-quickly#tutorial-section-3-5) to get more details about

Conﬁgure for each image style:

Content type conﬁguration

STEP 4: Click Save setting button.

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

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

STEP 8: Click Save button

Create Ads type

STEP 3: Set properties for Image ﬁeld

STEP 4: Click Save setting button.

Create Book type

STEP 2: Go to Manage Fields and add following ﬁelds:

STEP 4: Click Save button.

Create Forum type

STEP 2: Go to Manage Fields and add Comments ﬁelds: 

STEP 3: Go to manage display to add ﬁelds:

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

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

STEP 6: Click Save button

09/05/2017 Drupal 8 Zircon Theme Guide for Developers | WeebPal