Wat

gaan we leren

Drupal theming

Drupal theming

• Week 1 t.e.m. 6
• Eigen themes maken
• Andere themes uitbreiden
• Twig template systeem - HTML
• CSS
• JavaScript
• Images/video

Drupal Modules

• Eigen themes maken
• Andere themes uitbreiden
• Twig template systeem - HTML
• CSS
• JavaScript
• Images/video

Drupal Modules

• Week 7 t.e.m 12
• Custom modules maken
• Bestaande modules uitbreiden
• Allerlei Drupal API's, zoals
  • Form API
  • Views API
  • Blocks API
  • Entity API
  • ...
• Symfony
• Config Management

Contents

• Recap "What is Drupal"
• Anatomy of a theme
• Twig templating
• Theme functions
• Libraries
• Javascript & Drupal
• Best practices

Opdrachten?

"Eww"

2 opdrachten

Voor elk "onderdeel" zal je 1 opdracht moeten inleveren.

Voor het gedeelte theming zal je zelf een thema moeten uitwerken.

Voor het gedeelte modules zal je dan weer een eigen module moeten maken.

Anatomie

van een theme

Summary

• Wat is een theme
• Common uses
• Soorten themes
• Theme UI
• Drush
• Anatomie
• Tips
• Praktijk

Wat is een theme

D8 "definition"

A theme is a collection of files that define the presentation layer. You can also create one or more "sub-themes" or variations on a theme.

https://www.drupal.org/docs/8/theming

Thema

Html, CSS, JS

PHP

MySQL

API's

Inheritance

Sub-themes are just like any other theme, with one difference: They inherit the parent theme's resources. There are no limits on the chaining capabilities connecting sub-themes for their parents. A sub-theme can be a child of another sub-theme, and it can be branched and organized however you see fit. This is what gives sub-themes great potential.

Common uses

Waarom een theme gebruiken?

Multisites

• One codebase
• Two themes

Landingpages

Seasonal

Soorten themes

Ready made

• Themes zoals:

  • https://themeforest.net/category/cms-themes/drupal

• Meestal slechte integratie

  • Weinig/moeilijk aanpasbaar

  • Focus: snel up & running

Starterthemes

• Themes zoals:

  • https://www.drupal.org/project/bootstrap

  • https://www.drupal.org/project/zurb_foundation

  • https://www.drupal.org/project/neato

• Goede integratie

  • Componenten van frameworks werken Out of the box

  • Meestal inclusief startertheme

• ​Veel custom werk

Corethemes

/core/themes

• bartik (default)
• classy
• seven (admin)
• stable
• stark

Onze focus

=

Custom theme

Theme UI

Live demo

Permissions

• Administer themes
  • Toegang tot het beheer van themes
• View the admin theme

Drush

Like modules

$ drush en <name>

$ drush pm-uninstall <name>

$ drush cr

Tips

Disable cache & aggregation

admin/config/development/performance

Je ziet je wijziging niet?

Clear cache!

$ drush cr

Andere errors debuggen?

1. Drupal error log

/admin/reports/dblog

Andere errors debuggen?

2. Apache error log

In Acquia Dev Desktop

Click on Acquia Dev Desktop

=> Preferences => Logs => View Apache Errors