03/08/2008
10:01
Tutorial
Para implementar el header que hemos realizado debemos editar nuestra plantilla HTML, no será necesario expandir artilugios y buscamos la parte de CSS del body
body {
background:$bgcolor;
color:$textcolor;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
a esto le añadimos lo resaltado en rojo
body {
background:$bgcolor url(URL DE ALOJAMIENTO IMAGEN) no-repeat;
background-position: top center;
color:$textcolor;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
Un detalle a tener en cuenta, la variable $bgcolor o en su defecto el código de color que usemos en nuestro fondo del body (#ffffff por ejemplo), es necesario mantenerlo.
Ahora lo único que falta es bajar el outer-wrapper de forma que se vea la cabecera que hemos realizado. Buscamos
#outer-wrapper {
width: 780px;
background:$outcolor;
border: 0px solid #cccccc;
margin:160px auto;
padding:0 0 0 0;
text-align:$startSide;
font: $bodyfont;
}
lo resaltado en rojo son los pixeles que damos como margen para que se vea la cabecera.
Algunos deberéis realizar otro paso, aquellos que tengáis un elemento Header en vuestra plantilla donde aparece el nombre del blog y posiblemente hayáis colocado una imagen de fondo, tendréis que eliminarlo.
Si no habéis habilitado la posibilidad de eliminar ese elemento, debéis volver a vuestra plantilla HTML y buscar
y modificar el parámetro que permite borrarlo
body {
background:$bgcolor;
color:$textcolor;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
a esto le añadimos lo resaltado en rojo
body {
background:$bgcolor url(URL DE ALOJAMIENTO IMAGEN) no-repeat;
background-position: top center;
color:$textcolor;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
Un detalle a tener en cuenta, la variable $bgcolor o en su defecto el código de color que usemos en nuestro fondo del body (#ffffff por ejemplo), es necesario mantenerlo.
Ahora lo único que falta es bajar el outer-wrapper de forma que se vea la cabecera que hemos realizado. Buscamos
#outer-wrapper {
width: 780px;
background:$outcolor;
border: 0px solid #cccccc;
margin:160px auto;
padding:0 0 0 0;
text-align:$startSide;
font: $bodyfont;
}
lo resaltado en rojo son los pixeles que damos como margen para que se vea la cabecera.
Algunos deberéis realizar otro paso, aquellos que tengáis un elemento Header en vuestra plantilla donde aparece el nombre del blog y posiblemente hayáis colocado una imagen de fondo, tendréis que eliminarlo.
Si no habéis habilitado la posibilidad de eliminar ese elemento, debéis volver a vuestra plantilla HTML y buscar
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
y modificar el parámetro que permite borrarlo
<b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>
Con estos pasos vuestro blog no parecerá el mismo.
Hola! Estoy haciendo esta prueba, pero será el fin de semana que lo aplique definitivamente. Saludos!
ResponderSuprimirBien Antony, porque la que te envie no estaba concebida para colocarla asi, jajaja, me habias asustado-)))...
ResponderSuprimirHola! Lo estuve colocando las imágenes tal como esta en el procedimiento pero no aparece la imagen, no se que pasa, pero a lo mejor debe de algo en mi blog probare con mi blog de prueba a ver... Saludos!
ResponderSuprimirAntony, ando por aqui, colocala y miro porque no aparece...
ResponderSuprimirPues esta bien, quita lo de fixed,
ResponderSuprimirYa lo coloque... Pero nada pásate a ver...!
ResponderSuprimirAntony estoy en ello ☺☺☺...
ResponderSuprimirAntony ya he dado con el problema, ahora te lo explico ☺☺☺
ResponderSuprimirOk! Espero tu explicación...
ResponderSuprimirAntony el problema esta en este css, http://vbmusica.googlepages.com/tab_style.css
ResponderSuprimirabrelo y quita todo lo de body...
body {
background-image:url(images/background.jpg);
background-repeat:no-repeat;
background-position:top center;
margin:40px;
}
Gracias y Gracias, pero hay un problema se ha dañado el Tabview, pero no te preocupe tratare de colocar uno de lo que tu explicas...
ResponderSuprimirHola de nuevo, ya he vuelto con más dudas, como prometí :P
ResponderSuprimirLlevé a cabo todos los pasos y estoy probando el ejemplo directamente con la imagen de fondo que tú hiciste en el paso I (la redimensioné a 1024), pero al cambiar todas las cosas del código y tratar de probar la plantilla me sale éste mensaje:
"Declaración de variable no válida en máscara de página: La variable se utiliza, pero no está definida. Información: outcolor"
Si cambio la variable $outcolor por $bgcolor o si directamente borro esa línea (:P) ya no da mensaje de error, pero no sale la imagen de fondo, el único cambio es el outer-wrapper desplazado. ¿... Alguna idea? :(
Y aprovechando hehe ¿cómo puedo hacer el espacio para escribir las entradas y el header un poquito más anchos?
Gracias!
Te explico, en mi plantilla añadi una variable al outer-wrapper y la llame "outcolor", tu no tienes definida esa variable, eso te permite cambiar el color de fondo del cuerpo del blog y diferenciarlo del body...puedes usar $bgcolor o si quieres definir la variable, pegando esto junto a las otras variables
ResponderSuprimir<Variable name="outcolor" description="Outer Background Color"
type="color" default="#000" value="#ffffff">
Eso hara que si vas a la parte de "fuentes y colores" puedas elegir el color de fondo del blog.
Para ensanchar las entradas deberias agrandar primero el outer-wrapper...width:900px; por ejemplo.
Luego buscar en header y ponerle el ancho que quieras ( no superior al que hayas puesto antes) aunque si vas a usar una imagen no seria necesario tocarlo.
Para las entradas busca main-wrapper y lo mismo buscas width:...px; y le subes los pixeles, cuidado de que entre ese parametro y el width de la sidebar no superen el ancho puesto en el outer-wrapper (los margenes tambien hay que sumarlos), sino la sidebar se ira abajo de las entradas...
Antes de que me respondieras ya había dado con los tutoriales en los que enseñas como aprender a interpretar el código y las variables, y lo cierto es que ya solo eso me lo ha simplificado todo un montonazo, está genial!! ^^
ResponderSuprimirHe conseguido ir cambiando a mano bastantes cositas, en cambio no consigo cambiar el tamaño de la fuente del título de los post, a pesar de que sí que me pilla los cambios de tipo de fuente y de color hum.... pero seguiré intentando :)
Muchísimas gracias una vez más, gracias a tus explicaciones he pasado de no entender nada a tener una muy aceptable idea global de cómo funciona el tema en un día, cosa que me parecía increíble! ;)
Alizia busca
ResponderSuprimir.post h3 {
y añadele
font-size:120%;
puedes jugar con la cifra....
deja tu dire para poder ver tus avances!!!
☺☺☺
Hola Pizcos...
ResponderSuprimirMe podrías decir como haces para incluir esa pequeña guirnalda en el extremo top-right de todos tus widgets de la barra derecha?
Llevo horas probando y no lo consigo...
Gracias!!!
Nacho casi te contestas tu mismo...como en sidebar.widget tengo incorporado un backgound, uso una imagen de fondo en la cual arriba a la derecha estan las guirnaldas...este seria el codigo...
ResponderSuprimirbackground: url(URL ALOAJAMIENTO IMAGEN) no-repeat top right;
Gracias Pizcos!!!!
ResponderSuprimirAhora lo pruebo, pero me acabas de abrir un mundo, con esta respuesta...
(Es que yo soy muy autodidacta de esto)
hola pizcos tienesu un blog excelente! y he seguido varios datos que pones. Gracias por ayudarnos.
ResponderSuprimirAhora yo he tratado de poner en practica lo que se ve este minitutorial pero no me aparece la imagen, me gustaria si me pudieras ayudar te lo agradeceria.
Saludos
yhamilet creo que la pusistes, he visto que tiens puesto un fondo como imagen en tu header...☺☺☺
ResponderSuprimirTengo un problema con esto de la cabecera. Consigo colocar la imagen, configuro la plantilla para que se puedan quitar y añadir elementos con la esperanza de así poder eliminar el recuadro con el título de mi cuaderno de bitácora y su descripción, pero, aún haciéndolo, no puedo eliminar el recuadro y se superponen ambas cabeceras. ¿Alguna idea? Gracias por su tiempo.
ResponderSuprimirS.Dedalus elimina la propiedad border en tu css...
ResponderSuprimir#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid #cccccc;
}
#header {
margin: 5px;
border: 1px solid #cccccc;
text-align: center;
color:#666666;
}
Ahora ya casi. Consigo eliminar el borde, pero sigue superponiéndose el título del blog encima de la imagen de la cabecera y, a pesar de haber modificado el HTML para poder quitar la cabecera como elemento de página (según dice su propia entrada), no hay manera. Supongo que se me estará pasando por alto algo que también debería quitar.
ResponderSuprimirS.Dedalus ve a tu plantilla de añadir elemntos y elimina el header...
ResponderSuprimirJuraría que había contestado a este comentario. No puedo hacer nada con la cabecera desde la sección de «añadir elementos» y tampoco encuentro en el HTML a qué parte correspondería, ni siquiera expandiendo artilugios. Me parece extrañísimo.
ResponderSuprimirS. Dedalus yo tambien juraria que te habia contestado, te decia que le final de esta entrada, ahi explico como hacerlo....
ResponderSuprimirO_O Eso mismo decía que había hecho, pero no encontraba la opción de borrarlo desde la pestaña de «añadir elementos».
ResponderSuprimirS.Dedalus al final pudistes borrarlo???
ResponderSuprimirPues no, y eso que en el HTML, como dije en el mensaje ese que se había borrado, sí puse «yes» en «showaddelements». =/
ResponderSuprimirmira en tu css y en #header añade text-indent: -9999px;
ResponderSuprimirquedaria asi
#header {
margin: 5px;
text-align: center;
color:#666666;
text-indent: -9999px;
}
=)
ResponderSuprimirPerfecto ahora, muchísimas gracias. Es un encanto poder contar con gente así. ¿Es normal lo que pasaba? Ya por simple curiosidad, por saber defenderme en situaciones similares y eso, nada que corra prisa.
Un saludo.
La solucion que te he dado no es la mas adecuada, pero al no poder acceder a tu plantilla no puedo decirte que pasaba...
ResponderSuprimirBuen dia Pizcos, gracias al GIMP y a los consejos que das por aca pude cambiar de muy buena manera la manera de uno de mis blogs :) http://comunidadpaezperu.blogspot.com/ prácticamente todas las imágenes desde la cabecera (que creo me quedó muy bien jeje) hasta el fondo que le puse a la izquierda se ve genial :)
ResponderSuprimirDos cosas solamente:
1. No puedo poner dos fondos ¿no es asi? es que de fondo le puse el efecto de gotitas cayendo a la izquierda, pero me gustaría que todo lo blanco del fondo tenga alguna textura que casi ni se note pero que esté ahi, como por ejemplo tu fondo de rejillas pero en blanco por supuesto, asumo que tengo que combinar todo en un solo fondo que ocupe todo el ancho y de ahi ponerle el efecto para que ocupe toda la plantilla no es asi??.
2. ¿Que opinas del blog? alguna sugerencia que deba agregar?
Saludos.
PD: En el facebook ya somos casi 600 y por ello necesitaba un buen blog jeje sino fuera por tus consejos no hubiese entendido el GIMP, ahora no puedo dejarlo jaja :D
http://comunidadpaezperu.blogspot.com/
Walter esta muy bien, aunque deberias compriir un poco la imagen para que pesara menos, si no tiene nada transparente subela como jpg comprimido al 50, no perdera calidad.
ResponderSuprimirSI se podria hacer lo de colocar un segundo background, lo explicare en una entrada.
Las sugerencias se las dejo a Pau que esta encargada de la seccion de revisiones (aunque va lentita como dice ella) ☺☺☺
Pizcos necesito tu ayuda esto es lo q tengo:
ResponderSuprimirbody {
background: url('http://sites.google.com/site/fusionpecosa/Home/muchasxxx.JPG')no-repeat;
pero lo haga así o como tu lo dices mi cabecera no se ve por IE, que puedo hacer?
Pequitas enviame tu plantilla ☺☺☺
ResponderSuprimir