Alterar a opacidade da caixa do banner?

Dev
1

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

2 curtidas
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)

2 curtidas
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)

2 curtidas
4

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

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

Não funciona. Ele remove completamente a cor.

1 curtida
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);
}
3 curtidas
7

Incrível, funcionou, obrigado!

3 curtidas
8

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.