Adding a node ID as class to the tag in Drupal 8

One thing I discovered recently in my college’s Drupal 8 site was that the node number CSS class that used to be applied to the <body> tag was missing. In Drupal 7 there was a unique node ID class and it looked sort of like this:

<body class=”html not-front not-logged-in no-sidebars page-node page-node- page-node-8471 node-type-article news-newsreleases context-news”>

Having this unique node number CSS class was useful for cases when specific pages needed custom styles applied.

By default, Drupal 8 seems to add no such class to pages. To get them back I added a snippet of code I found on a Drupal.org post. I found it was easiest to use:

 /**
* Implements hook_preprocess_html().
*/
function themename_preprocess_html(&$variables) {
if ($node = \Drupal::request()->attributes->get(‘node’)) {
$variables[‘attributes’][‘class’][] = ‘page-node-‘ . $node->id();
}
}

in my theme’s sitetheme.theme file.

There is also a Node Class module that might help accomplish the same objective, adding unique CSS classes to a page. It’s a simple module that allows users to add custom CSS classes to any node through the node/add interface.

After adding the snippet of code above to my sitetheme.theme file I was able to target a faculty profile page that needed custom styling. Previously, without a unique CSS class, there no way to target that specific page.

Ohio State Drupal Users Group Meeting – March 22, 2018

The Ohio State Drupal Users Group is having its March 2018 meeting in 141 Sullivant Hall (the Collaboratory) on Thursday, March 22, 2018, 3:00 pm to 5:00 pm. One of the topics of discussion with be Drupal site hosting, which will probably get into hosting on cloud platforms like Pantheon or Acquia. The university also runs a hosting service that’s available for Ohio State Colleges and Departments to use. The OCIO hosting service offers some Drupal-specific information about installing, backing up, and restoring Drupal 7 and Drupal 8 websites. In Drupal 8, drush commands can be used to create backups and migrate a site from a development account to a production account. Cloud hosting services, like Pantheon or Acquia, also offer DEv, Test, and Live (production) environments and methods to move (deploy) site data between them.

 

There is a Sullivant Hall Collaboratory and Rotunda Reservation Request form available that other groups from the university can use to reserve that space.

 

Creating a multi-column mega menu with the Drupal Superfish module 

The Superfish module for Drupal 8 includes a multi-column option to create mega-menu style drop-down menus. Before installing the module be sure to download ver. 2.x of the Superfish library. Initially I had ver 1.x of the JS library and it didn’t have the styles for mega-menus.

‘.sf-multicolumn-column’ is one of the main mega-menu styles in superfish.css from ver. 2.x.

After installing the Superfish module I created a Superfish block in D8’s Block Layout area for my example site’s top-nav main-menu. In the Superfish main-menu block that I created I set the Start from depth to 1 and the to Levels to 2. See image.Superfish block settings

Here are some other articles about using the Superfish module for mega-menus:

Creating a mega menu (multi column) as shown in the demo – From 2011.

Superfish Mega Mensu – From 2/18/13.

Caveat: It was noted that if a parent menu item does not contain any children it will break the Superfish columns layout.

How to create Drupal multi-column sub-menus (Megamenus) with Superfish – From 2013.

The ZT megamenu module is a another option for creating multi-column menus an has an alpha version for Drupal 8. I haven’t had the chance to evaluate this module yet. More site seem to be using Superfish so that method might be more standard.

Jon G.