Conflitos de CSS no Cabeçalho

[chrispine1991 (Chocoboe Studios)]

Chocoboe Studios

// custom search banner customizations
.custom-search-banner-wrap {
  margin: 0 auto !important;
  max-width: unset;
  color: #f9f9f9;
  -webkit-text-fill-color: transparent;
  background: -webkit-gradient(linear,right top, left bottom,from(#eaf0ff),to(#0932a5),to(#060064));
  -webkit-background-clip: text;
  h1 {
    font-size: 4em;
  }

Mas isso faz com que o texto da barra de pesquisa desapareça no Cor de Fundo.

<div> id="ember16" class="ember-view"><!----><div> class="search-widget"><div> class="search-menu" data-mouse-down-outside="true"><button class="widget-button btn search-icon no-text btn-icon"><svg class="fa d-icon d-icon-search svg-icon svg-node" aria-hidden="true"><use xlink:href="#search"></use></svg></button><div class="search-input"><input id="search-term" type="text" value="" autocomplete="off" placeholder="Search" aria-label="Search"><div class="searching"><a class="widget-link show-advanced-search" href="/search?expanded=true" title="Open advanced search"><svg class="fa d-icon d-icon-sliders-h svg-icon svg-node" aria-hidden="true"><use xlink:href="#sliders-h"></use></svg></a></div></div></div></div></div></div>

[chrispine1991 (Chocoboe Studios)]

Na verdade, encontrei uma solução alternativa, mas preciso de ajuda para localizar o arquivo de origem.

Portanto, se eu usar o console para forçar uma classe de cabeçalho como visto abaixo:

<h1>Bem-vindo à nossa comunidade</h1>

e então criar o CSS associado:

.main-title-text {
    background: -webkit-gradient(linear, left center, right bottom, from(#484848), to(#0097ff), to(#ffffff));
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;

tudo parece funcionar. Agora que descobri a solução alternativa, como encontro o arquivo necessário para editar sob a div “ember14” onde o texto “Bem-vindo à comunidade” é renderizado?

Existe um arquivo específico, como index.js?

(Estou migrando do Flarum e sou novo nesta plataforma)
Obrigado

[Don]

Olá,

Não tenho certeza se entendi completamente, mas você pode segmentar o h1 e o p na pesquisa personalizada para que isso não afete o campo de entrada.

Você não precisa alterar o arquivo de origem específico. Nesses casos, você pode criar um novo componente de tema que substituirá a parte específica do código CSS. Mas se você realmente quiser alterá-lo, terá que fazer um fork do componente de tema GitHub - discourse/discourse-search-banner e, após o fork, poderá alterar o arquivo de modelo.

Mas existe um método muito mais fácil e sustentável:

Crie um novo componente.

1. Vá para /admin/customize/themes/
   Personalizar → Temas
2. Clique na guia Componentes e, em seguida, no botão Instalar Install
3. Na janela pop-up, clique no botão Criar novo Create new e digite o nome do novo componente.

4. Clique no botão Criar Create.
5. O componente foi criado. Agora selecione em qual(is) tema(s) você deseja ativá-lo. Aqui, suponho que você deva selecionar o tema Discourse Air.
   
   
6. Agora clique no botão Editar CSS/HTML Edit CSS/HTML.
   
   
7. Agora clique na guia Comum e cole o código abaixo na seção CSS.

.custom-search-banner-wrap {
  h1, p {
    background: -webkit-gradient(linear, right top, left bottom, from(#eaf0ff), to(#0932a5), to(#060064));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

Clique em Salvar. Pronto!

E não se esqueça de remover seu código anterior

.custom-search-banner-wrap {
  // remove this part because we add this to the h1 and p
  -webkit-text-fill-color: transparent;
  background: -webkit-gradient(linear,right top, left bottom,from(#eaf0ff),to(#0932a5),to(#060064));
  -webkit-background-clip: text;
}

---

Antes

Depois

[chrispine1991 (Chocoboe Studios)]

Você é um mago. Muito obrigado. Estou migrando do Flarum e a curva de aprendizado é íngreme, na minha opinião.

E obrigado pelo lembrete para remover o código anterior.