01 octubre 2012

Cómo cambiar el color que aparece cuando alguien selecciona algo en nuestro blog

¿Habéis visto alguna vez un blog o web donde al seleccionar el texto, en lugar de salir en azul pitufo (o mejor dicho, azul del horroroso uniforme que tenía en Air Nostrum) sale de otro color?

Me gustaría tenerlo en mi blog para que lo veáis, pero si me pongo a hacer todas las cosas que os explico mi blog al final va a acabar siendo como un modelito de Rihanna: too much ;)

Así que mejor lo vemos en foto.

Rosa:


Verde:

Si vosotras queréis hacerlo en vuestro blog, es muy fácil: 

Vais a Plantilla

Edición de HTML

Y buscáis: 

]]></b:skin>

Una vez encontrado escribís justo encima este código PERO cambiando los códigos de colores que he puesto en rosa por los que vosotras queráis:

::-moz-selection  { 
Background: #7BD6B3
color: #5E5E5E
text-shadow: none;  
  
::selection   { 
background: #7BD6B3
color: #5E5E5E
text-shadow: none;  
  

El código 7BD6B3 es el verde que veíais en el ejemplo, y por tanto donde tenéis que escribir el código hexadecimal del color que queréis que sustituya al azul pitufo. 

El código 5E5E5E5E es el gris oscuro que he puesto yo para que se vea el texto debajo del verde. Si os fijáis, normalmente se ve blanco.

Fijaos en mi plantilla antes y después de hacer el cambio.

Antes:


Después:


Y os recomiendo que siempre que hagáis algo así, es decir, haciendo cambios en la Plantilla de HTML, hagáis una "foto" de vuestra plantilla, tal y como esta, para que luego si os cansáis de eso en concreto, fácilmente podáis volver a ponerlo tal y como estaba.

Espero que os guste el truco y que si alguna lo usa, no se olvide de dejar un comentario por aquí con el link a su blog para que ¡todas lo veamos!

Besos,

Blanca

21 comentarios:

  1. qué apañada! gracias me ha encantado jajaja ;)

    ResponderEliminar
  2. Blanca una preguntita!! Estoy probando el truquito de este post...para que sea la selección en rosita cuál es el código?
    Muchas gracias!! Un beso :)

    ResponderEliminar
  3. Marina, si te soy sincera ya no me acuerdo cuál puse yo, pero todo depende de qué rosa quieras tú de todos modos.

    Cada color tiene un código. Bueno, dos, uno hexadecimal, que es el que estamos viendo, y otro RBG.

    En este conversor puedes elegir el rosa que quieras por la paleta, y ver su código hexadecimal!

    ResponderEliminar
  4. Blanca.... Me tienes enganchadísima con tu blog.. pásate por el mio te he dejado un regalillo. Besos amr

    ResponderEliminar
  5. Muchas gracias Mar. Bueno, a todas!

    Besos,

    ResponderEliminar
  6. Tengo una duda sobre esto, Blanca! Lo he hecho y me sale perfectamente pero cuando selecciono 2 párrafos seguidos, "el azul pitufo" sigue saliendo, sobre todo en los interlineados de esos párrafos (entre párrafo y párrafo, me refiero). Cómo puedo hacer para que "ese azul" no aparezca??

    Gracias!!!

    ResponderEliminar
    Respuestas
    1. A mi me pasa igual, y sería lo más de lo mássssssss que no pasara ¿verdad?
      Besos

      Eliminar
  7. He estado leyendo varias entradas de tu blog para coger algunas ideas y, sinceramente, me encanta. Me gusta mucho como escribes y la forma que tienes de explicar las cosas. Todo parace mucho más sencillo :)

    xx

    xiomaraesasi.blogspot.com

    ResponderEliminar
  8. ¡Lo he hecho, lo he hecho! Me ha salido, me encanta esto me estoy enganchando :P

    ResponderEliminar
  9. Qué bonito, qué bonito, qué bonito, es lo que más me ha gustado, queda súperchulo. Gracias.

    ResponderEliminar
  10. Hola! Lo he hecho! he utilizado éste y otros muchos trucos de los que explicas.
    MIL GRACIAS!

    ResponderEliminar
  11. Gràcias por todo este trabajo que hace que nos queden unos blogs preciosos!!

    ResponderEliminar
  12. Hola!
    Una cosita, me gustaría cambiar el color de la selección, pero como sabes ahora el estilo del html ha cambiado... Y sinceramente no me aclaro con las cosas que son de modificar allí... Podrías decirme cómo hacer para usar las mismas cosas de tus entradas anteriores en el actual html?
    Mil gracias =)

    ResponderEliminar
  13. hoLA BLANCA no encuentro ese skin, me salen otros pero si copio lo que has dicho encima no me sale, sino que me sale el codigo en la cabecera del blog... una ayudita?

    ResponderEliminar
  14. Hola Blanca, yo como Josselyn tambien tengo un problemilla con el nuevo estilo de la plantilla html de blogger... no se como hay que hacerlo para modificarlo ahora... T_T

    Blogger nos ha fastidiado muchos de tus tutoriales, jooooooo!!!!

    ResponderEliminar
  15. Hola Blanca soy nueva en este blog que me encanta pero no se hacer lo de cambiar el color.....lo e intentado pero me sale que hay un error ..... te dejo mi blog para decirme que podria poner para que llamase un pocola atencion, lo tengo de hace unos dias y haun no tine mucha cosa .... Necesito tu ayuda para mejorarlo gracias


    Firmado:
    Cristina <3

    PD: Esta en Catalàn porque mis amigos lo leen en catalan ( espero que no te importe )


    lascireres.blogspot.com/


    ResponderEliminar
  16. hecho!!! quedan chulisimos estos detallitos!

    ResponderEliminar
  17. Hola Blanca. Acabo de cambiar el color pitufo por rosita. Me ha quedado genial. Muchas gracias por todos tus consejos. Un besazo enorme y pásate por mi blog que lo estoy cambiando gracias a ti. Besazos ;)

    http://suattshoes.blogspot.com.es/

    ResponderEliminar
  18. Joo me encanta Blanca, una pasado lo que estoy aprendiendo contigo

    ResponderEliminar
  19. ¡Que guay! Me encantan tus tutoriales. Gracias por este y por todos. ¡Un beso enorme!

    ResponderEliminar
  20. Bueno, este post es un poco antiguo pero como a mí me sirven todos de mucha ayuda.... Mil gracias again and again and again! Aquí está la maravilla de blog que me está quedando gracias a ti:

    http://mainfeldinlove.blogspot.de/

    ResponderEliminar

Lo tengo que reconocer: soy como una niña.

¡Y muero de felicidad con cada comentario que recibo! Me hacen tanta ilusión o más incluso que el primer día, y leo todos y cada uno de ellos SIEMPRE.

Sin embargo y aunque en general suelen ser bienvenidos todos los comentarios y todas las opiniones, me reservo el derecho de no publicar aquellos que me parezcan malintencionados o cuyo único fin sea la autopromoción. Así como aquellos que contengan direcciones de email para prevenir que os llegue Spam.

Por cierto, si no ves tu comentario al publicarlo es porque al tener que esperar a moderación, a veces tardan un poco en ser publicados.

Besos y ¡gracias de nuevo!

Blanca