6.8.14

Tutorial: Letras maiúsculas no seu Style do Social Spirit



Olá, Lírios! Como estão?

Gostaram do novo layout do LE? *-* Eu particularmente amei, mesmo não gostando muito de rosa. Estou aceitando sugestões de músicas para colocar na playlist, tá?

Bem, chega de enrolação, vamos ao que interessa.

Vamos aprender mais uma dica de personalização para seu perfil do Social Spirit ;) O tutorial ficou extenso, mas juro que não é difícil, é só ter muita atenção, principalmente quanto ao 'ponto e vírgula'.


Bem, vocês já devem ter visto algum Style com letras maiúsculas no conteúdo ou nos títulos dos menus que ficam certo? Hoje vamos aprender a fazer isso.

O código que você usará para fazer isso é esse:

text-transform: uppercase;

Para todo o conteúdo do site, copie o código destacado acima e procure por a, body { (para facilitar sua procura, aperte CTRL+F e digite o que deseja) em seu arquivo modelo. Cole o código abaixo dele.


Salve as alterações em Arquivo > Salvar ou apertando CTRL + S. Abra a página Perfil e confira o resultado:



Agora, voltamos para o início do seu arquivo css, nos Estilos da parte de cima do site.

Para deixar apenas os links com letra maiúsculas, procure por .ativo:hover, .link { e cole o código abaixo dessas tags.


Salve e confira o resultado.



No menu, infelizmente, eu não consegui colocar letras maiúsculas :( Isso por que houve um conflito entre as linhas do CSS, onde o comando do link se sobrepôs com o comando do menu, prevalecendo o primeiro. Há um código para resolver esse conflito, mas por algum motivo não está funcionando. Se alguém souber, por favor me fale, sim? <3 Eu também vou pesquisar mais sobre isso, e assim que eu descobrir como resolver, irei atualizar esse tutorial ;)

Agora, vamos para o submenu.

Procure em seu arquivo modelo.css a tag #secaoNav e cole o código na linha abaixo, logo depois das chaves:


Salve suas alterações e abra a página Perfil para visualizar.


A próxima tag é a #secaoNav, #secaoNav a, ou seja, o efeito hover, aquele que muda a cor quando você passa o mouse. Se você já colocou o código no #secaoNav, não é necessário colocar nesse novamente. Vocês também podem optar em fazer outros tipos de alterações, como cores ou tamanhos de fonte. Aqui vai um print para vocês terem uma noção do que irá mudar caso decidam editar essa parte do seu Style, destacado de verde:


Vamos agora para os Estilos da parte de baixo do site, ou seja, o rodapé.

Em seu arquivo modelo.css, use o mecanismo de procura e busque por #baixo { . Cole o código logo abaixo dessa tag e salve.


O resultado será esse:


A tag #baixo a{ também é o efeito hover, ou seja, a mesma situação que a tag #secaoNav, #secaoNav a citadas anteriormente. Não é necessário modificar.

Vamos ver agora os Estilos do Menu Direito do site. Procure por .boxMenuDireito .tituloMenuDireito { e cole o código abaixo dele.


Nessa parte, você irá deixar apenas o título do menu direito em maiúsculo. 

Salve as suas alterações. O resultado será esse:


A próxima tag é .boxMenuDireito .textoMenuDireito{ . É após ela que você precisa colocar o código para que o conteúdo do Menu Direito fique em letras maiúsculas.


Salve suas alterações. O resultado será esse:


Se quiser que os dois fiquem com letra maiúscula, basta colocar o código nos dois.

Calma gente, tá quase acabando. :) Mas até aqui está tudo bem, não é? Afinal, é só copiar e colar. :D

Ok, agora vamos para a última parte, os Estilos que pertencem ao Conteúdo do Site.

Procure por #quote { e cole o código logo abaixo dele. Essa parte irá modificar o estilo das caixas do seu Livro de Visitas.


Salve suas alterações. O resultado será esse:


A próxima tag é bem grande. Ela modificará os títulos do conteúdo do site, ou seja, onde fica o seu nick e o título dos jornais. Procure pela tag .boxConteudo h2 a { e cole o código abaixo dela.


Salve suas alterações. O resultado será esse, destacado em verde:


Para a próxima parte, preciso explicar algo. O conteúdo do perfil do Social Spirit é dividido em duas partes, uma sendo composta pela área das informações pessoais, dos jornais e de uma parte dos Dados do Usuário, a outra sendo a outra parte dos Dados do Usuário. É essa divisão que permite dar o efeito de "cor sim, cor não" na parte dos dados no fim do perfil.

Procure por textoBg1 td { e cole o código abaixo dessa tag.



Salve as alterações. Veja como ficou:



Agora procure por textoBg2 td { e cole o código abaixo dele.


Salve suas alterações e veja o resultado:



Procure agora pela tag .boxConteudo .baixo { e cole o código abaixo dela.


Essa parte corresponde ao menu que fica abaixo das informações do seu perfil e a paginação. Salvando as alterações, o resultado será esse:



Dica extra: Em .boxConteudo .baixo a { , que seria a próxima tag, mude o valor de font-size para um número menor (de preferência usar 11px). Desse jeito, o seu menu diminuirá e não ultrapassará o limite da página.

Pronto, Lírios! O tutorial chegou ao fim. Espero que tenham entendido tudo, mas caso tenha alguma dúvida, é só perguntar.  Um agradecimento especial ao HTML.net e ao Maujor que me ajudaram nesse tutorial. :D

Até mais!


6 comentários:

  1. Ai lay está lindo *-*
    E eu adorei o tutorial. Adores!

    ResponderExcluir
    Respostas
    1. Oi, kednaa! Fico feliz que tenha gostado! *-* Obrigada pela visita!

      Excluir
  2. Olá <3 Você tem outros códigos, tipo o de deixar as fotos de perfil redondas, ou algum desse style? http://socialspirit.com.br/personalizar/style/originais-feito-sob-medida-para-sentir-2141768

    ResponderExcluir
    Respostas
    1. Olá, Bruna!
      Uau, que style INCRÍVEL! Eu não tinha o visto ainda. Tem um jeitão de tumblr, não? Adorei!

      Infelizmente, não sei fazer o menu dessa forma. Irei pesquisar sobre. Também terei que pesquisar sobre as imagens arredondadas. Postarei um tutorial assim que conseguir. :D

      Obrigada pela visita!

      Excluir
  3. Oie ,por acaso você sabe como fazer aquele "efeito" ( n sei bem se é um efeito) de que as fotos ( tipo onde mostra amigos e tal, desculpa n sei o nome) estão em preto e branco e quando se passa o mouse ficam coloridas? eu ja vi vários styles assim mas n consigo achar como se faz TT

    ResponderExcluir
    Respostas
    1. Oi, Duda!

      Eu tenho uma ideia de como faz, mas nunca testei. Vou pesquisar e depois trago pro blog ;)

      Obrigada pela visita, volte sempre!! ^-^

      Excluir

Related Posts Plugin for WordPress, Blogger...