10 octubre 2014

COMO QUITAR, PONER O MODIFICAR EL MARCO Y LA SOMBRA EN UNA O VARIAS FOTOS DE BLOGGER


     No tengo ni idea de programación, y de informática lo básico, peeeero me pirra el DIY, pienso que lo que hace uno mismo sabe mejor, así que vestir mi blog corre de mi cuenta y de vez en cuando investigo cómo ponerle cosas chulas. Tengo una carpeta con un montón de hojas con códigos que voy remezclando unos con otros para ver que sale. Todas mis pruebas de "cocina bloggera" las hago en blogs de pruebas porque hay veces que lo relío tanto que tardo menos en borrar el blog y crear uno nuevo que en arreglar el desaguisado. 
    No es lo habitual, ¿eh? La mayor parte de las veces sale bien así que inauguro mi sección de "VISTE TU BLOG" donde encontrareis mis modestos tutoriales de diseño y personalización de blogs. Y para empezar uno facilito:



 


     Las imágenes de los blogs de blogger tienen por defecto una sombra y un marco alrededor que, aunque hay gente que lo considera antiestético, a mi me gusta. El problema llegó a la hora de añadir la firma mediante una imagen a las entradas del blog. 







    Yo quería que mi firma pareciera una firma y no una foto con texto así que, drástica yo, quité todas las sombras de todas las imágenes del blog, ea. 



 
    ¿Y esto cómo se hace? Pues así:
     Primero vamos a PERSONALIZAR PLANTILLA>>AVANZADO>>IMÁGENES
y ponemos el color de fondo y de borde transparente.  



    Después vamos a
EDICIÓN HTML y con Ctrl+F abrimos el buscador y buscamos .post-body img, nos saldrá algo como esto:




.post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img 
{padding: $ (image.border.small.size); 
background: $(image.background.color); 
border: 1px solid $(image.border.color); 
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1); 
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1); 
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1); } 
 


    Empezamos con el marco, vamos hasta la línea donde dice:


border: 1px solid $(image.border.color);

     
    Aquí podemos aumentar los valores px (pixels) de border para aumentar el tamaño del marco o ponerlo a 0 para quitarlo. Y "solid" define el estilo del borde que puede ser:

SOLID



DOTTED



DOUBLE



DASHED



GROOVE



RIDGE



INSET



OUTSET




    Podemos hacer infinidad de combinaciones cambiando los valores de esta línea y los colores de fondo y de borde en PERSONALIZAR PLANTILLA>>AVANZADO>>IMÁGENES 




    O podemos añadir nuevas líneas de código como esta (cada valor corresponde a un borde) que hace que los bordes queden redondeados:




border-radius: 10px 10px 10px 10px ;

     




    O podemos escribir una línea de código para cada lado (superior, inferior, derecho, izquierdo) por separado donde #999999 corresponde al color expresado en forma hexadecimal:




border-top: 1px solid #999999 (image.border.color);
border-bottom: 1px solid #999999 (image.border.color);
border-right: 1px solid #999999 (image.border.color);
border-left: 1px solid #999999 (image.border.color);
   

     
 
    Vamos ahora con la sombra. Estas tres líneas son las que definen las características de la sombra, en realidad es sólo la tercera, las otras dos llevan los mismos valores y se añaden para que la sombra sea compatible con todos los navegadores. Para quitar la sombra ponemos todos los valores a 0.



-moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, .1); 
-webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, .1); 
 box-shadow: 0px 0px 0px rgba(0, 0, 0, .1); 




    Si lo que queremos es modificarla jugamos con los valores seguidos de px: el rosa en positivo la coloca a la derecha y en negativo a la izquierda, el verde en positivo abajo y en negativo arriba y los números que asignemos indican el ancho. El azul nos marca el grado de difuminado (va de 0 transparente, a 1 opaco). ¿Y qué pasa si queremos sombra por los 4 lados de la imagen? Pues ponemos a 0 los dos primeros valores o podemos añadir un cuarto valor seguido de px.
    Y con los valores de rgba cambiamos el color y la intensidad, los tres primeros números marcan el color y el cuarto la intensidad, va de 0 (transparente) a 1 (opaco). Este es el código que corresponde a la siguiente imagen:



box-shadow: 0px 0px 15px 15px rgba(0, 0, 0, .5);






     Bien, ya sabemos cómo quitar y modificar la sombra ( y el marco) a las imágenes del blog, ¿pero qué pasa si lo que queremos es quitarla en algunas imágenes del blog y en otras no?
    Lo primero es seguir los pasos para quitar todas las sombras, después vamos a 
PERSONALIZAR PLANTILLA>>AVANZADO>>AÑADIR CCS y añadimos este código:

 

#sombraimg{ 
 -webkit-box-shadow: 0px 0px 15px 5px rgba(0,0,0,.1); 
-moz-box-shadow: 0px 0px 15px 5px rgba(0,0,0,.1); 
box-shadow: 0px 0px 15px 5px rgba(0,0,0,.1); 
}


    Ahora sólo tendremos que añadir  id='sombraimg' en cada imagen a la que queramos añadir la sombra. Un ejemplo:

    Yo quiero poner sombra a la foto de mi entrada pero no a la imagen de la firma. Edito mi entrada y voy a HTML arriba a la izquierda, busco con Ctrl+F "img" para que me aparezcan resaltadas todas las imágenes de mi entrada y localizo la foto a la que quiero poner sombra. Añado id='sombraimg' de la siguiente manera:





<img id='sombraimg' border="0" src="URL DE MI FOTO" />


    Y este es el resultado:




    Con estos  conceptos básicos puedes modificar todas las fotos del blog, ya sea de las entradas, sidebar, títulos de pestañas en forma de imagen...  
¡Importante! Recuerda que antes de trastear es recomendable guardar una copia de la plantilla.



12 comentarios:

  1. Y esto!!?? como me ha sorprendido esta entrada. La leere mas a fondo en estos días me parece muy util. Gracias por las explicaciones!!

    ResponderEliminar
    Respuestas
    1. Que me gusta mucho enredar en todo jajaja. Y no me cuesta nada compartirlo. Espero que os sirva, y que se entienda.

      Eliminar
  2. muchas gracias! muy útil, lo acaba de hacer en mi blog!

    ResponderEliminar
    Respuestas
    1. Muchas de nada Marivi, me alegro que te haya servido, ahora mismit me paso por tu blog a ver qué tal te ha quedado jajaja.

      Eliminar
  3. Ainsss pues a mi n me resuelve el problema del todo y mira que me ha pasado lo mismo que a tí.
    Es decir, que acabo de aprender a poner mi firma pero me ha salido con el marquito que le tengo yo a las fotos... pero yo sólo se lo quiero quitar a la firma no a todas las demás imágenes.. ¿hay solución? o todo a mano de una en una... o se lo pongo manual a las imágenes o se lo quito manual a la firma ¿no?

    ResponderEliminar
    Respuestas
    1. Hola Marita.
      Yo la única forma que conozco es la que explico en esta entrada, lo cual no quiere decir que no haya otras... A lo mejor hay algún código que puedas meterle sólo a la imagen de la firma que "tape" la sombra que viene por defecto... si tengo un ratito investigo. Un saludo!!

      Eliminar
  4. Muchísimas gracias!!! me estaba volviendo loca con ese borde. La verdad es que en las fotos de los posts no me molesta demasiado, pero en las imágenes del lateral no lo quería y no había manera de eliminarlo.
    Saludos!!!

    ResponderEliminar
    Respuestas
    1. Me alegro de que te sirva, un saludo.

      Eliminar
  5. Hola, necesito ayuda. Tengo el mismo problema que especificas en la entrada de este post, pasa que cuando vas a plantillas/diseño, no aparece Imagenes por ningun sitio. Me puedes ayudar? un saludo

    ResponderEliminar
    Respuestas
    1. Hola. Estaré encantada de ayudarte, si puedo, si me explicas cuál es el problema concreto que tienes. Un saludo.

      Eliminar
  6. Hola! he buscado lo .post-body img, dentro de la edición html pero no me aparece por ninguna parte, alguna idea de porqué puede ser?

    ResponderEliminar
    Respuestas
    1. Pues sólo se me ocurre que sea porque se llame de otra forma en tu blog. Prueba a buscar algo de lo siguiente a ver si así encuentras el bloque. Y recuerda hacer copias de seguridad por si acaso o hacer las pruebas en uN blog de pruebas. Un saludo!

      Eliminar

Related Posts Plugin for WordPress, Blogger...