# Search section like on Reddit?
**URL:** https://meta.discourse.org/t/search-section-like-on-reddit/301331
**Category:** Development
**Created:** [March 28, 2024, 12:18pm UTC](https://meta.discourse.org/t/search-section-like-on-reddit/301331 "2024-03-28T12:18:43Z")
**Posts on this page:** 16
**Page:** 1
### Author:  [@ogulcan1787](https://meta.discourse.org/u/ogulcan1787)
#### Post date: [March 28, 2024, 12:18pm UTC](https://meta.discourse.org/t/search-section-like-on-reddit/301331/1 "2024-03-28T12:18:43Z")
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 đ
---
### Author:  [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [March 28, 2024, 12:31pm UTC](https://meta.discourse.org/t/search-section-like-on-reddit/301331/2 "2024-03-28T12:31:49Z")
[Search Banner](https://meta.discourse.org/t/search-banner/122939), maybe? But searching could be a good way to find some potential solutions. đ
---
### Author:  [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [March 28, 2024, 12:45pm UTC](https://meta.discourse.org/t/search-section-like-on-reddit/301331/3 "2024-03-28T12:45:08Z")
> [@Advanced Header Search](https://meta.discourse.org/t/header-search/194093):
>
> discourse2Summary Advanced Header Search removes the search icon from the header menu and creates a search bar that is placed in the middle of the header area.eyeglassesPreview [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/header-search)hammer_and_wrenchRepository Link [https://github.com/discourse/discourse-header-search](https://github.com/discourse/discourse-header-search)open_bookNew to Discourse Themes? [Beginnerâs guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) Install this theme component :white\_exclamation\_mark:Note This theme component is onlâŠ
---
### Author:  [@ogulcan1787](https://meta.discourse.org/u/ogulcan1787)
#### Post date: [March 28, 2024, 1:06pm UTC](https://meta.discourse.org/t/search-section-like-on-reddit/301331/5 "2024-03-28T13:06:11Z")
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
---
### Author:  [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [March 28, 2024, 2:08pm UTC](https://meta.discourse.org/t/search-section-like-on-reddit/301331/6 "2024-03-28T14:08:41Z")
> [@ogulcan1787](#):
>
> Can we ovalize the edges of the box?
You can customize it with css.
> [@Making custom CSS changes on your site](https://meta.discourse.org/t/make-css-changes-on-your-site/168101):
>
> bookmark This guide explains how to make CSS changes on your Discourse site, including an introduction to CSS, where to add CSS in Discourse, and how to find the right selectors using browser inspection tools. person_raising_hand Required user level: Administrator Summary This guide covers: A brief introduction to CSS and key concepts How to add CSS to your Discourse site using theme components Using browser inspection tools to find the right CSS selectors Understanding CSS basics CâŠ
---
### Author:  [@ogulcan1787](https://meta.discourse.org/u/ogulcan1787)
#### Post date: [March 28, 2024, 2:29pm UTC](https://meta.discourse.org/t/search-section-like-on-reddit/301331/7 "2024-03-28T14:29:23Z")
@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.
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [March 28, 2024, 2:43pm UTC](https://meta.discourse.org/t/search-section-like-on-reddit/301331/8 "2024-03-28T14:43:23Z")
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.
> [@Making custom CSS changes on your site](https://meta.discourse.org/t/make-css-changes-on-your-site/168101/1):
>
> bookmark This guide explains how to make CSS changes on your Discourse site, including an introduction to CSS, where to add CSS in Discourse, and how to find the right selectors using browser inspection tools. person_raising_hand Required user level: Administrator Summary This guide covers: A brief introduction to CSS and key concepts How to add CSS to your Discourse site using theme components Using browser inspection tools to find the right CSS selectors Understanding CSS basics CâŠ
> [@Beginner's guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966):
>
> This is a crash course in Discourse theme basics. The target audience is everyone who is not familiar with Discourse themes. If youâve already used Discourse theme / theme components, this guide is probably not something you need to read. What are themes and theme components? A theme or theme component is a set of files packaged together designed to either modify Discourse visually or to add new features. Letâs start with themes. Themes In general, themes are not supposed to be compatible âŠ
> [@Learn how to start building stuff for Discourse if you're newbie (like myself)](https://meta.discourse.org/t/learn-how-to-start-building-stuff-for-discourse-if-youre-newbie-like-myself/45954):
>
> There are a few âhow to startâ guides for working with Discourse already and a wealth of useful info on meta, but I thought it might help to give an insight to the mental processes of starting from little, if any, prior coding experience to building substantial Discourse plugins. Discourse is written by experienced developers and has a large codebase. This can feel intimidating. This intimidation factor can be a significant barrier for novice developers. This is a kind of âpsychological primerââŠ
> [@Developing Discourse Themes & Theme Components](https://meta.discourse.org/t/beginners-guide-to-developing-discourse-themes/93648):
>
> Discourse Themes and Theme Components can be used to customize the look, feel and functionality of Discourseâs frontend. This section of the developer guides aims to provide all the reference materials you need to develop simple themes for a single site, right up to complex open-source theme components. This introduction aims to provide a map of all the tools and APIs for theme development. If you prefer a step-by-step tutorial for theme development, jump straight to: Themes vs. Theme ComponâŠ
> [@Theme Developer Quick Reference Guide](https://meta.discourse.org/t/theme-developer-quick-reference-guide/110448):
>
> As themes grow more powerful, thereâs more to remember about how they work. We have loads of detailed documentation under [#howto / #themes](https://meta.discourse.org/tags/c/howto/themes), but if you just need something to jog your memory, this guide may help. General Resources [scroll Beginnerâs guide](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966)[scroll Designerâs guide](https://meta.discourse.org/t/designers-guide-to-discourse-themes/152002/1)[scroll Developerâs guide](https://meta.discourse.org/t/developer-s-guide-to-discourse-themes/93648)[paintbrush Theme Creator](http://theme-creator.discourse.org)[desktop_computer Theme CLI](https://meta.discourse.org/t/discourse-theme-cli-console-app-to-help-you-build-themes/82950)[notebook_with_decorative_cover Theme Directory](https://meta.discourse.org/c/customization/theme/61/none)[jigsaw Component Directory](https://meta.discourse.org/c/customization/theme-component/120)[wrench Theme Modifiers](https://meta.discourse.org/t/theme-modifiers-a-brief-introduction/150605)[wrench Themeable siteâŠ](https://meta.discourse.org/t/-/374376)
---
### Author:  [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [March 28, 2024, 7:54pm UTC](https://meta.discourse.org/t/search-section-like-on-reddit/301331/9 "2024-03-28T19:54:38Z")
This #Customization > Theme component might help
> [@Rounded Borders for images, oneboxes, blockquotes & more](https://meta.discourse.org/t/rounded-borders-for-images-oneboxes-blockquotes-more/232044):
>
> Created a very simple component to change the borders of images, oneboxes, blockquotes and staff notices shown in topics. Allows change of the following settings set image rounding intensity set image border width set image border color set onebox rounding intensity change onebox border width change onebox border color change onebox background color set rounding blockquotes intensity remove left border from blockquotes set âstaff colorâ rounding intensity [topic thumbnail](https://meta.discourse.org/t/topic-list-thumbnails-theme-component/150602) support for: list roâŠ
This one for button styles
> [@Discourse Button Styles](https://meta.discourse.org/t/discourse-button-styles/88154):
>
> This theme component includes basic settings for changing button colors without writing CSS. [Github repo](https://github.com/awesomerobot/discourse-button-styles): https://github.com/awesomerobot/discourse-button-styles Installation: [Installing a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) Preview: [Example of what you can style with the settings in this theme](https://theme-creator.discourse.org/theme/awesomerobot/button-styles) What the settings look like: There are 6 button sets that can be styled in this component, along with a global style for adding rounded corners to all buttons (border-radius): basic buâŠ
---
### Author:  [@ogulcan1787](https://meta.discourse.org/u/ogulcan1787)
#### Post date: [March 29, 2024, 2:35pm UTC](https://meta.discourse.org/t/search-section-like-on-reddit/301331/10 "2024-03-29T14:35:51Z")
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.
---
### Author:  [@ogulcan1787](https://meta.discourse.org/u/ogulcan1787)
#### Post date: [March 29, 2024, 2:42pm UTC](https://meta.discourse.org/t/search-section-like-on-reddit/301331/11 "2024-03-29T14:42:16Z")
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 đ
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.
---
### Author:  [@ogulcan1787](https://meta.discourse.org/u/ogulcan1787)
#### Post date: [March 30, 2024, 9:14pm UTC](https://meta.discourse.org/t/search-section-like-on-reddit/301331/12 "2024-03-30T21:14:19Z")
Im a coder now đ¶ đ
```plaintext
.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;
}
```
---
### Author:  [@ogulcan1787](https://meta.discourse.org/u/ogulcan1787)
#### Post date: [March 31, 2024, 10:31am UTC](https://meta.discourse.org/t/search-section-like-on-reddit/301331/13 "2024-03-31T10:31:17Z")
Hi everyone!
```plaintext
.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](https://pvpfarm.com)
---
### Author:  [@ogulcan1787](https://meta.discourse.org/u/ogulcan1787)
#### Post date: [March 31, 2024, 10:32am UTC](https://meta.discourse.org/t/search-section-like-on-reddit/301331/14 "2024-03-31T10:32:15Z")
And I want to expand the size of the search box slightly upwards. I couldnât find it, can anyone find it?
---
### Author:  [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [March 31, 2024, 10:50am UTC](https://meta.discourse.org/t/search-section-like-on-reddit/301331/15 "2024-03-31T10:50:11Z")
Just an FYI @ogulcan1787, this feels like it may be bordering on:
> [@About the Development category](https://meta.discourse.org/t/about-the-development-category/1026/1):
>
> However, basic HTML and CSS questions are not in scope for support.
Have you been doing some research for these issues outside of this forum? I believe there are a lot resources available.
---
### Author:  [@ogulcan1787](https://meta.discourse.org/u/ogulcan1787)
#### Post date: [March 31, 2024, 11:11am UTC](https://meta.discourse.org/t/search-section-like-on-reddit/301331/16 "2024-03-31T11:11:08Z")
Yes, Iâm searching but I canât find it.
[https://developer.mozilla.org/](https://developer.mozilla.org/) I use that site
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [March 31, 2024, 12:08pm UTC](https://meta.discourse.org/t/search-section-like-on-reddit/301331/17 "2024-03-31T12:08:59Z")
seems ok to me? đ€
Did you search that site for how to center?
> **[How to center an item - Learn web development | MDN](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Solve_CSS_problems/Center_an_item)**
>
> In this guide you can find out how to center an item inside another element, both horizontally and vertically.
I prefer this site myself:
> **[W3Schools.com](https://www.w3schools.com/)**
>
> W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.