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/2349827drush 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.

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.