Comment remplacer le thème admin dans mon propre thème?

J'ai créé mon propre thème Drupal 8:

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 }

J'utilise "Seven" comme thème administrateur.

Lorsque je modifie une page (/ node / x / edit), le thème Seven est utilisé.

Maintenant, je dois ajouter du CSS au formulaire d'édition. Comment puis-je faire ceci? style.css n'est chargé que sur les pages frontales. Les pages d'édition utilisent sept thèmes et mon thème CSS est ignoré.

Comment puis-je ajouter du CSS aux pages d'administration ou modifier des formulaires dans Drupal 8?

Vous pouvez ajouter des CSS admin à partir d'un hook de module. Remplacez XXX par le nom du module.

1 Mettez votre CSS dans css / extra.admin.css

2 Déclarez une bibliothèque en créant XXX.libraries.yml

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

3 Créez un crochet pour charger la bibliothèque.

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

Vous ne pouvez pas contrôler un thème à partir d'un autre thème. Et même si un développeur intelligent pouvait trouver un moyen piraté de le faire: veuillez ne pas le faire. Croyez-moi, vous n'en voulez pas. Le concept de séparation des préoccupations est important dans la programmation. Fondamentalement, cela signifie que les différentes parties mobiles (c'est-à-dire votre thème) de votre système doivent prendre soin de leur propre tâche, sans interférer avec les tâches des autres parties (c'est-à-dire votre thème d'administration).

Pour atteindre votre objectif, la façon la plus simple est de créer un nouveau thème, d'en faire un sous-thème de Seven (afin qu'il hérite de tout ce que vous aimez à propos de Seven) et d'ajouter votre CSS personnalisé dans le mélange. Vous pouvez maintenant sélectionner ce thème comme thème administrateur au lieu de Seven.

Le module que vous recherchez s'appelle désormais Asset Injector . Avec lui, vous pourrez ajouter du CSS via l'interface utilisateur comme @Whatwatt l'a mentionné.

Si vous créez un sous-thème pour Seven et que vous l'utilisez comme thème d'administration, vous pouvez ajouter vos propres remplacements CSS dans le fichier seven_subtheme.info.yml, sans vous soucier du thème principal ou sans confondre les responsabilités du thème. Le sous-thème n'a besoin que du fichier info.yml et du css, et héritera de tout le reste.

• Création d'un sous-thème
• Thèmes fondamentaux (par exemple, ajouter des CSS à votre thème)

D'après les sons de celui-ci, vous êtes principalement préoccupé par la modification du CSS utilisé par l'éditeur wysiwyg (ckeditor), vous pouvez donc plutôt envisager d'ajouter ckeditor_stylesheetsà votre fichier info.yml. Notez que, comme expliqué dans ce numéro , le ckeditor css peut en effet être ajouté à partir de votre thème, car l'éditeur wysiwyg devrait utiliser le thème non admin css par défaut (n'oubliez pas de vider les caches après l'ajout).

• D8 how-to - styles de rédacteur personnalisés

Installez le module CSS Injector (il n'existe actuellement qu'une version de développement fonctionnelle pour Drupal 8).

Rendez-vous ensuite sur la page d'administration de CSS Injector ( / admin / config / development / css-injector ). Créez une nouvelle règle CSS. Par exemple, pour modifier la couleur d'arrière-plan d'un champ:

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

Choisissez d'appliquer cette règle au thème Seven (ou à n'importe quel thème administrateur utilisé).

Économisez et profitez!

Pour travailler avec n'importe quel thème d'administration, j'ai utilisé la réponse d'AdamS et changé le crochet en.

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

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

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

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

}

Pourquoi ne pas créer un bloc appelant le CSS et l'insérer dans l'en-tête de vos pages d'administration?

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

Vous pouvez ajouter des CSS admin à partir d'un hook de module. Remplacez XXX par le nom du module.

1 Mettez votre CSS dans css / extra.admin.css

2 Déclarez une bibliothèque en créant XXX.libraries.yml

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

3 Créez un crochet pour charger la bibliothèque.

/ **
* Implémente 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';
    }
 }

je créerais un thème enfant séparé pour le front et le back office