Image
Eliminar cabecera y añadir un before
Eliminar cabecera y añadir un before

Eliminar cabecera y añadir un before, me ha parecido interesante compartir esto, con un ejemplo práctico, vamos a ver como en el formulario de inscripción a una oferta de trabajo de una web, nos encontramos con que en la parte superior aparece una información que al cliente no le interesa, en este caso concreto un texto, pero podria aplicarse tambien en el caso de una imagen o un simbolo.

Image
Eliminar cabecera y añadir un before

Para ello, desde el navegador inspeccionamos el texto con el botón derecho del ratón, y le añadimos el comando display:none.

Este comando hace que el texto se oculte, y además hace también que el espacio dónde estaba disminuya.

Image
Eliminar cabecera y añadir un before

Una vez hecho ésto, volvemos a inspeccionar la zona que nos ha quedado (de la misma manera que antes, clic derecho - inspeccionar en el navegador), y le añadimos al div un padding 0.

Por último, queremos añadir una "x" más grande, ya que la actual es muy pequeña y puede pasar desapercibida, para ello, a la que tenemos actualmente, le ponemos un display none (así la eliminamos) y después añadimos la que el cliente nos requiere colocándole un before al botón.

Image
Eliminar cabecera y añadir un before
Image
Eliminar cabecera y añadir un before
Image
Eliminar cabecera y añadir un before

Si os fijais en el codigo mostrado arriba, vereis que también hemos posicionado nuestro before para que quede en uno de los laterales.

Image
Eliminar cabecera y añadir un before

De esta manera hemos conseguido ocultar el texto que no queriamos mostrar a requirimiento de cliente y cambiar el aspa de cierre que existia por una con mejor visualizacion y posicionada en su lugar natural.

Y esto ha sido el tutorial de como eliminar cabecera y añadir un before en Drupal

Si necesitas más ayuda, visita este enlace o contacta con un desarrollador.

Image
Campo de tipo referencia a termino de taxonomía en Drupal
Campo de tipo referencia a termino de taxonomía en Drupal

Campo de tipo referencia a termino de taxonomía en Drupal. A continuación, se detalla como añadir en Drupal un campo en el que las opciones de selección se autocompletan con términos de taxonomía referenciada. Primero crearemos un vocabulario llamado “Tipos de noticias” desde /admin/structure/taxonomy/add

Image
Campo de tipo referencia a termino de taxonomía en Drupal

Con el vocabulario ya creado se agregarán los términos: Científica, Cultural y Deportiva.

Image
Campo de tipo referencia a termino de taxonomía en Drupal

 

Image
Campo de tipo referencia a termino de taxonomía en Drupal
Image
Campo de tipo referencia a termino de taxonomía en Drupal

Posteriormente, creamos el campo “Tipo noticia” para el tipo de contenido “Artículo” desde /admin/structure/types/manage/article/fields/add-field

Image
Campo de tipo referencia a termino de taxonomía en Drupal

 

Image
Campo de tipo referencia a termino de taxonomía en Drupal


En la edición del campo , seleccionamos el vocabulario de taxonomía creado previamente : Tipos de noticia.

Image
Campo de tipo referencia a termino de taxonomía en Drupal


Una vez tenemos el campo “Tipo noticia” creado y configurado, podemos ir a “Administración de la visualización de formulario” desde /admin/structure/types/manage/article/form-display para aplicar el campo creado al formulario de creación del tipo de contenido “Artículo”.

Image
Campo de tipo referencia a termino de taxonomía en Drupal

 

Así, elegiremos el tipo de control: Lista de selección, un modo ‘select’ que nos nuestra un listado desplegable.

Image
Campo de tipo referencia a termino de taxonomía en Drupal
Image
Campo de tipo referencia a termino de taxonomía en Drupal

 

Si ahora añadimos un contenido de tipo Artículo desde /node/add/article vemos que se puede elegir el término de vocabulario desde el selector.

Image
Campo de tipo referencia a termino de taxonomía en Drupal
Image
Campo de tipo referencia a termino de taxonomía en Drupal

De forma que si en adelante se añade nuevos términos al vocabulario “Tipos de noticias”, aparecerían como posible selección del campo “Tipo noticia”. 

Para mostrarlo, se añadirá un nuevo término “Social” al vocabulario que referencia el campo:

Image
Campo de tipo referencia a termino de taxonomía en Drupal

 

Si ahora editamos el nodo “Primera noticia científica” que se creó con anterioridad, o bien, creamos un nuevo contenido de tipo Artículo, se puede ver como permite seleccionar el nuevo término “Social” que hemos agregado al vocabulario “Tipos de noticia”.

Image
Campo de tipo referencia a termino de taxonomía en Drupal

 

Siendo un tipo de campo que se completa con términos de referencia a un vocabulario (taxonomía), las opciones que permitirá elegir este campo serán los términos que tengamos añadidos al vocabulario en cuestión.

Image
Campo de tipo referencia a termino de taxonomía en Drupal

Para finalizar, señalar que se puede modificar el orden jerárquico con el que se presentan las términos desde el listado de términos, posicionándolos en el orden con el que se prefieran mostrar, en este caso “Social” ha subido una posición

Image
Campo de tipo referencia a termino de taxonomía en Drupal

 

Image
Campo de tipo referencia a termino de taxonomía en Drupal

 

Y esto ha sido el tutorial de como crear un campo de tipo referencia a término de taxonomía en Drupal

Si necesitas más ayuda, visita este enlace o contacta con un desarrollador.

Image
Compilar SASS o SCSS con PHPstorm
Compilar SASS o SCSS con PHPstorm : File Watcher

File Watcher es un procesador para compilar SASS o SCSS con PHPstorm, nuestra herramienta favorita de desarrollo con Drupal. :)

Vamos a mostrar como configurarla, paso a paso:

Lo primero que tenemos que hacer es tener nuestros archivos bien ordenados dentro de nuestro theme. 

Compilar SASS o SCSS con PHPstormDentro del theme, en la raíz del mismo,  tendremos una carpeta llamada CSS con los archivos que compilará  File Watcher. Y en la misma ruta otra carpeta con los SASS o SCSS que necesitamos compilar, ejemplo:

En mi theme, mi estructura es la siguiente: todo el css se compila en el archivo Style.css, pero dentro de la carpeta sass, tengo toda una estructura de componentes que se cargan en mi Style.scss con un @import.

De esta manera todos mis estilos están ordenados y los proceso según el orden que me beneficie.

Previo a todos los pasos debemos tener instalado, Sass en nuestro sistema, aqui os dejo el comando de ubuntu: 

npm install -g sass

Ahora vamos a configurar la herramienta del PhpStorm:Como configurar una FTP en PHPStorm

Vamos a Inicio - Settings  y dentro en  tools - File Watcher . Pulsamos el botón + para añadir un nuevo compilador. Elegimos el  tipo de hoja de estilo que vamos a usar de la lista (SASS y SCSS usan el mismo motor), y una vez dentro,  abrimos  el desplegable

Working Directory and Environment Variables.

Compilar SASS o SCSS con PHPstorm  Compilar SASS o SCSS con PHPstorm  Compilar SASS o SCSS con PHPstorm

Dentro hay 3 imputs (marcadas en rojo en la imagen) que tenemos que reescribir con nuestras rutas:

Arguments$FileName$:$ProjectFileDir$/web/themes/custom/auladrupal/css/$FileNameWithoutExtension$.css

Output paths to refresh: $ProjectFileDir$/web/themes/custom/auladrupal/css/$FileNameWithoutExtension$.css:$ProjectFileDir$/web/themes/custom/auladrupal/css/$FileNameWithoutExtension$.css.map

Working directory: $ProjectFileDir$/web/themes/custom/auladrupal/sass/

Como configurar una FTP en PHPStorm

una vez tengamos todo configurado, solo tenemos que probar a realizar algún cambio en nuestro código Front para ver si se compila. Este proceso es muy rápido por tanto seguramente no veáis que lo ha hecho. Para comprobarlo, id a la carpeta CSS y verificar que ese cambio esta en el style.css  

 

Hemos aprendido a Compilar SASS o SCSS con PHPstorm usando File Watcher

Si necesitas mas ayuda de PHPstorm ve al blog desde aqui 

Enlace para descargar el PHPStorm