Articles

To get started, let's get back to how to include custom javascript files to our theme. In the .libraries.yml file, you need to include js:

In order for you to have a new region through which you can display blocks, you need:

• Add region information to theme.info.yml file
• Edit page.html.twig, adding the output of a new region to it

Add region data to drupalbook.info.yml file

All regions are united by the regions key:

We have already seen that in Drupal we have Twig built in and how to use it. In this article, we will discuss how to work with Drupal templates, what templates are in the Stable theme, how to redefine Stable templates, and how to redefine templates of various Drupal entities.

So, let's start with the Stable theme templates, go to the templates folder of the Stable theme:

In past tutorials, we have already connected CSS to our topic. To do this, we indicated in the drupalbook.info.yml file:

libraries:
  - drupalbook/global-styling

Next, we created the drupalbook.libraries.yml file, where we already indicated which CSS file to include:

global-styling:
  version: 1.x
  css:
    theme:
      css/style.css: {}
      css/print.css: { media: print }

From now on, we will take a detailed look at how to work with CSS in our theme.

If you open Stable theme page.html.twig template file:

/core/themes/stable/templates/layout/page.html.twig

Then you will find that it differs from the Drupal 7 page.tpl.php template, firstly, by the extension and secondly, by the abundance of curly braces {}. This is all because Drupal uses the Twig template engine.

Starting with this article, we will do our theme thing on Drupal. In this section of the tutorial, we will analyze the basics of the topic on Drupal, where what lies, how to include and use CSS, JavaScript. To do your theme will be based on the theme-builder of the core Stable. If you want to learn Drupal, then Stable is a great start. If you want to learn Drupal, then Stable is a great start. You should not start with Bootstrap, you will constantly have questions and errors.

In Drupal 7, you could quickly and easily make a subtopic on Zen and start building your website. Since Drupal 8 there are also several theme builder for creating your own themes. But before doing subtheme on them, you will need to figure out a little where where is located.

Drupal developers suggest that we consider the Stark example theme. This topic has been added to Drupal, just to familiarize yourself with how the theme is arranged. Let's see what lies inside this theme:

Stark.info.yml file

Zen is the most popular builder theme for Drupal. If you need to quickly make a responsive design for a site based on three column layouts, then Zen is what you need. You just install it and run npm install and zen prepares you the foundation for your design. Let's take it in order.

Download the Zen parent theme from the official website:

https://www.drupal.org/project/zen

Since Drupal 8 we can put themes directly into the / themes folder, so we put the folder with the theme there.

First, we need to learn how to display blocks and pages using Views. Let's start with the pages. We display all the articles on our site.

Output pages through Views.

Let's create our first view, go to the menu Manage - Structure — Views.

In this video, we will explore how to work with the powerful form builder Webform. Let’s go to the modules page. To create webforms, we need to enable the Webform and Webform UI modules. If you want to display webforms as node pages, then you will need the Webform Node module.