11

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?

Improve this question

10 Answers 10

Reset to default
21

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';
  }
}
Improve this answer
1
  • Excellent. Straightforward and lightweight
    – camslice
    Oct 18, 2021 at 8:06
17

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.

Improve this answer
15
  • 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, 2016 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, 2016 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, 2016 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, 2016 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, 2017 at 18:10
5

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

Improve this answer
1
  • 1
    Proper answer. This is the way to do it.
    – Kevin
    Sep 6, 2016 at 11:16
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.

Improve this answer
0
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!

Improve this answer
2
  • >>How can I add some CSS to admin pages or edit forms in Drupal 8?
    – drupalfan
    Jun 14, 2016 at 12:56
  • I updated my answer, sorry for my mistake (I answered another topic!)
    – Whatwatt
    Jun 15, 2016 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';

}
Improve this answer
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")

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

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

Improve this answer
2
  • But it is a bit of a pussle: skyriter.com/2018/04/07/…
    – eye-wonder
    Mar 27, 2020 at 10:48
  • this tuto is 2years old. chid admin theme works smootlhly. Add a library to it for your css or js and here it goes
    – Matoeil
    Mar 27, 2020 at 11:50
0

There's the smartest way and the easiest way. Easiest: At /admin/appearance, uncheck the box that says "Use the administration theme when editing or creating content" then apply custom CSS the same way you do for your main theme.

Alternatively, if you want your main theme to be used everywhere, set the Admin Theme dropdown to your main theme.

There are pros and cons to this, of course, but this is the easiest way to apply custom CSS to your admin theme--make it the same theme as your front end theme.

Smartest way: subtheme Seven per answers above.

If not committed to Seven, a combination easiest and smartest option: Install Adminimal theme. In the theme settings check the box for creation of a CSS overrides file. Use that file to style to your heart's content.

Improve this answer

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.