How do I override the admin theme in my own theme?

Question

I created my own Drupal 8 theme:

mytheme.info.yml:

name: My Theme
description: 'Drupal 8 Theme'
type: theme
base theme: bartik
core: '8.x'

mytheme.libraries.yml

global-styling:
  version: 1.x
  css:
    theme:
      css/layout.css: {}
      css/style.css: {}
      css/colors.css: {}
      css/print.css: { media: print }

I am using "Seven" as admin theme.

When I edit a page (/node/x/edit) Seven theme is used.

Now I have to add some CSS the the edit form. How can I do this? style.css is only loaded on front end pages. Edit pages use seven theme and my theme CSS is ignored.

How can I add some CSS to admin pages or edit forms in Drupal 8?

AdamS · Accepted Answer · 2016-09-06 10:44:49Z

You can add admin CSS from a module hook. Replace XXX with the module name.

1 Put your CSS in css/extra.admin.css

2 Declare a library by creating XXX.libraries.yml

extra.admin:
  css:
    theme:
      css/extra.admin.css: {}

3 Create a hook to load the library.

/**
 * Implements hook_page_attachments().
 */
function XXX_page_attachments(array &$attachments) {
  $theme = \Drupal::theme()->getActiveTheme()->getName();
  if ($theme == 'seven') {
    $attachments['#attached']['library'][] = 'XXX/extra.admin';
  }
}

marcvangend · Accepted Answer · 2016-05-30 19:48:27Z

15

You cannot control one theme from within another theme. And even if some smart developer could find a hackish way to do it: please don't. Trust me, you don't want it. The concept of separation of concerns is important in programming. Basically it means that the different moving parts (ie. your theme) of your system should take care of their own task, without interfering with the tasks of other parts (ie your admin theme).

To achieve your goal, the cleanest way is to create a new theme, make it a subtheme of Seven (so it inherits everything you like about Seven) and add your custom CSS into the mix. Now you can select that theme as your admin theme instead of Seven.

answered May 30 '16 at 19:48

marcvangend

14.4k2 gold badges36 silver badges69 bronze badges

Sorry, I can't believe that there is no way to solve this. I only have to add some CSS like img { max-width:100%; height: auto}. There must be a way. – drupalfan May 30 '16 at 20:37
4

No, there must not. Themes are not meant to mix. There can only be one active theme. If you need to do it, make a module, that can implement a form alter and add another library. – Berdir May 30 '16 at 20:57
3

@drupalfan, I don't understand why you conclude there is no way to solve this. There are ways (the Seven-subtheme method I described, and Berdir's method) and they are not hard to do. The kind of solution you suggested, is like asking a hairdresser to change the color of your shoes. Don't do it. – marcvangend May 30 '16 at 21:55
2

I do not want to mix themes, I only want to add one simple CSS! that is considered mixing in Drupal. The only option you have is to either make a subtheme of Seven or "hack" the seven theme that is in /core/themes/ but you will lose changes every time you upgrade drupal 8. So you will have to remember to upload the overridden .css file every time you upgrade D8. Therefore, you're better off making a sub theme of Seven and use that as you admin theme, because the subtheme will be located in the /themes folder and not inside /core/themes. – No Sssweat May 31 '16 at 6:38
1

@Joum What you describe, is completely different. The OP was asking about letting one theme influence another theme. That is mixing responsibilities, especially since two themes can never be active on the same page. Shipping some CSS with a module is perfectly normal IMO - just keep it light weight, overridable, and strictly focused on whatever it is your module does. – marcvangend Oct 12 '17 at 18:10

| show 10 more comments

chrisshattuck · Accepted Answer · 2016-08-19 15:54:12Z

5

The module you're looking for is now called Asset Injector. With it you'll be able to add CSS through the UI as @Whatwatt mentioned.

answered Aug 19 '16 at 15:54

chrisshattuck

7225 silver badges12 bronze badges

add a comment |

autopoietic · Accepted Answer · 2016-05-31 10:13:39Z

If you create a subtheme for Seven, and use that as your admin theme, you can add your own css overrides in the seven_subtheme.info.yml file, without messing with the core theme, or confusing theme responsibilities. The subtheme need only have the info.yml file and the css, and will inherit everything else.

Creating a subtheme
Theming fundamentals (eg adding css to your theme)

From the sounds of it though, you are mainly concerned with altering the css used by the wysiwyg editor (ckeditor), so you might instead want to look at adding ckeditor_stylesheets to your info.yml file. Note that, as explained in this issue, the ckeditor css can indeed be added from your theme, as the wysiwyg editor should use the non-admin theme css by default (remember to clear caches after adding this).

D8 how-to - custom ckeditor styles

Proper answer. This is the way to do it. – Kevin Sep 6 '16 at 11:16 — Kevin, Sep 6 '16 at 11:16

Whatwatt · Accepted Answer · 2016-06-15 13:50:17Z

3

Install CSS Injector module (currently there is only a working development version for Drupal 8).

Then go to the administration page of CSS Injector (/admin/config/development/css-injector). Create a new CSS rule. For example, to change a field background color:

.node-form .field--name-title input {
    background-color: red;
}

Choose to apply this rule on Seven theme (or any admin theme in use).

Save and enjoy!

edited Jun 15 '16 at 13:50

answered Jun 14 '16 at 10:33

Whatwatt

413 bronze badges

>>How can I add some CSS to admin pages or edit forms in Drupal 8? – drupalfan Jun 14 '16 at 12:56
I updated my answer, sorry for my mistake (I answered another topic!) – Whatwatt Jun 15 '16 at 13:51

add a comment |

Sean · Accepted Answer · 2018-01-09 11:24:04Z

To work with any admin theme I used AdamS answer and changed the hook to.

$config = \Drupal::config('system.theme');

$theme = \Drupal::theme()->getActiveTheme()->getName();

if ($theme == $config->get('admin')) {

  $attachments['#attached']['library'][] = 'XXXX/extra.admin';

}

Molesworth · Accepted Answer · 2018-02-23 03:51:53Z

1

Why not create a block calling the css and insert it into the header of your admin pages?

@import url("/themes/XYZ/css/admin_overrides.css")

edited Feb 23 '18 at 3:51

answered Feb 2 '18 at 22:50

Molesworth

1116 bronze badges

add a comment |

dev · Accepted Answer · 2018-11-17 06:19:07Z

You can add admin CSS from a module hook. Replace XXX with the module name.

1 Put your CSS in css/extra.admin.css

2 Declare a library by creating XXX.libraries.yml

extra.admin:
  css:
  theme:
  css/extra.admin.css: {}

3 Create a hook to load the library.

/**
* Implements hook_page_attachments().
*/

function XXX_page_attachments(array &$attachments) {
  $config = \Drupal::config('system.theme');
  $theme = \Drupal::theme()->getActiveTheme()->getName();
    if ($theme == $config->get('admin')) {
       $attachments['#attached']['library'][] = 'XXXX/extra.admin';
    }
 }

Matoeil · Accepted Answer · 2018-10-09 14:02:58Z

0

i would create a separate child theme for both front and back office

answered Oct 9 '18 at 14:02

Matoeil

1,96718 silver badges32 bronze badges

add a comment |

Stack Exchange Network

current community

your communities

more stack exchange communities

How do I override the admin theme in my own theme?

9 Answers 9

Your Answer

Not the answer you're looking for? Browse other questions tagged 8 theming or ask your own question.

Hot Network Questions

How do I override the admin theme in my own theme?

9 Answers 9

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged 8 theming or ask your own question.

Related

Hot Network Questions