Darren is the digital designer here at Real Life Digital. He handles our small to medium size projects from their very conception right through to implementing them in code on the final product. He loves pushing the boundaries using new HTML5 and CSS3 technologies. Darren's background is in print design and he has a knack for translating static pixel-perfect designs in to organic, responsive websites and applications. He is known around the office for his prominent beard, his insatiable thirst for decent beer (not in work hours), his passion for obscure hip-hop and his bizarre love affair with chilli sauce.
Create your custom theme info file
Navigate into your “theme” directory which should be empty except for a “README.txt” file. This file contains a nice overview of what to put in this folder, but we will go into a bit more detail here. Firstly, your theme will need a name. Some people prefer to give the theme a name which doesn’t relate to the project itself and others prefer to call the theme the same name as the project for consistency. We’re going to go with “reallifedigital” to be consistent. You’ll need to create a new directory inside of “themes” with this theme name. Now navigate into your actual theme directory once you’ve created it and given it a name.
The first thing Drupal needs to recognise your theme is an info file. Create a new file and name it with your theme name plus the extension “.info.yml”. In our case this file will be called “reallifedigital.info.yml”. Now open this file with your preferred text editor.
The file needs to be written in YAML syntax but don’t panic - it’s really easy. The “name:” and “description:” fields are hopefully self explanatory! The “type:” and “package:” tells Drupal what type of info file this is and where to include it within your Drupal project. The “core:” defines what version of Drupal we’re working with and the “screenshot:” points to a screenshot of the theme which will appear in Drupal’s UI later on once our theme is up and running. Just copy what you see below but replace the “name:” and “description:” fields with your own theme’s name and description.
name: Real Life Digital type: theme description: A red theme for the Real Life Digital website! package: themes core: 8.x screenshot: screenshot.jpg
By default Drupal’s output markup is "class-free" for total customisation. To get going quickly, though we suggest you define a “base theme”. Drupal comes with a base theme called “classy” which provides useful classes as well as other defaults. To define a base theme we simply add the following line to our info file:
base theme: classy
Next we’ll need to define our libraries (for the uninitiated libraries in Drupal are simply a collection of JS/CSS as opposed to 3rd party plugins which we call modules). This will make more sense later when we set up our “libraries.yml” file but for now simply define your libraries as shown below. You’ll need to replace our theme name for yours. In YAML syntax indentation is important so be sure to indent the library information and to add the “- ” before. This is how lists are defined in YAML syntax. Although for now we are only defining one library there is a good chance we will need to come back later and extend this.
libraries: - reallifedigital/global
Next we can define any stylesheets we want to remove. These could be stylesheets which have come Drupal's core, from our class base theme or from a contributed module. For now we’re not going to remove any stylesheets but it’s worth having this in your file so you can come back and remove stylesheets as and when you need to. Simply add the following line:
Finally, we’ll define our regions. Regions are specific areas that make themselves available with Drupal’s UI that we can assign content to. These come in value pairs - a machine name and a human-readable name in single quotation marks. You may have as many regions as you like and you can always come back and add more or remove some. As a general rule you’ll want a header area, an area for your main content, and a footer area. That said, you may also want a specific region for menus, sidebars, copyright info etc. Here is a simple example which you can use to get going (remember indentation is critical in YAML syntax):
regions: header: 'Header' content: 'Main Content' footer: 'Footer' copyright: 'Copyright'
You’re theme info file is now complete. Save the file and exit. We’re now ready to create the libraries file. For clarity we’ve provided the entire info file overleaf which you can copy and paste and then customise.
name: Real Life Digital type: theme description: A red theme for the Real Life Digital website! package: themes core: 8.x screenshot: screenshot.jpg base theme: classy libraries: - reallifedigital/global stylesheets-remove: regions: header: 'Header' content: 'Main Content' footer: 'Footer' copyright: 'Copyright'