AVISO IMPORTANTE

Si quieres un menú como este de los botones, pincha en el que tiene un interrogante. Te llevará a la página de donde saqué el código y si tienes algún problema o duda, su creador te ayudará a resolverlo.

Normas de obligado cumplimiento si me envias un mail pidiendo ayuda/consejo

1ª .- Adjunta SIEMPRE la dirección del blog en el que tengas el problema y procura escribir bien la dirección.

2ª .- Intenta explicar LO MAS CLARAMENTE POSIBLE tu problema.
No pagarás más por escribir más palabras.

3ª . - Si has de contestarme usa la opción RESPONDER.
No abras un nuevo hilo de mensajes.

4ª .- No me envies NUNCA la plantilla si no te la pido.

5ª .- No me envies NUNCA la contraseña.
NO PIENSO ENTRAR A MODIFICARTE NADA.

SI ME DEJAS LA PREGUNTA EN UN COMENTARIO
1º .- Si tienes más de un blog dime en cual está el problema.
2º .- Habilita el perfil para que pueda entrar a ver el blog.
3º .- Si el blog es privado tampoco podré verlo. Invítame.

Y por último: Si quieres que te conteste por mail, envíame la pregunta por mail, mi dirección está en la sidebar, en el botón de arriba que tiene un sobre y en casi todos mis blogs.

Los variables (fuentes y colores)

domingo, 18 de noviembre de 2007

Todas las plantillas tienen unas variables, en el código, para poder personalizar los colores de serie.
Son los Variable name, que podemos ver al principio al pinchar en Edición de HTML en la pestaña Plantilla.
Algunas tienen más variables que otras, por ejemplo: la mínima tiene 11 variables, la denim 14, o la dots, que tiene 13.
Habitualmente cada variable corresponde a una parte del blog, pero hay secciones que las comparten.
Así, por ejemplo, en la dots, el variable del color del título del post se aplica también a algunos enlaces.
---
Un pequeño inciso acerca de los enlaces:
Los links, o enlaces, suelen tener 3 definiciones, a:link, a:visited y a:hover.
El primero, a:link, define el enlace al ser insertado, a:visited, define el enlace en el que ya se ha pinchado y a:hover define al enlace cuando ponemos el ratón encima, pero sin pincharlo.
También hay que tener en cuenta que blogger distingue entre enlaces a otros blogs o sitios suyos, incluido nuestro propio blog, (que interpreta como enlaces visitados), y a otros sitios que no sean blogger, así en una lista de links puedes ver enlaces a dos colores.
---
En la mayoría de plantillas alguno de estos tres colores se derivan de otras variables.
Esto se puede modificar, añadiendo variables a nuestra plantilla.
Siguiendo con el ejemplo de la dots, si quisiéramos que el color de los enlaces fuera particular en cada caso, deberíamos añadir alguna variable al código HTML.
Para ello miramos en el código cuantas de estas variables hay, que contengan la palabra link y vemos que hay dos: linkcolor y vlinkcolor.
Nos faltaría, pues, la variable de hovercolor.
Si quisiéramos que ésta formara parte de la lista de Fuentes y colores, bastaría con añadir al código la variable correspondiente.
Para ello copiamos una de las anteriores, (por ejemplo vlinkcolor) y la pegamos justo debajo de si misma.
Cambiamos vlinkcolor por hoverlinkcolor y Visited por hover
Sería así: (esta es la variable original)
<Variable name="vlinkcolor" description="Visited Link Color" type="color" default="#885" value="#888855">
(y así quedará al modificarla)
<Variable name="hoverlinkcolor" description="Hover Link Color" type="color" default="#885" value="#33ff00">
El número de seis cifras corresponde al código hexagesimal de colores, que puedes encontrar aquí.
Después buscamos en el código, algo más abajo, la orden para que esta variable se aplique y en la zona de Links encontramos ésto:
a:hover { color:$vlinkcolor;
que cambiamos por ésta
a:hover { color:$hoverlinkcolor;
---
De igual manera podemos añadir variables a otros sectores que compartan color.
Lo único a tener en cuenta es que cada variable tenga su propia definición, por ejemplo, si quisieras que el texto de la barra lateral tuviera un color propio, tendrías que crear la variable sidebartextcolor, así:
<Variable name="sidebartextcolor" description="Sidebar Text Color" type="color" default="#663" value="#33ff00">
y añadir en el primer bloque de Sidebar content la orden
color:$sidebartextcolor;
debajo de la ya existente que indica el color del título de los elementos.
---
Finalmente, tras hacer vista previa y ver que todo funciona a la perfección y el blog carga correctamente, puedes guardar plantilla y en Fuentes y Colores encontrarás las nuevas funciones para que puedas cambiar esos colores desde ahí.
---
Editado: 9-Abril-2008
Como veo que os interesa el tema, pero quizás le falten explicaciones a la entrada, este fin de semana haré un lista de zonas a las que es posible añadir una variable, como definirla y como y donde poner el código de la orden, concretando, además, las diferencias entre plantillas a la hora de colocarlas.

Imprime esta entrada

17 comentarios. ¿Quieres añadir el tuyo?

  1. kyubiT ha dicho
  2. Buenas...

    me gustó mucho este post...

    ¿cómo lo puedo hacer para diferenciar el color del titulo de las "cosas" de la sidear y el del post-footer (como por ejemplo el que dice "publicado por...")?

  3. Eulalia ha dicho
  4. kyubit:
    En la zona del post-footer añades esta línea
    text-color:#aquí pones el número del color que quieras;
    o esta
    text-color:y añades el nombre de alguna variable, por ejemplo titleColor;
    No olvides el punto y coma al final de la línea.
    Haz vista previa y cuando te guste guardas.
    Saludos.
    Saludos.

  5. Eulalia ha dicho
  6. Se me olvidaba si pones una variable has de ponerla así
    text-color:$titleColor;
    Saludos

  7. kyubiT ha dicho
  8. Gracias, me sirvió la ayuda... salu2

  9. Luis ha dicho
  10. Aqui explicas como cambiar el color del texto, pero yo quiero cambiar el fondo de la sidebar.
    ¿Como escribiria la variable?

  11. Eulalia ha dicho
  12. Hola Luís.
    Copia y pega cualquiera de las variables de color y cambia las dos definiciones por estas
    sidebarbgcolor / Sidebar Background Color
    Lo pongo en inglés porqué a veces alguna de estas definiciones las reconoce y las pone en la lista de fuentes en castellano. A veces no, pero ya sabemos que Background es fondo, ¿verdad?
    Un abrazo.

  13. Luis ha dicho
  14. Hasta aqui todo bien, he copiado una variable, vista previa y guardar, y me aparece en la lista de fuentes y colores, pero creo que me falta algo.
    Tengo sidebar y newsidebar.
    ¿No tengo que poner otra variable para la newsidebar?
    No hay que poner mas codigos en la plantilla?
    Siento ser tan pesado, pero no me aclaro bien con esto.
    Otro abrazo para ti.
    Gracias

  15. Eulalia ha dicho
  16. Luis:
    Depende de si quieres que tengan el mismo color o no.
    Si quieres los elementos de las dos columnas del mismo color, en el apartado .sidebar .widget { añades esto
    background-color: $sidebarbgcolor;
    y los elementos de las dos columnas tendrán el color que elijas.
    Si quieres que el fondo cubra toda la sidebar, elementos y fondo en general, la línea la has de añadir a los grupos #sidebar { y #newsidebar {
    si quieres que cada sidebar tenga un color distinto, entonces creas una variable para la otra. La llamas newsidebarbgcolor / Newsidebar Background Color y si quieres que toda ella tenga ese color en #newsidebar { añades la linea pero así
    background-color: $newsidebarbgcolor;
    Si quieres que sean solo los elementos, has de añadir un código entero así:
    .newsidebar .widget {
    background-color: $newsidebarbgcolor;
    }
    Y entonces los elementos de la nueva tendrán un color distinto a los elementos de la otra.
    Un abrazo.

  17. Luis ha dicho
  18. Perfecto...
    Gracias por todo.
    Saludos

  19. AndreasColor ha dicho
  20. Hola de nuevo eulalia,mira,me he estado leyendo un buen rato este post y no logro captar como hago para cambiar el título de mis entradas,lo he intentado,pero siempre se me cambia el texto también.

    Si me pudieras echar una mano,
    thanx

  21. Eulalia ha dicho
  22. Andreas, como aquí no puedo publicar códigos te remito un e-mail con las instrucciones.
    Saludos.

  23. Patán ha dicho
  24. Buenas tardes aca en mi pais.

    Mi pregunta yo crepo que es más simplke de lo que parece y trataré de explicarla en la mejor forma.

    Lo que deseo es cambiarle la cara a mi blog....pero no puedo cambiarle el fondo a las sidebar laterales.

    como asi mismo a las entradas.

    O que me aconsejas, cambio la plantilla mejor....

    Espero tu respuesta.

    Patricio. (Patán)

  25. paqui ha dicho
  26. Eulalia, mi pregunta es, cuando escribo un post o entrada le puedo añadir más colores de los que tiene.
    Gracias, saludos

  27. Eulalia ha dicho
  28. Paqui:
    Al texto de una entrada si.
    Como puedes ver yo misma hago las entradas variando el color de las letras de los códigos.
    Si quisiera hacer toda la entrada de otro color, al empezar a escribir, seleccionaría la primera palabra o frase, le cambiaría el color y seguiría escribiendo, o al terminar, seleccionaría toda la entrada para cambiarle el color, de esta forma toda la entrada se vería de otro color.
    El color se cambia pinchando en ese botoncito que tiene unos cuadritos de colores. Se abre una paleta y pinchas en el color que quieres.
    Un abrazo.

  29. paqui ha dicho
  30. Gracias Eulalia por contestar tan rápido.
    Lo que dices lo sé, pero quiero poner un trozo del texto escrito en otro color que no viene en la paleta, como lo hago

  31. Eulalia ha dicho
  32. Paqui:
    Para hacer eso tienes que cambiar el código del color que se ve en Edicion de HTML de las entradas.
    Me explico (como hay signos que aquí no se pueden escribir, pongo [ en su lugar)

    Cuando cambias el color de una parte del texto, si pinchas en la pestaña Edición de HTMl verás algo así en el código [span color #cccccc]
    Cambia las 6 cifras que haya detrás de la almohadilla # por las del color que quieras usar y ya está.
    Un abrazo.

  33. paqui ha dicho
  34. Gracias Eulalia

google-site-verification: google6804ea8a89fbde9f.html
Plantilla creada por laeulalia basada en la harbor de blogger.