7

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?

14

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';
  }
}
13

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.

  • 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
  • 3
    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
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.

3

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.

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).

  • Proper answer. This is the way to do it. – Kevin Sep 6 '16 at 11:16
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!

  • >>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
1

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';

}
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")

1

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';
    }
 }
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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