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
Ampliar caja de contenido en Drupal
Ampliar caja de contenido en Drupal

Tutorial para ampliar caja de contenido en Drupal. En muchas ocasiones, en el desarrollo de portales con Drupal, nos encontramos con que queremos ampliar una caja, de tal forma que cuando se añadan diferentes opciones, el usuario lo pueda visualizar y eliminar lo quiera sin problema. 

Tal como lo tenemos ahora, es imposible.

Image
Ampliar caja de contenido en Drupal

Para ello, lo primero que tendremos que hacer es inspeccionar la caja pulsando click derecho sobre ésta y añadirle a su contenedor un width 100% para que nos abarque todo el ancho.

Image
Ampliar caja de contenido en Drupal

Una vez hecho esto, ya podríamos añadir varias opciones, pero aún así, si ponemos más opciones de lo que es el ancho, aparecerían debajo (en una segunda línea) y no las veríamos.

Image
Ampliar caja de contenido en Drupal

Tendremos que ponerle a la caja un alto máximo, por ejemplo, de 84px (ya que la caja tiene una altura de 42px y queremos que por lo menos se visualicen dos líneas).

Image
Ampliar caja de contenido en Drupal
Image
Ampliar caja de contenido en Drupal

Después, tenemos que pensar en la posibilidad de que, si hubiera muchas opciones y se sobrepasan esas dos líneas, podamos hacer scroll y ver todo.

Podríamos poner la caja con un alto más grande, pero si el usuario añadiera muchas opciones la caja sería infinita y no nos interesa.

Para ello, colocamos a la caja la propiedad overflow: auto y con esto conseguimos que lo que haya a partir de 84px de altura, aparezca en scroll hacia abajo.

Image
Ampliar caja de contenido en Drupal
Image
Ampliar caja de contenido en Drupal

Con esto conseguimos visualizar tantas opciones como se añadan a nuestro campo.

Y de esta manera podemos ampliar caja de contenido en Drupal

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