Pasar al contenido principal

Creating a Theme in Drupal 8

Submitted by gabriel.nunez on Jueves, Junio 1, 2017 - 15:55.

So, you just installed Drupal 8 in your workspace and want to change its style and appearance. To do so you need a Drupal 8 theme. The community, as big as it is; has created a lot of themes you can use for free or by paying a small fee. But if you want to give your site a more personalized look and feel, you may want to create your own theme by scratch. Having the usual CSS and JS skills, this is an easy task.

Let's get to basics first. Remember how in D7 you had to put themes in sites/all/themes? Well, D8 has scrapped that and now you have the themes folder directly at the root of the site folder. Cool, right?.

Inside this themes folder, you have the contrib and custom subfolders. The contrib subfolder hosts base themes that can be called from custom themes. The custom folder is the directory where you have to put your custom theme folder, hence the name custom.

If you have bootstrap installed in your site, you should have a folder called bootstrap in your contrib themes folder.

For this example, I will create a theme called "Nimblersoft" which is a child of the base theme bootstrap.

In order for the CMS to detect and process your theme properly it needs some files. Let's review this items, shall we? For the CMS to detect and process your theme properly you will need these files in your folder:



These files give your theme its name, regions, declare libraries and dependencies and so on. Let's check thoroughly the contents of the .info.yml file. Given that these files are in yml format, the proper indentation is very important, because if the content is badly indented it cannot be read.

This file declares your theme's name, regions and loads the libraries. This file should have this structure:

core: 8.x
type: theme
base theme: bootstrap

name: 'Nimblersoft Bootstrap'
description: 'Uses the Bootstrap framework Sass source files and must be compiled (not for beginners).'
package: 'Bootstrap'

  navigation: 'Navigation'
  navigation_collapsible: 'Navigation (Collapsible)'
  header: 'Top Bar'
  highlighted: 'Highlighted'
  help: 'Help'
  content: 'Content'
  sidebar_first: 'Primary'
  sidebar_second: 'Secondary'
  footer: 'Footer'
  page_top: 'Page top'
  page_bottom: 'Page bottom'

  - 'nimblersoft/global-styling'
  - 'nimblersoft/bootstrap-scripts'
  - 'nimblersoft/global-js'

Core declares the Drupal core your theme works on; type declares your folder and its content as a theme, and with base you declare the base themes already in the themes > contrib folder your custom theme is a child of. Name, description and package gives your theme its name, description and pecifies a "package" that allows you to group themes together. This info is read by de CMS and displayed when you select available themes in admin > appearance.

Regions is where you can declare custom regions for the site display. Keep in mind this, if you don't declare regions; the CMS uses the default Drupal ones. But if you declare at least one region, the default Drupal regions are no longer available. So if you need to create a custom region you have to put again all the regions you want to use, even the default ones if you need so; so think this thoroughly.

Libraries is where you can load script libraries. These libraries are declared in the .libraries.yml files



In this file, you declare libraries comprised of the route of one or many script or style files. We are creating the Nimblersoft theme in this example, so the libraries must be declared with this structure:

      css/style.css: {}
    header: true
    js/script.js: {}

    bootstrap/assets/javascripts/bootstrap/affix.js: {}
    bootstrap/assets/javascripts/bootstrap/alert.js: {}
    bootstrap/assets/javascripts/bootstrap/button.js: {}
    bootstrap/assets/javascripts/bootstrap/carousel.js: {}
    bootstrap/assets/javascripts/bootstrap/collapse.js: {}
    bootstrap/assets/javascripts/bootstrap/dropdown.js: {}
    bootstrap/assets/javascripts/bootstrap/modal.js: {}
    bootstrap/assets/javascripts/bootstrap/tooltip.js: {}
    bootstrap/assets/javascripts/bootstrap/popover.js: {}
    bootstrap/assets/javascripts/bootstrap/scrollspy.js: {}
    bootstrap/assets/javascripts/bootstrap/tab.js: {}
    bootstrap/assets/javascripts/bootstrap/transition.js: {}

The names given to the libraries are by name convention but you can give them any name you want, just keep in mind to put the correct name in the libraries section in the info.yml file. The important thing is that you can mix js and css files in the same library, but for good programming practices, it's best to keep them in separated libraries.

Note this piece of code:

    header: true

This code allows for the JS files within the library to be loaded at the header of the page. By default, all JS files are now loaded in the footer. If you have elements with libraries that need to be executed at the header in order to function properly, this option is perfect for that purpose.

Keeping these things in mind and you will be able to create your theme with ease. Happy theming!


Desarrollo Web
Diseño Gráfico
Soporte Web
Estrategias Web