imagenes en vez de títulos de bloques. Crear un nuevo subtema parte VI

Si queremos tener imágenes en vez de títulos, porque queremos crear un portal muy visible, por ejemplo para niños, tenemos que trabajar de la siguiente manera con el css.

A cada bloque al que queremos darle un encabezado tenemos que añadirle el siguiente css:

#id-del-bloque h2
{
text-indent: -9999px;
backgrounf: url(block-xx-header.png);
height:25px;
}

Y en el bloque indicar que no queremos el título para ello usamos la siguiente etiqueta dentro del bloque:

<none>

Gracia a Ipwa que me ha pasado este truco.


Siento decir que este truco ha sido probado y no funciona, bueno no pasa nada, pasamos a escribir la opción correcta del código de css:

#block-blog-0 h2
{
background-image : url(img/foros.png);
background-repeat : no-repeat;
height : 54px;
color: #f3f3f3;/*este color en mi caso, porque es el color de fondo y quiero ocultar texto.*/
}

Pero claro normalmente las cosas no son tan bonitas como las pintas. En este caso la cuestión es que cuando escribimos <none> en el título de un bloque, Drupal que es muy inteligente no publica las etiquetas <h2></h2> del título, ya que si lo hiciese estaría metiendo basura. Y esto que significa, pues que no podremos ponerle una imagen de fondo a las etiquetas <h2> de los títulos, a menos que estos lleven texto.

La solución que se me ha ocurrido, no es la más limpia, pero funciona es incluir el símbolo más pequeño, en este caso un "punto" . Si alguien tiene alguna otra solución le invito a la que comparta.

Me gustaría ver si puedo heredar el id del bloque, y añadírselo como condicionante a la clase del cuerpo del bloque, pero por el momento es una idea.

Un saludo

Oskar

Trackback URL for this post:

http://www.documentados.com/trackback/120

Comentarios

Enviar un comentario nuevo

El contenido de este campo se mantiene como privado y no se muestra públicamente.
  • Las direcciones de las páginas web y las de correo se convierten en enlaces automáticamente.
  • Allowed HTML tags: <a> <em> <strong> <cite> <strike> <code> <ul> <ol> <li> <dl> <dt> <dd><img><p><div><blockquote><param><object><embed>
  • Saltos automáticos de líneas y de párrafos.
  • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.
  • Insert Google Map macro.

Más información sobre opciones de formato

CAPTCHA
Esto es para evitar spam, y ver que eres humano :)
11 + 2 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.

Back to top