Conflictos CSS en la cabecera

[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;
  }

Pero esto hace que el texto de la barra de búsqueda se desvanezca en el color de fondo.

<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>

[chrispine1991 (Chocoboe Studios)]

Encontré una solución alternativa, pero necesito ayuda para localizar el archivo fuente.

Así que si uso la consola para forzar una clase de encabezado como se ve a continuación:

<h1>Bienvenido a nuestra comunidad</h1>

y luego creo el CSS asociado:

.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;

todo parece funcionar. Ahora que he descubierto la solución alternativa, ¿cómo encuentro el archivo necesario para editar en el div “ember14” donde se renderiza el texto “Bienvenido a nuestra comunidad”?

¿Hay algún archivo específico, como index.js?

(Estoy migrando desde Flarum y soy nuevo en esta plataforma)
Gracias

[Don]

Hola,

No estoy seguro de entenderlo completamente, pero puedes apuntar a h1 y p en la búsqueda personalizada para que no afecte al campo de entrada.

No necesitas cambiar el archivo fuente específico. En estos casos, puedes crear un nuevo componente de tema que anulará la parte específica del código CSS. Pero si realmente quieres cambiarlo, entonces tienes que bifurcar el componente de tema GitHub - discourse/discourse-search-banner y después de bifurcarlo puedes cambiar el archivo de plantilla.

Pero hay un método mucho más fácil y mantenible

Crea un nuevo componente.

1. Ve a /admin/customize/themes/
   Personalizar → Temas
2. Haz clic en la pestaña Componentes y luego en el botón Instalar
3. En la ventana emergente, haz clic en el botón Crear nuevo y escribe el nombre del nuevo componente.

4. Haz clic en el botón Crear.
5. El componente está creado. Ahora selecciona en qué tema(s) quieres activarlo. Aquí supongo que deberías seleccionar el tema Discourse Air.
   
   
6. Ahora haz clic en el botón Editar CSS/HTML.
   
   
7. Ahora haz clic en la pestaña Común y pega el siguiente código en la sección 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;
  }
}

Haz clic en Guardar. ¡Hecho!

Y no olvides eliminar tu 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

Después

[chrispine1991 (Chocoboe Studios)]

Eres un mago. Muchas gracias. Estoy migrando desde Flarum y la curva de aprendizaje es empinada, en mi opinión.

Y gracias por el recordatorio de eliminar el código anterior.