Skip to main content

Code a sub-theme using Classy as base theme

Classy is a theme in the D8 core. It serves Bartik and Seven as the base theme. One might think of using classy as it already provides the user with CSS classes sample. I am going to share a little of my experience with coding a subtheme with Classy as the base theme.

Install Sublime Text

To code a sub-theme, moving around folders and files are necessary. Therefore I decided to use a text editor called Sublime Text. Here are the commands for its installation.
sudo add-apt-repository ppa:webupd8team/sublime-text-2
sudo apt-get update
sudo apt-get install sublime text

To use Sublime Text, I can just run this command.
subl [filename.txt]

If the file exists, it will open it. Else, It will create a new file.
Note: It can also open folders and lets you open whatever is inside.

Prerequisites: Have a basic knowledge of the Theme Folder Structure of D8

This step is necessary so as to avoid confusion. There are two theme directories in Drupal: the one located at path/core/themes (built-in themes) and the one found at path/themes (custom themes). A complete theme structure would look like this.
  • modules
  • core
    • profiles
    • modules
    • themes
      • bartik
      • seven
      • classy
      • ..
      • ..
  • themes
    • README.txt
    • custom_theme
      • Include
      • Css
        • style.css 
      • Js
        • custom_name.js 
      • Template
        • node.html.twig   
        • custom_theme.libraries.yml 
        • ..
    • .. 
    Note: In D7, path/sites/themes contain the custom themes.I decided to name my subtheme 'kawaii' which means cute in Japanese.

    Create the subtheme folder structure

    When creating the sub-theme, I later found that most of the folders would not be needed; the subtheme would take the characteristics of its base theme. In my case, the base theme is classy.

    kawaii's folder structure

    Set up the subtheme's .info.yml file

    The second crucial step is about creating the .info.yml file. It gives all the necessary information for Drupal to know its a new theme. To start with, I went in path/core/themes/classy to find file

    From there, I ran this command to open the file from the terminal.

    Next, I copied everything to my and edited some keys. These keys share metadata about out theme and explain the theme function to Drupal.

    1. I added the base theme key; It lets drupal know that this is a subtheme which has Classy as the base theme. So, the subtheme can now inherit resources from its base theme.
    base theme: classy

    2. I edited the name of the theme. This will help to differentiate the theme on the appearance page.
    name: Kawaii Classy

    3. This is also displayed on the appearance page.
    description: Kawaii sub-theme of classy

    It indicates Drupal that Classy is the base theme. Drupal can then link Classy to kawaii. It is essential to use proper indentations and space where necessary. Note: In D7, .info.yml files were saved as .info only. file
    kawaii.iinfo.yml after editing

    Optional: Add logo and screenshot

    For Kawaii Classy to have a thumbnail and logo, I simply copied the ones of Classy and pasted in Kawaii.

    copying the logo and screenshot to kawaii folder

    Enable the sub-theme

    I started by refreshing the cache in /configuration/performance. Then I went in /appearance and scrolled down. As expected, Drupal recognised my subtheme. All I have to do was 'Install and set as default.'
    Installing and setting Kawaii Classy as default

    Place blocks in respective regions

    Moving into my Drupal main page, I got proof that my sub-theme worked!
    Yet, I found that some gadgets such as the 'Search Form' were missing. That is why I decided to go to /structure/blocklayout to add blocks to my main page.
    Here was the result.
    homepage after adding blocks


    Popular posts from this blog

    How to add a slider to your Drupal Website/ Blog

    Views Slideshow module is very handy to display any images you want. In this tutorial, we are going to create a slideshow of all my articles. Installation We start by downloading the Views Slideshow module  by copying the link of the tar.gz file and then downloading it from our terminal. wget Extract the contents of the file. tar -xvzf views_slideshow-8.x-4.6.tar.gz -x   Extracts to disk from the archive. -v  Produces verbose output i.e. show progress and file names while extracting files. -z  Uncompresses the resulting archive with gzip command. -f  Read the archive from the mentioned file Next, for Drupal to recognise the module so that we are able to download it, we move the module to the module subdirectory of Drupal. mv views_slideshow /var/www/html/drupal/modules We can now install the module so that we are able to use from our local website. Heading over to localhost/drupal/admi

    Finish Entire Drupal Ladder [Git Basics]

    Getting Started with Git At first, Drupal ladder introduced a little Git introduction and the benefits of its usage. It was fascinating. I knew it would help me in the future. There were three links: , , and . Both three were useful to understand Gits tree structure. Learning Git Branching Install Git Coming to Git installation, I had to put some git commands into practice: git show, git log, git branch, git status among others. As it was something new to me, I took some time to grasp all the commands. Its installation was pretty easy; I only had to follow Drupal Ladder's steps. Installing Git Configuring Git Write a patch Downloading a project using Git Before starting, I had to learn two of the prerequisites: getting used with the issue queue and Drupal sandbox. I had no problem hosting Drupal sandbox and creating an issue. Coming to

    How i installed Drupal 8 on Ubuntu 16.04

    Drupal 7 or Drupal 8? With some research, I had an idea on which Drupal version to opt for. I got to know that D7 is more documented and actually has more modules than D8 whereas D8 is more user-friendly with improved editing flexibility but with some modules not ported yet. Finally, I decided to give a chance to the latest Drupal version. As a beginner, I do not think I will need to work with advanced modules. Therefore in this step by step document, we will be installing Drupal 8 ! Step 1: Make sure everything is up to date First, I made sure all of my system packages are up to date by running the following commands. Using sudo su was very useful for not to waste time entering the same password again and again. sudo su sudo apt-get update sudo apt-get upgrade Step 2: Install LAMP(Linux, Apache, Mysql, Php) Using Tasksel allowed me to install all packag e s LAMP server contain. During the process, I had to enter a password for Mysql. This password was found to be needed later

    IETF 102 - Implementing TLSv1.3 to Nagios Remote Plugin Executor (NRPE)

    Hey there, welcome back to another blog post. In this one, I will document my experience in implementing TLSv1.3 to Nagios Remote Plugin Executor (NRPE) for the IETF 102 Hackathon. Rahul and I paired up for this task. In the last hackathon, he implemented TLS 1.3 in the check_http Nagios plugin ( PR#368 ) and was quite familiar with Nagios already. What are Nagios and NRPE ? In short, Nagios monitors systems, networks and infrastructure. It alerts users when things go wrong and warn them again when the problem has been resolved. NRPE, as the name tells, allows the user to be able to execute Nagios Plugins remotely. The encryption part between check_nrpe and NRPE security protocol could only support up to TLSv1.2. How we made it? On the first day, we quickly set up our virtual machines, cloning the NRPE repo and going through the code. Everything went fine. The testing part was a little bit more tricky but at the end, we made it through even if Rahul was pretty sick.

    Set up Drupal with Docker

    In short, Docker is an open source tool that allows the use of containers. Containers consist of predefined lines of code built by the community. Anyone can push his docker file for other people to use. Of course, Docker has a lot more functionality that I just mentioned: mounting volumes, linking containers and so on. In this blog, I will document my little experience on setting up a full Drupal Development Environment! As usual, Google search engine was my hero. I came up with many tutorials which helped me to get started with Docker. Step 0: Install Docker At first, this step was confusing... docker commands were known for its long commands. Mainly due to flags. But hopefully, I only had to follow the steps command by command! Step 1: Set up Drupal Development Environment 1.1 . To start with, a database was needed for local development. In this command, I run a database from the MariaDB image, put 'drupal' as database password and named the container 'drupaldo