Welcome
  • Introduction to me
  • Introduction to the course
  • Preparing our working environment
Drupal Theming
  • What is a theme
  • Themes inside of Drupal
  • Development settings and cache clearing
  • Base themes
  • Start with our theme
  • Asset libraries
  • Adding our CSS files
  • Add our JS
  • Template files - where they are and how to overwrite them
  • Adding our markup in the template files
  • Debugging templates with kint
  • Drupal view modes
  • Node templates
  • Page and html templates
  • Regions
  • Views and overwriting views templates
  • Add and change variables with preprocess functions
  • Render API
Twig
  • Why Twig
  • Quick twig
  • Twig Print variable
  • Twig for loop
  • Twig if
  • Twig filters and functions
  • Twig attributes in drupal
  • Extending templates
  • Links to other pages in the site
  • Translatable strings
Subproject: Convert a static website to Drupal 8 theme
  • Simple website example overview
  • Preparing the new theme
  • Implementing the html and page wrapper
  • Subproject - Fixing the branding of the site
  • Implementing the main menu
  • Implementing the main content at frontpage
Conclusion
  • How you may continue to improve in Drupal 8 theming
Bonus
  • Chrome twig extention
  • Removing and overwriting CSS files
  • All you could do with the .info file
Bonus: Second Project step by step
  • 1. Getting Started And Overview
  • 2. Install Acquia Dev Desktop - Our Working Environment
  • 3. Installing Drupal 8 with Acquia Dev Desktop
  • 4. Declaring our Theme - Adding a Screenshot
  • 5. Declaring our library - adding CSS and JS files to our theme
  • 6. Activating some debugging settings
  • 7. Overwriting template files in our theme
  • 8. Implementing the main menu region
  • 9. Theming our footer
  • 10. Creating the fields in the Node and the Paragraph
  • 11. Theming the node - top area and fields
  • 12. Theming the first paragraph
  • 13. Image paragraph
  • 14. Text paragraph
  • 15. Creating some example pages and wrapping up
  • The ready files of the project