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
whatfont
Herramientas indispensables para diseño web WhatFont

Herramientas indispensables para diseño web WhatFont

Herramientas indispensables para diseño web WhatFont, la forma más fácil de identificar fuentes en páginas web.

Cuantas veces has querido saber que fuente esta utilizando una pagina web, una publicación, un post. Que tamaño de letra tiene un encabezado. Que grueso de letra tiene un título. WhatFont es una extensión de Chrome que nos ayuda con esta función de una forma muy rápida y sencilla.

Image
Herramientas indispensables para diseño web WhatFont

Tan solo con un clic nos proporcionara toda la información que necesitamos sobre esa fuente.

Primero nos muestra de forma abreviada el nombre de la fuente y su grosor en la primera línea de la ventana informativa. A continuación, nos mostrara la familia completa de la fuente, el estilo, el grosor, el tamaño en pixeles, la altura de la línea en pixeles, el color en código hexadecimal y un ejemplo de todas las letras en mayúsculas y minúsculas de la misma.

 

Image
Herramientas indispensables para diseño web WhatFont

Puedes darle clic a otra fuente y abrirá otro pequeño pop-up con la información de esta ultima sin perder el pop-up de la fuente anterior. Como puedes comprobar es sencillísimo conocer las fuentes que utiliza una pagina web utilizando la extensión para Chrome WhatFont.


Existen muchas otras extensiones similares, Firebug y Webkit Inspector son bastante fáciles de usar para los desarrolladores. Sin embargo, para otros, esto no debería ser necesario.. Además, si conoces CSS no te hará falta WhatFont. Pero incluso en este caso te ayudara a ahorrar tiempo en tus proyectos.

Es así de simple y elegante.

Para usar whatfont es tan sencillo como buscar la aplicación en las extensiones para Chrome en la barra de tareas de tu buscador, añadirla a Chrome y fijarla en la barra de extensiones.
También puedes pulsar aquí para ir directamente a la ventada de descarga.

Y estas son las caracteristicas y virtudes de WhatFont como herramienta indispensable para el diseño web Drupal

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

Image
Mostrar datos externos (API) mediante vistas de Drupal
Mostrar datos externos (API) mediante vistas de Drupal

Mostrar datos externos (API) mediante vistas de Drupal, tenemos la necesidad de mostrar datos procedentes de la respuesta de una API en nuestro Drupal. Para ello utilizaremos las vistas de Drupal mostrando estos datos como si pertenecieran al propio Drupal con las ventajas de utilizar vistas. Para ello crearemos una “tabla” ficticia con sus respectivos campos dónde pasaremos los datos procedentes de la respuesta de la API.

El primer paso es crear esta “tabla” ficticia con los campos dónde mostraremos los datos. Mediante el hook views data defininos lo que sería nuestra tabla y posteriormente los campos.

Image
Mostrar datos externos (API) mediante vistas de Drupal

 

Una vez definidos estos datos tenemos que crearnos nuestro plugin para mostrar estos datos en la vista. Para ello nos crearemos nuestro query plugin inyectando el contenedor de nuestra clase para consumir los datos de la API.

Image
Mostrar datos externos (API) mediante vistas de Drupal

 

Una vez que tengamos definido el Query plugin, podemos pasarle nuestros datos a los campos a través de la función execute. Realizamos la llamada a la API y almacenamos la respuesta. Ahora vamos añadiendo cada fila de datos devuelta por la API a la vista.

 

Image
Mostrar datos externos (API) mediante vistas de Drupal

 

Una vez hecho todo esto proceso, cuando vamos a crear una vista mediante la administración. En el selector para seleccionar que queremos mostrar, vemos nuestra “tabla”.

Image
Mostrar datos externos (API) mediante vistas de Drupal

 

Una vez en la vista, podemos seleccionar el tipo tabla para visualizar los datos mostrando campos. Al añadir campos, veremos todos los campos definidos previamente.

Image
Mostrar datos externos (API) mediante vistas de Drupal

Y esto ha sido Mostrar datos externos (API) mediante vistas de Drupal, recordad que tenéis este y otros manuales de ayuda en el blog y si aun así no halláis respuesta a vuestro problema, podéis publicar vuestras preguntas en el tablón, donde la comunidad os ayudará a resolverlas.