Full introduction to Drupal 8 theming in easy steps

Name: Full introduction to Drupal 8 theming in easy steps
Rating: 4.1 (492 reviews)

Learn all about the themes in Drupal 8

Created byNikolay Borisov

Last updated 4/2019

English

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

7 sections • 57 lectures • 5h 52m total length

Introduction to me0:31
Some info about your lector
Introduction to the course2:00
What will you learn in this video course
Preparing our working environment7:28
- 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

What is a theme0:46
After this video you will have a better understanding about what a theme in Drupal 8 is.
Themes inside of Drupal4:40
- 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
Development settings and cache clearing3:37
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
Base themes2:26
- what are the base themes and how are we using them
- what is the difference between the base themes
Start with our theme3:29
- declare our info file
- activate our newly created theme
Asset libraries1:15
- what are the asset libraries
- how we may include them in our theme
Adding our CSS files3:26
- where should we put our css files
- how we can include them to our theme
Add our JS2:59
- where to place the js files
- how to add them to our theme
Template files - where they are and how to overwrite them3:05
- how to find from where the markup on the page comes from
- see how we may change the markup
Adding our markup in the template files5:03
- how to locate where to change
- how to overwrite a template file
- example with a block template file
Debugging templates with kint7:32
- installing and eneabling the kint debugging module
- inspecting variables with kint
Drupal view modes6:22
- what are the view modes used for
- where they are and how we may change them
Node templates12:44
- 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
Page and html templates5:59
- what are the html templates used for
- example how we may overwrite a html template
Regions6:06
- what are the regions
- which are the defined ones
- how to declare a custom region
Views and overwriting views templates12:53
- some info about the most useful drupal module
- how to overwrite and change the view templates
- how to use the templates the correct way
Add and change variables with preprocess functions7:53
- how to use preprocess functions
- example about how we may alter variables
Render API4:07
- what is responsible the Render API for
- the most popular renderables and some examples

Why Twig0:41
- why are Symfony and Drupal 8 using this templating engine
Quick twig1:20
Quick basics about the most used twig syntaxes
Twig Print variable2:02
- echoing a variable in the template
Twig for loop3:38
How you may foreach some arrays in Twig
Twig if2:53
How you may add some conditional blocks in Twig
Twig filters and functions2:14
Some handy tools that you may need to manipulate variables right before the printing
Twig attributes in drupal1:54
- how the attribute objects look like
- some examples about adding attributes and how else we may use them
Extending templates6:42
- how we may use the extend functionality in templates
- we may not only alter, but also overwrite blocks
Links to other pages in the site3:14
- functions for generating correct link paths
- some examples for the popular use cases
Translatable strings1:30
How we should correctly prepare our website's templates if we want to implement more than one language

Simple website example overview3:23
Overview of the static website that we will be converting into Drupal 8 theme
Preparing the new theme7:26
- prepare our new theme
- add a screenshot to the theme
- copy the files from the static version
- create assets library
Implementing the html and page wrapper11:01
- creating our html template
- creating our page template
- reproducing the markup into these templates from the static version
Subproject - Fixing the branding of the site8:40
- fix the path to our logo image
- fix the markup of the branding area
Implementing the main menu10:12
- removing the unneeded markup around the menu
- implementing the menu markup
Implementing the main content at frontpage10:12
- prepare the view wrapper templates
- prepare the teaser view mode
- overwrite the node template for the front page

1. Getting Started And Overview2:45
2. Install Acquia Dev Desktop - Our Working Environment4:15
3. Installing Drupal 8 with Acquia Dev Desktop4:46
4. Declaring our Theme - Adding a Screenshot5:21
5. Declaring our library - adding CSS and JS files to our theme5:10
6. Activating some debugging settings10:56
7. Overwriting template files in our theme6:45
8. Implementing the main menu region31:40
9. Theming our footer12:42
10. Creating the fields in the Node and the Paragraph13:50
11. Theming the node - top area and fields19:05
12. Theming the first paragraph9:00
13. Image paragraph8:00
14. Text paragraph5:16
15. Creating some example pages and wrapping up7:40
The ready files of the project0: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

Full introduction to Drupal 8 theming in easy steps

What you'll learn

Explore related topics

Course content

Welcome3 lectures • 10min

Drupal Theming18 lectures • 1hr 34min

Twig10 lectures • 26min

Subproject: Convert a static website to Drupal 8 theme6 lectures • 51min

Conclusion1 lecture • 6min

Bonus3 lectures • 17min

Bonus: Second Project step by step16 lectures • 2hr 28min

Requirements

Description

Who this course is for: