Como usar CSS para banner versátil

Suporte
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