Consegui um tempinho e vim aqui postar para vocês esse tuto tão pedido. Hoje eu vou ensinar como colocar como plano de fundo da área de postagens, uma textura de papel, parecida com a que eu uso. O resultado final será assim:
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpqoQ7Kx9b1dDlyOJHVOThE39y3U_zwCS1ESROMlj7c_3sSM8qN3HAEahdc8jyB5ykcFTTw1d5RkfioyNwyIU1oOLS8w0kySVwfw5Hs5MQxcaJ7EchV7_lq4QdZ5oaGrUNFB4Kh2A8jhe_/s400/ex.PNG)
Vamos começar? Então abra seu HTML. Aperte ctrl+F e procure por:
Procure pela primeira linha para facilitar. Quando achar, apague todo o código e coloque esse no lugar:
Aqui que entra a correção. Vocês viram que quando coloca a imagem, a letra do post fica por cima da beirada do papel não é? Para resolver isso, aperte ctrl+F e procure por: .main-inner .column-center-inner {
Substitua o trecho:
Abaixo tem duas imagens que você podem usar, uma menor e outra maior (para blogs mais largos). Clique nas imagens para salvar do tamanho normal e usar.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfAw6iPgIIQNIQlhm4yt0c7GAPdx25_gQCgu9mHCxnWtJnxGkMHiZ0aN2wy0f4gBTCS-CXmewF007sdcLpZcA-M7Wwsbk0ViAgd5H2_fUVSQQyM0fScTCK5WBEvnPgqvo9dk-NIK1eMDht/s320/papel.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifAz9WIMKNfz9KeG_lmj8_TKGQigplv34QcQTu8kCsubWz-Uw4RV2PP85EFgAVx7eq1KcfWi0NejciPg8B5PaYhAaIALFD-D-VP1ZH2I56jtvMv2PbIlWBQv00ELLNWsiwbdfif9zizXks/s320/papel2.png)
Espero que tenham gostado do tuto, e se usarem tanto as imagens como o tutorial, creditem!
.main-inner .column-center-outer {
background: $(post.background.color) $(post.background.url) repeat scroll top left;
_background-image: none;
}
Procure pela primeira linha para facilitar. Quando achar, apague todo o código e coloque esse no lugar:
.main-inner .column-center-outer {Agora é substituir pela url da imagem que você quiser.
background: url(URL da imagem) repeat-Y;
}
Aqui que entra a correção. Vocês viram que quando coloca a imagem, a letra do post fica por cima da beirada do papel não é? Para resolver isso, aperte ctrl+F e procure por: .main-inner .column-center-inner {
Substitua o trecho:
padding: $(content.posts.padding) 0;por esse código abaixo:
padding: 10px 10px 10px 20px;Você pode ter que alterar o valor em roxo de acordo com a imagem que você usar.
Abaixo tem duas imagens que você podem usar, uma menor e outra maior (para blogs mais largos). Clique nas imagens para salvar do tamanho normal e usar.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfAw6iPgIIQNIQlhm4yt0c7GAPdx25_gQCgu9mHCxnWtJnxGkMHiZ0aN2wy0f4gBTCS-CXmewF007sdcLpZcA-M7Wwsbk0ViAgd5H2_fUVSQQyM0fScTCK5WBEvnPgqvo9dk-NIK1eMDht/s320/papel.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifAz9WIMKNfz9KeG_lmj8_TKGQigplv34QcQTu8kCsubWz-Uw4RV2PP85EFgAVx7eq1KcfWi0NejciPg8B5PaYhAaIALFD-D-VP1ZH2I56jtvMv2PbIlWBQv00ELLNWsiwbdfif9zizXks/s320/papel2.png)
Espero que tenham gostado do tuto, e se usarem tanto as imagens como o tutorial, creditem!
Nenhum comentário
Postar um comentário