Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Drupal 8 theming

203 views

Published on

This is just a initial introduction about custom theming in Drupal8

Published in: Technology
  • Be the first to comment

Drupal 8 theming

  1. 1. Drupal 8 Theming Templating
  2. 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. 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. 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. 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. 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. 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. 8. Twig templates • page.html.twig • html.html.twig

×