Cambiar el fondo principal en plantillas del diseñador | Oloblogger Actualización: Blogger ha incorporado con posterioridad a la publicación de esta entrada, una utilid...

29 de junio de 2010

Cambiar el fondo principal en plantillas del diseñador

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"/>

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);
}

... 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);
}

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);
/*  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.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

50 comentarios :

  1. Son tan complicadas, inclusive me parecen de mucho peso. He probado bajarme una, acostumbrada a la propia es un tremendo lío.

    Saludos!

    ResponderEliminar
  2. Hola Oloman,

    El 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

    ResponderEliminar
  3. Graciela, eso es sólo los primeros 34.527 días. Luego te acostumbras.
    Ahora 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.

    ResponderEliminar
  4. gracias por fin me ligo te pasaste gracias por todo

    ResponderEliminar
  5. Má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.
    Enhorabuena por tu trabajo y tu labor.
    Saludos.
    Luisa

    ResponderEliminar
  6. Hola, 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/

    ResponderEliminar
  7. Hola Fina. Ese menú está controlado por la clase SUPERNAV. Tienes que eliminar todo esto:

    <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).

    ResponderEliminar
  8. 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?
    #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

    ResponderEliminar
  9. Bueno, primero tienes que eliminar lo que te dije en mi comentario (#8) y luego, todo lo que indicas tú ahora.

    ResponderEliminar
  10. Oloman 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?

    fina

    ResponderEliminar
  11. 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.

    ResponderEliminar
  12. El único parágrafo que me sale con parágrafos parecidos a este es el siguiente: no sé por donde modificar más.

    #footer a {
    color: #888;
    border-bottom: 1px solid #ccc;
    font-weight: bold;
    }

    fina

    ResponderEliminar
  13. Fina de mis entretelas ¿quién habló de párrafos? :D

    Quizá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.

    ResponderEliminar
  14. 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.

    Fina

    ResponderEliminar
  15. Se ve que ya lo habías borrado, porque ahora mismo no hay ni rastro del código de ese menú. Misión cumplida ;)

    ResponderEliminar
  16. Hola 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?

    ResponderEliminar
  17. Ahora mismo carga bien Fina, por lo que debe ser algo que sólo a veces tarda en cargar.

    La 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.

    ResponderEliminar
  18. Primero felicitaciones, el diseño del blog es genial.

    Me 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.

    ResponderEliminar
  19. 16bit-kid ¿me pasas la dirección de tu blog de pruebas?

    ResponderEliminar
  20. Hola 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.
    Te 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/

    ResponderEliminar
  21. Mª Luisa, el fondo de libros está...

    ResponderEliminar
  22. Quiero esta plantilla me encanta,, donde la consigo?

    ResponderEliminar
  23. Daviangela, Ginmar y Alexandra, buscar "Notepad Chaos para Blogger". Esa es la plantilla en la que está basada esta.

    ResponderEliminar
  24. no me resulta! =( lo he intentado tanto y con tantos códigos! ='( lloraré!

    ResponderEliminar
  25. Feñyta, he actualizado el post. Al principio podrás encontrar un enlace para hacer esto mismo de una manera más fácil.

    ResponderEliminar
  26. Saludos 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?

    ResponderEliminar
  27. ILAPSO, 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.

    ResponderEliminar
  28. una pregunta, no puedo hacer que la imagen de fondo que puse no se repita.. como hago?

    ResponderEliminar
  29. Ana, Prueba con esto:

    no-repeat;

    Como en este ejemplo:

    background:url(URL DE LA IMAGEN) no-repeat;

    ResponderEliminar
  30. 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.

    Si 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.

    ResponderEliminar
  31. 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

    ResponderEliminar
    Respuestas
    1. No 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...

      Eliminar
  32. Hola, 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

    ResponderEliminar
    Respuestas
    1. No hay de qué, pues lo solucionaste tú sola ;)

      Eliminar
  33. De todos modos, gracias por estar siempre ahi, y molestarte, un saludo

    ResponderEliminar
  34. Muy 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.
    yo 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!!

    ResponderEliminar
    Respuestas
    1. 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:

      .content-inner {
      background-color: white;
      }

      Eliminar
    2. 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.

      Eliminar
    3. Es casi de la misma manera:
      .content-inner {
      background: url(DIRECCION_IMAGEN) #white;
      }

      Eliminar
    4. mmm me sigue sin funcionar,esta es mi linea de codigo:

      .content-inner {
      padding: $(content.padding) $(content.padding.horizontal);
      background: url(http://www.flickr.com/photos/78924243@N04/7270715542/) #white;
      }

      Eliminar
    5. Creo que el problema es la dirección de Flickr que usas. Prueba con esta:
      http://farm8.staticflickr.com/7103/7270715542_8ee8afa2c1_s.jpg

      Eliminar
    6. Buenisimo! ahi anduvo ,gracias por tu ayuda!

      Eliminar
  35. Hola 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

    Aqui te dejo mi blog: http://seraphinprincess.blogspot.com.es/

    Gracias ^^

    ResponderEliminar
    Respuestas
    1. Y aquí te dejo yo la entrada dónde expliqué cómo hacer eso para que compruebes qué te falta ;)

      Cambiar el estilo según el tipo de página

      Eliminar
  36. 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

    ResponderEliminar
    Respuestas
    1. Blog eliminado Jessy. No puedo ver nada...

      Eliminar
    2. Ah! 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

      Eliminar
  37. Gracias por la publicación, hace mucho que no editaba la plantilla, ya no recordaba donde estaban los fondos y eso.

    Un saludo

    ResponderEliminar
    Respuestas
    1. De nada... y ya hace tiempo, ya. Este post es bien antiguo ;)

      Eliminar