Códigos para styles (spirit)
Autor: Kimmi | Publicado: 2015-01-13T11:51:00-08:00









&nbsp; &nbsp;Helou helou! Primeiramente, gostaria de me desculpar. Eu tentei muito ser alguém mais organizada, tentei fazer uma agendinha para o blog, mas essas coisas simplesmente não dão certo pra mim. Eu sou meio bagunçada, não cumpro prazos, e as postagens, pra mim, tem que fluir naturalmente, da ideia que tenho no momento. Ainda quero fazer aquela megapost de tutorial, só não sei quando, realmente, não esperem muito de mim, sou o ser mais preguiçoso que vocês conhecem.

&nbsp; &nbsp;&nbsp;Bom, deixando de lado as desculpas (com as quais eu inicio todo santo post), vamos explicar essa postagem: Após os tutoriais sobre como fazer styles, eu tenho recebido muitos comentários (cerca de três por semana desde a publicação). Mas, bem, isso é bom, não é? Claro, é ótimo, maravilhoso, é incrível receber esse feedback. O problema é que existe uma grande porcentagem de perguntas que se repetem, &nbsp;mais de cinco ou seis vezes, dependendo da pergunta.

&nbsp; &nbsp; Não quero dizer que estou irritada com vocês (eu nunca ficaria, afinal, vocês são meus bebês ♥), no entanto, para poupar vocês (e a mim, dã) do trabalho de perguntar algo que já... Foi perguntado (e responder algo que já foi respondido), vou colocar aqui, algo como uma f.a.q de códigos. Let's gogogo!




1. Como colocar feito de opacidade nas imagens dos menus direitos? (as cores são mais claras, e quando você passa o mouse, ficam normais)

r:&nbsp;insira o código abaixo, logo após o elemento .boxMenuDireito {


.boxMenuDireito img {
opacity: 1.75;
-moz-opacity: 1.75;
filter: alpha(opacity=1.75);
-webkit-filter: opacity(1.75);
}

.boxMenuDireito img:hover {
opacity: 0.75;
-moz-opacity: 0.75;
filter: alpha(opacity=75);
-webkit-filter: opacity(0.75);
-webkit-transition: filter 1s;
-moz-transition: filter 1s;
}

*para mudar o tempo de transição entre a imagem com o efeito de opacidade e a imagem com as cores normais, mude todos os 1s, para o número desejado (eu recomendo 0.6s)

2. Como centralizar o menu de perfil, amigos, atualizações e etc?

r: dentro de .boxConteudo .baixo { adicione a linha border-left: 100px solid #111111;.&nbsp;O código vai ficar mais ou menos como esse. Altere o #111111 para a cor do seu fundobase.


.boxConteudo .baixo {
 background-color: transparent;
 color: #030303;
&nbsp; &nbsp; &nbsp; &nbsp; border-left: 120px solid #111111;
}
*eu sei que o código utilizado para centralizar textos no css é o text-align, mas em todos os meus styles, pelo menos, ele parece não funcionar (creio que não seja minha culpa, afinal é praticamente impossível cometer o mesmo erro em todos&nbsp;os styles, então arranjei um método meio de centralizar esse menu. Não sei se o mesmo problema ocorre com outras pessoas, mas eu não faço mais muitos styles mesmo (depois de ter me indignado com o spirit pelo mesmo ter excluído um de meus códigos pela terceira vez, somente pela falta da minha assinatura no banner e um pixel a mais em tal)

3. Como fazer as imagens à direita do style 'rodarem'? (efeito rotate)

 r: Após o elemento .boxMenuDireito {, cole o seguinte código


.boxMenuDireito img:hover { 
-webkit-transform: rotate(360deg); 
-moz-transform: rotate(360deg); 
transform: rotate(360deg); 
-webkit-transition: transform 1s; 
-moz-transition: transform 1s; 
-o-transition: transform 1s; 
transition: transform 1s; 
}

*para mudar o tempo de transição entre a imagem com o efeito de opacidade e a imagem com as cores normais, mude todos os 1s, para o número desejado (eu recomendo 0.6s).

4. Meu banner (cimalogo) fica cortado, o que eu faço?

 r: Pressione ctrl + f e procure por 120px, altere o 120 para o número de pixeis que tem a altura do seu banner (lembrando que o máximo permitido é 350px)

5. Como deixar as imagens do à direita do style redondas/como mudar o tamanho delas?

 r: Abaixo do elemento .boxMenuDireito {, cole o código

.boxMenuDireito img {
border-radius: 100px;
height: 50px;
width: 50px;
}

*Os números em negrito definem o tamanho da sua imagem, sendo, respectivamente, altura e largura. Para apenas deixar as imagens redondas, sem alterar seu tamanho, apague "height: 50px; width: 50px;"

 6. Como mudar o tamanho da fonte do menu de Perfil, atualizações, favoritos, etc?

 r: Abaixo do elemento .boxConteudo .baixo {, cole o seguinte código:

#boxUsuario ul li a {font-size: 10px!important;}

7. Como mudar o botão 'adicionar'?

 r:&nbsp;Abaixo do elemento .nav {, cole


#nav .btn {
margin-top: -5px!important;
text-transform: uppercase;
font-size: 6.5px!important;
letter-spacing: 1px;
font-family: tahoma!important;
font-weight: bold;
color: #adadad!important;
background: #f3f3f2;
padding: 5px!important;
border-radius: 0px!important;
}

#nav .btn a:hover {border:0px;}

#nav .btn-primary {
margin-top: -5px!important;
padding: 5px!important;
text-transform: uppercase;
font-size: 6.5px!important;
letter-spacing: 1px;
font-weight: bold;
font-family: tahoma!important;
color: #b9dae1!important;
background-color: #000!important;
}

#nav&gt;ul&gt;li&gt;div&gt;ul.dropdown-menu&gt;li&gt;a {
margin-top: -5px!important;
padding: 5px!important;
text-transform: uppercase;
font-size: 6.5px!important;
letter-spacing: 1px;
font-weight: bold;
font-family: tahoma!important;
color: #b9dae1!important;
background-color: #333333!important;
-webkit-transition: All 0.2s linear!important;
-moz-transition: All 0.2s linear!important;
-o-transition: All 0.2s linear!important;
transition: all 0.2s linear!important;
}

#nav&gt;ul&gt;li&gt;div&gt;a.btn span { color:#ffffff!important; }

.btn-group&gt;.btn:first-child {
margin-left: 0;
-webkit-border-bottom-left-radius: 0px;
border-bottom-left-radius: 0px;
-webkit-border-top-left-radius: 0px;
border-top-left-radius: 0px;
-moz-border-radius-bottomleft: 0px;
-moz-border-radius-topleft: 0px;
}

♥




&nbsp; &nbsp; &nbsp; É isso, meus chuchus, espero que tenha ajudado. Se ainda te restou alguma dúvida, pode perguntar nessa postagem mesmo. Lembrando que eu vou tentar ajudar ao máximo, mas pode ser que eu esteja desatualizada nos códigos dos modelos do spirit, porque eu passei a dar foco maior a produção de layouts para blogger.