10 junho 2013

Retirando a borda das imagens do Blogger

Como é meu primeiro tutorial html, vou fazer um bem simples de ser explicado. Que é tirar a bordinha que fica em volta das imagens nas postagens. Essa aí ó:
pra ver melhor é só clicar que a imagem expande ;)


Cês vão em Modelo > HTML e vão procurar o seguinte trecho:

.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, .0);

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

Onde tá em negrito, num roxinho mais forte, vocês precisam mudar o n° 1 pra 0, aquele número indica o tamanho da borda, e 0, óbviamente, anula. No entanto o blogger tem um sistema de sombreamento para as bordas, e se você não retirá-los vai ser como se ainda tivesse uma, porque vai ficar contornado.

Então nesse mesmo trecho, nessa parte: 

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

Todos os valores dentro dos parêntesis, que remetem a sombrinha, devem ser substituídos por 0. Se quiser algo mais rápido, substitui esse trecho por esse aqui, que já tá todo configurado, qualquer duvida é só comentar que eu respondo com muito carinho:

.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: 0px solid $(image.border.color);

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

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

Se fizer tudo certinho, vai ficar assim:



Nenhum comentário:

Postar um comentário