By hedgehill on

Override Admin theme CSS with hook_css_alter()

I am trying to alter some CSS settings in my Admin theme by specifying my own stylesheet. My admin theme is Seven and the site theme is a subtheme of Bartik. The site is configured to use the Admin theme for editing / creating nodes.

I used this tutorial and added hook_css_alter() to my template.php file:

/**
 * Implements hook_css_alter().
*/
function <my_theme>_css_alter(&$css) {
  // override Seven's css stylesheet.
  if (isset($css['themes/seven/style.css'])) {
    $css['themes/seven/style.css']['data'] = drupal_get_path('theme', '<my_theme>') . '/seven_style.css';
  }
}

On a node page the code is run but $css does not contain the Seven stylesheet, which makes sense. On the node edit page the code is not run at all, presumably because Seven has its own template file.

I have googled extensively trying to find a solution to this and the fact that I haven't found anything useful makes me think I am missing the point? What is the correct approach to overriding CSS settings in the Admin theme?

⋅ Categories: Drupal 7.x

Comments

duckzland’s picture

duckzland commented

I'm not sure if the front end template.php is called when using admin theme. thus your hook css alter is never get called.

--------------------------------------------------------------------------------------------------------
if you can use drupal why use others?
VicTheme.com

hedgehill’s picture

hedgehill commented

Hi duckzland, thanks for the reply. I am sure you are right, the admin theme (Seven, in my case) is calling its own template.php file. That being so, is there an 'approved' way of overriding the admin theme's css?

duckzland’s picture

duckzland commented

maybe invoking the hook inside a module will help?

--------------------------------------------------------------------------------------------------------
if you can use drupal why use others?
VicTheme.com

roma.k’s picture

roma.k commented

What I would recommend is try copying Seven them into sites/all/thems/ directory and then renaming it to whatever you want. This way you can claim Seven theme as your own and do whatever you want with it. Let me know you you need description of the renaming process, I've done it before but it was some time ago, so i'll have to walk through it again.

That would be an approved way in my opinion.

hedgehill’s picture

hedgehill commented

Thanks for both the suggestions above. I moved the hook to a module and this worked.

I didn't try duplicating the Seven theme into sites/all/themes but if I decide I want more control over the admin interface I will give this a try too.

beltofte’s picture

beltofte
Primary language Danish
Location Copenhagen 🇩🇰
commented

A solution could be to make a subtheme of the Seven theme and place it in sites/all/themes/your_admin_them, and do your CSS changes there. Much nicer solution than copying the Seven theme and hacking it, or doing overwrites and hacks from the module.

dlaufer’s picture

dlaufer commented

My admin theme was being buggy and adding "display:none" to date selectors when creating event content, which must be coming from bootstrap or core because I did zero edits to any input elements after extending the Bootstrap base theme. But here was my semi-newb journey through drupal trying to fix it:

1. I tried to use a theme preprocessing hook on my custom theme to add a css page when the $theme == 'seven' or using arg(0) == 'admin' (which I ended up not trying because it is being deprecated). The CSS sheet WAS being loaded in through the preprocessing hook only on the admin page, but the css mysteriously (and frustratingly) wasn't applying.

2. I tried making a custom module that used a module preprocess hook to try to add CSS to the admin theme. Got the css page loading once again (as confirmed in the inspector) but STILL wasn't working.

3. I said screw it and tried just using "!important" on the styles in my custom theme. Nope. The style still wasn't applying to the admin overlay.

3.5. I learned that the admin overlay is in an iframe and everything i'm trying css-wise won't load into that. Correct me if I'm wrong.

4. Since chopping up the Seven theme was a bad idea, I made a sub-theme from Seven that is now our admin theme. And FINALLY, it worked and I fixed the CSS issues.

Drupal has such an intense learning curve... I tell ya. It's amazing how much more I learn every day.