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

1. Pinteros Package

Pinteros D8 is the Drupal 8 version of Pinteros.

Pinteros is a multipurpose theme that can serve a wide range of interest - whether you're a blogger wanting a have a place to talk about something; or a photographer wishing to showcase the best shots of yours; or a news curator who desires to have an information page.

Included content:

  • README.txt
  • Pinteros D8 theme: pinteros_d8-8.1.7.zip
  • Demo Profile for Pinteros D8: pinteros_d8-demo-8.1.7.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. Screenshots

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

Home

Home

Page

Forums Page

Categories page

Showcase page

Blogs page

Contact page

Homepage with Layout box

4. System Configuration

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

5. Module requirements

Core Modules

  • Action
  • Block Content
  • Update manager
  • Locale
  • Quick Edit

Third-party Modules

  1. Admin Toolbar
  2. Ctools
  3. Pathauto
  4. Memcache
  5. Simplenews
  6. Token

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: pinteros)

Files included:

  • README.txt
  • Pinteros D8 theme: pinteros_d8-8.1.7.zip
  • Demo Profile for Pinteros D8: pinteros_d8-demo-8.1.7.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 Pinteros D8 Demo

  • pinteros_d8-8.1.7.zip

2. Extract pinteros_d8-demo-8.1.7.zip above and copy it into your host, and rename the directory

Quick Installation

3. Access your MySQL database and create a new database (e.g: pinteros_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 Pinteros 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 pinteros Theme, find this guide in handy.

1. Install Drupal

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

Download Drupal 8

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

Follow steps below to install a Drupal site only:

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

Install theme package

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. Enter database parameters => click Save and continue button.

Install Drupal 8

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

Install Drupal 8

9. 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 Pinteros Theme

  1. Extract Pinteros theme .ZIP file:
    • pinteros_d8-8.1.7.zip
  2. Move this theme into your Drupal folder: sites/all/themes

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

3. Install Required Modules

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

Note: See this guide to get more details about installation


Taxonomy configuration

Quick Information

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

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

Vocabulary

Step 2: At Categories line, find and click Manage field link

Taxonomy

Step 3: At Manage field tabs, click Add field button to add Image field:

Taxonomy

Step 4: Set properties for Image field

Taxonomy

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

Taxonomy

Then, add terms for each vocabulary

Terms of Forums:

Taxonomy

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, 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 > Article. In Article, go to Manage display > Default tab, set following properties:

Step 2: Go to Manage display > RSS tab, set following properties:

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

Step 4: Click Save button

Modify Basic page type

Step 1: Navigate to Structure > Content Type > Basic page. In Basic page, go to Manage display > Teaser tab, set following properties:

Step 2: Click Save button

Modify Forum topic type

Note: Required Modules: Forum

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

Step 2: Set properties for Comments field

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

Step 4: Click Save button

Create Blog type

Step 1: Navigate to Structure > Content Type

Step 2: Click Add Content Type link to create Blog type

Step 3: Click Save and manage fields button, then add following fields:

Step 4: Set properties for Category field

Step 5: Set properties for Comments field

Step 6: Set properties for Image field

Step 7: Set properties for Tags field

Step 8: Set properties for Video Link field

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

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

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

Step 12: Click Save button

Create Showcase type

Step 1: Navigate to Structure > Content Type

Step 2: Click Add Content Type link to create Showcase type

Step 3: Click Save and manage fields button, then add following fields:

Step 4: Set properties for Image field

Step 5: Set properties for Link field

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

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

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

Step 9: Click Save button

Configure URL aliases

Step 1: Navigate to Configuration > Search and metadata > URL aliases click Patterns tabs then add Add Pathauto pattern following properties:

Patterns

Step 2:Set properites for Blog pattern

Patterns

Step 3:Set properites for Showcase pattern

Patterns

Step 4: Click Save button


Home Page

Headline block

Front end Display

Headline

1. Real time block

Front end Display

Headline

Step 1: Navigate to Structure > Block layout, find Custom block library

Headline

Step 2: Click Add custom block button to create Real time block

Headline

Headline

Step 3: Click Save button

Download the code of the custom block Real Time in here.

2. Social Menu block

Front end Display

Headline

Step 1: Navigate to Structure > Block layout, find Custom block library

Headline

Step 2: Click Add custom block button to create Social Menu block

Headline

Headline

Step 3: Click Save button

Download the code of the custom block Socail List in here.

3. User account menu block

Front end Display

Headline

3.1 Add link menu item

Step 1: Navigate to Structure > Menu, find User account menu

Headline

Step 2: Click Add link button to create Log out menu iem

Headline

Step 3: Click Save button

3.2 Configure User account menu block

Step 1: Navigate to Structure > Block layout

Step 2: Find Secondary menu at User account menu line, click Configure button and set following properites:

Headline

Step 3: Click Save block button.

4. Anonymous Menu block

Front end Display

Headline

4.1 Create Anonymous Menu

Step 1: Navigate to Structure > Menu, find Add menu click to create Anonymous Menu

Headline

Step 2: Click Add link button to create Login menu iem

Headline

Step 3: Click Add link button to create Register menu iem

Headline

Step 4: Click Save button

4.2 Configure Anonymous Menu block

Step 1: Navigate to Structure > Block layout

Step 2: Find Headline click Place block button

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

Headline

Step 4: Click Save block button.

Categories Menu block

Front end Display

Categories Menu

1. Create Categories Menu menu

Step 1: Navigate to Structure > Menu, find Add menu click to create Categories Menu

Categories Menu

Step 2: Click Add link button to create Business menu iem

Categories Menu

Step 3: Click Add link button to create Education menu iem

Categories Menu

Step 4: Click Add link button to create Fashion menu iem

Categories Menu

Step 5: Click Add link button to create Health & Beauty menu iem

Categories Menu

Step 6: Click Add link button to create Hospital menu iem

Categories Menu

Step 7: Click Add link button to create Sports menu iem

Categories Menu

Step 8: Click Add link button to create More menu iem

Categories Menu

Step 9: Click Add link button to create Nature menu iem

Categories Menu

Step 10: Click Add link button to create Travel menu iem

Categories Menu

Step 11: Click Add link button to create Wedding menu iem

Categories Menu

Step 12: Click Add link button to create Others menu iem

Categories Menu

Step 13: Click Save button

2. Configure Categories Menu block

Step 1: Navigate to Structure > Block layout

Step 2: Find Secondary menu click Place block button

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

Categories Menu

Step 4: Click Save block button.

Frontpage

Front end Display

Products

Edit Frontpage view

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

Frontpage view

Step 2:At PAGER > Use pager area, find Paged, 10 items click link and set following properties:

Frontpage view

Step 3: Click Save to save view

Copyright block

Front end Display

Copyright

Create & configure Copyright block

Step 1: Navigate to Structure > Block layout, find Custom block library

Copyright

Step 2: Click Add custom block button to create Copyright block

Copyright

Copyright

Step 3: Click Save button

Refer to following HTML code:

					

© 2015 Pinteros is proudly powered by Drupal | Designed by WeebPal.com

Main navigation block

Front end Display

Main navigation

Configure Main navigation block

Step 1: Navigate to Structure > Block layout

Step 2: Find Primary menu area, at Main navigation line. Then click Configure button and set following properites:

Main navigation

Step 3: Click Save block button.


Create Subpages

Sidebar first: Featured Posts block

Front end Display

Blog Posts

1. Create Blog Posts: Featured Posts block view

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

Blog Posts

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

Blog Posts

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

Blog Posts

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

Step 5: Set properties for Content: Image

Blog Posts

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

Blog Posts

Step 7: At Advanced > FILTER CRITERIA area, add Content: Image (field_image:target_id), Content: Translation language fields

Step 8: Set properties for Content: Image (field_image:target_id)

Blog Posts

Step 9: Set properties for Content: Translation language

Blog Posts

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

Blog Posts

Step 11: Click Save to save view

2. Configure Blog Posts: Featured Posts block

Step 1: Navigate to Structure > Block layout

Step 2: Find Sidebar first click Place block button

Step 3: Find Blog Posts: Featured Posts block click Place block button and set following properites:

Block Layout

Step 4: Click Save block button.

Sidebar first: About us block

Front end Display

About us

Step 1: Navigate to Structure > Block layout click Add custom block to create About us block and set with following properties:

About us

About us

Step 2: Click Save button

Refer to following HTML code:

						

Weebpal provides further quality premium Drupal themes with subtle designs, optimal distributions, and committed support, which is suited for a higher business/individual level...

Sidebar first: Trending Posts block

Front end Display

Blog Posts

1. Add Blog Posts: Trending Posts block view

Step 1: Navigate to Structure > Views, find Blog Posts view, then click Add > Block button to create Blog Posts: Trending Posts block view with following properties:

Blog Posts

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

Blog Posts

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

Blog Posts

Step 4: At FIELDS area, find Content: Image field, click and set following properites:

Blog Posts

Step 5: At PAGER area, find Use pager click Display a specified number of items link and set following properites

Blog Posts

Step 6: At PAGER area, find Use pager click 3 items link and set following properites

Blog Posts

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

Blog Posts

Step 8: Click Save to save view

2. Configure BlogBlog Posts: Trending Posts block

Step 1: Navigate to Structure > Block layout

Step 2: Find Sidebar first click Place block button

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

Block Layout

Step 4: Click Save block button.

Sidebar first: Recent comments block

Front end Display

Recent comments

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:

Block Layout

Step 4: Click Save block button.

Sidebar first: Newsletters block

Front end Display

Subscribe to our Newsletters

Step 1: Navigate to Structure > Block layout

Step 2: Find Sidebar first click Place block button

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

Block Layout

Step 4: Click Save block button.

Sidebar first: Tags in Tags block

Front end Display

Tags in Tags

1. Create Tags in Tags block view

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

Tags in Tags

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

Tags in Tags

Step 3: At Advanced > FILTER CRITERIA area, add Taxonomy term: Vocabulary fields

Step 4: Set properties for Taxonomy term: Vocabulary

Tags in Tags

Step 5: At FOOTER area, click Add button to add field Global: Text area with following properties:

Tags in Tags

Refer to following HTML code:

							

More

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

Tags in Tags

Step 7: Click Save to save view

2. Configure Tags in Tags block

Step 1: Navigate to Structure > Block layout

Step 2: Find Sidebar first click Place block button

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

Block Layout

Step 4: Click Save block button.

Sidebar first: General Information block

Front end Display

General Information

Step 1: Navigate to Structure > Block layout click Add custom block to create General Informationus block and set with following properties:

General Information

General Information

Step 2: Click Save button

Refer to following HTML code:

						

Address :
999 Hardway Street 12rd Floor We are hiring! Inc , New York City 7 Street , 077 United States.

Telephone :
(+ 012 ) 20 7345 667

Fax :
(+ 012 ) 20 7345 668

Mail :
[email protected]

Website :
www.weebpal.com

Page title block

Configure Page title block

Step 1: Navigate to Structure > Block layout

Step 2: Find Content area, at Page title line. Then click Configure button and set following properites:

Page Title

Step 3: Click Save block button.

Pages page

Front end Display

Pages page

Add Pages content

Step 1: Navigate to Content > Add content click Basic page, create Pages content with following properties:

Pages page

Step 2: Click Save button

Refer to following HTML code:

							

Aliquam aliquam tristique aliquam. Quisque eleifend eget turpis blandit commodo. Donec quis ante lacinia, dapibus diam at, auctor risus? Vestibulum porta interdum suscipit? Ut neque nunc, tincidunt nec nisl ut, elementum ultricies orci. Nam sit amet auctor enim. Suspendisse congue nulla sed sagittis auctor! Ut venenatis nulla turpis, vel fringilla lacus elementum sit amet. Nunc eu nunc gravida, dictum orci vel, cursus velit. Nam tincidunt nunc quis nunc congue, at sagittis nisi ultricies. Nam vitae consectetur ante. Phasellus at sapien metus.

Proin leo purus, imperdiet et enim quis, faucibus rutrum nisi. Aliquam venenatis urna nec tellus commodo, vel auctor purus semper? Nullam ultricies dignissim nulla, vitae fermentum lectus faucibus nec. Nulla facilisi. In hac habitasse platea dictumst. Mauris orci arcu, imperdiet sed accumsan porttitor, vulputate sit amet augue. Sed ultricies est vitae libero semper; quis sagittis ligula fringilla. Maecenas a risus sed diam consequat aliquam. Vivamus molestie tempus luctus. Etiam condimentum nunc a purus accumsan bibendum.

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sanctus sea sed takimata ut vero voluptua. Lorem ipsum dolor sit amet. At vero eos et accusam et justo duo dolores et ea rebum.

Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.

Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.

Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.

Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus.

Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec neque. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa.

Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci. Phasellus consectetuer vestibulum elit. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Vestibulum fringilla pede sit amet augue. In turpis. Pellentesque posuere. Praesent turpis. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum, sem libero volutpat nibh, nec pellentesque velit pede quis nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Ut varius tincidunt libero. Phasellus dolor. Maecenas vestibulum mollis

Categories page

Front end Display

Categories

Create Categories page view

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

Categories

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

Categories

Step 3: At PAGE SETTINGS area, find and click Menu link and set following properites:

Categories

Step 4: At FIELDS area, click Add button to add fields: Taxonomy term: Image

Step 5: Set properties for Taxonomy term: Image

Categories

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

Categories

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

Categories

Step 8: Click Save to save view

Showcase page

Front end Display

Showcase

Create Showcase page view

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

Showcase

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

Showcase

Step 3: At PAGE SETTINGS area, find and click Menu link and set following properites:

Showcase

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

Showcase

Step 5: Click Save to save view

Blog page

Front end Display

Blog

1. Add Blog page view

Step 1: Navigate to Structure > Views, find Blog Posts view, then click Add > Page button to create Blog page view with following properties:

Blog

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

Blog

Step 3:At FORMAT area, find Show click Fields link and set following properties:

Blog

Step 4: At PAGE SETTINGS area, find and click Path link and set following properites:

Blog

Step 5: At PAGE SETTINGS area, find and click Menu link and set following properites:

Blog

Step 6: At PAGER area, find Use pager click Display a specified number of items link and set following properites

Blog

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

Blog

Step 8: Click Save to save view

Contact page

Front end Display

Gmap

Create Gmap block

Step 1: Navigate to Structure > Block layout click Add custom block to create Gmap block and set with following properties:

Gmap

Gmap

Step 2: Click Save button

Refer to following HTML code:

						


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

Site Information

3. Change site details from the view:

  1. Site name
  2. Slogan
  3. E-mail address
  4. Set Default Front page

4. Click on Save configuration to finish editing.

Appearance Settings

Configuration

Step 1: Log into website by administrator account.

Step 2: Go to Appearance find Pinteros 8.1.7, click on Settings

Step 3: At CONFIGS area, select one of options for Layout, Skins menu, Background to set default and at TOGGLE DISPLAY area, check Show Skins Menu option if you want to display Skins menu on front-end pages.

Appearance Settings

Language Configuration

This section guides you how to have multiple languages for your site. Pinteros D8 Theme supports both Left to Right and Right to Left languages.

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

Language Configuration

Step 2: Check to enable and set default language

Step 3: Save configuration

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.