noviembre 23, 2008

Caja contenedora de texto con Scroll

Script para colocar, en nuestro blog, una caja contenedora de texto con Scroll. Con ella la presentación de Script en las entradas, tendrán una mejor presentación. El código debe ser colocado antes de ]]></b:skin>, para ello debemos acceder a nuestra plantilla de la manera habitual; luego con la combinación CTRL+F para la fácil ubicación del código en la plantilla.
Este es el ejemplo de la caja contenedora y en su interior, el código para su implementación:
/* Caja de código */

pre {

background:transparent url(aquí la url de una imagen) no-repeat 0 0; /* Imagen Superior, si deseas cambiarla modifica lo que se encuentra dentro de url(AQUI) */

padding-top:22px; /* Relleno - para ajustar Fondo */

}

pre code {

overflow:auto; /* Determina si es necesario agregar barras de Scroll */

background-color:#E9E9E9; /* Color de Fondo en Hex *//*Podemos cambiarlo*/

border:1px solid #999999; /* Color de Borde en Hex *//*Podemos cambiar el color y tipo de borde*/

color:#990000; /* Color de letra en Hex *//*Tambien podemos cambiarlo*/

display:block; /* No tocar */

padding:8px; /* Relleno del cuadro */

white-space:pre; /* No tocar */

text-align:left; /* Alineacion del Texto , left=izquierda, center= centrado, right=derecha */su

min-height:63px; /* Altura minima del Cuadro */

}

/* Cuando pase el Mouse sobre la caja ocurrirá lo siguiente: */

code:hover {

background-color:##ffffff; /* Color de Fondo en Hex */


border:1px solid ##666666;/* Color de Borde en Hex */le

}


/* FIN Caja de código */
Posterior a esto debemos insertar éste código <pre><code></code></pre> en la plantilla de entrada: Configuración/Formato/Plantilla de Entrada, donde colocaremos el código (donde está coloreado de rojo) y guardamos los cambios.
Cuando vamos a editar una entrada nos aparecerá éste código de manera automática, evitando así, el tener que estarlo copiando. Si no lo necesitamos, en esa entrada, entonces lo suprimimos.

0 comentarios em “Caja contenedora de texto con Scroll”

Publicar un comentario

Bienvenido, eres libre de expresar tus opiniones.
Para mi no existen comentarios negativos, todos
son positivos porque nos dejan una enseñanza.

Si necesitas contactar conmigo puedes hacerlo a
través de: mitesterlab@gmail.com

 

Mi laboratorio de pruebas Copyright © 2011 -- Template created by O Pregador -- Powered by Blogger