Thumbnail

Subtheme your admin theme

Thumbnail

Si Hobbs

|

Aug 2017

It only takes a few lines of code to put a wrapper around your favourite admin theme. It's practical, teaches the basics of theme inheritance, and is a touch of class.

Always subtheme your administration theme, it provides the following benefits:

  • You have a stylesheet ready for ongoing administration tweaks.
  • It's an opportunity to demonstrate good sub-theme practice to junior devs.
  • It's a place to put the custom favicon, rather than as a file upload.
  • You can do a sexy logo that feels good.

Feels good? One of my favourite administration sub-themes was for the National Library, which has wonderful stained glass in the foyer.

NLA admin theme.

Our L'Seven

Here is Lil Engine's current administration subtheme affectionately known as L'Seven, and a brief breakdown of the files therein. It delivers the princely sum of four lines of CSS.

Image of the subtheme file system.

lilseven.info.yml

It's worth noting that, as in Drupal 7, you should explicitly re-declare the regions from the parent theme. We found that they don't inherit consistently.

name: "L'seven"
type: theme
description: 'Overrides for the Seven theme.'
core: 8.x
base theme: seven
screenshot: logo.png
libraries:
  - lilseven/admin-styles
regions:
  header: 'Header'
  pre_content: 'Pre-content'
  breadcrumb: Breadcrumb
  highlighted: Highlighted
  help: Help
  content: Content
  page_top: 'Page top'
  page_bottom: 'Page bottom'
  sidebar_first: 'First sidebar'

lilseven.libraries.yml

admin-styles:
  css:
    theme:
      css/admin-styles.css: {}

css/admin-styles.css

This file obviously matches the file name in lilseven.libraries,yml, it could have been called anything. 

/* Fix the codesnippet dialog box to use a monospace font. */
.cke_dialog_body textarea.cke_dialog_ui_input_textarea {
    font-family: "Lucida Console", Monaco, monospace;
    white-space: nowrap;
}

Lastly, why Seven?

Don't!. I recommend that you sub-theme Adminimal instead. It's still one of the more robust administration themes and works nicely with GovCMS.

Spread the word