drupal 9 theming
Drupal

Drupal 9 Theming Guide

This post is a quick guide to creating Drupal 9 theme from scratch using classy theme as base theme. However, Drupal 9 is shipping with few upgrades that you might want to know before you start building Drupal 9 theme or module.

What’s new in Drupal 9..?

As you might already know that Drupal 9 is based on Symfony 4, Twig 2 and requires PHP 7.3.x and above; does not support jQuery UI anymore. Modules like layout builder and bigpipe are the main attraction and obviously the new default theme.

That’s enough, let’s create Drupal 9 theme.

Create theme_name.info.yml

#Themes/theme_name/theme_name.info.yml

name: Theme Name
type: theme
description: 'Drupal 9 theme with layout for my affiliate site'
core: 9.x
libraries: // will create later
  - theme_name/my_css_js
base theme: classy
logo: 'img/logo.png' //create img folder and put logo.png
regions:
  header: Header
  content: Content
  sidebar_first: 'Sidebar First'
  footer: Footer

Create theme_name.libraries.yml

Create css/mystyle.css, js/myscript.js and img/logo.png folders and files and drop your site logo in img folder. Then create the following theme_name.libraries.yml file

#Themes/theme_name/theme_name.libraries.yml

my_css_js:
  css:
    theme:
      css/mystyle.css: {}
  js:
    js/myscript.js: {}

my_css_js is the name of your libraries that you can call in theme_name.info.yml

Working with classy base theme css selectors

If you want to create Drupal 9 theme based on classy base theme, classy CSS selectors guide by Drupal will make your life easier.

Related Posts..

  1. Install Drupal 8 and Drupal 9 on Windows 10
  2. Best Drupal Hosting
  3. Drupal 7 Bootstrap Theme Creation
  4. Convert Drupal 8 into a PWA

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.