Drupal 7: Tweaking an Admin Theme

David G - DrupalDrupal supports a frontend (public) theme and an Administrative theme for the site-administrator interfaces. Occasionally I try to find useful admin themes and utilities to make a site administrator, or content editor’s life easier. Recently I’ve settled on the Adminimal Theme and the Mobile Friendly Navigation Toolbar module. But I found a display issue with Module Filter and Adminimal I needed CSS to fix. What is the simplest way to fix an Admin theme I don’t want to maintain in the long run?

The issue I was seeing was the module listing table was appearing below the vertical tabs for module packages, see the below screenshot:

The module filter page initially appears wonky, or broken visually.

The module filter page initially appears wonky, or broken visually.

I’m not sure when this occurred exactly in the modules’ version history. But, this behavior bothers me as Admin, it makes the page difficult to use (but not impossible).

After a bit of research I found issue #2247031 which describes a CSS solution to fix the problem, after 5+ months an updated module apparently has not been released yet 🙁 as the last official release of this module was in 2013.

The solution is so simple (a single CSS Property value change) that I then wanted to find a simple way to incorporate it into the website. I can think of 3 possibilities:

  1. If you copy the admin theme or create a subtheme based off of the admin theme (note, this won’t work with Drupal Commerce, as it already has a subtheme based off of Shiny) – and then add a css file via a .info call, you will load the CSS on every page.
  2. If you copy the admin theme, or create a subtheme based off of the admin theme, you can use the hook drupal_add_css() in your template.php file. This will allow you to call the stylesheet conditionally, on certain pages only for example, or for certain browsers. This works alright but you’re already calling more files than necessary.
  3. Create your own module, and call drupal_add_css() from it. As far as I know, this is the ‘lightest’ way to alter the admin theme without touching the original and will work if your admin theme is already a subtheme (for ex. Drupal Commerce Kickstart Admin theme is a subtheme of Shiny). I use this method because it will work in all circumstances.

See below for an example, in my own module I call hook_preprocess_html() and apply CSS if we are on an /admin/* url:

/**
 * Implements hook_preprocess_html().
 */
function ucsb2014_preprocess_html(&$vars) {
  $css_fixes_for_admin = <<<EOFCSS
html.js #module-filter-modules {
  margin-left: 245px;
}
EOFCSS;

  if (arg(0) === 'admin') {
    drupal_add_css($css_fixes_for_admin, array('group' => CSS_THEME, 'type' => 'inline'));
  }
}

After clearing the site cache our module page now looks as expected (without visual errors):

After our CSS fix the table contents appears to the right of the vertical tabs. Being a long time user of this module I know this is the correct layout of this page.

After our CSS fix the table contents appears to the right of the vertical tabs. Being a long time user of this module I know this is the correct layout of this page.

I hope you can see how easy it is to apply quick fixes to contributed modules and themes sometimes in Drupal7! Happy coding and site building everyone!

Looking for quality web hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , | Posted under Drupal | RSS 2.0

Author Spotlight

David Gurba

I am a web programmer currently employed at UCSB. I have been developing web applications professionally for 8+ years now. For the last 5 years I’ve been actively developing websites primarily in PHP using Drupal. I have experience using LAMP and developing data driven websites for clients in aviation, higher education and e-commerce. If you’d like to contact me I can be reached at david.gurba@arvixe.com

Leave a Reply

Your email address will not be published. Required fields are marked *