web-dev-qa-db-fra.com

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

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

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?

8theming
9
drupalfan

Vous pouvez ajouter un CSS administrateur à 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';
  }
}
17
AdamS

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 devraient 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, 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.

15
marcvangend

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

5
chrisshattuck

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.

D'après les sons de celui-ci cependant, 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 problème , le ckeditor css peut en effet être ajouté à partir de votre , car l'éditeur wysiwyg devrait utiliser le thème non administrateur css par défaut (n'oubliez pas de vider les caches après l'avoir ajouté).

4
autopoietic

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

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

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

Choisissez d'appliquer cette règle sur le thème Sept (ou tout thème administrateur utilisé).

Économisez et profitez!

3
Whatwatt

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

1
Molesworth

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

}
1
Sean

Vous pouvez ajouter un CSS administrateur à 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';
    }
 }
1
dev

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

0
Matoeil