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

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

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

Image

Image

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

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.

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

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

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.

Drupal 7 renderiza los campos "adjuntos" (File Field)  como simples enlaces sin atributos tales como target, title o alt. Por lo tanto, si queremos personalizar el enlace con un target blank en drupal 7,  nos encontramos que haciendo un print drupal $content['field_adjuntos']; nos renderizaria el campo con un simple <a href="">

Para evitar esto, nos vamos al archivo node.tpl o node---[node_type].tpl de nuestro theme y buscamos la linea donde se impime el contenido. Ahi ocultamos el campo para decidir luego donde y como imprimirlo.

hide($content['field_adjuntos']);
print render($content);

Donde queramos imprimir el adjunto, hacemos la siguiente comprobación:

Si el campo "field_adjuntos" no está vacio, lo guardamos en una variable llamada $adjuntos concatenando esta con todas las clases que queramos ponerle.

Si el campo es "ilimitado" recorremos los elementos con un Foreach.

Por ultimo imprimimos el campo como queremos (custom). En este caso con un target blank.

if (!empty($node->field_adjuntos)){
    $adjuntos = '<div class="field-name-field-adjuntos">';
    $label = $content['field_adjuntos']['#title'];
    $adjuntos .= '<div class="field-label">'.$label.'</div>';
    $adj = $content['field_adjuntos']['#object']->field_adjuntos['und'];
    foreach ($adj as $adjs){
        $adjdesq = $adjs['description'];
        $adjuri= $adjs['uri'];
        $file_path = file_create_url($adjuri);
        $adjuntos .= '<div class="field-item"><a href="'.$file_path.'" target="_blank">'.$adjdesq.'</a></div>';
    }
    $adjuntos .= '</div>';
    print $adjuntos;
}

En el ejemplo, yo le pongo varias clases propias de drupal para que me lo estilice como el theme que ya tengo definido. le indico tambien que el titulo será la descripcion del campo y formateo la propiedad "URI" que es de donde sacamos la urtl Absoluta.

Recordad que si no nos imprime nada , o nos imprime mal lo que queremos imprimir, con estas 3 lineas podemos ver que nos trae el campo y como se llaman sus propiedades:

print "<pre>";
print_r ($content['field_adjuntos']);
print "</pre>";

Por varios motivos podemos querer modificar el propio renderizado de drupal. Para meter clases personalizadas, para personalizar los title y alt, etc...

Si necesitas obtener mas valiables en tpl ve a dupal.org

En este articulo hemos visto como añadir target blank en Drupal 7 con los tpl para los field adjuntos

Este articulo tambien te será util si tu busqueda ha sido:

Drupal render file field
Drupal target blank in file field
Drupal field_file custom
Drupal custom link file
Drupal custom PDF