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.info.yml
        • 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 classy.info.yml file

    From there, I ran this command to open the file from the terminal.
    subl classy.info.yml

    Next, I copied everything to my kawaii.info.yml 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.
    classy.info.yml 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!
    homepage
    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.
    /structure/blocklayout
    Here was the result.
    homepage after adding blocks

    Comments

    Popular posts from this blog

    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 packages LAMP server contain. During the process, I had to enter a password for Mysql. This password was found to be needed later on. Commands:
    su…

    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.



    Then... we finally go…

    Write 3-paragraph essay to explain what is Drupal to grandpa/grandma.

    Drupal is surely unknown to the elders. When asking “What is Drupal?” nothing would come to their mind. As grandpa and grandma are not into the tech world, it would be hard for them to understand what Drupal is right away. Let's take this short scenario as an example: Grandpa is a philosopher. He is pretty fed up with all the procedures and investment needed before getting his work published. Instead, grandpa now wants to create a personal blog online. Yet, he thinks that it is out of his reach and gets discouraged. That is when Drupal pops in to tackle grandpa's query.  With Drupal, he can create a website online without much technical knowledge. Basically, Drupal is just like a simple Microsoft word office. The main difference, it gets your content further by publishing your 'document' on the net. Likewise, Drupal allows grandpa to edit, manage and publish his writings. All this, only by accessing the internet. Thus, grandpa can also add pictures, increase text sizes …

    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 Environment1.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 'drupaldock'
    docker…

    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: http://try.github.com/levels/1/challenges/1, http://pcottle.github.com/learnGitBranching, and http://git-scm.com/book. Both three were useful to understand Gits tree structure.
    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.
    Write a patch 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 the main step, I had to generate and submit a patch. Here are the proposed patch and screenshot. It was fantastic seeing how th…