Não quero desanimar, mas já vou avisando que dá um trabalho danado, viu? Estou devendo este tuto faz um tempo justamente por que sei que não é nada fácil colocar bordas arredondadas (também não é coisa prá se arrancar os cabelos....) e tenho medo do que virá...rsrs. Quando ensinei a colocar uma terceira coluna no blog, achei que estava facilitando a vida do povo, mas recebí TANTO e-mail, acabei ajeitando TANTO template, que tenho medo...
. Não que eu tenha má vontade gente, por favor, mas é que eu ando mesmo, ultimamente, sem muito tempo para me dedicar a este blog e aos outros tantos filhos (vou contar pela centésima vez: eu tenho 26 blogs!), que dirá tempo para ajeitar templates. É por isso que eu já ensino a pescar...Por isso, meus amores, sem mágoas, mas vou adiantando que a titia vai ensinar tin-tin por tin-tin, mas depois é fé em Deus e cada um por sí, ok?
Também quero dizer que vou explicar o MEU método, que aprendí na marra, xeretando os templates do blogger. Deve ter por aí milhões de tutos explicando de maneiras diferentes, mas eu não lí nenhum e posso até estar fazendo do jeito mais difícil, não sei...
Chega de preâmbulos, vamos ao que interessa.
Vá no seu blog e clique em Editar HTML. Procure no código do seu template este trecho:
/* Sidebar Content
----------------------------------------------- */
COLOQUE O CÓDIGO AQUI
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
text-align: center;
margin: 15px;
}
Pode não estar idêntico ao meu mas o título é o mesmo. Ok, acima de tudo que estiver por lá, onde eu sinalizei com a frase em vermelho, você deve colar estre trecho:
#sidebarbottom-wrap1 {
background:url("endereço da imagem do topo da coluna") no-repeat left top;
margin:0 0 px;
padding-top:10px;
}
#sidebarbottom-wrap2 {
background:url("endereço da imagem do bottom da coluna") no-repeat left bottom;
margin:0 0 px;
padding-bottom: 10px;
}
Tá, agora esquece esta parte por enquanto. Note bem: não delete nada, só acrescente o código, ok?
Salve o template. Se você visualizar, não terá mudado nada (não insira ainda nenhum endereço de imagem onde está indicado, por enquanto). Agora desmarque onde está Expandir Modelo de Widget (se estiver marcado) e encontre este trecho do código e insira o que está em vermelho:
<div id='sidebar-wrapper'>
<div id='sidebarbottom-wrap1'><div id='sidebarbottom-wrap2'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
</div></div></div>
Salve o template. Agora é com a parte de edição de imagem. Abra seu editor de imagem e crie uma imagem com a largura da sidebar e altura 100px. Preencha com a cor que será a cor do background da PÁGINA (e não da coluna, ok?).
Depois de preencher com a cor de fundo da página do seu blog, escolha a seleção com bordas arredondadas do seu editor de imagem.
Veja a imagem (clique nela para expandir):
Agora selecione o quadrado como na próxima imagem e preencha a seleção com a cor que usará no fundo da SIDEBAR:
Ficou aquela pontinhas alí com a cor do fundo da página, ok? Agora corte a imagem próximo ao final desta curva da borda (mas não vá cortar demais, heim?)
Salve esta imagem como top.jpg:
Agora inverta a imagem Verticalmente e salve como bottom.jpg:
Bom, agora hospede as imagens e insira lá no primeiro código que eu passei, dentro das marcações correspondentes para topo e bottom. Visualize. Pode ser que esteja tudo fora de lugar e aí é que vem a dor de cabeça. Eu mesma não encontrei a receita mágica prá dar certo de primeira. Quando não dá, vou alterando os valores que estão em padding e margin até dar certo. Prá isso não tenho uma resposta pronta, eu mesmo apanho sempre. Por que? Porque a visualização no Firefox, geralmente, é perfeita de primeira, mas a porcaria (é, porcaria...) do Internet Explore tem a mania de acabar com a minha festa. Ou seja, tá lindo em um e tudo torto no outro. Prá conciliar ambos, leva uns bons minutos.
Gente, é isso. É muito simples, é mais uma enganação para os olhos. A imagem tá lá e não se vê por que ela tem a mesma cor do fundo. Se você cismar de mudar o background da página depois, tem que mudar as imagens. Não se esqueça de trocar a cor da sidebar pela cor que vc escolheu e colocou na imagem. Se você quiser preencher tudo com uma pattern por exemplo, é a mesma coisa, só que vai ter que ir lá no código da coluna da sidebar e colocar:
background: url('endereço da imagem do corpo da sidebar') repeat;
A imagem do 'corpo' da coluna óbviamente tem que ser a mesma que preenche as bordas, ok? Corte uma 'fatia fina' da pattern (ou imagem) que usou para as bordas, salve, hospede e coloque onde eu indiquei aí em cima.
Dúvidas nesta parte (onde tá esse código da coluna?) é só dar uma espiadinha no post sobre alterações nas colunas do template.
Sabia que ia sair um livro. Espero que tenham entendido, por que eu me acho a pessoa mais confusa do mundo prá explicar. Boa sorte à todos.
0 comentários:
Postar um comentário