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?
Son tan complicadas, inclusive me parecen de mucho peso. He probado bajarme una, acostumbrada a la propia es un tremendo lío.
ResponderSuprimirSaludos!
Hola Oloman,
ResponderSuprimirEl 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.
ResponderSuprimirAhora 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
ResponderSuprimirMá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.
ResponderSuprimirEnhorabuena por tu trabajo y tu labor.
Saludos.
Luisa
De nada Luisa :D
ResponderSuprimirHola, 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/
ResponderSuprimirHola Fina. Ese menú está controlado por la clase SUPERNAV. Tienes que eliminar todo esto:
ResponderSuprimir<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?
ResponderSuprimir#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.
ResponderSuprimirOloman 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?
ResponderSuprimirfina
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.
ResponderSuprimirEl único parágrafo que me sale con parágrafos parecidos a este es el siguiente: no sé por donde modificar más.
ResponderSuprimir#footer a {
color: #888;
border-bottom: 1px solid #ccc;
font-weight: bold;
}
fina
Fina de mis entretelas ¿quién habló de párrafos? :D
ResponderSuprimirQuizá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.
ResponderSuprimirFina
Se ve que ya lo habías borrado, porque ahora mismo no hay ni rastro del código de ese menú. Misión cumplida ;)
ResponderSuprimirHola 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?
ResponderSuprimirAhora mismo carga bien Fina, por lo que debe ser algo que sólo a veces tarda en cargar.
ResponderSuprimirLa 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.
ResponderSuprimirMe 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?
ResponderSuprimirHola 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.
ResponderSuprimirTe 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á...
ResponderSuprimirQuiero esta plantilla me encanta,, donde la consigo?
ResponderSuprimirDaviangela, Ginmar y Alexandra, buscar "Notepad Chaos para Blogger". Esa es la plantilla en la que está basada esta.
ResponderSuprimirno me resulta! =( lo he intentado tanto y con tantos códigos! ='( lloraré!
ResponderSuprimirFeñyta, he actualizado el post. Al principio podrás encontrar un enlace para hacer esto mismo de una manera más fácil.
ResponderSuprimirSaludos 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?
ResponderSuprimirILAPSO, 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.
ResponderSuprimiruna pregunta, no puedo hacer que la imagen de fondo que puse no se repita.. como hago?
ResponderSuprimirAna, Prueba con esto:
ResponderSuprimirno-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.
ResponderSuprimirSi 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
ResponderSuprimirNo 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...
SuprimirHola, 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
ResponderSuprimirNo hay de qué, pues lo solucionaste tú sola ;)
SuprimirDe todos modos, gracias por estar siempre ahi, y molestarte, un saludo
ResponderSuprimirMuy 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.
ResponderSuprimiryo 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:
Suprimir.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.
SuprimirEs casi de la misma manera:
Suprimir.content-inner {
background: url(DIRECCION_IMAGEN) #white;
}
mmm me sigue sin funcionar,esta es mi linea de codigo:
Suprimir.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:
Suprimirhttp://farm8.staticflickr.com/7103/7270715542_8ee8afa2c1_s.jpg
Buenisimo! ahi anduvo ,gracias por tu ayuda!
Suprimir