Category: Drupal

Categories
Drupal

Drupal theme

Create the theme

1. Create a theme file in:
yourProject/themes/your_theme_name/theme_name.info.yml
2. Add content to your theme file:
name: Beautiful theme
type: theme
base theme: classy
description: 'A great theme for warm summer days.'
package: Custom
core: 8.x
Extra: Key/value pairs in theme_name.info.yml
name (required)
type (required)
description (optional)
package (optional)
core (required)
php (optional)
version (optional)
libraries (optional)
libraries-override (optional)
libraries-extend (optional)
base theme (recommended)
hidden (optional)
engine (optional)
logo (optional)
screenshot (optional)
regions (optional)
regions_hidden (optional)
features (optional)
stylesheets-remove (deprecated)
ckeditor_stylesheets (optional)
Tips:
  • Theme naming: name_with_underscore is required by drupal.
  • Tabs are NOT allowed. Use spaces ONLY.
  • Properties and lists MUST be indented by two (2) spaces.
  • https://www.drupal.org/node/2349827
  • drush cr is required after the changes, is clean all the cache.
  • https://drupalize.me/tutorial/create-info-file-module?p=2766

Structrue of Drupal Project

Drupal root 
+-- core
|   +-- themes
|       +-- bartik
|       +-- classy
|       +-- engines
|       +-- seven
|       +-- stable
|       +-- stark
+-- sites
|   +-- *
|       +-- themes
|           +-- maya
+-- themes
    +-- contrib
        +-- zen        
    +-- custom
        +-- my_custom_theme

Structrue of Theme

Theme root 
+-- assets
+-- src
+-- templates
|   +-- block
|   +-- content
|   +-- field
|   +-- form
|   +-- icons
|   +-- layout
|   |     -- html.html.twig
|   +-- ...and more
theme_name.info.yml
theme_name.libraries.yml
theme_name.breakpoints.yml
theme_name.theme
  • theme_name.info.yml is required.
  • theme_name.theme is a PHP file that contains conditional logic, and handles preprocessing of variables before they are output via template files.
  • templates/*.html.twig is used to override the base twig template files.
  • theme_name.libraries.yml define CSS and JavaScript libraries that can be loaded by your theme. All CSS and JavaScript should be added to the page via an asset library.