Enviado por juanonlab el Jue, 20/09/2018 - 19:26
Subtema drupal

En mi opinión crear un subtema en Drupal 8 es una opción muy a tener en cuenta. Es cierto que se disponen de muchos temas para dar personalidad a tu página Drupal pero en ocasiones vas a querer centrar algún logo o alguna imagen y necesitarás tener la posibilidad de hacerlo.

Puedes crear un tema desde cero, pero conlleva mucho tiempo, aunque tendrás la máxima personalización. Un término medio es utilizar un subtema de un tema ya existente. En este caso mi blog se basa en el subtema de bootstrap (versión 3). Me ha permitido darme libertad para realizar cambios en mi blog.

Me he informado en varias fuentes pero sobre todo me he guiado del tutorial de Ivan  Zugec. He visto una gran cantidad de tutoriales de este desarrollador y son todos muy buenos. Os recomiendo que lo sigáis porque explica de una manera muy clara todos los temas relacionados con Drupal.

En esta entrada os voy a enseñar como continuar a partir del tutorial de Ivan Zugec a realizar pequeñas mejoras sobre vuestro portal Drupal. Una vez terminas el tutorial y si no tienes mucha experiencia con sass estarás un poco perdido porque no sabes como añadir las modificaciones a tu páginas. Por último para que vuestro codigo scss pase a css hay que usar npm y para windows hay que realizar ciertas modificaciones en el fichero json de configuración. Dejaré un enlace con mi script funcionando en windows 10.

Os muestro, como ejemplo, la evolución de la sección de tags con css añadido:

Evolución

Como se puede comprobar la diferencia es notable.

Puedes acceder a los elementos a modificar mediante selectores css . En este caso he creado una clase tags-jl y la he referenciado en la vista drupal de los tags.

vista tags

 

El código que he aplicado con sass es (fichero _jl-logosSections-fa.scss):

El resultado en css es (fichero style.css):

Como puedes observar el mixing de sass se reutilizará también en la sección Archivo ya que tiene los mismos estilos.

Si has seguido el tutorial que te comenté habrás jugado un poco con el subtema Bootstrap que acabas de crear. En mi caso lo he llamado juanonlab cute. Le he modificado la imagen de selección del subtema para personalizarlo un poco más. Debes poner tu subtema como tema predeterminado.

Subtema bootstrap

Las ventajas de usar el subtema es que no se ve directamente afectado por el tema del que depende y puedes actualizar sin problemas el tema padre. 

En la siguiente imagen hago un resumen de los ficheros modificados/creados cuando se quiere modificar con sass tu site Drupal.

En la carpeta juanonlabcute_sass/css:

- style.css

Es la hoja de estilo final resultante que utilizará Drupal. Aquí se incluyen las modificaciones de las clases que has sobreescrito/creado en los ficheros scss y han pasado a css.

En la carpeta juanonlabcute_sass/scss:

  • _overrides.scss (Digamos que es el fichero raíz que llama a los demás ficheros scss. Desde aquí se llama al fichero _juanonlab.scss)

En la carpeta juanonlabcute_sass/scss/custom:

  • _jl-fonts-colors.scss (variables con los fuentes y colores que se utilizan en los otros ficheros scss)
  • _jl-logosSections-fa.scss (clases para modificar el aspecto de las secciones del blog)
  • _jl-menu-navbar.scss (clases para cambiar el comportamiento del menú principal)
  • _juanonlab.scss (llama a los ficheros anteriores y contiene otras clases)

Hay que tener en cuenta que la gran ventaja de usar estos ficheros es que te permiten sobrecargar los valores que tuvieran las clases de bootstrap del tema. Es decir no es necesario usar la notación !important ya que el propio sass se encarga de esto.

Carpetas scss

Compilar sass y bootstrap en windows 10

 

Si trabajas con windows 10 existe un problema para usar laravel-mix. El fichero package.json que debes utilizar es el que te paso en este gist :   Package.json file

Ahora ya podrás compilar tus scss. Se utilizan 2 comandos (no olvides situarte dentro de tu subtema):

npm run watch

Este comando se utiliza en la fase de desarrollo y se utiliza para ver en tiempo real como cambian tus hojas de estilo. Luego tu consola estará siempre escuchando cualquier cambio en los ficheros scss y generando un nuevo fichero style.css.

El comando

npm run production

Se encarga de minificar el style.css para subirlo a entornos de producción. Se ejecuta una sóla vez.

Si vas poco a poco haciendo todos los pasos tendrás tu subtema listo en pocos minutos. Me parece importante tener algún mecanismo que te permita modificar el aspecto visual de tu web en Drupal.

Añadir nuevo comentario

This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.