레딧처럼 검색 섹션이 있나요?

[ogulcan1787]

여러분 안녕하세요,
이런 검색창을 제 사이트에 추가할 수 있을까요?
그리고 오른쪽의 검색 버튼을 제거하고 싶습니다.
감사합니다

[pfaffman (Jay Pfaffman)]

Search Banner, 어때요? 하지만 검색은 잠재적인 해결책을 찾는 좋은 방법이 될 수 있습니다.

[Moin]

고급 헤더 검색

요약 Advanced Header Search는 헤더 메뉴에서 검색 아이콘을 제거하고, 헤더 영역 중앙에 검색 바를 배치합니다. 미리보기 Discourse Theme Creator에서 미리보기 저장소 링크 https://github.com/discourse/discourse-header-search Discourse 테마를 처음 사용하시나요? Discourse 테마 사용 입문가 가이드 이 테마 컴포넌트 설치 참고 이 테마 컴포넌트는 사이트가 외부 검색을 지원하려는 경우에만 필요합니다. 그렇지 않으면, 사이트 검색을 헤더로 이동시키기 위해 검색 경험 설정을 사이트 헤더의 검색 필드로 업데이트할 수 있습니다. 기능 [image] 설정 이름 설명 추가 검색 아이콘 검색 바에 추가…

[ogulcan1787]

정말 감사합니다.
상자의 모서리를 타원형으로 만들 수 있을까요?
@Moin

이렇게요.
그리고 안쪽을 칠할 수도 있을까요?
레딧처럼 호버 효과를 적용하는 거예요.

[Moin]

@ogulcan1787

상자의 모서리를 둥글게 만들 수 있을까요?

css를 통해 커스터마이징할 수 있습니다.

사이트에서 사용자 지정 CSS 변경하기

이 가이드는 CSS 소개, Discourse에서 CSS를 추가하는 위치, 그리고 브라우저 검사 도구를 사용하여 올바른 선택자를 찾는 방법 등을 포함하여 Discourse 사이트에서 CSS를 변경하는 방법을 설명합니다. 필요한 사용자 권한: 관리자 요약 이 가이드에서는 다음 내용을 다룹니다: CSS 및 핵심 개념에 대한 간단한 소개 테마 구성 요소를 사용하여 Discourse 사이트에 CSS를 추가하는 방법 브라우저 검사 도구를 사용하여 올바른 CSS 선택자를 찾는 방법 CSS 기초 이해하기 CSS는 Cascading Style Sheets(캐스케이딩 스타일 시트)의 약자입니다. 이해해야 할 세 가지 핵심 개념은 다음과 같습니다: 구조: CSS 규칙은 선택자, 속성, 값으로 구성됩니다. p { color: red; } 선택자: p (모든 HTML <p> 태그를 대상으로 함) 속성: color …

[ogulcan1787]

@Moin Moin님, 감사합니다. 하지만 제가 이 일을 할 수 없어서 도움을 요청드립니다.
그분의 영상을 보고 여러 번 시도해 봤지만 작동하지 않습니다.
Firefox와 Chrome에서 모두 시도해 보았습니다.

[Lilly (Lillian)]

포럼을 커스터마이징하는 방법을 배우고자 한다면, 테마, 컴포넌트 및 CSS의 기본 개념을 익히는 데 시간을 할애해 보세요. 또는 Marketplace 채널에 유료 커스터마이징 도움을 요청할 수도 있습니다.

사이트에서 사용자 지정 CSS 변경하기

이 가이드는 CSS 소개, Discourse에서 CSS를 추가하는 위치, 그리고 브라우저 검사 도구를 사용하여 올바른 선택자를 찾는 방법 등을 포함하여 Discourse 사이트에서 CSS를 변경하는 방법을 설명합니다. 필요한 사용자 권한: 관리자 요약 이 가이드에서는 다음 내용을 다룹니다: CSS 및 핵심 개념에 대한 간단한 소개 테마 구성 요소를 사용하여 Discourse 사이트에 CSS를 추가하는 방법 브라우저 검사 도구를 사용하여 올바른 CSS 선택자를 찾는 방법 CSS 기초 이해하기 CSS는 Cascading Style Sheets(캐스케이딩 스타일 시트)의 약자입니다. 이해해야 할 세 가지 핵심 개념은 다음과 같습니다: 구조: CSS 규칙은 선택자, 속성, 값으로 구성됩니다. p { color: red; } 선택자: p (모든 HTML <p> 태그를 대상으로 함) 속성: color …

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

Developing Discourse Themes & Theme Components

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…

테마 개발자 빠른 참고 가이드

As themes grow more powerful, there’s more to remember about how they work. We have loads of detailed documentation under #theme-guides, 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 Themeable site se…

[Heliosurge (Dan DeMontmorency)]

이 Customization > Theme component 가 도움이 될 수 있습니다

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

버튼 스타일에 대해서는 이걸 참고하세요

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: Installing 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): basic bu…

[ogulcan1787]

친구 여러분, 도움을 주려고 하시는 걸 알겠는데 저는 코드를 작성할 수 없습니다.
만약 이미 완성된 코드가 있다면 그걸 고치는 것만 할 수 있어요.
도움 주실 분이 계신다면 기다리겠습니다.
감사합니다.
여러분께는 쉬워 보이는 것이 저에게는 어렵고, 코드들이 제게는 너무 복잡합니다.

[ogulcan1787]

정확히 가운데는 아닙니다.
제게는 너무 보기 안 좋습니다.
수정할 수 없어서 화가 나지만, 할 수 있는 것이 없습니다
Reddit의 원본 검색은 훌륭합니다.
물론 Reddit이긴 하지만, 적어도 비슷한 형태로 구현할 수 있으면 좋겠습니다.

[ogulcan1787]

이제 코더가 되었어요

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

안녕하세요 여러분!

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

위 코드를 작성해서 CSS 필드에 추가하면 제가 원하는 대로 표시되는데, 다른 분들 화면에서는 그렇게 안 보입니다.
도와주실 수 있을까요?
https://pvpfarm.com

[ogulcan1787]

그리고 검색창 크기를 약간 위쪽으로 확장하고 싶습니다. 제가 못 찾았는데, 혹시 찾아보신 분 계신가요?

[JammyDodger]

@ogulcan1787 참고로, 이는 다음 범주에 가까워 보일 수 있습니다:

@Discourse

그러나 기본적인 HTML 및 CSS 관련 질문은 지원 대상이 아닙니다.

이러한 문제들을 위해 이 포럼 밖에서 조사를 해 보셨나요? 다양한 자원이 많이 이용 가능하다고 생각합니다.

[ogulcan1787]

네, 찾고는 있는데 찾을 수가 없어요.
https://developer.mozilla.org/ 이 사이트를 사용 중입니다

[Lilly (Lillian)]

나한테는 괜찮아 보이는데?

그 사이트에서 가운데 정렬하는 방법을 검색해 봤어?

How to center an item - Learn web development | MDN

개인적으로는 이 사이트를 더 좋아해:

W3Schools.com