I have been trying to build a custom search bar similar to the discourse-search-banner plugin. I don’t want to use that plugin as it interferes with the appearance of my theme. How can I mirror that functionality to a of my choice? I was looking at the source code of the plugin and tried to adapt it to just use my html element but was unable to figure it out. Any tips would be appreciated!

[image] pkundr: discourse-search-banner plugin Would you mind linking that plugin here, I can’t seem to find it. Maybe also tag the plugin creator, they might have some ideas.

Are you talking about this #theme-component? [image] Advanced Search Banner Theme component warning This theme component is deprecated and should no longer be used. Its features are now in Discourse Core — see our documentation for details on setting up a welcome banner: → Creating a banner to display at the top of your site discourse2 Summary Advanced Search Banner puts a search bar along with optional headline and subhead text in a banner above the main topic list navigation. eyeglasses Preview Preview on Discourse Theme Creator hammer_and_wrench Reposito…

Exactly! Sorry, my bad for not linking it I’ll make an edit

No worries, but that is a theme-component and not a plugin, so it changes a few things. Especially because theme-components work with client-side logic and plugins server-side logic. Or are you looking to make a plugin based of that theme-component?

Sorry for the late answer. I don’t really care whether it ends up being a plugin or a theme component as long as I achieve the desired functionality. Basically what I need is to mirror the behavior of the default search (icon in top bar) to a text-input of my choice. How do I go about this?

[image] pkundr: as it interferes with the appearance of my theme A lot of issues can be resolved in CSS. What is stopping you from simply inspecting and modifying the CSS? That would be by far the quicker solution? Worse case, fork the TC and edit your CSS?

It’s not really the CSS, more the placement and how it fits my HTML structure. If I can figure out how to modify where the component gets injected, I might have a solution. Can you point me in a direction?

With the theme component enabled on your site, inspect the code with your browser and see where it is placed. Adjust there in your browser to find somewhere more comfortable, and use that to update/edit a fork of the TC. That should work.

There’s also an off-the-shelf one for the Header: [image] Pavilion Header Search Theme Component Theme component warning This theme component is no longer maintained. See below for more information Alternatives include Advanced Header Search and Advanced Search Banner [55%20AM] Repository: GitHub - paviliondev/discourse-header-search-theme Preview on Theme Creator This is a re-packaging of the Header Search Plugin so it can be used as a theme. The functionality is the same as the plugin. See further: https://meta.discourse.org/t/moving-the-discourse-search-box-and-making-it-functional-how/1504… If neither suits and CSS modifications are not enough, you are going to have to get dirty with widget code :).

How to make a custom search bar?

Development

rishabh October 14, 2020, 2:55pm 3

Are you talking about this Customization > Theme component?

Topic		Replies	Views
Making the search box "more obvious" Product Support	1	1025	February 6, 2018
How do I replicate the meta banner links? Development	21	1784	September 21, 2024
Header search box Product Support	3	1282	September 16, 2019
Search section like on Reddit? Development	15	1176	March 31, 2024
Theme component to add a new search source Development	2	550	December 16, 2020

How to make a custom search bar?

Related topics