CSS Conflicts In Header

[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 · GitHub 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