Full introduction to Drupal 8 theming in easy steps

1,895 students enrolled

Full introduction to Drupal 8 theming in easy steps

Learn all about the themes in Drupal 8

1,895 students enrolled

Created by Nikolay Borisov

Last updated 4/2019

English

English [Auto]

Preview this course

Full introduction to Drupal 8 theming in easy steps

$34.99 $49.99 30% off

5 hours left at this price!

30-Day Money-Back Guarantee

6 hours on-demand video
2 articles
3 downloadable resources
Full lifetime access
Access on mobile and TV

Certificate of Completion

Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business

What you'll learn

Understand what Drupal 8 themes are
working with template files
Change any markup of a Drupal 8 website
Add css and javascript files to it
understanding the preprocess functions in Drupal 8
Understand the core concepts of the Twig templating language
create a Drupal 8 theme

3 lectures 09:59

Some info about your lector

Introduction to me

Preview 00:31

What will you learn in this video course

Introduction to the course

Preview 02:00

- install Acquia dev desktop

- install Drupal 8 with the help of Acquia dev desktop

As you are installing Drupal - please refer to this issue -> https://www.udemy.com/full-introduction-to-drupal-8-theming-in-easy-steps/learn/v4/questions/4275486

There is well explained how to tackle your problem with installing a local Drupal instance that contains underscore in it's name

Preparing our working environment

07:28

+ – Drupal Theming

18 lectures 01:34:22

After this video you will have a better understanding about what a theme in Drupal 8 is.

What is a theme

Preview 00:46

- some more info about the Appearance tab

- the folder structure of the Drupal themes folder

- check the existing themes on drupal.org

- install an existing theme from drupal.org

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

- the Integrity theme:

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

Themes inside of Drupal

04:40

Here are the simple steps:

1. Copy the sites/example.settings.local.php to sites/default/example.settings.local.php

2. Rename sites/default/example.settings.local.php to sites/default/settings.local.php

3. Move to the bottom of the sites/default/settings.local.php and uncomment the including of the settings.local.php file.

4. Copy the content of the sites/default/default.services.yml to sites/development.services.yml

5. Activate twig debug by changing the value of parameters > twig.config > debug to true in the sites/development.services.yml

6. Disable twig cache by changing the value of parameters > twig.config > cache to false in the sites/development.services.yml

7. Clear the cache in the Drupal instance by going to Configuration > Performance ( /admin/config/development/performance ) and click on Clear all caches

Development settings and cache clearing

03:37

- what are the base themes and how are we using them

- what is the difference between the base themes

Base themes

02:26

- declare our info file

- activate our newly created theme

Start with our theme

03:29

- what are the asset libraries

- how we may include them in our theme

Asset libraries

01:15

- where should we put our css files

- how we can include them to our theme

Adding our CSS files

03:26

- where to place the js files

- how to add them to our theme

Add our JS

02:59

- how to find from where the markup on the page comes from

- see how we may change the markup

Template files - where they are and how to overwrite them

03:05

- how to locate where to change

- how to overwrite a template file

- example with a block template file

Adding our markup in the template files

05:03

- installing and eneabling the kint debugging module

- inspecting variables with kint

Debugging templates with kint

07:32

- what are the view modes used for

- where they are and how we may change them

Drupal view modes

06:22

- using the view mode to prepare the fields

- we will se how we may overwrite node templates

- we will make some changes in a node template

Node templates

12:44

- what are the html templates used for

- example how we may overwrite a html template

Page and html templates

05:59

- what are the regions

- which are the defined ones

- how to declare a custom region

Regions

06:06

- some info about the most useful drupal module

- how to overwrite and change the view templates

- how to use the templates the correct way

Views and overwriting views templates

12:53

- how to use preprocess functions

- example about how we may alter variables

Add and change variables with preprocess functions

07:53

- what is responsible the Render API for

- the most popular renderables and some examples

Render API

04:07

10 lectures 26:08

- why are Symfony and Drupal 8 using this templating engine

Why Twig

00:41

Quick basics about the most used twig syntaxes

Quick twig

01:20

- echoing a variable in the template

Twig Print variable

02:02

How you may foreach some arrays in Twig

Twig for loop

03:38

How you may add some conditional blocks in Twig

Twig if

02:53

Some handy tools that you may need to manipulate variables right before the printing

Twig filters and functions

02:14

- how the attribute objects look like

- some examples about adding attributes and how else we may use them

Twig attributes in drupal

01:54

- how we may use the extend functionality in templates

- we may not only alter, but also overwrite blocks

Extending templates

06:42

- functions for generating correct link paths

- some examples for the popular use cases

Links to other pages in the site

03:14

How we should correctly prepare our website's templates if we want to implement more than one language

Translatable strings

01:30

+ – Subproject: Convert a static website to Drupal 8 theme

6 lectures 50:54

Overview of the static website that we will be converting into Drupal 8 theme

Simple website example overview

03:23

- prepare our new theme

- add a screenshot to the theme

- copy the files from the static version

- create assets library

Preparing the new theme

Preview 07:26

- creating our html template

- creating our page template

- reproducing the markup into these templates from the static version

Implementing the html and page wrapper

11:01

- fix the path to our logo image

- fix the markup of the branding area

Subproject - Fixing the branding of the site

08:40

- removing the unneeded markup around the menu

- implementing the menu markup

Implementing the main menu

10:12

- prepare the view wrapper templates

- prepare the teaser view mode

- overwrite the node template for the front page

Implementing the main content at frontpage

10:12

+ – Conclusion

1 lecture 05:57

Ways and resources to develop yourself even further

How you may continue to improve in Drupal 8 theming

05:57

3 lectures 16:53

Chrome twig extention

04:24

Removing and overwriting CSS files

10:02

All you could do with the .info file

02:27

+ – Bonus: Second Project step by step

16 lectures 02:27:54

1. Getting Started And Overview

02:45

2. Install Acquia Dev Desktop - Our Working Environment

04:15

3. Installing Drupal 8 with Acquia Dev Desktop

04:46

4. Declaring our Theme - Adding a Screenshot

05:21

5. Declaring our library - adding CSS and JS files to our theme

05:10

6. Activating some debugging settings

10:56

7. Overwriting template files in our theme

06:45

8. Implementing the main menu region

31:40

9. Theming our footer

12:42

10. Creating the fields in the Node and the Paragraph

13:50

11. Theming the node - top area and fields

19:05

12. Theming the first paragraph

09:00

13. Image paragraph

08:00

14. Text paragraph

05:16

15. Creating some example pages and wrapping up

07:40

The ready files of the project

00:43

Requirements

Some experience with HTML and CSS and a tiny bit of PHP

Description

Drupal 8 is out and from now on - every new Drupal website should be using the latest version of this wonderful Content Management Framework.

That means that we should learn to change the front-end of our Drupal 8 system - the way we need it.

There are two main things that are changing the game in the Drupal 8 theming
- Drupal 8 is built on top of Symfony framework
- There are lessons learned from Drupal 7
that means that now the theming of a Drupal website is a bit different - everything is much more structured (almost all the markup is in template files), the templates are using Twig and everywhere one has to deal with code - one finds objects and classes.

In the end - it is not as scary as it looks like - simply everything evolved into something much better, much simpler and elegant, something that is not applicable only in the context of Drupal and that is following general web-development best practices.

In this course I tried to explain the general topics the shortest and the clearest way possible as afterwards I tried to illustrate everything with some simple examples. My opinion is that when you see some simple example working and when you try it by yourself - you already have the tools to investigate further and find exactly what you need to be done.

I've been doing drupal-development and theming for many years now - so I know what exactly are the topics that are needed the most - I tried to include all of those and in the end I wrapped all that was learned in an example website that we will convert together form a static html-css version into a working Drupal 8 theme.

Lets conquer together the Drupal 8 theming layer!

Who this course is for:

newbies to Drupal 8 that want to get started with Theming
Drupal 7 developers and/or people with any Drupal experience that want to learn how the theming in Drupal 8 is being done
people that have a Drupal 8 website and want to change it's look
developers that want to see how Drupal 8 theming is being done