Melhor maneira de personalizar a formatação do texto do link?

Dev
1

Qual é a melhor maneira de personalizar a formatação do texto do link? Parece que editar o CSS não é a melhor abordagem, pois as alterações serão perdidas quando o plugin for atualizado.

40
401738×632 42.5 KB

Gostaria de deixá-lo em negrito e alterar a cor do texto para combinar com o tema do site, o que ajudará a integrá-lo melhor.

No momento, o link aparece assim:

03
03778×104 16.7 KB

E eu gostaria que ficasse assim:

39
39802×114 16.2 KB

Seria útil poder personalizar o texto dependendo do tema também. Tenho um tema escuro e um tema claro, com fontes de cores diferentes para cada um. Gostaria de definir a cor do texto para combinar com o tema.

2

Você precisa criar um novo componente de tema com suas alterações e depois adicioná-lo no mesmo tema principal onde estão os Links de Cabeçalho Personalizados.

3

Obrigado! Já fiz isso agora e funcionou perfeitamente.

Por curiosidade, como o site decide qual CSS usar? Se o componente de tema padrão contém CSS que define a cor da fonte para $header_primary -

.headerLink {
  list-style: none;
  a {
    padding: 6px 10px;
    color: $header_primary;
    font-size: $font-up-1;
  }
}

como ele sabe usar o CSS do meu novo componente em vez disso?

.headerLink {
  list-style: none;
  a {
    color: #7A7A7A;
  }
}
4

Olá @Johani — isso ainda é o caso? Minha instância parece relutante em adotar a cor $header_primary, e curiosamente, mesmo quando defino $primary para a cor que quero (branco), ela permanece teimosamente preta :upside_down_face: !

Screenshot 2021-02-06 at 14.16.12

5

Provavelmente está relacionado à mudança de SCSS para variáveis CSS para declarações de cores. A atribuição de $header_primary no CSS personalizado não funciona, mas se você usar

.custom-header-links .headerLink a {
    color: var(--header_primary);
}

a cor é aplicada corretamente.

6

Essa solução não funcionou para mim. Você está adicionando isso ao CSS personalizado do tema?

7

Sim, foi exatamente isso. O componente agora usa a propriedade personalizada do CSS, o que deve resolver o problema para você, @Daniel_R. Você só precisa atualizar o componente.