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.

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

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 :arrow_down_small: Create a new component. Go to /admin/customize/themes/ Customize → Themes Click the Components tab and then the Install button On the popup window click Create new button and type the new component name. [Screenshot 2022-10-14 at 20.23.38] Click Create button. 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] Now click the Edit CSS/HTML button. [Screenshot 2022-07-26 at 12.07.53] Now click the Common tab and paste the below code to the CSS section. [Screenshot 2022-10-14 at 20.35.10] .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! :slightly_smiling_face: 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 [Screenshot 2022-10-14 at 20.32.53] After [Screenshot 2022-10-14 at 20.34.09]

CSS Conflicts In Header

Development

chrispine1991 (Chocoboe Studios) October 14, 2022, 9:25pm 4

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.

Topic		Replies	Views
Edit search header theme css Marketplace	2	904	January 23, 2022
How can I add this style of background to the Search Banner? Development search-banner	1	292	March 23, 2021
How to make a custom search bar? Development	9	2681	October 15, 2020
Put Search Bar in .b-header instead of .d-header? Development	0	199	March 26, 2024
How to make the Search Banner text use primary instead of sceondary color? Development search-banner	0	210	January 31, 2022

CSS Conflicts In Header

Related topics