[Social Spirit] "Cheats" que podem te ajudar a criar um Style

Olá galerinha geek! Como estão?

Trago a vocês alguns "cheats" que podem te ajudar na hora de criar o seu Style. Todos eles são bem simples de serem usados, então não terá erro! 

Vamos lá?


O fundoBase

Vejo muita gente por aí com dificuldade para fazer essa parte do Style, sendo que não é tão complicado assim. Isso por que a imagem que vem junto com o modelo, às vezes, acaba nos confundindo - caramba, e como confunde! Quando comecei a fazer Style, no tempo que ainda era chamado de CSS, era a parte que eu mais apanhava. Hoje, é cinco minutinhos e tá pronto.

Mas como fazer tão rápido assim?

É simples: deixe a largura do fundoBase com 1000px e, se quiser, coloque bordas apenas nas laterais. Dessa forma, a base ficará com o mesmo tamanho do cimaLogo, deixando um aspecto mais bonitinho ao seu Style.

Caramba, é só isso? Bem, o verdadeiro cheat vem agora...

Se você editar o fundoBase como eu te falei, eleprovavelmente ficará assim:

Viram ali destacado de vermelho? Ficou assim por que a imagem do fundoSombra e fundoBase são diferentes uma da outra. Nesse caso, você tem duas opções: colocar uma imagem no fundoSombra igual ao do fundoBase ou, a mais fácil, usar a propriedade repeat.

Como o nome mesmo já fala, essa propriedade repete algo, no caso, a imagem. Mas se você usar somente a palavra, a imagem irá repetir tanto verticalmente quanto horizontalmente, e ficará feio. Por isso, você precisa colocar uma letrinha na frente para indicar para que lado você quer que repita:

Repeat-x: a imagem repetirá horizontalmente.

Repeat-y: a imagem repetirá verticalmente.

Nota: Para decorar, lembre-se dos gráficos de função que você aprende na escola: o x era sempre horizontal e o y vertical, certo? E pra quem não sabe do que estou falando, clique aqui para ver a imagem do gráfico. Não se preocupe, você ainda irá aprender essa belezura.

No caso, iremos usar repeat-y, por que queremos que a imagem se repita verticalmente.

#base {
background: url(img/fundoBase.jpg) repeat-y center top;
}

As propriedades center e top farão a imagem ficar centralizada e no topo da página. Elas também ajudarão visualmente no seu Style, portanto eu recomendo que as deixe aí mesmo, senão...

Xiiih... :( Melhor deixar o center top ali, né?

Continuando...

Salve suas modificações. Se você não mexeu em mais nada, a imagem do fundoBase se repetirá verticalmente, porém...

Mas o que é que aquela sombra faz ali? Eu não coloquei nada que tinha sombra... Calma, ela ficou ali por que você não apagou o fundoSombra. Para isso, é só você apagar o link referente à imagem do mesmo, assim:

body {
background: #DFDFDF url() repeat-Y center center;
}

Ou você poderia criar uma outra imagem como eu mencionei antes, mas isso é história para outro post... 

Salve suas modificações e veja como ficou. Nenhuma sombra? Ótimo, você aprendeu o primeiro e mais complicado cheat.Vamos para o próximo?

Sem bordas arredondadas

As bordas arredondadas com certeza são legais, mas convenhamos que, para certos temas, elas não ficam boas. O problema é que elas já são "padrão" da estrutura do site e não há como tirá-las... Ou será que tem?

Para deixar seu Style sem bordas arredondadas, você usará, também, a propriedade border-radius, porém, não colocará valores para ela, dessa forma:

.boxMenuDireito .textoMenuDireito{
        border:1px solid #EEE8E1;
        background-color:#FAF7F5;
        color:#838383;
border-radius: 0;
}

Salve as modificações. O resultado será:

Oh, mas por que isso aconteceu?

A estrutura do site já tem o comando border-radius como padrão, para que todas as "caixas" do site fiquem com as bordas arredondadas. O que você está fazendo é "anulando" esse comando, colocando outro por cima. 

Ah, mas por que você não usa o comando none ao invés de colocar o zero? Por que o none não é um valor, o zero sim. Ele ocupa um lugar, mesmo que nesse lugar não tenha nada. É um "guardador de lugar", segundo a Wikipédia :P Enfim, você está colocando um valor ali, e ponto. Com o none, você está dizendo que não quer que tenha nada naquele lugar, então o comando não irá valer.

E esse foi o segundo cheat. Próximo!

Separando Conteúdo box 1 e 2

Não sei vocês, mas eu não gosto daquela parte dos Dados do Usuário toda junta, principalmente com as bordas arredondadas. Então, sim, há uma forma de separá-las! Para isso, você vai usar o comando margin-top.

.boxConteudo .textoBg1, .boxConteudo tr.textoBg1 td {
background-color: #FAF7F5;
color: #5D5D5D;
        border:1px solid #EEE8E1;
margin-top: 10px;
}
.boxConteudo .textoBg2, .boxConteudo tr.textoBg2 td {
background-color: #E9E9E9;
color: #5D5D5D;
        border:1px solid #EEE8E1;
margin-top: 10px
}

É só você colocar o comando junto com um valor de pixels nos dois boxes. Salvo as alterações, visualize para ver se está de seu agrado. Pronto! o/

Personalizar Link em estado hover (quando passa o mouse)

Oh, esse aqui eu penei para aprender. E era muito mais fácil do que eu pensava!
Preciso dar os créditos ao grupo Styles pela ajuda. Foi lá que eu aprendi esse cheat.

Antes de começar, vou explicar o que vamos fazer aqui: sabe quando você passa o mouse ali no Livro de Visitas e a cor muda para preto com um traçado em baixo? É isso que vamos mudar!

Primeiramente, vamos tirar o traçado de todos os links da página.

Obs: Essa parte é opcional, ok?

Vá para a primeira parte do CSS, onde fica os Estilos de Todo o Site, e em seguida, adicione o que está em negrito abaixo nas tags correspondentes:

#meio span, #meio span a, .admin, .admin:hover, .ativo, .ativo:hover, .link {
        color:#D7575B;
text-decoration: none;
}

Aqui, você quis dizer que não quer que o texto tenha qualquer tipo de decoração. Uma outra opção é você colocar as opções dashed (traçado) ou dotted (pontilhado) no lugar de none. Nos Styles fofos fica uma graça! :)

Agora sim, vamos para a parte o hover.

Vá para o final do CSS, nos Elementos Condensados. Você adicionará uma nova tag, a a:hover, e será por causa dela que você conseguirá personalizar o estado hover do seu link.

a:hover {
color: #dcb1ff;
text-decoration: none;
}

Em color, você muda a cor da letra, e em text-decoration, bem, você já sabe. :)

Eai, deu certo? Que ótimo! Por que os cheats terminam por aqui. Fáceis, né? E vão te ajudar muito quando estiverem criando o seu próprio Style.

Espero que tenham gostado das dicas! Dúvidas? É só comentar aqui em baixo, ok?

Até mais.