11 de septiembre de 2014

Como quitar/cambiar borde y sombra a las imágenes de la plantilla: Awesome Inc. / Fantástico, S.A. [100% mio]

Hiii chic@s! :D Como están? Yo bien, hoy he estado cambiando algunas cositas en el blog! >w<

Bueno, os traigo un tutorial que para mi es muy útil! Este trata de como quitar/cambiar el borde y quitar la sombra que suele hacer algunas de las opciones de las plantillas que nos ofrece Blogger cuando vamos a hacer una plantilla. Como yo uso casi siempre Awesome Inc. os explicare como quitarle el borde! ^^

Aquí so dejo una imagen de ejemplo con imágenes con sombra y borde o sin ellas, así podréis ver la diferencia más fácilmente ^^

Bueno, ahora os explicare como quitar la sombra y el borde! Si hay alguna duda me dicen ^^

PARA QUITAR/CAMBIAR EL BORDE
1. Vais a Plantilla > Editar HTML > Buscais [Ctrl + F] este código:
.post-body img {

Si no lo encontrais probad con buscar post-body img y seguro que os saldrá!

2. Una vez hayas encontrado el código más abajo encontraras...
.post-body img {
  padding: 8px;
  background: $(image.background.color);
  border: 0px solid $(image.border.color);

  -moz-box-shadow: 0 0 $(image.shadow.spread) rgba(0, 0, 0, .2);
  -webkit-box-shadow: 0 0 $(image.shadow.spread) rgba(0, 0, 0, .2);
  box-shadow: 0 0 $(image.shadow.spread) rgba(0, 0, 0, .2);

  -moz-border-radius: $(image.border.radius);
  -webkit-border-radius: $(image.border.radius);
  border-radius: $(image.border.radius);
}

Entonces para quitar o cambiar el borde debéis cambiar la parte en rojo, el Padding.
Normalmente lo encontramos con 8px, así que si quieres eliminar el borde debes ponerlo a 0px; si quieres cambiar el grosor del borde solo cambiar el numero según el grosor que quieras (recomiendo ir poniendo números hasta que encuentres el que quede mejor con tu blog)

3. Ve a Vista Previa y mira que las imágenes no tienen borde y luego lo guardas! (si lo aun tienen borde, cierra [sin guardar] y vuelve a hacer el tutorial]


PARA QUITAR LA SOMBRA
1. Vais otra vez a Plantilla > Editar HTML > Buscais [Ctrl + F] el mismo código de antes:
.post-body img {
  padding: 8px;
  background: $(image.background.color);
  border: 0px solid $(image.border.color);

  -moz-box-shadow: 0 0 $(image.shadow.spread) rgba(0, 0, 0, .2);
  -webkit-box-shadow: 0 0 $(image.shadow.spread) rgba(0, 0, 0, .2);
  box-shadow: 0 0 $(image.shadow.spread) rgba(0, 0, 0, .2);

  -moz-border-radius: $(image.border.radius);
  -webkit-border-radius: $(image.border.radius);
  border-radius: $(image.border.radius);
}

Esta vez, lo que se tiene que hacer es eliminar la parte de rojo!

2. Eliminando esa parte del código la sombra de las imágenes deben desaparecer; ve a Vista Previa y si la sombra a desaparecido guarda y listo :D
----------------------------------------------

Este tutorial es 100% mío! 
Busque por internet y no encontré nada [y si encontraba algo no funcionaba ¬w¬]
así que tuve que investigar por el HTML y al final lo encontré ^^

Espero que os sirva!! Bye bye~

10 comentarios:

  1. O.O... ... QwO Ale ya se como hacerlo jajajajajaja!!! Gracias Kya-chan!! *^* Está genial el tutorial!! ♥

    PD: ♥ Kyaru eres la mejor de todo el universooooooooo!!! - By Kyaru :V

    ResponderEliminar
    Respuestas
    1. jajajajajajajaajajajaja Graciiiiias Yuu-chan♥ :3

      PD: Seeeeeh ♥ :V

      Eliminar
  2. Buen tuto ^^, yo no sabria hacerlo ^^
    saludos n.n

    ResponderEliminar
  3. Ohayo!! n___n

    LOL que genial!!! arigato x el tuto 100pre son utiles :D

    ResponderEliminar
    Respuestas
    1. Me alegra que te guste, espero que te sea util ^w^

      Eliminar