Problemas de imagens com o designer de modelo.

Olá galerinha do LeGauss.

Recentemente, como vocês perceberam, nós mudamos nosso layout. Mas um grande problema atrapalhou bastante a nossa mudança e nesse post vou colocar a solução.

Vocês talvez conheçam a nova ferramenta do blogger para alteração de layouts que se chama designer de modelo. Para poder utilizá-la você deve entrar no site http://draft.blogger.com e lá, entrando na aba "Layout", você poderá acessar a nova ferramenta.

O designer de modelo é uma grande mão na roda. Existem vários modelos básicos e várias possibilidades de alterá-los, porém quando tinhamos escolhido nosso modelo preferido nos deparamos com um problema.

Em quase todos os modelos as imagens ficam bem acima do texto e possuem uma sombra ao seu redor, o que tornaria a utilização do da forma que fazemos atualmente impossível.

Mas não tema! Há uma solução fácil para esse problema.

No blogger, entre na aba "Layout" e depois na opção "Editar HTML".
(Salve seu código antes de fazer qualquer coisa, caso algo inesperado ocorra. =P)
Agora procure pelo seguinte pedaço de código: .post-body img (use ctrl+f por favor)

Abaixo dele apague tudo até o início da próxima tag, no meu caso eu tive que apagar:

padding: 8px;
background: $(image.background.color);
border: 1px 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);

E no lugar cole o seguinte pedaço de código:

margin-top:0;
margin-$endSide:0;
margin-bottom: -1px;
margin-$startSide: 0;
padding: 0px;
background: $(image.background.color);
border: 0px solid $(image.border.color);

E pronto, suas imagens aparecerão do jeito que você queria!

É isso espero que tenha ajudado. ;^)