CSS Conflicts In Header

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

But this causes the search bar text to fade into the Background Color.

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

I actually found a workaround but need help locating the source file.

So if I use the console to force a header class as seen below:

<h1 class="main-title-text">Welcome to our community</h1>

and then create the associated css:

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

everthing seems to work. Now that I have figured out the workaround, how do I find the necessary file to edit under div “ember14” where the “Welcome to the community” text is rendered?

Is there a specific file, ie index.js?

(I am porting over from Flarum and new to this platform)
Thanks

[Don]

Hello,

I am not sure I fully understand but you can target the h1 and p in custom search so it won’t affect the input field.

You don’t need to change the specific source file. In these cases you can create a new theme component which will override the specific part of css code. But if you really want to change it than you have to fork the theme component GitHub - discourse/discourse-search-banner and after fork you can change the template file.

But there is a much easier and maintainable method

Create a new component.

1. Go to /admin/customize/themes/
   Customize → Themes
2. Click the Components tab and then the Install button
3. On the popup window click Create new button and type the new component name.

4. Click Create button.
5. The component created. Now select which theme(s) you want to activate it. Here I guess you should select the Discourse Air theme.
   
6. Now click the Edit CSS/HTML button.
   
7. Now click the Common tab and paste the below code to the CSS section.

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

Click Save. Done!

And don’t forget to remove your previous code

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

---

Before

After

[chrispine1991 (Chocoboe Studios)]

You are a wizard. Thanks a million. Porting from Flarum and it is a steep learning curve imo.

And thank you for the reminder to remove previous code.