Full introduction to Drupal 8 theming in easy steps
Course description
Full introduction to Drupal 8 theming in easy steps. 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.
Read more about the course
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!
- Some experience with HTML and CSS and a tiny bit of PHP
- 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
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
Watch Online
Watch Online Full introduction to Drupal 8 theming in easy steps
All Course Lessons (55)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 1 | Introduction to me Demo | 00:32 | |
| 2 | Introduction to the course | 02:02 | |
| 3 | Preparing our working environment | 07:29 | |
| 4 | What is a theme | 00:48 | |
| 5 | Themes inside of Drupal | 04:41 | |
| 6 | Development settings and cache clearing | 03:38 | |
| 7 | Base themes | 02:27 | |
| 8 | Start with our theme | 03:31 | |
| 9 | Asset libraries | 01:16 | |
| 10 | Adding our CSS files | 03:27 | |
| 11 | Add our JS | 03:01 | |
| 12 | Template files - where they are and how to overwrite them | 03:06 | |
| 13 | Adding our markup in the template files | 05:04 | |
| 14 | Debugging templates with kint | 07:33 | |
| 15 | Drupal view modes | 06:23 | |
| 16 | Node templates | 12:45 | |
| 17 | Page and html templates | 06:00 | |
| 18 | Regions | 06:07 | |
| 19 | Views and overwriting views templates | 12:54 | |
| 20 | Add and change variables with preprocess functions | 07:54 | |
| 21 | Render API | 04:09 | |
| 22 | Why Twig | 00:42 | |
| 23 | Quick twig | 01:21 | |
| 24 | Twig Print variable | 02:03 | |
| 25 | Twig for loop | 03:39 | |
| 26 | Twig if | 02:55 | |
| 27 | Twig filters and functions | 02:15 | |
| 28 | Twig attributes in drupal | 01:55 | |
| 29 | Extending templates | 06:43 | |
| 30 | Links to other pages in the site | 03:15 | |
| 31 | Translatable strings | 01:31 | |
| 32 | Simple website example overview | 03:24 | |
| 33 | Preparing the new theme | 07:27 | |
| 34 | Implementing the html and page wrapper | 11:02 | |
| 35 | Subproject - Fixing the branding of the site | 08:41 | |
| 36 | Implementing the main menu | 10:13 | |
| 37 | Implementing the main content at frontpage | 10:13 | |
| 38 | How you may continue to improve in Drupal 8 theming | 05:59 | |
| 39 | Chrome twig extention | 04:25 | |
| 40 | Removing and overwriting CSS files | 10:03 | |
| 41 | 1. Getting Started And Overview | 02:46 | |
| 42 | 2. Install Acquia Dev Desktop - Our Working Environment | 04:16 | |
| 43 | 3. Installing Drupal 8 with Acquia Dev Desktop | 04:47 | |
| 44 | 4. Declaring our Theme - Adding a Screenshot | 05:22 | |
| 45 | 5. Declaring our library - adding CSS and JS files to our theme | 05:11 | |
| 46 | 6. Activating some debugging settings | 10:57 | |
| 47 | 7. Overwriting template files in our theme | 06:46 | |
| 48 | 8. Implementing the main menu region | 31:41 | |
| 49 | 9. Theming our footer | 12:43 | |
| 50 | 10. Creating the fields in the Node and the Paragraph | 13:51 | |
| 51 | 11. Theming the node - top area and fields | 19:06 | |
| 52 | 12. Theming the first paragraph | 09:01 | |
| 53 | 13. Image paragraph | 08:01 | |
| 54 | 14. Text paragraph | 05:17 | |
| 55 | 15. Creating some example pages and wrapping up | 07:41 |
Unlock unlimited learning
Get instant access to all 54 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.
Learn more about subscriptionComments
0 commentsSimilar courses
Want to join the conversation?
Sign in to comment