# 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:** 4
**Page:** 1
### Author:  [@chrispine1991](https://meta.discourse.org/u/chrispine1991)
#### Post date: [October 13, 2022, 8:00pm UTC](https://meta.discourse.org/t/css-conflicts-in-header/241867/1 "2022-10-13T20:00:27Z")
**[Chocoboe Studios](https://discourse.chocoboe.com/)**
```plaintext
// 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.
``
---
### Author:  [@chrispine1991](https://meta.discourse.org/u/chrispine1991)
#### Post date: [October 14, 2022, 5:08am UTC](https://meta.discourse.org/t/css-conflicts-in-header/241867/2 "2022-10-14T05:08:04Z")
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:
`Welcome to our community
`
and then create the associated css:
```plaintext
.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
---
### Author:  [@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")
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.
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.
3. Now click the Edit CSS/HTML button.
4. Now click the **Common** tab and paste the below code to the **CSS** section.
```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
After
---
### Author:  [@chrispine1991](https://meta.discourse.org/u/chrispine1991)
#### Post date: [October 14, 2022, 9:25pm UTC](https://meta.discourse.org/t/css-conflicts-in-header/241867/4 "2022-10-14T21:25:34Z")
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. 😅