27/1/14

Como cambiar el color del lightbox de Blogger

Hoy os traigo un tutorial que creo que os va a gustar mucho. Ojalá no me equivoque ;)

Pero antes de nada, ¿qué es el lightbox?

El lightbox es esa cajita o marco negro que sale cuando pinchamos en las fotos de Blogger:



Se puede activar o desactivar fácilmente (en Configuración - Entradas y comentarios - Mostrar imágenes con lightbox - Sí o No):



Y cuando se activa, sale como acabamos de ver, una cajita o marco negro cuando pinchamos sobre una foto.

Yo lo tengo desactivado porque si ponemos una imagen muy grande, al pinchar en ella no se verá a tamaño completo, y como suelo poner pantallazos, a veces es conveniente que podáis verlos bien. No obstante y como en la mayoría de los blogs/casos, lo suyo es poner las imágenes más pequeñas (por eso que vemos en el Curso Dos de no usar mucho espacio y que no tengáis que pagar luego y que además el blog no cargue lento), pues se puede dejar puesto.

De hecho la mayoría de los blogs de Blogger que conozco lo tienen activado.

Pero veo que todo el mundo lo deja negro.

Que no queda mal, pero bueno, que me he imaginado que quizá alguna, si sabe cómo cambiarlo, quizá quiera hacerlo ;)

Además es muy fácil. Vamos allá.

Cómo cambiar el color del lighbox o cajita de fotos de Blogger:

Lo primero que tenéis que saber es que se pueden cambiar 3 colores.

Fijaos como la zona de abajo, donde salen las demás fotos del post si es que en él hay más de una, es de un tono un poco más oscuro que el resto.

Entonces, eso se puede poner de un color, el resto de la caja de otro.

Y además, y aunque normalmente no se ve porque es negro igual que la caja, también se puede cambiar el color del reborde de la caja:


De este modo por ejemplo podríamos ponerlo así:


Es tan tan fácil como copiar este código de CSS que os he escrito y cambiar los colores o el grosor del reborde:

.CSS_LIGHTBOX_BG_MASK {
background-color:#dfdede !important;
/*pdb*/
}

.CSS_LIGHTBOX_FILMSTRIP {
background-color: #c6c6c6 !important;
/*pdb*/
}

.CSS_LIGHTBOX_SCALED_IMAGE_IMG {
cursor: pointer;
outline: 3px solid #8d8d8d !important;
position: relative;
/*pdb*/
}

Entonces, ahí en realidad van tres codiguitos.

El primero, el que dice "Lightbox bg mask" ese es el que corresponde a la caja en sí. Yo la he puesto del gris de las rayas del fondo de mi blog. Pero vosotras deberéis cambiar ese código que os he puesto en rosita por el color que queráis.

El segundo codiguito, el que dice "Lightbox filmstrip" pertenece a la franja de abajo donde salen las demás fotos. Y lo mismo: deberéis cambiar el código que os he puesto en rosa al color que vosotras queráis (yo ya veis que lo he puesto gris un poco más oscuro)

Y por último, el tercer codiguito pertenece al reborde.

Aquí podeis o ponerlo del mismo color que el primero (caja) para que no se vea, tal y como hace Blogger en la caja negra que nos pone por defecto, o ponerle un color.

Y si le ponéis color, podéis cambiarle el grosor. Por defecto sale 2px, pero yo lo he puesto de 3 en el ejemplo. O en el ejemplo de más arriba aún, el que tiene el reborde rojo, ahí está de 5.

La verdad que también podéis cambiar el solid por dotted o dashed etc. como todas las líneas siempre (lo vimos en el post de cómo poner un reborde alrededor de la columna central del blog) pero ya sabéis que yo opino que cuantas menos pijaditas... ;)

¿Veis qué fácil?

¿Os ha gustado? ¿Lo vais a cambiar de color en vuestro blog? Contadme :)

Mil besos,
Únete a mi newsletter para recibir cada semana un resumen con trucos y recursos

38 comentarios

  1. Me ha encantado el post y creo que lo voy a poner en práctica pero.... ¿Dónde se supone que debemos de poner el código de CSS que has puesto??!?!

    Gracias!!

    ResponderEliminar
    Respuestas
    1. Para las chicas que preguntaron donde esta el CSS
      Ir a: Diseño --> luego arriba de la Navbar hay un texto que dice "Añade, suprime y edita gadgets en tu blog. Haz clic en los gadgets y arrástralos para cambiarlos de posición. Para cambiar las columnas y el ancho, utiliza el Diseñador de plantillas"... bueno le dan a "diseñador de plantillas" --> luego "Avanzado" en el lateral izquierdo --> en el despliegue que les da las opciones a modificar van abajo de todo a "Añadir CSS"

      ❤ Besitos lindas!!

      Les dejo mi blog http://canbarelystop.blogspot.com.ar ❤

      Eliminar
    2. Este comentario ha sido eliminado por el autor.

      Eliminar
  2. Voy a ver primero como se ven mis fotos, porque si te digo la verdad no tenía ni idea de lo de la caja, no suelo pinchar en las fotos.
    Por lo menos miraré de quitar el negro y poner algún color más cálido.

    Mil gracias por la información. Contigo siempre se aprenden cosas nuevas.

    Besitos

    ResponderEliminar
  3. Que guay!!
    Por supuesto que lo cambio, queda mucho mejor en clarito.
    Tenías razón, este post me ha gustado muchísimo.
    Besos

    ResponderEliminar
  4. que bien claro que lo pienso cambiar me gusta que mi casita no se parezca a ninguna ,que sea como yo
    gracias y besos

    ResponderEliminar
  5. Menudo tutorial mas chulo, en cuanto tenga un momentito hoy, me pongo a hacerlo. Gracias Blanca.

    ResponderEliminar
  6. Ya lo he hecho!!
    Me encanta el resultado Blanca.
    Gracias mil.
    Muak

    ResponderEliminar
  7. Hola Blanca. Pero que buen tutorial!!! siempre dándonos pequeños consejos para mejorar nuestro blog. Muchísimas gracias y saluditos desde Argentina!

    Mi blog: http://manteca-y-miel.blogspot.com.ar/

    ResponderEliminar
  8. Hola Blanca, me ha encantado tu blog & he echo muchos tutoriales con mi blog, te quiero agradecer! ¡Gracias! & también voy a practicar este tutorial. En fin este es mi blog: Visita mi blog ★Pinchando aquí
    Adios!

    ResponderEliminar
  9. Ya lo he cambiado!! me gusta mucho más así!! Que gran idea!! Muchas gracias por ayudarnos a tener blogs tan bonitos!!! beseeets!! Mavi

    ResponderEliminar
  10. ¡Qué fácil de hacer es!
    Lo he puesto en práctica y no he tardado nada.
    Un saludo

    ResponderEliminar
  11. Mira, ni siquiera tenía idea de que se podía quitar el lightbox. Gracias!
    besos

    ResponderEliminar
  12. ¡Me encanta este tutorial!
    Lo voy a cambiar porque negro es demasiado oscuro... Así q voy a investigar q colores dejo...
    ¡¡Besitos, guapa, y gracias!!

    ResponderEliminar
  13. No sabia que se podia cambiar, miraré de ponerle un color más claro, gracias ;)

    ResponderEliminar
  14. Hola Blanca, ya soy tu seguidora y que decir que me encanta tu blog, los tips y consejos que nos das para ir mejorando nuestro blog y bueno pues poniéndolos en práctica desde ya.
    Tengo duda sobre dónde cambiar el código, entré a la plantilla pero no encuentro estas descripciones para modificarlas, es ahí? o ando media perdida? Gracias!

    ResponderEliminar
  15. La verdad es que no tenía ni idea de que eso se llamara así....porque yo sí que hago mucho uso en lo de clicar las imágenes....existe la mala costumbre de poner una imagen de 1600 px, por ejemplo, y escoger la opción de "grande".....que a duras penas luce nada d lo que se publique en ese formato....y eso es porque la gente no acaba de tenerlo claro del todo.....
    La cuestión.... que me mola la pijadilla ésta....en cuanto pueda la pruebo a ver qué tal.....aunque me parece que en una ocasión creí entender, en algo que escribiste, que era mejor no cargar demasiado la CSS y yo ya tengo unas cuantas cosas colocadas ahí......

    Bueno reina....gracias por el truquillo

    Bssss

    ResponderEliminar
  16. Este post es genial! No sabía que eso se podría hacer y me gusta la idea, asíque en lo que tenga un ratillo me pondré con ello! Bss

    ResponderEliminar
  17. Qué maravilla y lo que estoy aprendiendo, que yo para estas cosas soy un pato mareado y voy a experimentar un rato :)

    Besos/Bea

    ResponderEliminar
  18. Guau, ni me había planteado que eso se pudiera cambiar! Muchas gracias!!!

    ResponderEliminar
  19. Genial!! me esta ayudando mucho tu blog a crear mi pequeño espacio. Felicidades!

    ResponderEliminar
  20. Estos pequeños detalles son los que le dan el toque especial a un blog, muchas gracias por el tuto, ya lo he puesto en práctica ;)

    ResponderEliminar
  21. Hello Blanca. Tengo una duda, dónde exactamente debo colocar el CCS???
    Mil gracias
    Tuya siempre fans!!

    ResponderEliminar
  22. ¡Me encanta! ¡Lo acabo de probar! Es super-fácil y queda geniaaaaaal... ¡Muchas gracias!

    ResponderEliminar
  23. Es genial el contenido de tu blog, me está resultando super útil ahora que empiezo en el mundo blogger!
    Pero tengo una duda: ¿donde hay que colocar este código que nos das?

    ResponderEliminar
  24. cuando me salio empecé a decir ¡¡ lo logre mamá !! ( nunca me sale nada por eso me alegré mucho )

    ResponderEliminar
  25. muchas gracias blanca, soy nueva siguiendote y este no lo habia leido aun

    ResponderEliminar
  26. Gracias por compartir,me lo apunto!

    ResponderEliminar
  27. Respuestas
    1. Para las chicas que preguntaron donde esta el CSS
      Ir a: Diseño --> luego arriba de la Navbar hay un texto que dice "Añade, suprime y edita gadgets en tu blog. Haz clic en los gadgets y arrástralos para cambiarlos de posición. Para cambiar las columnas y el ancho, utiliza el Diseñador de plantillas"... bueno le dan a "diseñador de plantillas" --> luego "Avanzado" en el lateral izquierdo --> en el despliegue que les da las opciones a modificar van abajo de todo a "Añadir CSS"

      ❤ Besitos lindas!!

      Les dejo mi blog http://canbarelystop.blogspot.com.ar ❤

      Eliminar
  28. Para las chicas que preguntaron donde esta el CSS
    Ir a: Diseño --> luego arriba de la Navbar hay un texto que dice "Añade, suprime y edita gadgets en tu blog. Haz clic en los gadgets y arrástralos para cambiarlos de posición. Para cambiar las columnas y el ancho, utiliza el Diseñador de plantillas"... bueno le dan a "diseñador de plantillas" --> luego "Avanzado" en el lateral izquierdo --> en el despliegue que les da las opciones a modificar van abajo de todo a "Añadir CSS"

    ❤ Besitos lindas!!

    Les dejo mi blog http://canbarelystop.blogspot.com.ar ❤

    ResponderEliminar
  29. Otro de tus consejos aplicado! :) Muchas gracias Blanca!

    ResponderEliminar
  30. Amiga una pregunta: de casualidad no sabes ajustar el Lightbox? lo que pasa que estoy utilizando una plantilla externa y cada vez que toco una imagen me la corta, pero si hay dos imágenes y me brinco a la segunda y vuelvo ya sale completa ejem: https://bus-mexico.blogspot.mx/2017/10/disminuye-comercializacion-de-buses-en.html

    ResponderEliminar

© Personalización de Blogs. Diseño: Eve y Blanca.