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.