Como usar CSS para banner versátil

Suporte
1

Gostaria de alterar a cor dos itens Expandir e Fechar no banner. Presumo que isso possa ser feito com CSS. Mas como fazer isso para o componente do banner?

1 curtida
2

Aqui está como você pode fazer isso:

  1. Abra a Ferramenta de Inspeção:
    Navegue até a página da web onde o banner versátil está ativado. Clique com o botão direito em qualquer lugar da página e selecione “Inspecionar” (ou pressione Ctrl + Shift + I no Windows ou Cmd + Option + I no Mac). Isso abrirá as ferramentas de desenvolvedor do navegador.

  2. Localize o Banner:
    Na aba Elementos das ferramentas de desenvolvedor, passe o mouse sobre várias seções do código para ver as partes correspondentes da página da web destacadas. Assim que encontrar o banner, clique no <div> mais externo que contém o banner. Isso garante que você está selecionando o banner inteiro e todos os seus elementos.

  3. Explore os Elementos:
    Com o banner selecionado, você agora pode ver todos os elementos HTML aninhados dentro da estrutura do banner na aba Elementos. Isso mostra a hierarquia do HTML usado para criar o banner.

  4. Inspecione os Estilos:
    No lado direito das ferramentas de desenvolvedor, você encontrará a aba Estilos. Ela exibe os estilos CSS aplicados ao elemento selecionado. Você pode visualizar estilos herdados, estilos inline e estilos de folhas de estilo externas.

  5. Experimente com Alterações:
    Selecione um elemento dentro do banner e modifique seus estilos diretamente na aba Estilos. Por exemplo, você pode ajustar cores, tamanhos de fonte, preenchimento, margens ou qualquer outra propriedade CSS. Essas alterações são temporárias e visíveis imediatamente na página da web, permitindo que você experimente livremente.

  6. Finalize o Design:
    Quando estiver satisfeito com as alterações de design, copie o código CSS modificado. Isso pode incluir alterações feitas em elementos individuais ou no banner inteiro.

  7. Aplique as Alterações:
    Vá para o seu https://yoursite.com/admin/customize/components crie um componente e, em seguida, na seção Editar HTML/CSS, cole o código CSS modificado. Certifique-se de direcionar a classe ou ID apropriado do banner para garantir que os estilos sejam aplicados corretamente e, em seguida, aplique esse componente ao seu tema.

  8. Salve e Revise:
    Salve o CSS atualizado, atualize seu site e confirme se o banner reflete as alterações conforme o pretendido.

Você também pode conferir: Como personalizar CSS no Discourse

3

@MihirR ótimas instruções genéricas, muito obrigado.

Um pouco de leitura parece indicar que o Firefox tem um Editor de Estilo melhor que o Chrome nas ferramentas de desenvolvedor web.

Mas para chegar ao caso específico, estou tendo muita dificuldade, pois os botões Expandir e Fechar mudam de cor ao passar o mouse e estou derrotado tentando encontrar como definir a cor base. O item parece ser a classe span.d-button-label.

4

Olá :wave:

Aqui está um exemplo de como alterar a cor desses botões.

.banner-box {
  .button-container {
    .btn {
      .d-icon,
      .d-button-label {
        color: var(--tertiary); // mude isso para a cor desejada
      }
      // cor ao passar o mouse e ao focar
      .discourse-no-touch & {
        &:hover,
        &:focus {
          .d-icon,
          .d-button-label {
            color: var(--tertiary-hover); // mude isso para a cor desejada
          }
        }
      }
    }
  }
}
4 curtidas
5

@Dan isso é SCSS ou LESS? Estou desatualizado com CSS atual. O Discourse usa isso sem que eu precise compilar?

1 curtida
6

@Andro isso é SCSS :))

7

Então o Discourse entende SCCS nativamente?

1 curtida
8

Sim, ele entende SCSS nativamente.

2 curtidas
9

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