jueves 12 de noviembre de 2009

Background fotográfico en plantilla Mínima

.-A LOS QUE SABÉIS: He de daros las gracias por vuestra inconmensurable ayuda a este pedazo de torpe que ha dado un paso después de intentarlo mil veces.

.-Gracias a vuestros comentarios he conseguido, eso sí poniendo yo algo de mi parte, colocar un fondo de background a mi gusto según una fotografía que tomé con mi propia cámara.

.-Después de utilizar la url que me aconsejáis -ELIMINANDO "-h" de la s1600"- he tenido que eliminar una parte de CSS que estaba por defecto y que impedía la carga de la foto en cuestión. Es éste:

.-Variable name="bgcolor" description="Page Background Color" type="color" default="#990000" value="#990000">/*color gris*/

.-Y después eliminar también la referencia background de la etiqueta body:$bgcolor;

.-A continuación he vuelto a definir el background con la url de la foto.

.-AHORA SURGE OTRO PROBLEMA: La fotografía está editada con el programa PAINT y el navegador la interpreta como un todo, es decir, incluyendo el trocito de fotografía al resto de la ventana en blanco; con lo cual, al colocarla como fondo de blog, hay grandes áreas blancas, no consiguiendo el efecto deseado.

.-¿Cómo editarla, la foto, para que sólo se tenga en cuenta el trocito que me interesa...?

.-Gracias de nuevo.

.-La respuesta la he obtenido yo mismo, poco después: Se va reduciendo la fotografía con los cursores del programa PAINT hasta que desaparezca la parte blanca de la foto y solamente nos quedemos con lo que nos interesa para el background.

.-P.D. Cómo dice Oloman, se aprende así muy lentamente; pero los conocimientos quedan fijados muy intensamente.

miércoles 11 de noviembre de 2009

Quiero poner esta foto como fondo de página



Aquí sí que se ve la foto, la quiero poner como fondo de página en este mismo blog. ¿Qué parte del código de arriba debo usar y dónde lo debo colocar en el código CSS de esta plantilla Mínima de Blogger.

Gracias.

viernes 28 de noviembre de 2008

Ampliación de la amplitud del blog

Es ésta la primera práctica que hago de CSS y de HTML.
CSS significa Cascade Style Sheets u Hojas de Estilo en Cascada. El CSS de cualquier blog está entre las etiquetas "b:skin-apertura" y "/b:skin-de cierre". Se caracterizan por empezar por el símbolo #.
En cambio las líneas para modificar o añadir algún elemento están entre las etiquetas body-apertura y body-cierre de etiqueta.
En resumen, hemos modificado la plantilla Mínima de Blogger, haciendo lo siguiente:
1.-Hemos definido mejor el footer y hemos cambiado lo que sigue

#footer {
clear: both;
margin: 0 auto;
padding-top: 15px;
line-heigth: 1.6em;
text-transform: uppercase;
letter-spacing: .1em;
text-align: center;
width: 660px;
}

por esto otro, mejor definido en la estructura lógica del blog:

#footer-wrapper {
clear: both;
margin: o auto;
width: 660px;
}

#footer {
letter-spacing: .1em;
line-heigth: 1.6em;
padding-top: 15px;
text-align: center;
text-transform: uppercase;
}

Después, agregamos esto para que también quede definido el content-wrapper:

#content-wrapper {
position: relative;
width: 100%;
}

Y añadimos lo siguiente para que la navbar desaparezca:

#navbar {
display: none;
heigth: 0;
visibility: hidden;
}

Después de definir correctamente todo lo anterior, lo que queremos hacer es aumentar el contenido de los contenedores del blog, así:

#outer-wrapper {
width: 980px; /*cambiamos 660 por 980*/
}
#header-wrapper {
width: 980px; /*cambiamos 660 por 980*/
}
#footer-wrapper {
width: 980px; /*cambiamos 660 por 980*/
}

Ahora también debemos trasladar los 320 píxeles de más al contenedor de post y al de la sidebar:

#main-wrapper {
width: 560px; /*410+150=560*/
}
#sidebar-wrapper {
width: 390px; /*220+170=390*/
}

El resultado final que es el que ahora se puede ver en el blog Tester, es la misma estructura, pero aprovechando mejor el espacio en la ventana del monitor.

Bueno, para ser la primera práctica, no ha estado nada mal el resultado.

martes 25 de noviembre de 2008

Creación del Andybel-Tester

Ante la creciente demanda por mi parte de adquirir conocimientos de CSS y HTML para poder literalmente "tunear" mis blogs de referencia, he decidio crear este "Andybel-Tester" como blog de pruebas y donde realizaré cambios de plantillas y las destriparé, para poder por fin aprender algo en esto de la personalización y optimización de los blogs.
Bueno, Tester, aquí te dejo empezando esta nueva etapa mía de bloguero que espero que me lleve a nuevos horizontes de conocimiento y también de satisfacción.