# CSS Conflicts In Header

**URL:** <https://meta.discourse.org/t/css-conflicts-in-header/241867>\
**Category:** Development\
**Tags:** css\
**Created:** [October 13, 2022, 8:00pm UTC](https://meta.discourse.org/t/css-conflicts-in-header/241867 "2022-10-13T20:00:27Z")\
**Posts on this page:** 1\
**Showing post:** 3

<div class="post-metadata">

**Author:** ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)\
**Post date:** [October 14, 2022, 7:06pm UTC](https://meta.discourse.org/t/css-conflicts-in-header/241867/3 "2022-10-14T19:06:42Z")

</div>

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](https://github.com/discourse/discourse-search-banner) and after fork you can change [the template file](https://github.com/discourse/discourse-search-banner/blob/main/javascripts/discourse/templates/components/search-banner.hbs).

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.

 ![Screenshot 2022-10-14 at 20.23.38](https://global.discourse-cdn.com/meta/original/4X/e/f/5/ef555564db174da0072db2958008042317256169.png)

1. Click Create button.
2. The component created. Now select which theme(s) you want to activate it. Here I guess you should select the Discourse Air theme.  
 ![Screenshot 2022-07-26 at 12.06.13](https://global.discourse-cdn.com/meta/original/4X/3/6/c/36c8b6490cf35b40f93199e6fc69858759633396.png)
3. Now click the Edit CSS/HTML button.  
 ![Screenshot 2022-07-26 at 12.07.53](https://global.discourse-cdn.com/meta/original/4X/9/6/7/9673c30c71cf2e6fb2e8d34e484e7ad09b95589a.png)
4. Now click the **Common** tab and paste the below code to the **CSS** section.

 ![Screenshot 2022-10-14 at 20.35.10](https://global.discourse-cdn.com/meta/original/4X/b/d/e/bde34837df8506c247e3e6b256e094394243168f.png)

```scss
.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

```scss
.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

 ![Screenshot 2022-10-14 at 20.32.53](https://global.discourse-cdn.com/meta/original/4X/e/b/7/eb70cca3caf03bf5f2977e50706b30b96d36df81.png)

After

 ![Screenshot 2022-10-14 at 20.34.09](https://global.discourse-cdn.com/meta/original/4X/d/b/1/db1592a9b91941cd47f2d7ed2db9db67f10f25fb.png)

---

_[View the full topic](https://meta.discourse.org/t/css-conflicts-in-header/241867)._