HNM Starter Theme

This chapter describes how to work with the custom theme (developed by HNM AS) named “HNM Starter Theme” as a starter theme.

Table of contents

• Introduction
• Installing
• Blocks
• Configuration
• Templates
• Features
• SCSS and templates
• Troubleshooting
• Final word

Drupal projects discussed in this chapter: Bootstrap5.

Introduction

HNM Starter Theme is a subtheme of the Drupal bridge theme named Bootstrap 5. It was initially created by HNM AS for the website "GUIDed".

It has so far been used as a starter them for a number of other themes:

• Aktivius → Karde01
• GUIDed Theme
• GUIDed Wiki Theme
• engAGE Theme
• (Memas Portal)
• Mosjon og trening → Karde02

For an introduction to Boostrap 5, see: Bootstrap 5: Introduction.

Installing

First use composer to install the base theme:

$ composer require 'drupal/bootstrap5:^1.1'

Then get a tarball of HNM Starter Theme and install it in web/themes/custom/hnmstarter. It should be renamed to reflect the website it is used for.

To set the theme as default, navigate to Appearance » List and press "Install and set as default".

You may need to compile the SCSS to make the theme work. To get the "Fixed" layout, you also need to save it in the GUI.

Blocks

Check that the Block Layout is the following. Those marked "(-)" should be removed on simple websites.

Header

No blocks in this region

Navigation branding region

Site branding

Main navigation region

Main navigation

Additional navigation region (…)

User acount menu

Search form (-)

Breadcrumbs

Breadcrumbs (-)

Main content

Messages

Page title

Tabs

Help

Primary admin actions

Main page content

Sidebar first

No blocks in this region

Sidebar second

No blocks in this region

Footer

Footer

It is safe to remove blocks you don't need. They will not be deleted.

Configuration

The settings that can be made in the GUI are inherited from "General settings" and settings for "Bootstrap5". Please see to the section The GUI in the Bootstrap5 notes for guidance.

For the [colour] Options, the default is to have "do not apply" for all of them. This results in transparency.

The Settings for "X theme" and "X background" are decoupled, however, for a nice result they need to be kept in sync. I.e. if "dark" is selected for the "Navbar theme", you should also select "dark" for the "Navbar background".

There are additional colour settings for the background (i.e. "primary", secondary"), but not for the "theme".

These are my default settings:

1. Body options: Do not apply
2. Navbar options: Dark
3. Footer options: Dark

Change the actual colours in _variables_bootstrap.scss.

The "User account menu" is by default placed in the "Additional navigation region" along with the "Search form". It makes the navbar extra tall. Consider placing these elsewhere for a less tall navbar..

Templates

• block
  • block--system-branding-block.html.twig (adapted from Bootstrap 5)
• content
  • node.html.twig (adapted from Stable 9)
  • page-title.html.twig (adapted from Bootstrap 5)
• layout
  • html.html.twig (adapted from Bootstrap 5)
  • page.html.twig (adapted from Bootstrap 5)
• misc
  • feed-icon.html.twig (no contents)

Features

The theme is designed to make it easy to put a grid on the front page, inspired by a Drupal 7 theme named DAN Polaroid. To get this grid it needs the following features. Until those are implemented in code, they should be created manually.

1. Custom content type: "FP category" - "Front page category" (fp_category). Display settings: Don't display author and date information. Article-clone with extra fields:
   • Body for anonymous field_bodyforanonymous: Alternative body (only if the site is going to be different for autheticated users and anonymous visitors). If this is not used delete "node--fp-category.html.twig".
   • Field "Cat. image", field_cat_image (Type: Image), "Image used to present category on front page.". Public files, no default, Limited 1. It will be used for the front page categories.
   • Field "Weight", weight (Type: Number (integer)), "Weight for sorting". For sorting sequence.
2. Custom image style: "Teaser image", teaserimage: Scale and crop 300×200. Will be used for the icons/images shown as teasers on the front page.

Edit view "Frontpage" to sort ascending on "Weight".

Manage display

Default: Image style "Large". Labels "- Hidden -". Hide: "Links", "Weight".

Teaser: Image style; "Teaser image". Hide: "Body", "Links", "Weight".

Other tweaks

None so far.

SCSS and templates

The starter theme has been extended with SCSS and templates. These are described below.

SCSS:

• The file _variables_bootstrap.scss Defines the colours for the branding area.
• The class navbar-brand defines the font size for main title and site slogan.

• The <blockquote> tag can use the class hnmblockquote. Implementation is dectibed in a separate chapter on Bootstrap 5 components: blockquote.

Templates:

• layout/comment.html.twig - currently only in GUIDed Wiki Theme

Troubleshooting

When creating a clone subtheme with another machine name, check that everything has been converted.

If the site appear unthemed, check the permissions in the public files direcory (sites/default/files).

Final word

[TBA]

---

Last update: 2021-12-20 [gh].