Search section like on Reddit?

[ogulcan1787]

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

[pfaffman (Jay Pfaffman)]

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

[Moin]

Header Search

Summary 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. Preview Preview on theme-creator.discourse.org Repository Link https://github.com/discourse/discourse-header-search New to Discourse Themes? Beginner’s guide to using Discourse Themes Install this theme component Thanks to @Johani for the search panel javascript code [im…

[ogulcan1787]

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

[Moin]

@ogulcan1787

Can we ovalize the edges of the box?

You can customize it with css.

Make CSS changes on Your Site

Want to make some CSS changes on your Discourse site but not sure where to start? You’ve come to the right place! You only need to read this topic if you’re very new to CSS. If you already know how to write and add CSS to your Discourse site, then you will most likely not need to read this topic. We’ll cover a few subjects. We’ll start with a brief introduction of what CSS is and some terms that you need to know. We will then move on to how you can add CSS to your Discourse site. Final…

[ogulcan1787]

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

[Lilly]

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.

Make CSS changes on Your Site

Want to make some CSS changes on your Discourse site but not sure where to start? You’ve come to the right place! You only need to read this topic if you’re very new to CSS. If you already know how to write and add CSS to your Discourse site, then you will most likely not need to read this topic. We’ll cover a few subjects. We’ll start with a brief introduction of what CSS is and some terms that you need to know. We will then move on to how you can add CSS to your Discourse site. Final…

Beginner's guide to using Discourse Themes

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)

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’…

Beginner's guide to developing Discourse Themes

So, you want to create Discourse themes? Not sure where to start? Or maybe you have created Discourse themes before, but want to learn how to do even more cool things. Well, you’ve come to the right place Developer’s guide to Discourse Themes Subjects include a general overview of Discourse themes, creating and sharing Discourse themes, theme development examples, searching for and finding information / examples in the Discourse repository, and best practices. Prerequisites: …

Theme Developer Quick Reference Guide

As themes grow more powerful, there’s more to remember about how they work. We have loads of detailed documentation under #howto / #themes, but if you just need something to jog your memory, this guide may help. General Resources Beginner’s guide Designer’s guide Developer’s guide Theme Creator Theme CLI Theme Directory Component Directory Theme Modifiers File/Folder Structure…

[Heliosurge (Dan DeMontmorency)]

This theme-component might help

Rounded Borders for images, oneboxes, blockquotes & more

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 support for: list r…

This one for button styles

Discourse Button Styles

This theme component includes basic settings for changing button colors without writing CSS. Github repo: https://github.com/awesomerobot/discourse-button-styles Installation: How do I install a Theme or Theme Component? Preview: Example of what you can style with the settings in this theme [25%20AM] What the settings look like: [37%20AM] 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): b…

[ogulcan1787]

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.

[ogulcan1787]

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.

[ogulcan1787]

Im a coder now

.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;
}

[ogulcan1787]

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 ?

PvP Farm

[ogulcan1787]

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

[JammyDodger]

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

@Discourse

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.

[ogulcan1787]

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

[Lilly]

seems ok to me?

Did you search that site for how to center?

How to center an item - Learn web development | MDN

I prefer this site myself:

W3Schools Online Web Tutorials