5 Códigos CSS super simples para ajudá-lo a personalizar seu site WordPress
CSS é difícil!
Som como algo que você possa dizer? Você não estaria sozinho. CSS (ou Cascading Style Sheet) é uma linguagem de codificação que pode ser um bebezinho difícil de se lidar.
No entanto, dizer que CSS é difícil é um pouco duro. Como qualquer linguagem, CSS pode ser um pouco complicado de entender no início, mas uma vez que você entende o básico, as coisas começam a cair no lugar.
A melhor maneira de aprender CSS é entender o que é e como funciona. Então, você pode aprender alguns trechos básicos de código para ajudá-lo a entender um pouco mais essa compreensão inicial e você estará fora do projeto em pouco tempo!
Nosso post vai fazer exatamente isso.
O que é CSS?
Seguro, CSS significa Folha de Estilo em Cascata, mas todos vão lhe dizer isso. No entanto, isso não ajuda muito, pois não?
Há uma maneira mais fácil de entender o que é.
Pense no HTML como a moldura de uma casa, e no CSS como a pintura para o exterior. Quando você pinta o acabamento da casa, ou mancha o deck frontal, isso muda a moldura da própria casa?
Não, não muda. Em vez disso, apenas muda a aparência das coisas. A fundação e a moldura da casa permanecem as mesmas.
É isto que o CSS é.
Altera a aparência do seu site, mas não perturba a fundação ou núcleo da casa.
Todas as casas têm tinta. Cada tema do WordPress usa CSS.
Alguns trabalham juntos para criar um site e você pode usar alguns trechos de código CSS bastante simples para mudar aquela “pintura” tão chamada do seu tema.
Na verdade, você pode ficar surpreso como é fácil.
Simple CSS Edit One: Editing Font Type And A Quick Lesson On Writing Code
Ao usar um tema como o Genesis Framework, mudar algo tão simples na fonte usada no seu site precisa de algum CSS. Mas não se preocupe. Realmente não é tão difícil de fazer.
Para fazer qualquer mudança no CSS do seu tema, você vai precisar primeiro de uma área CSS personalizada para fazer esses ajustes. Não altere a Stylesheet que vem embutida no seu tema.
Em vez disso, use um plugin como a opção Custom CSS que vem carregada no Jetpack. Qualquer alteração no CSS que você fizer ali irá substituir o CSS pré-determinado do seu tema.
Antes de editar a fonte, você precisa descobrir qual área você quer editar.
Existem 7 áreas principais que você pode editar sua fonte:
- Todos os 6 tipos de fonte do cabeçalho
- A fonte do corpo
A marcação da tag para estes é simples. Por exemplo, se você quiser editar a fonte Heading 1 que aparece no seu site, você usaria a tag, h1. Se você quisesse mudar a fonte do Heading 2, a tag seria, h2 e assim por diante.
Aqui está um exemplo de como escrever código CSS para mudar a fonte do Heading 1:
h1 { font-family: 'Georgia'; }
Agora é verdade, você poderia tentar copiar e colar isso, mas eu quero que vocês entendam melhor como isso realmente funciona.
A primeira parte escrita (h1) é o assunto que você deseja mudar. Este símbolo ({ ) abre sua linha de código e este ( } ) fecha.
Ok, ok.
Isto provavelmente ainda soa confuso, mas quando eu estava aprendendo CSS eu ensinei a mim mesmo um truque útil para lembrar de como escrever CSS corretamente. Assim:
h1 {abre a porta do seu armário
Em busca de algo para mudar: Ele encontra o que quer’;
E depois fecha a porta}
Voltar no tópico; aqui está outro exemplo de como você pode fazer mudanças na sua fonte.
body { font-family: 'Arial'; }
Ao mudar o elemento de h1 para corpo, eu agora disse à Stylesheet que quero mudar a fonte do corpo que aparece nos posts e páginas para a fonte Arial.
Isso é bem simples, certo?
Se o seu tema estiver ativado no Google Font, você pode até usar as fontes de lá no seu site também.
Simples CSS Edit Two: Edit Font Color
Este pequeno truque do CSS é uma boa maneira de mudar a cor da fonte do seu menu ou a cor da fonte do corpo. Como os trechos de código escritos acima, basta um par de linhas curtas de código para realmente mudar as coisas.
Dizer que quero mudar a cor da minha fonte Heading 2 para algo diferente. Eu posso fazer isso seguindo um esquema similar ao que fizemos antes (lembra-se da história?) mas com as linhas principais do código mudaram um pouco. Assim:
h2 { color: #4f4f4f; }
Nota que o assunto é definido como h2 e ainda temos as tags de abertura e fechamento ({}), entretanto, a maneira como o código é escrito é um pouco diferente da acima quando escrevemos o código para uma mudança de fonte.
Não é como a fonte que precisava ser fechada entre parênteses, (‘ ‘) o elemento de cor hexadecimal não precisa disso.
Agora, você não precisa escrever código para o mesmo assunto uma e outra vez para mudar certos aspectos do mesmo. Você pode combinar o código para esse mesmo assunto para tornar as coisas mais fáceis de encontrar e mudar no futuro. Por exemplo, você pode combinar Font e Font Color na mesma linha de código.
body { font-family: 'Roboto'; color: #4f4f4f; }
Ver como eu fiz isso?
Eu tenho duas linhas de código dentro da mesma linha de assunto. Quando você precisar fazer múltiplas alterações em um único assunto, escreva o código assim economizará seu tempo. Apenas certifique-se que fecha essas linhas de código individuais com um ponto e vírgula (;) antes de passar para a próxima linha.
nota: para ajudar a lembrar de fazer isso, pense no ponto e vírgula como um ponto no final da frase. Você nunca termina uma frase sem um ponto final. Nunca termine uma linha de código é CSS sem um ponto e vírgula.
Simples CSS Edit Three: Background Color, and A Browser Tool You Didn’t Even Know Your Had
Editar a cor de certas coisas no seu site é outro truque CSS super fácil. Tudo o que você precisa saber é um elemento ou assunto que você gostaria de mudar.
Uma ferramenta útil que muitos designers usam – eu incluído – é a ferramenta Inspect Element do nosso Navegador Google. Isto também é fantástico para tentar encontrar o assunto certo para mudar e definir.
Para descobrir isso, basta clicar duas vezes com o rato para puxar as opções como pode ver abaixo. Selecione Inspect Element, e agora você pode pesquisar os elementos editáveis do seu site.
>>5666>
Ver esta imagem aqui?
>
Eu tenho um item de menu destacado em uma cor diferente do resto do meu menu para ficar de pé. Para fazer isso, eu usei minha Ferramenta Elemento de Inspeção para descobrir o nome correto para eu editar.
>
>
Agora ao rolar sobre os itens do menu, o nome do código real que é dado aparecerá nos meus destaques. O que eu mudei tinha o nome de: #menu-item-473 (Pode ver que esse é o nome dele na caixa amarela. Seu nome é destacado em azul.)
Esse é o nome do assunto que eu queria mudar. Para mudar a cor de fundo desse item de menu, inicio a linha com o nome e declaro que quero mudar o fundo, assim:
#menu-item-473 { background-color: #D65050; }
Again, começo por dizer à Stylesheet o assunto que quero mudar (#menu-item-473) e depois digo-lhe o que mudar (cor de fundo) e o que mudar para (#D65050).
O que quer que você decida mudar o fundo de terá um nome diferente deste, mas felizmente, a opção Inspect Element no seu navegador tornará muito mais fácil encontrá-lo.
Outra coisa incrível sobre a Ferramenta de Elementos de Inspecção do Google é que você pode editar as coisas em tempo real para acertar as coisas, e então você pode copiar e colar todo o seu trabalho de edição a partir daí, na sua Folha de Estilo Personalizada CSS. Falando de economia de tempo!
Simples CSS Edit Four: Float
Por vezes, é bom poder fazer algo um pouco diferente com o seu menu principal ou widgets pré-definidos no seu site. Talvez você gostaria de pegar, um item do menu e colocá-lo mais à direita do que nos outros itens, como eu fiz com o menu acima. (Também ilustrado abaixo em largura total.)
Para fazer isso, você pode usar o código Float snippet para fazer exatamente isso. Como os passos acima, você deve usar a ferramenta Inspect Element Tool para encontrar o nome do assunto que você deseja mudar. O que está aqui ilustrado é o mesmo que o mencionado acima. (#menu-item-473)
Para que este item se mova, mas mesmo assim fique bonito na tela de um celular, este é o código que escrevi:
#menu-item-473 { background-color: #D65050; float: right; }
Foi muito fácil. Agora eu tenho um item de menu que se destaca, o que eu precisava que ele fizesse. Você também pode aplicar isto a outras coisas além dos seus itens de menu.
Por exemplo, se você tem um widget que gostaria de reposicionar, você pode usar o float: right; ou float: left; code snippet to change where the widget is display.
Leva algum tempo e ajustes, mas CSS torna-se mais fácil de usar quanto mais tempo você brincar com ele.
Simple CSS Edit Five: Alinhar texto
Alinhar seu texto é algo que você pode fazer em um post, claro. Mas e os títulos dos seus widgets, ou algo parecido?
Você pode usar este código CSS para alinhar facilmente o título do seu texto widget.
Utilizo o Genesis Framework para os meus sites, e este é o código necessário para alinhar os títulos dos meus widgets:
.footer-widgets .widget-title { text-align: center; }
O elemento ou nome do assunto no seu tema pode ser ligeiramente diferente disto, mas você tem a idéia.
Este pequeno código vai manter meu texto nos títulos dos widgets no rodapé, e como eu proclamo os .footer-widgets junto com o .widget-title, apenas os títulos de rodapé com centro.
Então é isso! 5 maneiras super simples de editar seu tema usando CSS! CSS é como qualquer outra linguagem. É difícil no início, mas uma vez que você ultrapassa aquele hump inicial de compreensão, é uma brisa.