Full introduction to Drupal 8 theming in easy steps
4.4 (343 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,805 students enrolled

Full introduction to Drupal 8 theming in easy steps

Learn all about the themes in Drupal 8
4.4 (343 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,805 students enrolled
Created by Nikolay Borisov
Last updated 4/2019
English
English [Auto-generated]
Current price: $34.99 Original price: $49.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 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
Course content
Expand all 57 lectures 05:52:09
+ Welcome
3 lectures 09:59

Some info about your lector

Preview 00:31

What will you learn in this video 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.

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
+ Twig
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

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
+ Bonus
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