Alterar a opacidade da caixa do banner?

Dev
1

É possível alterar a opacidade da caixa do banner?

2

@JamesDb

Usando a configuração de tema banner_box_background_color, você pode inserir um valor rgba(). Você pode usar um gerador como este e copiar e colar o valor RGBA para essa configuração.

Alternativamente, você pode adicionar um CSS personalizado ao seu tema para aplicar a propriedade opacity:

.below-site-header-outlet.welcome-link-banner-connector .welcome-wrapper {
    opacity: 0.5; // use um valor entre 0 e 1
}

Embora a abordagem CSS acima altere a opacidade do conteúdo também (tornando a opacidade do texto reduzida)

3

Existe uma maneira de manter a variável, por exemplo, var(--secondary), mas adicionar uma opacidade a ela?

Porque eu quero que ela se adapte ao modo claro e escuro

Editar: Eu já tentei rgba(var(--secondary), 0.5)

4

Acredito que isso deva funcionar (embora eu não tenha testado):

rgba(--var(--secondary-rgb), 0.5)
5

Não funciona. Ele remove completamente a cor.

6

Hmm, entendi o porquê. O código precisa usar a propriedade background-color para isso, mas ele usa background.

Se você adicionar isso ao CSS do seu tema, deve funcionar:


.below-site-header-outlet.welcome-link-banner-connector .welcome-wrapper {
    background-color: rgba(var(--secondary-rgb), 0.5);
}
7

Incrível, funcionou, obrigado!