A aparência do seletor é configurada no plugin do WordPress, não no painel do Universally. Dez configurações cobrem cores, bordas e raio; qualquer coisa além delas é feita com variáveis CSS em vez de CSS de tema comum.
Antes de começar
No WordPress, vá para Universally no menu de administração. O item Universally na barra de administração abre o mesmo local.
Isso se aplica apenas a projetos WordPress. Em outras plataformas, ainda não há configuração de seletor. Se você estiver em outra plataforma e precisar de um seletor agora, crie um contra a API: veja Crie um seletor de idioma personalizado no WordPress para a abordagem, que se adapta a qualquer stack.
Onde estão as configurações
O plugin tem quatro abas: Geral, Seletor de Idioma, Estilização e Preferências. Duas importam aqui:
| Aba | Contém |
|---|---|
| Seletor de Idiomas | como o seletor é inserido, onde ele fica e o que ele exibe |
| Estilização | cores, bordas e raio de canto, para o gatilho e o dropdown separadamente |
Aba Seletor de Idioma
| Configuração | Opções |
|---|---|
| Implementação | Automático, que insere o seletor para você sem código, ou Personalizado, que fornece um shortcode para colocar em seu tema |
| Posição | onde um seletor Automático fica: Canto Inferior Direito, Canto Inferior Esquerdo, Canto Superior Direito ou Canto Superior Esquerdo. Todos os quatro flutuam acima da página. Ignorado quando a Implementação é Personalizada |
| Nomes de Idiomas | mostrar ou ocultar o nome do idioma |
| Bandeiras de País | mostrar ou ocultar a bandeira |
| Estilo da Bandeira | Arredondado ou Quadrado |
Escolha Salvar Alterações quando terminar.
Nomes de Idioma e Bandeiras de País são alternâncias independentes, então um seletor apenas com bandeiras ou apenas com texto é uma questão de desativar um deles.
Aba Estilização
Duas seções, cinco configurações cada.
Estilização do Gatilho é o seletor fechado que um visitante vê primeiro:
| Configuração | Tipo |
|---|---|
| Fundo | cor |
| Cor do Texto | cor |
| Cor da Borda | cor |
| Borda ao Passar o Mouse | cor, usada quando o ponteiro está sobre o seletor |
| Raio da Borda | 0 a 24px, padrão 6 |
Estilização do Dropdown é a lista aberta:
| Configuração | Tipo |
|---|---|
| Fundo | cor |
| Cor do Texto | cor |
| Cor da Borda | cor |
| Fundo do Item ao Passar o Mouse | cor, usada no idioma sob o ponteiro |
| Raio da Borda | 0 a 24px, padrão 6 |
Cada seletor de cor oferece uma paleta de amostras e uma ação Limpar para voltar a nenhuma cor, o que mantém o padrão do seletor.
Além das opções integradas
O seletor integrado é um elemento personalizado que renderiza seu próprio conteúdo em uma shadow root. Isso tem uma consequência prática: o CSS do tema não pode estilizar o interior dele. Uma regra direcionada a uma classe dentro do seletor não encontra nada e falha silenciosamente.
Duas coisas o alcançam.
O próprio elemento. universally-switcher é um elemento comum em sua página, então seu tema pode posicioná-lo:
universally-switcher {
display: block;
margin: 0 auto 1rem;
}
Variáveis CSS. Estas são lidas pela própria folha de estilos do seletor e cruzam a fronteira da sombra, então defini-las em seu tema funciona. Os quatro marcados como *sem configuração* não têm equivalente na aba Estilização, e são o motivo para usar variáveis.
| Variável | Padrão | Também uma configuração |
|---|---|---|
--universally-font-size |
14px |
sem configuração |
--universally-trigger-padding |
8px 12px |
sem configuração |
--universally-trigger-bg |
#fff |
Fundo |
--universally-trigger-text |
#1a1a1a |
Cor do Texto |
--universally-trigger-border |
#ddd |
Cor da Borda |
--universally-trigger-border-hover |
#999 |
Borda ao Passar o Mouse |
--universally-trigger-radius |
6px |
Raio da Borda |
--universally-dropdown-bg |
#fff |
Fundo |
--universally-dropdown-text |
#1a1a1a |
Cor do Texto |
--universally-dropdown-border |
#ddd |
Cor da Borda |
--universally-dropdown-hover-bg |
#f5f5f5 |
Fundo do Item ao Passar o Mouse |
--universally-dropdown-radius |
6px |
Raio da Borda |
--universally-dropdown-shadow |
0 4px 12px rgba(0,0,0,0.1) |
sem configuração |
--universally-focus |
#0073aa |
sem configuração |
Defina-os no elemento, ou em :root para abranger todas as instâncias:
universally-switcher {
--universally-font-size: 16px;
--universally-trigger-padding: 10px 14px;
--universally-dropdown-shadow: none;
--universally-focus: #7c3aed;
}
Um valor definido na aba Estilização é escrito diretamente no elemento, então ele substitui a mesma variável declarada em sua folha de estilo. Limpe a configuração se quiser que o CSS prevaleça. Os dois valores de raio são a exceção: eles são sempre escritos no elemento, então altere-os na aba Estilização em vez de no CSS.
Crie o seu próprio. Se o seletor precisar ser uma linha de abas, uma lista vertical ou qualquer coisa estruturalmente diferente, renderize-o você mesmo a partir dos mesmos dados que o plugin usa. Veja Crie um seletor de idioma personalizado no WordPress.