Actualización: Blogger ha incorporado con posterioridad a la publicación de esta entrada, una utilidad para poder cambiar los fondos sin tener que editar la plantilla: Nuevo diseñador. Usar una imagen propia.
Este es un post de emergencia para un par de personas con problemas.
No he tenido ocasión de ver cómo es la estructura de las plantillas generadas con el nuevo diseñador de plantillas de Blogger, pero en un vistazo rápido, sí que he podido comprobar que se manejan muchas más cosas mediante variables que en las que hasta ahora eran denominadas del "nuevo Blogger".
Las variables de diseño son las que aparecen entre signos de comentarios a partir de /* Variable definitions... Antes se utilizaban para grabar los datos que configurábamos desde la opción Fuentes y Colores, pero ahora recoge muchas más cosas y supongo que son todas aquellas que se pueden escoger desde el propio diseñador.
Una carencia que he observado o quizás simplemente que se me ha escapado, es la posibilidad de incorporar un fondo propio. Hay muchos para escoger, realmente muchísimos, pero lo dicho, no he visto que se pueda subir una imagen distinta de las del catálogo.
Así que si queremos poner otro fondo, no nos queda más remedio que empezar a tocar la plantilla, aunque creo que he encontrado un sitio dónde no alteramos mucho la cosa y que nos permitirá posteriormente poder seguir usando el diseñador para cambiar de nuevo el fondo.
<Variable name="body.background" description="Body Background" type="background"
color="$(body.background.color)"
default="$(color) none repeat scroll top left" value="$(color) url(http://www.blogblog.com/1kt/awesomeinc/body_background_dark.png) repeat scroll top left"/>
color="$(body.background.color)"
default="$(color) none repeat scroll top left" value="$(color) url(http://www.blogblog.com/1kt/awesomeinc/body_background_dark.png) repeat scroll top left"/>
Aquí parece que van las variables de los fondos y lo que hay marcado en verde es la dirección de la imagen de fondo que hemos elegido desde el diseñador. Si queremos cambiarla por otra, sólo hay que sustituir esa por la nuestra.
Dependiendo de si vuestra imagen es para repetir a modo de patrón o no, quizás haya que sustituir scroll por fixed. Igual para la alineación de la imagen y left, que en los casos más normales debería ser center y lo mismo para la repetición (repeat).
Algunas de las plantillas tienen una imagen para la parte superior distinta de la que mostrará el resto del blog, así que ese código de ejemplo puede ser más largo y contener más de un fondo. Es cuestión de analizarlo un poco.
Me resulta imposible ahora mismo hacerlo a mí para todos los casos, pero para hacerlo vosotros mismos y así ir conociendo al mismo tiempo la plantilla que hayais escogido, lo mejor es ir haciendo los cambios que vuestro saber hacer (o vuestra intuición) os digan y comprobar los cambios efectuados con Vista Previa antes de grabar. Eso o tener a buen recaudo una copia de seguridad antes de cambiar nada. O mejor todavía: ambas cosas.
Por supuesto, tenemos la opción de siempre, que es eliminar la variable de la plantilla y colocar una imagen a saco. Por ejemplo, si ya en la parte CSS tenemos esto...
body {
font: $(body.font);
color: $(body.text.color);
background:$(body.background);
}
font: $(body.font);
color: $(body.text.color);
background:$(body.background);
}
... y sabiendo que todo lo que empieza por $ es una variable de las explicadas anteriormente, podemos cambiar esa variable directamente por un valor:
body {
font: $(body.font);
color: $(body.text.color);
background:url(http://imagencualquiera.jpg);
}
font: $(body.font);
color: $(body.text.color);
background:url(http://imagencualquiera.jpg);
}
Eso sí. A partir de este momento, ya no funcionará el cambio de fondo desde el diseñador, porque aunque la variable se cambie desde él, si luego no la usamos será imposible que se muestre su contenido. Recordar que la hemos borrado: $(body.background).
Por este motivo, se recomienda anular mediante comentarios (que no borrar) la línea en cuestión y de esta manera, si alguna vez queremos volver al diseño original sólo habrá que borrar la nueva línea y quitar los símbolos de comentarios para restaurar al punto anterior.
body {
font: $(body.font);
color: $(body.text.color);
}
font: $(body.font);
color: $(body.text.color);
/* background:$(body.background);*/
background:url(http://imagencualquiera.jpg);}
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
Son tan complicadas, inclusive me parecen de mucho peso. He probado bajarme una, acostumbrada a la propia es un tremendo lío.
ResponderEliminarSaludos!
Hola Oloman,
ResponderEliminarEl otro día fijándome en el html de mi blog descubrí un apartado que no conocía llamado headings.
Comprobé que hacía referencia a diferentes estilos de títulos que se pueden poner en el contenido de un post.
Quería editarlos ( cambiarles el color, poner un subrayado,etc. ) pues las clases de headings que venían predeterminadas por la plantilla me parecían un poco sosas.
Me preguntaba si ¿anteriormente habías realizado un post con este tema del cual no tengo constancia?.
Muchas gracias
Graciela, eso es sólo los primeros 34.527 días. Luego te acostumbras.
ResponderEliminarAhora en serio... simplemente son distintas a las que conocemos y cuando nos cambian aquello que controlamos, es normal que nos sintamos inseguros. Ayer estuve practicando con una plantilla del diseñador y tras un par de horas, ya le iba tomando el gusto. Como con otras cosas, es cuestión de practicar.
Mercier, los selectores que has descubierto no tienen nada de particular. Simplemente introduce en ellos bordes, negrita, tamaño de fuente, subrayados, fondos... y se comportarán como tantos otros.
gracias por fin me ligo te pasaste gracias por todo
ResponderEliminarMás de una vez (muchas, muchísimas veces) he venido aquí ya al punto del colapso y es increíble la manera tan sencilla y fácil (y lógica) con la que explicas lo inexplicable (o lo incomprensible) sólo quería darte las gracias.
ResponderEliminarEnhorabuena por tu trabajo y tu labor.
Saludos.
Luisa
De nada Luisa :D
ResponderEliminarHola, mi problema es el siguiente, cambié la plantilla de blogger por otra descargada de internet, y en la parte de arriba me sale un menú: home-about-new blogger templates-link, el cual no me interesa tener. ¿Cómo puedo eliminarlo? http://www.mariposascrochetfina.blogspot.com/
ResponderEliminarHola Fina. Ese menú está controlado por la clase SUPERNAV. Tienes que eliminar todo esto:
ResponderEliminar<ul id='supernav'>
<li><a href='http://k2modify.blogspot.com'>Home</a></li>
<li><a href='http://www.blogger.com/profile/06544446197664952231'>About</a></li>
<li><a href='http://k2modify.blogspot.com'>New Blogger Templates</a></li>
<li><a href='#'>Link</a></li>
</ul>
Con eso ya la eliminas pero luego, si quieres dejar limpia del todo la plantilla de ese menú, borra en la parte CSS todas las clases y sus correspondientes propiedades que se nombren con #supernav (5 en total).
Gracias Oloman, o sea que ¿tengo que ir al Html y modificar? Con las palabras Supernav" me sale todo esto: ¿tengo que eliminar todas las líneas?
ResponderEliminar#supernav {
font: bold 10px/9px Verdana, Lucida Grande, Arial, Helvetica, Sans-Serif;
position: absolute;
top: 170px;
left: 359px;
width: 100%;
height: 22px;
background: none;
margin: 0 0 0 -359px;
padding: 6px 0px 0px 0px; /* duplicate the tab size */
text-align: left;
display: block;
}
#supernav li {
margin: 0;
padding: 0;
text-transform: lowercase;
display: inline;
}
#supernav a {
color: #FFFFFF;
background: none;
font-weight: normal;
height: 17px;
padding: 5px 16px;
}
#supernav a:hover {
color: #111;
background: #C1C1C1;
text-decoration: none;
}
#supernav .current_page_item a {
color: #111;
background: #999;
text-decoration: none;
}
Un saludo,
fina
Bueno, primero tienes que eliminar lo que te dije en mi comentario (#8) y luego, todo lo que indicas tú ahora.
ResponderEliminarOloman perdona, elimino todo eso de supernav y algo parecido a lo del 2º parágrafo pero ahora las opciones del menú me salen en vertical, ¿me puedes ayudar?
ResponderEliminarfina
Fina, lo de #8 es distinto y no lo has borrado. Había que borrar ambas cosas y de hecho, la que te falta es la principal.
ResponderEliminarEl único parágrafo que me sale con parágrafos parecidos a este es el siguiente: no sé por donde modificar más.
ResponderEliminar#footer a {
color: #888;
border-bottom: 1px solid #ccc;
font-weight: bold;
}
fina
Fina de mis entretelas ¿quién habló de párrafos? :D
ResponderEliminarQuizás te falte pinchar en "Plantillas de artilugios expandidas". Como ya has borrado la parte de estilo (CSS), ahora símplemente busca el código que repliqué en el comentario #8 y bórralo también.
Gracias Oloman, lo conseguí pero no quitando el código del comentario#8, aunque no sé si me habré olvidado de borrar algún código.
ResponderEliminarFina
Se ve que ya lo habías borrado, porque ahora mismo no hay ni rastro del código de ese menú. Misión cumplida ;)
ResponderEliminarHola Oloman, vuelvo a ser fina. Mi problema es el siguiente; cuando habro mi blog www.mariposascrochetfina.blogspot.com no se me carga bién, solo me sale la parte de texto de arriba y algo del lateral izquierdo, luego, al cabo de quizás 2-3 minutos se me acaba de cargar. He eliminado cookies y archivos temporales y también el contador pero no se me arregla. ¿Me podrías ayudar?
ResponderEliminarAhora mismo carga bien Fina, por lo que debe ser algo que sólo a veces tarda en cargar.
ResponderEliminarLa próxima vez que te ocurra, fíjate en tu barra lateral izquierda y baja hasta que veas dónde se corta. El gadget que "toca" que salga, pero que o es visible de momento, será el culpable de la demora.
Primero felicitaciones, el diseño del blog es genial.
ResponderEliminarMe preguntaba si hay alguna forma de poner una imagen de fondo en la seccion de las entradas y la barra de los widgets, pues ahora solo puedes personalizar los colores.
Hablando de las plantillas nuevas.
Tambien quisiera saber como poner una imagen, favicon con las nuevas plantillas.
16bit-kid ¿me pasas la dirección de tu blog de pruebas?
ResponderEliminarHola Oloman, te escribo porque se ha debido modificar mi plantilla y el fondo de abajo se ha eliminado y no doy con lo que puede ser.
ResponderEliminarTe envio mi dirección por si quieres echarle un ojo. Gracias anticipadas
PD:todo lo anterior lo he solucionado y repito que muchas gracias.
http://elmiradordemarialuisa.blogspot.com/
Mª Luisa, el fondo de libros está...
ResponderEliminarQuiero esta plantilla me encanta,, donde la consigo?
ResponderEliminarDaviangela, Ginmar y Alexandra, buscar "Notepad Chaos para Blogger". Esa es la plantilla en la que está basada esta.
ResponderEliminarno me resulta! =( lo he intentado tanto y con tantos códigos! ='( lloraré!
ResponderEliminarFeñyta, he actualizado el post. Al principio podrás encontrar un enlace para hacer esto mismo de una manera más fácil.
ResponderEliminarSaludos Oloman, como siempre me encuentro visitando tu blog para aprender mas, tengo un problema tremendo con respecto al diseño de mi blog, lo terminé y me quedó perfecto como lo quería, el problema es que al verlo en otros monitores el aspecto cambia y el fondo no calza como debería, ya que uso el fondo casi como una "plantilla" entonces no he podido encontrar una solución para que el diseño quede "estandarizado" para cualquier monitor. Que puedo hacer?
ResponderEliminarILAPSO, normalmente, eso es por el distinto tratamiento que cada navegador hace de los MARGIN y BORDER. Si tu fondo lleva alguno de esos, tendrás que ver la forma de suprimirlos.
ResponderEliminaruna pregunta, no puedo hacer que la imagen de fondo que puse no se repita.. como hago?
ResponderEliminarAna, Prueba con esto:
ResponderEliminarno-repeat;
Como en este ejemplo:
background:url(URL DE LA IMAGEN) no-repeat;
Ana Inés, si desde el Diseñador de Plantillas puedes acceder a modificar tu fondo, al final del post que se enlaza al principio de este como Actualización, está la explicación para el tema del fondo repetido.
ResponderEliminarSi no puedes acceder, entonces tienes que modificar la plantilla "a mano". En ese caso, la clave está en lo que te ha dicho Balthier1116, añadir un NO-REPEAT.
Hola, me ha surgido un problema con mi blog que no se como solucionar, cuando empiezo a bajar con la barra lateral, al llegar al final de mi blog, al pie de cabezera, no se corta, continua bajando sin parar, ¿como puedo solucionar esto, agradeceria me ayudara
ResponderEliminarNo entiendo el problema. Tu página de inicio es muy larga, pero he llegado hasta el final y la cabecera ha permanecido en todo momento arriba del todo, dónde no la veía...
EliminarHola, gracias por intentar ayudarme, en primer lugar perdon porque no me expresé bien, me referia a pie de pagina, y bueno, ya encontre el problema, este era que habia instalado algo demasiado grande,en cuanto desistalé ese gadget se soluciono, gracias de todos modos por haber atendido mi peticion, recibe un saludo
ResponderEliminarNo hay de qué, pues lo solucionaste tú sola ;)
EliminarDe todos modos, gracias por estar siempre ahi, y molestarte, un saludo
ResponderEliminarMuy bueno tu blog! tengo una cosulta: si entras al diseñador de plantillas, AVANZADO, FONDOS,vemos que se pueden modificar los colores de 3 fondos , FONDO EXTERIOR ,FONDO PRINCIPIAL Y FONDO DE LA CABECERA.
ResponderEliminaryo quiero modificar el fondo interior, ya intente de mil modos con la propiedad background pero no lo logre.
te dejo mi blog por si quieres ver el codigo, quiero modificar el fondo blanco que esta dentro del otro que es naranja.
www.melejsoft.blogspot.com
Saludos!!
Si tienes esto en tu parte CSS, sólo tienes que modificar el valor del color. Si no lo tienes, lo incorporas y luego cambias el color:
Eliminar.content-inner {
background-color: white;
}
perdon , creo que me exprese mal , yo no quiero cambiarle el color de fondo, quiero cargarle una imagen a ese fondo y no lo he logrado de ninguna forma.
EliminarEs casi de la misma manera:
Eliminar.content-inner {
background: url(DIRECCION_IMAGEN) #white;
}
mmm me sigue sin funcionar,esta es mi linea de codigo:
Eliminar.content-inner {
padding: $(content.padding) $(content.padding.horizontal);
background: url(http://www.flickr.com/photos/78924243@N04/7270715542/) #white;
}
Creo que el problema es la dirección de Flickr que usas. Prueba con esta:
Eliminarhttp://farm8.staticflickr.com/7103/7270715542_8ee8afa2c1_s.jpg
Buenisimo! ahi anduvo ,gracias por tu ayuda!
EliminarHola Oloman!! Gracias a tu ayuda, mediante un script (no sé si se llama así pero bueno xD) en el código HTML de la plantilla de mi blog, podía cambiar los fondos de mis entradas según la temática. Cuando empezé (hace más de un año) y hasta ahora nunca tuve problemas, pero en mi última entrada, sigo mi plantilla como siempre pero siempre se me queda el diseño de la página principal :S. No me acuerdo si era esta la entrada que usé pero no sabía donde preguntarte mi duda xD
ResponderEliminarAqui te dejo mi blog: http://seraphinprincess.blogspot.com.es/
Gracias ^^
Y aquí te dejo yo la entrada dónde expliqué cómo hacer eso para que compruebes qué te falta ;)
EliminarCambiar el estilo según el tipo de página
hola. sabes como añadir portada para una plantilla descargada? por ejemplo me he descargado esta plantilla y el titulo me queda asi de comprimido y quería una portada mas a mi gusto http://quetalsemedariaescribir.blogspot.com.es/ gracias
ResponderEliminarBlog eliminado Jessy. No puedo ver nada...
EliminarAh! es que le cambie el nombre, pero ya lo he solucionado era una chorrada lo que pasa es que no encontraba el CSS ¡Lo tenian bien escondido! xD
EliminarGracias por la publicación, hace mucho que no editaba la plantilla, ya no recordaba donde estaban los fondos y eso.
ResponderEliminarUn saludo
De nada... y ya hace tiempo, ya. Este post es bien antiguo ;)
Eliminar