¿Cómo anulo el tema de administrador en mi propio tema?

9

Creé mi propio tema de 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 }

Estoy usando "Seven" como tema de administrador.

Cuando edito una página (/ node / x / edit) se usa Seven theme.

Ahora tengo que agregar un poco de CSS al formulario de edición. ¿Cómo puedo hacer esto? style.css solo se carga en las páginas frontales. Las páginas de edición usan siete temas y mi tema CSS se ignora.

¿Cómo puedo agregar algo de CSS a las páginas de administración o editar formularios en Drupal 8?

drupalfan
fuente

Respuestas:

17

Puede agregar CSS de administrador desde un enlace de módulo. Reemplace XXX con el nombre del módulo.

1 Ponga su CSS en css / extra.admin.css

2 Declare una biblioteca creando XXX.libraries.yml

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

3 Cree un gancho para cargar la biblioteca.

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

No puede controlar un tema desde otro tema. E incluso si algún desarrollador inteligente pudiera encontrar una forma hack de hacerlo: por favor no lo haga. Confía en mí, no lo quieres. El concepto de separación de preocupaciones es importante en la programación. Básicamente significa que las diferentes partes móviles (es decir, su tema) de su sistema deben ocuparse de su propia tarea, sin interferir con las tareas de otras partes (es decir, su tema de administrador).

Para lograr su objetivo, la forma más limpia es crear un nuevo tema, convertirlo en un subtema de Seven (para que herede todo lo que le gusta de Seven) y agregar su CSS personalizado a la mezcla. Ahora puede seleccionar ese tema como su tema de administrador en lugar de Seven.

marcvangend
fuente
Lo siento, no puedo creer que no haya forma de resolver esto. Solo tengo que agregar algunos CSS como img {max-width: 100%; altura: auto}. Debe haber una forma.
drupalfan
44
No, no debe. Los temas no están destinados a mezclarse. Solo puede haber un tema activo. Si necesita hacerlo, cree un módulo que pueda implementar un formulario alter y agregar otra biblioteca.
Berdir
3
@drupalfan, no entiendo por qué concluyes que no hay forma de resolver esto. No son maneras (el método de siete sub-tema que he descrito, y el método de Berdir) y no son difíciles de hacer. El tipo de solución que sugirió es como pedirle a un peluquero que cambie el color de sus zapatos. No lo hagas
marcvangend
2
I do not want to mix themes, I only want to add one simple CSS!eso se considera mezclar en Drupal. La única opción que tiene es crear un subtema de Seven o "piratear" el tema de siete, /core/themes/pero perderá los cambios cada vez que actualice drupal 8. Por lo tanto, deberá recordar cargar el archivo .css anulado cada vez. Actualizas D8. Por lo tanto, es mejor hacer un subtema de Seven y usarlo como tema de administración, porque el subtema estará ubicado en la /themescarpeta y no dentro /core/themes.
No Sssweat
1
@Joum Lo que describe es completamente diferente. El OP estaba preguntando sobre dejar que un tema influya en otro tema. Eso es mezclar responsabilidades, especialmente porque dos temas nunca pueden estar activos en la misma página. Enviar algo de CSS con un módulo es una OMI perfectamente normal, solo manténgalo liviano, reemplazable y estrictamente centrado en lo que sea que haga su módulo.
marcvangend
5

El módulo que está buscando ahora se llama Asset Injector . Con él podrás agregar CSS a través de la interfaz de usuario como mencionó @Whatwatt.

chrisshattuck
fuente
4

Si crea un subtema para Seven, y lo usa como su tema de administrador, puede agregar sus propias anulaciones css en el archivo seven_subtheme.info.yml, sin meterse con el tema central o confundir las responsabilidades del tema. El subtema solo necesita tener el archivo info.yml y el css, y heredará todo lo demás.

Sin embargo, por lo que parece, le preocupa principalmente alterar el css utilizado por el editor wysiwyg (ckeditor), por lo que es posible que desee ver la adición ckeditor_stylesheetsa su archivo info.yml. Tenga en cuenta que, como se explica en este número , el ckeditor css se puede agregar desde su tema, ya que el editor wysiwyg debería usar el tema no admin css de forma predeterminada (recuerde borrar los cachés después de agregar esto).

autopoiético
fuente
Respuesta adecuada Esta es la manera de hacerlo.
Kevin
3

Instale el módulo CSS Injector (actualmente solo hay una versión de desarrollo funcional para Drupal 8).

Luego vaya a la página de administración de CSS Injector ( / admin / config / development / css-injector ). Crea una nueva regla CSS. Por ejemplo, para cambiar el color de fondo de un campo:

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

Elija aplicar esta regla en el tema Seven (o cualquier tema de administrador en uso).

¡Ahorra y disfruta!

Whatwatt
fuente
>> ¿Cómo puedo agregar algunos CSS a las páginas de administración o editar formularios en Drupal 8?
drupalfan
Actualicé mi respuesta, perdón por mi error (¡respondí otro tema!)
Whatwatt
1

Para trabajar con cualquier tema de administrador, utilicé la respuesta de AdamS y cambié el gancho a.

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

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

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

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

}
Sean
fuente
1

¿Por qué no crear un bloque llamando al css e insertarlo en el encabezado de sus páginas de administrador?

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

Molesworth
fuente
1

Puede agregar CSS de administrador desde un enlace de módulo. Reemplace XXX con el nombre del módulo.

1 Ponga su CSS en css / extra.admin.css

2 Declare una biblioteca creando XXX.libraries.yml

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

3 Cree un gancho para cargar la biblioteca.

/ **
* Implementa 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';
    }
 }
dev
fuente
0

crearía un tema secundario separado para el front y back office

Matoeil
fuente
Pero es un poco complicado: skyriter.com/2018/04/07/…
eye-wonder
Este tuto tiene 2 años. El tema admin de chid funciona sin problemas. Agregue una biblioteca para su CSS o JS y aquí está
Matoeil