Personalização do tema Luxeritas Child (style.css)
Luxeritas é um tema Wordpress doméstico, gratuito e altamente funcional.Neste blog, vou apresentar o conteúdo personalizado de style.css do tema filho.
Como editar o tema infantil Luxeritas
Existem duas maneiras de editar style.css
1. Insira diretamente em "Folha de estilo: style.css"
Tela de gerenciamento: Luxeritas → Editar tema infantil → Selecione a tag "style.css"
Digite o código depois de "/ * Escreva o estilo do tema infantil de acordo com sua preferência. * /".
2Insira em "CSS Adicional" para personalização de aparência
Tela de gerenciamento: Luxeritas → Personalizar (aparência) → CSS adicional
Recomendamos isso porque você pode ver o resultado de refletir o código ao mesmo tempo em que insere o código.
Style.css personalizado
Título do site em negrito
Para quem pensa que os personagens padrão são um pouco finos e a impressão é fina.
/ * Título do site * / #sitename {font-weight: bold;}
Adicione uma sombra sob o menu de faixa para fazer com que pareça um material
Há uma sombra sobre isso ...
Vai ser assim.É uma diferença sutil, mas a atmosfera do site muda inesperadamente.
/ * Shadow under global navigation * / #nav {box-shadow: 0 2px 10px rgba (0,0,0, .2)}
Cor do foco que não pode ser definida na personalização de aparência
A cor de foco padrão para títulos de artigos e artigos anteriores e seguintes é vermelho.Não acho que houvesse itens a serem alterados diretamente na personalização da aparência.
cor: Você pode alterá-la colocando-a no código de sua cor favorita abaixo.A propósito, "# 00b22f" é verde claro.Além disso, o título do artigo está em negrito para facilitar a leitura.
/ * Título do artigo * / .entry-title a: hover {cor: # 00b22f;} .entry-title {font-weight: bold;} / * Artigos anteriores e próximos * / #pnavi a: hover {cor: # 00b22f }
Cartão de blog para material design
Você terá um cartão de blog como este.Mova o cursor para torná-lo fofo.
/ * Design do cartão do blog * / a.blogcard-href {padding: 0px; min-height: 102px; box-shadow: 0 2px 5px rgba (0, 0, 0, .13); transição: .3s;} a. blogcard-href: hover {box-shadow: 0 4px 20px rgba (0,0,0,0.25); transform: translateY (-5px);} .blogcard-img {margin: 0px 10px 0 0; border: none} p .blog-card-title {margin: 5px 5px 5px 5px;} p.blog-card-desc {display: none;} p.blogcard-link {clear: none; margin: 5px 0 5px 5px;} tela apenas @media e (largura máxima: 430 px) {p.blogcard-link {display: nenhum;}}
Eu me referi à página seguinte.
Personalize o seu cartão de blog Luxeritas para fazê-lo flutuar como um SANGO
Alterar a cor de pagenação
Como o título do artigo, ele permaneceu vermelho e não pôde ser alterado na personalização da aparência. Está esmaecido com "# 999999".
.pagination> .active> span, .pagination> li> a: hover {background: none; background-color: # 999999;}
Quando você muda, fica assim ↓
Alteração do design da nuvem de tags
/ * Tag cloud design change * / .tagcloud a {border-radius: 3px; / * Round the corners * / padding-bottom: 1px; padding-left: 6px; padding-right: 3px; padding-top: 1px}
Arredondei os cantos da etiqueta para estreitar a largura da linha.
Margens removidas sob o título do artigo
Quando coloquei um anúncio do Google AdSense sob o título do artigo, fiquei preocupado que o espaçamento entre linhas antes e depois do anúncio parecia ser grande. Depois de remover a margem, consegui instalá-lo da forma mais compacta possível.
/ * Meta Informação (Atualizado) Remover margem inferior * / .meta, .post .meta {padding: 5px 0; margin-bottom: 0px;} / * Remover margem acima e abaixo do artigo * / .post- title-upper,. post-title-under {margin-bottom: 1px;}
É isso.
discussão
Lista de comentários
Ainda não há comentários