lunes, 5 de septiembre de 2016

Corregimos dos errores del Tema

Hola mi querido amigo, como has estado tanto tiempo! =D

Este será un post medio raro y corto (por suerte) en el que vamos a retocar rápidamente ciertas partes del theme y a corregir algunos "errores" que tiene actualmente.

Te cuento, resulta que estaba por continuar la serie hablando de algunas herramientas que nos van a facilitar la tarea a la hora de trabajar en el theme, pero... tal como se encuentra en estos momentos estaba complicado continuar.

  1. Crear un tema para Drupal 8 desde cero
  2. Trabajar con librerías, regiones y bloques en Drupal 8
  3. Introducción a los templates en Drupal 8
  4. Corregimos dos errores del Tema
  5. El módulo Kint para Drupal 8 es Genial


Abracadabra que aparezca la barra


No se si te habrás dado cuenta que la barra de administración desapareció, siendo demasiado complicado alternar entre la parte de administración y el theme en cuestión.

Cuando ya comenzaba a frustrarme porque no podía lograr que la querida barra de administración apareciera, en un momento de iluminación divina me dije a mí mismo: si estás heredando del tema classy, porque no buscas en la carpeta de dicho tema a ver si encuentras alguna pista.

PAM! Ahí estaba... un sospechoso archivo llamado toolbar.html.twig, copio y pego el archivo en mi tema y la barra seguía sin aparecer -.-

Recuerdas en el capitulo anterior que borramos la etiqueta {{ page_top }} que se encontraba dentro de html.html.twig porque yo te dije que no lo íbamos a necesitar? jeje

Bueno ese es el primer error que corregiremos en este articulo. Solo ve a html.html.twig y sitúa la etiqueta {{ page_top }} justo encima de {{ page }} y la barra aparece.

No es necesario copiar el archivo toolbar.html.twig ya que como estamos heredando del theme classy ya lo tenemos disponible por defecto.

Si llegaste aquí por el simple y llano problema que no te aparecia la barra y además no estas heredando del theme classy, el archivo se encuentra precisamente en: core -> themes -> classy -> templates -> navigation.



Estas son las cosas donde hay que seguir todo el hilo conductor para poder resolver el problema. A medida que ganes experiencia con Drupal esto va a ser cuestión de segundos.

Corrección del color en los items de la barra


Con la aparición de la preciada barra de administración me doy cuenta que todos los links se muestran de color blanco y no se pueden leer los diferentes items del menú. Esto se debe a que en la hoja de estilos tenemos configurados que todos los elementos de un menú se muestre de color blanco.

Solo vamos a eliminar el color blanco de los enlaces de menú, luego veremos como podremos cambiar el color del menú agregando clases CSS personalizadas en el HTML.

Dentro de syle.css busca este fragmento y borra la linea color.

li.menu-item a {
 color: #fff;
 font-size: 16px;
 text-decoration: none;
}

Y por aquí lo dejamos al post, en el próximo capitulo veremos como podemos utilizar algunas herramientas que nos serán de mucha ayuda en el desarrollo del tema.

Hasta la Próxima! Suerte!