Neste tutorial vim ensinar a vocês diferentes maneiras se personalizar a barra lateral, eu arranjei tempinho para fazer o tuto, então vamos lá! Espero que gostem e comentem, por favor :).
1) Primeiramente, temos que retirar o fundo branco que fica nos modelos blogger, ele é feinho e estraga o template, sério. Então, procure por:
.main-inner .fauxcolumn-left-outer .fauxcolumn-inner {
e em baixo apague tudo que está após "background" até ficar assim:
background: ;Antes de irmos para o próximo passo, gostaria de mostrar outra maneira de fazer isso. Procure por
<Group description="Sidebar Background" selector=".column-left-inner .column-right-inner">você encontrará isto:
Group description="Sidebar Background" selector=".column-left-inner .column-right-inner">agora apague value="#ffffff" e ficará assim:
<Variable name="widget.outer.background.color" description="Background Color" type="color" default="transparent" value="#ffffff"/>
<Group description="Sidebar Background" selector=".column-left-inner .column-right-inner">2) Agora podemos prosseguir! :) Vamos customiza-la! Procure por: h2 { nele, iremos personalizar o título dos widgets. Apague tudo que estiver no seu h2 { e substitua por:
<Variable name="widget.outer.background.color" description="Background Color" type="color" default="transparent" value="transparent"/>
h2 { /****PERSONALIZAÇÃO DO TÍTULO DA SIDEBAR****/caso queira adicionar uma sombra no título, você também pode, é só adicionar:
font-family: tahoma; /*nome da fonte que quer usar*/
font-size: 10px; /*tamanho da sua fonte*/
color: #7541AE; /*cor da sua fonte*/
background: #ECDBFE; /*cor do plano de fundo do título do gadget, você pode deletar esta parte caso não queira*/
text-align: center; /*alinhamento do texto*/
border-top: 1px solid #AF64FF; /*adicionar borda no topo do texto*/
border-bottom: 1px solid #AF64FF;/*adicionar borda abaixo do texto*/
border-right: 3px solid #AF64FF; /*adicionar borda a direita do texto*/
border-left: 3px solid #AF64FF; /*adicionar borda a esquerda do texto*/
text-shadow: 1px 2px 2px #cordasombra;alterando os números, você altera o tamanho da sombra.
3) NUNCA se esqueça de fechar o "bloco" que você está, neste caso, editamos o "bloco" que personaliza o título da sidebar, no final devemos adicionar um "}" para poder fechar e continuar outra coisa. Caso queira adicionar alguma outra coisa no bloco, você deve sempre por acima desse "}" Então no final ficará assim
h2 { /****PERSONALIZAÇÃO DO TÍTULO DA SIDEBAR****/4) Agora que já personalizamos o título da sidebar, vamos personalizar a sidebar.
font-family: tahoma; /*nome da fonte que quer usar*/
font-size: 10px; /*tamanho da sua fonte*/
color: #cordafonte; /*cor da sua fonte*/
background: #ECDBFE; /*cor do plano de fundo do título do gadget, você pode deletar esta parte caso não queira*/
text-align: center; /*alinhamento do texto*/
border-top: 1px solid #cordaborda; /*adicionar borda no topo do texto*/
border-bottom: 1px solid #cordaborda;/*adicionar borda abaixo do texto*/
border-right: 3px solid #cordaborda; /*adicionar borda a direita do texto*/
border-left: 3px solid #cordaborda; /*adicionar borda a esquerda do texto*/
}
Procure por: /* Widgets e você encontrará .sidebar .widget { apague tudo debaixo dela e substitua por:
.sidebar .widget { /****PERSONALIZAÇÃO DENTRO DA CAIXINHA DA SIDEBAR****/Você também pode adicionar sombra na sidebar, quero dizer, caso a sua sidebar esteja fragmentada em caixinhas como no meu layout:
background: #FEFCFF; /*cor do fundo da sidebar*/
border: 1px solid #BCBCBC; /*borda da sidebar*
padding: 6px; /*AUMENTAR A CAIXA*/
font-family: tahoma; /*título da fonte que aparacerá NÃO no título! mas caso escreva algo ou até caso coloque um gadget de marcadores*/
font-size: 10px; /*tamanho da fonte*
}
Caso você use o modelo travel, e for editar, ele já vai vir separado. Alright, vamos adicionar a sombra. Quando você for adicionar sombra nas caixinhas de gadget, você terá que colocar esses três códigos, todos fazem a mesma coisa, mas eles servem para cada browser.
-webkit-box-shadow: 3px 3px 5px 6px #ccc; -> Safari | Chrome
box-shadow: 3px 3px 5px 6px #ccc; -> Firefox | Opera | Internet Explorer
Recomendo este guia maravilhoso falando mais sobre sombras de caixinhas, embora seja em inglês, dê uma olhadinha. Da para entender direitinho, ele mostra exemplos e como deixar o código para ficar igual.
5) Tem uma outra coisinha que eu queria mostrar sobre personalizar as caixinhas, é um código chamado outline e outline-offset. Este efeito você pode aplicar na área dos posts também.
outline-offset: -5px; /*tamanho do espaço de fora*/O efeito ficará assim:
outline: 1px dashed #FCA7B2; /*cor da borda tracejada que fica entre*/
Na primeira imagem, há uma borda tracejada e uma borda branca para fora, é como se a borda tracejada estivesse entre. Na segunda imagem, não tem isso, temos o fundo normal e a borda em volta, esse efeito, deixa uma borda entre, e acho esse efeito uma gracinha! :). Esse efeito você aplicará em .sidebar .widget {
6) Depois de ter terminado de editar o .sidebar .widget {, bem embaixo tem .sidebar .widget:first-child { e .sidebar .widget:last-child { eles são a primeira caixinha do gadget e a última caixinha, você terá que aplicar o mesmo código do background e borda neles.
Em
.footer-inner .widget,
.sidebar .widget {
faça a mesma coisa, mas colocando o mesmo código da fonte, cor e tamanho da fonte que aplicou em .sidebar .widget {
7) Não vamos nos esquecer do hover da sidebar. Ainda em /* Widgets, temos:
.sidebar .widget a:link { /*COR DOS LINKS/*
font-family: tahoma;
font-size: 12px;
color: #88CCE0;
text-decoration: none;
}
.sidebar .widget a:visited { /*COR DO LINK VISITADO, QUE A PESSOA JÁ CLICOU*/
font-family: tahoma;
font-size: 12px;
color: #88CCE0;
}
.sidebar .widget a:hover { /*COR DE QUANDO A PESSOA PASSAR O MOUSE SOBRE O LINK*/
font-family: tahoma;
font-size: 12px;
color: #EAB9FD;
text-decoration: underline;
Eu recomendo usar a mesma cor no a:link que no a:visited, porque quando a pessoa clica no link, fica uma cor diferente e acho isso muito, muitooooo feio xD, por isso eu só mudo a cor do hover mesmo. Em text-decoration, você pode usar underline, que fica uma linha embaixo do link, ou line-through, que fica uma linha cortando o link. Vou deixar aqui uma lista do que você pode por nessa opção.
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;
text-decoration: blink;
text-decoration: none;
text-decoration: underline overline;
8) Por útlimo, quero ensinar que você pode arredondar a sidebar adicionando o código:
border-radius: 6px; /*altera o número para aumentar o arredondamento da caixinha*/Acho que é só. Recomendo visitar esta página também. Futuramente irei estar postando modelos de menu como um freebies aqui, acho legal criar diferentes tipos de menu, embora eu tenha ensinado vocês a criarem o seu, vocês ainda podem usar um feito por alguém caso estejam com preguiça de fazer o de vocês ou simplesmente estejam sem ideias rs. Qualquer dúvida é só comentar pessoal! Espero que tenham gostado.
Nenhum comentário:
Postar um comentário