Drupal 8 theming
Download as PPTX, PDF1 like264 views
This document discusses the initial steps for creating a Drupal 8 theme, including creating a .info.yml file to define theme metadata and regions, adding a libraries.yml file to define CSS and JavaScript assets, and printing regions in page.html.twig. It also lists the 10 default regions in Drupal themes.
Drupal 8 theming
- 2. First step • First we need to create a THEMENAME.info.yml file to craete a new theme. • This file provides the metadata about the new theme.
- 3. THEMENAME.info.yml • 4 required meta information Name Description Type Core Some additional meta info which can be added : Libraries Stylesheet-remove Regions
- 4. THEMENAME.info.yml • name: Fluffiness • description: First custom theme for drupal8 • type: theme • core: 8.x • stylesheets-remove: - core/assets/vendor/normalize-css/normalize.css • libraries: - fluffiness/global-styling • regions: header: 'Header' content: 'Content' page_top: 'Pag Top' page_bottoml: 'Page Bottom' footer: 'footer'
- 5. Libraries • No stylesheets property • No scripts property • jQuery is not automatically loaded on all pages anymore in Drupal 8 • To define your asset libraries you need to add THEMENAME.libraries.yml In this library yml file we can add the required css/js files as below eg: cuddly-slider: version: 1.x css: theme: css/cuddly-slider.css: {} js: js/cuddly-slider.js: {} dependencies: - core/jquery
- 6. regions • To add a region to a theme there are 2 require steps : Adding region metadata to your THEMENAME.info.yml print that new region into the page.html.twig file. For example : region : header_top : Header Top Print this new region in your twig template {{page.header_top}}
- 7. Default Regions 1. page.header: Items for the header region. 2. page.primary_menu: Items for the primary menu region. 3. page.secondary_menu: Items for the secondary menu region. 4. page.highlighted: Items for the highlighted content region. 5. page.help: Dynamic help text, mostly for admin pages. 6. page.content: The main content of the current page. 7. page.sidebar_first: Items for the first sidebar. 8. page.sidebar_second: Items for the second sidebar. 9. page.footer: Items for the footer region. 10. page.breadcrumb: Items for the breadcrumb region. These are 10 default regions coming from base theme classic.
- 8. Twig templates • page.html.twig • html.html.twig