How to Design Drupal 8 Themes
OSTraining
Course Summary
This class is a hands-on introduction to designing your Drupal 8 site. You'll learn how to customize your Drupal site with CSS, HTML, Javascript, custom fonts and more.
-
+
Course Description
This class is a hands-on introduction to designing your Drupal 8 site. You'll learn how to customize your Drupal site with CSS, HTML, Javascript, custom fonts and more.To take this class, you should already have good Drupal 8 site building skills, plus a knowledge of CSS, HTML and some PHP.
- In the first part of the class, you'll learn how Drupal 8's theming system works. You'll see how PHP, HTML, CSS, Javascript and Twig combine to allow you to design your site.
- In the second part of the class, you'll build your first custom theme. You'll create all the architecture needed for a theme, from the files and folders to the external scripts and mobile breakpoints.
- In the third part of the class, you'll get a deeper understanding of all the elements found in a typical theme folder and how to customize them.
- In the fourth part of the class, you'll take an existing design and turn it into a complete Drupal theme!
Rod holds two masters degrees and has been training people how to do "things" for over 25 years. Originally from Australia, he grew up in Canada and now resides just outside Cincinnati, Ohio. He has worked in both the non-profit and for-profit worlds, in small companies and large corporations.
His extensive open source experience includes WordPress, Joomla, Drupal and Moodle and he really knows how to help you get the most out of the system you chose.
Rod plays ice hockey a couple of times a week and rides his Goldwing motorcycle pretty much everywhere he can.
-
+
Course Syllabus
Getting Started
Introduction to Drupal 8 Theming
What You'll Need for This Class
Setting up Your Environment
Introduction to Themes
How Does Drupal Theming Work?
Who are Drupal Themers?
Finding and Evaluating Contributed Themes
Installing Themes
Static, Configurable and Responsive Themes
Build Your First Theme
Building a Custom Theme
Add a Screenshot and Logo
Clear the Theme Cache
Add Regions to a Drupal Theme
Add Libraries to a Drupal Theme
Add CSS to a Drupal Theme
Add External Scripts to a Drupal Theme
Add Google Fonts to a Drupal Theme
Advanced YML File Options
Mobile Breakpoints
Mobile Breakpoints Exercise
Drupal 8 Theming Quiz 1
Customizing Your Theme
Introduction to Theme Customization
Anatomy of a Drupal Theme
Drupal Coding Standards
Introduction to Twig Template Files
Template Overrides in Drupal
Installing the Devel Module
A Drupal Template Override Demo
Creating a Node Template Override
Creating a Maintenance Page Template Override
Overriding Drupal Breadcrumbs
Drupal 8 Theming Quiz 2
Base Themes and Subthemes
Introduction to Base Themes and Subtheming
Best Practices for Subthemes
Create a Bartik Subtheme
Setting Up The Theme
How to Match an Existing Design
Creating the Custom Theme
Add Custom Regions
Site Building
Site Building for Our Theme
Create a Services Content Type
Create a Banner Content Type
Adding Content, Part 1
Adding Content, Part 2
Views
The Services View
The Blog View
The Frontpage Banner View
Creating Custom Blocks
Template Overrides
Create Template Overrides
Overrides for Frontpage Content
Adding CSS and Images
Final
How Would You Do That in Drupal?
Drupal 8 Theming Quiz 3
