모든 테마에서 포럼 버튼의 모서리를 둥글게 만드는 방법

[Aaron_Walsh]

저녁 인사 드립니다.

포럼의 모든 버튼을 더 둥근 사각형으로 만들고자 합니다. CSS/HTML에 다음 CSS를 사용했습니다:

.btn { border-radius: 5px; }

이것은 미리보기 탭에서는 작동하지만, 해당 테마에 컴포넌트를 포함시킨 후 라이브 포럼에서는 작동하지 않습니다.

현재 포럼 상태:

CSS 사용 후:

여기 Meta에서는 Fully 테마를 사용할 때 버튼이 둥글게 표시됩니다. 그러나 제 포럼에서 이 테마를 사용할 때는 그렇지 않습니다.

[Heliosurge (Dan DeMontmorency)]

이 Customization > Theme component 를 시도해 보세요.

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…

이 테마 컴포넌트는 인용구, 이미지 등 다른 요소들의 모서리를 둥글게 만드는 옵션을 추가합니다.

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…

[Aaron_Walsh]

아니, 정말! 사용자들이 새 주제를 만들기 전에 검색 기능을 쓰라고 늘 말해놓고, 정작 내가 같은 실수를 저질렀네요!

"둥근 버튼"이라고 검색하고 있었거든요. 너무 복잡하게 접근한 거였어요. 그냥 "버튼"이라고 검색했으면 됐는데 말이죠.

[Heliosurge (Dan DeMontmorency)]

음, 이 검색어를 사용했어요.

"#customization:theme-component Round"

[awesomerobot (Kris)]

또는

:root {
  --d-button-border-radius: 5px
}

또는

:root {
  --d-border-radius: 5px; 
}

를 사용하여 모든 곳에 둥근 모서리를 적용할 수도 있습니다.

[Aaron_Walsh]

음… 다시 말하지만, 포럼을 새로고침하고 로그아웃/로그인해도 둘 다 미리보기 모드에서만 작동하는 것 같습니다.

[Jagster (Jakke Flemming)]

@Aaron_Walsh

검색 기능을 사용하세요

시야에 들어오는 즉시 상처가 벌어지는데… 소금은 어디에 있지

다섯 번째 명중:

미안해, 참을 수가 없었어

[Heliosurge (Dan DeMontmorency)]

컴포넌트를 설치한 후 적용하려면 테마에 추가한 뒤 페이지를 새로고침해야 합니다.

이후 로그인 여부와 관계없이 표시되어야 합니다.

미리보기는 어떤 테마도 활성화하지 않은 상태에서 테스트하기 위한 것입니다.

[Moin]

@Aaron_Walsh

둘 다 미리보기 모드에서만 작동하는 것 같습니다.

버튼을 커스터마이징하는 다른 컴포넌트를 추가해 보셨나요?

예를 들어 Rounded Image Borders 같은 것

[Aaron_Walsh]

죄송합니다, @awesomerobot님의 게시글에 CSS로 답변드린 것이었습니다.

[Heliosurge (Dan DeMontmorency)]

커스텀 컴포넌트를 만드는 것도 마찬가지입니다. 저장한 후에는 테마에 추가해야 합니다.

[Aaron_Walsh]

이것도 해봤습니다.

@Moin의 답변을 보고 있는데, 커스텀 컴포넌트와 충돌할 만한 부분은 보이지 않네요. "Discourse Button Style"을 자세히 파볼 예정입니다. 전에 이걸 사용했을 때였는데, 솔직히 빈 박스가 너무 많아서 ADHD인 제 뇌가 감당하기 어려웠습니다, 하하! 그냥 간단한 CSS만으로도 충분할 것 같네요(기능이 된다면요).

[Aaron_Walsh]

네, 이 부분은 가지고 있습니다. 그러면 커스텀 컴포넌트와 충돌이 나는 건가요?

그래서 버튼, 아바타, 그리고 내가 보고 있는 이미지들에 대한 CSS를 수동으로 작성해야겠네요.

[Moin]

@Aaron_Walsh

그러니까 커스텀 컴포넌트와 충돌이 나는 건가요?

button settings enabled라는 설정이 있으므로, 아마도 그렇습니다.

[Aaron_Walsh]

다른 컴포넌트로 넘어가기 전에 모든 옵션을 확인했는지 확인해야 합니다.

두 항목인

버튼 모서리 강도

카테고리 스타일 박스 모서리 강도

모두 0px로 설정되어 있었습니다.

시간을 낭비하게 해서 죄송합니다! 하지만 좋은 팀워크였습니다!

[MarcP]

좋네요. 제 컴포넌트가 현재 대부분의 버튼을 다루고 있다고 생각했지만, 이런 접근 방식은 몰랐습니다. 감사합니다.