Drupal 8 - xCrystal Game Theme Guide for Developers

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

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

Step 3: At FIELDS area, click Add button to add fields: Content: Slideshow, Globall: Fieldset, Content: Title, Content: Summary, Content: Please note(PLEASE NOTE), Product: Price, Content: OS Support, Product: Add to cart

Step 4: Set properties for Content: Slideshow

Step 5: Set properties for Globall: Fieldset

Step 6: Set properties for Content: Title

Step 7: Set properties for Content: Summary

Step 8: Set properties for Content: Please note (PLEASE NOTE)

Step 9: Set properties for Product: Price

Step 10: Set properties for Content: OS Support

Step 11: Set properties for Product: Add to cart

Step 12: At TITLE area, find Title field and set following properites:

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

Step 14: At FILTER CRITERIA area, add Content: Content type, Content: SlideShow, Content: Translation language fields and set following properites

Step 16: Set properties for Content: SlideShow

Step 17: Set properties for Content: Translation language

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

Step 19: Click Save to save view

Step 1: Navigate to Structure > Block layout

Step 2: Find Slideshow click Place block button

Step 3: Find Slideshow: List(Views) click Place block button and set following properites:

Step 4: Click Save block button.

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

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

Step 3: At FIELDS area, click Add button to add fields: Global: Fieldset, Content: Image, Global: Fieldset, Content: Title, Content: Summary, Content: Price, Content: OS Support

Step 4: Set properties for Global: Fieldset

Step 5: Set properties for Content: Image

Step 6: Set properties for Global: Fieldset

Step 7: Set properties for Content: Title

Step 8: Set properties for Content: Summary

Step 9: Set properties for Content: Price

Step 10: Set properties for Content: OS Support

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

Step 12: At FILTER area, add Content: Content type, content: Translation language, content: Best Seller fields and set following properites

Step 13: Set properties for Content: Content type

Step 14: Set properties for Content: Translation language

Step 15: Set properties for Content: Best Seller

Step 16: At Display name area, click and set properties:

Step 17: At HEADER area, click Add button field Global: Text area and set following properties:

Refer to following HTML code:

Best-selling games from top developers

Step 18: At Advanced > OTHER area, add CSS class link and set following properites:

Step 19: Click Save to save view

Step 1: Navigate to Structure > Block layout

Step 2: Find Panel second click Place block button

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

Step 4: Click Save block button.

Step 1: Stay open Best Seller, click Add button to add Block new.

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

Step 3: At Display name area, click and set properties:

Step 4: At TITLE area, click Title field and set following properites:

Step 5: At FIELDS area, click Add button to add fields: Global: Fieldset, Content: Image sale off, Global: Fieldset, Content: Title, Content: Path[hidden], Content: Sales, Global: Custom text

Step 6: Set properties for Global: Fieldset

Step 7: Set properties for Content: Image sale off

Step 8: Set properties for Global: Fieldset

Step 9: Set properties for Content: Title

Refer to following HTML code:

{{ title }} SPECIAL EDITION
SALE OFF TO

Step 10: Set properties for Content: Sales

Step 11: Set properties for Content: Custom text

Refer to following HTML code:

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

Step 13: At FILTER CRITERIA area, add Content: Content type, Content: ID, Content: Translation language fields and set following properites

Step 14: Set properties for Content: Content type

Step 15: Set properties for Content: ID

1: Navigate to Content

2: Find content Fallout 4 click Edit button

3: Set value 25 in content ID (view Special Sale)

Step 16: Set properties for Content: Translation language

Step 17: At PAGER area, click Use pager and set following properties:

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

Step 19: Click Save to save view

Step 1: Navigate to Structure > Block layout

Step 2: Find Panel second click Place block button

Step 3: Find Best Seller: Special Sale click Place block button and set following properites:

Step 4: Click Save block button.

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

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

Step 3: At TITLE area, click Title field and set following properites:

Step 4: At FIELDS area, click Add button to add fields: Global: Fieldset, Content: Image, Global: Fieldset, Content: Summary, Product: Price, Content: OS Support

Step 5: Set properties for Global: Fieldset

Step 6: Set properties for Content: Image

Step 7: Set properties for Global: Fieldset

Step 8: Set properties for Content: Summary

Step 10: Set properties for Product: Price

Step 11: Set properties for Content: OS Support

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

Step 13: At FILTER CRITERIA area, add Content: Content type, Content: By Formart, Content: Game type, Content: Game Category, Content: Translation language fields and set following properites

Step 14: Set properties for Content: Content type

Step 15: Set properties for Content: By Formart

Step 16: Set properties for Content: Game type

Step 17: Set properties for Content: Game Category

Step 18: Set properties for Content: Translation language

Step 19: At HEADER area, click Add button field Global: Text area and set following properties:

Refer to following HTML code:

						Have @total results						
					

Step 20: At FOOTER area, add Global: Text area field with following properties:

Refer to following HTML code:

						View all results						
					

Step 21: At NO RESULTS BEHAVIOR area, cick Add button to add Global: Text area field and set following properties:

Step 22: At PAGER area, click Use pager and set following properties:

Step 23: At Advanced > EXPOSED FORM area, add Exposed form in block: :

Step 24: At Advanced > OTHER area, add Machine name:

Step 25: At Advanced > OTHER area, add Use AJAX:

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

Step 27: Click Save to save view

Step 1: Navigate to Structure > Block layout

Step 2: Find Content click Place block button

Step 3: Find Exposed form: front_page-exposed_home_page click Place block button and set following properites:

Step 4: Click Save block button.

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

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

Step 3: At Display name area, click and set properties:

Step 4: At FIELDS area, click Add button to add fields: Content: Image game highlight, Global: Fieldset, Content: Logo game, Content: Summary, Content: Path , Global: Custom text

Step 5: Set properties for Content: Image game highlight

Step 6: Set properties for Global: Fieldset

Step 7: Set properties for Content: Logo game

Step 8: Set properties for Content: Summary

Step 9: Set properties for Content: Custom text

Refer to following HTML code:

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

Step 11: At FILTER CRITERIA area, add Content: Content type, Content: ID, Content: Translation language fields and set following properites

Step 12: Set properties for Content: Content type

Step 13: Set properties for Content: ID

1: Navigate to Content

2: Find content Titanfall 2 click Edit button

3: Set value 22 in content ID (view Game highlight)

Step 14: Set properties for Content: Translation language

Step 15: At PAGER area, click Use pager and set following properties:

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

Step 17: Click Save to save view

Step 1: Navigate to Structure > Block layout

Step 2: Find Panel bottom click Place block button

Step 3: Find Game highlight: Game highlight Lists(Views) click Place block button and set following properites:

Step 4: Click Save block button.

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

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

Step 3: At Display name area, click and set properties:

Step 4: At TITLE area, click Title and set properties:

Step 5: At FIELDS area, click Add button to add fields: Global: Fieldset, Content: Image, Global: Fieldset, Content: Game review, Content: Body, Content: Tag

Step 6: Set properties for Global: Fieldset

Step 7: Set properties for Content: Image

Step 8: Set properties for Global: Fieldset

Step 9: Set properties for Content: Game review

Step 10: Set properties for Content: Body

Step 11: Set properties for Content: Tag

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

Step 13: At FILTER CRITERIA area, add Content: Content type, Content: Translation language fields and set following properites

Step 14: Set properties for Content: Content type

Step 15: Set properties for Content: Translation language

Step 16: At HEADER area, click Add button field Global: Text area and set following properties:

Refer to following HTML code:

Taque earum rerum hic tenetur a sapiente.

Step 17: At PAGER area, click Use pager and set following properties:

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

Step 19: Click Save to save view

Step 1: Navigate to Structure > Block layout

Step 2: Find Footer top click Place block button

Step 3: Find Blog: Our Blog Lists(Views) click Place block button and set following properites:

Step 4: Click Save block button.

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

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

Step 3: At ADVANCED > RELATIONSHIP area, add author field and set following properties:

Step 4: At FIELDS area, click Add button to add fields: Global: Fieldset, Content: Image, Global: Fieldset, (author)User: Fullname, Content: Authored on, Content: Forums, Content: Path, Content: Link to Content

Step 5: Set properties for Global: Fieldset

Step 6: Set properties for Content: Image

Step 7: Set properties for Global: Fieldset

Step 8: Set properties for (author)User: Fullname

Step 9: Set properties for Content: Authored on

Refer to following HTML code:

						By {{ field_full_name }} - {{ created }}
					

Step 10: Set properties for Content: Forums

Refer to following HTML code:

						in {{ taxonomy_forums }}
					

Step 11: Set properties for Content: Link to content

Refer to following HTML code:

						view
					

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

Step 13: At FILTER CRITERIA area, add Content: Content type, Content: Translation language, Content: Image fields and set following properites

Step 14: Set properties for Content: Content type

Step 15: Set properties for Content: Translation language

Step 16: Set properties for Content: Image

Step 17: At HEADER area, click Add button to add field Global: Text area and set following properties:

Refer to following HTML code:

taque earum rerum hic tenetur a sapiente.

Step 18: At PAGER area, click Use pager and set following properties:

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

Step 21: Click Save to save view

Step 1: Navigate to Structure > Block layout

Step 2: Find Footer top click Place block button

Step 3: Find Our Forum Lists(Views) click Place block button and set following properites:

Step 4: Click Save block button.

Step 1: Navigate to Structure > Block layout

Step 2: Find Header click Place block button

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

Step 4: Click Save block button.

Step 1: Navigate to Structure > Block layout

Step 2: Find Header click Place block button

Step 3: Find Language dropdown switcher click Place block button and set following properites:

Step 4: Click Save block button.

1. Useful Links block

Create Useful Links block

Refer to following HTML code:

• Community Guidelines
• FAQs
• Privacy Policy
• Service

2 Our Partners block

Create Our Partners block

Refer to following HTML code:

• Crystal.com
• weebpal.com
• demo.weebpal.com

3 Payment Method block

Create Payment Method

Refer to following HTML code:

• Visa
• Mastercard
• Paypal

Don't miss out menu

							Complete the form below, and we'll send you e-mail every now and again with all the lastest news.
						

							bb46be53-9c46-4226-9e7a-79db64b3c80d
						

Footer menu block

Front end Display

1. Configure Footer menu block

2. Add Footer menu items

3. Add Footer submenu

3.1 Add Quick links & payment (Usefull Links) menu

3.2 Add Quick links & payment (Our Partners) menu

3.3 Add Quick links & payment (Payment Method) menu

Step 1: Navigate to Structure > Block layout, click WeebPal Mega Menu

Step 2: Find and ckick Don't miss out click Submenu radio button and set following properites:

Step 1: Click Add/remove column button (+) and set following properites:

Page title block

						/forum
						/shop
						/node/22
						/about-us
						/blog
						/gallery
						/category/*
						/taxonomy/*
						/contact-us
						/node/33
						/wrong-way
						/faqs
						/community-guidelines
						/privacy-policy
						/service						
					

						/wrong-way
						/ar/wrong-way
						/about-us
						/forum
						/forum/*
						/gallery
						/gallery/*
						/shop
						/category/*
						/taxonomy/*
						/node/22
						/blog-list
						/blog
						/blog/*
						/contact-us
						/faqs
						/community-guidelines
						/privacy-policy
						/service						
					

3.2 Configure Blog list top block

Blog Detail page

							Have @total results
						

							email:
							  '#type': email
							  '#required': true
							  '#default_value': '[webform-authenticated-user:mail]'
							subject:
							  '#type': textfield
							  '#required': true
							  '#test': 'Testing contact webform from [site:name]'
							message:
							  '#type': textarea
							  '#required': true
							  '#test': 'Please ignore this email.'
						

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: Basic site settings

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.

Step 1: Log into website by administrator account.

Step 2: Go to Appearance > Settings find xCrystal tab click and set following properites:

Step 3: Click on Save configuration button.