Subtheme your admin theme


Si Hobbs


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.

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
  - lilseven/admin-styles
  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'


      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