Search section like on Reddit?

AI-generated summary

In a Dev category thread titled “Search section like on Reddit?”, ogulcan1787 asks how to add a Reddit-style search bar to their Discourse site and remove the default search button. pfaffman suggests checking the Search Banner topic, while Moin links to header-search. ogulcan1787 later requests help styling the search box with rounded edges and hover effects, referencing a Reddit screenshot. Moin advises using CSS and links to a guide, but ogulcan1787 admits difficulty implementing CSS. Lilly recommends learning theme basics or hiring help via Marketplace, providing several beginner guides. Heliosurge shares theme components for rounded borders and button styles. ogulcan1787 confesses to being a non-coder and requests ready-to-use code. After experimenting, ogulcan1787 shares working CSS for rounded corners and hover colors, but notes alignment issues on their site pvpfarm.com [13]. They also seek to vertically expand the search box [14]. JammyDodger notes that basic CSS questions may be out of scope, prompting ogulcan1787 to confirm they’re using MDN for research. Lilly responds with a screenshot showing what appears correct, and links to MDN and W3Schools for centering elements.

Hi everyone,
Can I add a search field like this to my site?
And I want to remove the search button from the right side
Thank you :slight_smile:

redditsearch
Ekran görĂŒntĂŒsĂŒ 2024-03-28 151903

Search Banner, maybe? But searching could be a good way to find some potential solutions. :wink:

Thank you so much.
Can we ovalize the edges of the box?
@Moin

Like here.
And can we paint the inside?
With hover like on reddit
Ekran görĂŒntĂŒsĂŒ 2024-03-28 151903

You can customize it with css.

@Moin thank you Moin but I can’t do this, so I’m asking for your help.
I watched his videos, I tried many times and it doesn’t work.
I tried it on Firefox and Chrome.

If you are trying to learn to customize your forum, please take some time to learn some basics of themes, components and CSS. Alternatively, you can always post in Marketplace for paid help to customize your forum.

This Customization > Theme component might help

This one for button styles

Hello friends, I see you are trying to help me but I cannot write code.
If there is ready code I can only fix it.
If there is anyone who can help, I’ll wait.
Thank you.
What seems easy for you is difficult for me, the codes are too complicated for me.


It’s not exactly in the middle.
And looking so bad for me.
I’m getting angry because I can’t edit but there’s nothing to do :smiley:
Reddit original search looks great.
Of course it’s Reddit. But I would like to be able to do this at least in a close similarity.

Im a coder now :sunglasses: :grin:

.floating-search-input .search-banner-inner.wrap .search-menu .search-input {
    border-radius: 10px;
    background-color: #3e3e58;
    border: 0px solid;
}

.floating-search-input .search-banner-inner.wrap .search-menu .search-input:hover {
    background-color: #4c4c6b;
}

Hi everyone!

.search-menu.menu-panel-results, .search-menu-container.menu-panel-results {
    width: 600px;
    left: 150px;
}

.floating-search-input .search-banner-inner.wrap .search-menu .search-icon {
    left: 150px;
}

I wrote these codes, when I add them to the css field, it looks the way I want, but it doesn’t look like that in others.
Can you help me pls ?
https://pvpfarm.com

Ekran görĂŒntĂŒsĂŒ 2024-03-31 132713

And I want to expand the size of the search box slightly upwards. I couldn’t find it, can anyone find it?

Just an FYI @ogulcan1787, this feels like it may be bordering on:

Have you been doing some research for these issues outside of this forum? I believe there are a lot resources available.

Yes, I’m searching but I can’t find it.
https://developer.mozilla.org/ I use that site

seems ok to me? :thinking:

Did you search that site for how to center?

I prefer this site myself: