Personalização do tema Luxeritas Child (style.css)

2019 ano 5 mês 11 dia

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"

Folha de estilo: digite diretamente em 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

Insira 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 ...

Menu de tira do Luxeritas: sem sombra

Vai ser assim.É uma diferença sutil, mas a atmosfera do site muda inesperadamente.

Menu de tira do Luxeritas: com sombra

/ * 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.

Cartão de blog

/ * 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.

Design de tag

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.