회원가입 버튼 색상 변경 방법

제품 지원
1

여러분 안녕하세요! 가입 버튼 색상을 어떻게 커스터마이즈할 수 있는지 알고 싶습니다. 헤더의 모든 버튼이 아니라 가입 버튼만 녹색으로 변경하고 싶은데요.

저는 discourse가 호스팅된 포럼을 사용 중입니다. 초보자 질문이어서 죄송합니다. 정말 초보자인데 이 문제를 해결하려고 밤새고 있었거든요.

AIR 테마를 사용하고 있습니다.

2

안녕하세요!

호스팅 포럼에서 사용할 수 있는 옵션 범위는 정확히 모르겠지만, 관리자 패널에 커스터마이즈(Customize) 섹션이 있을 거라고 추측합니다.

테마에서 CSS/HTML을 편집하고, Common(공통) 부분에 다음을 추가하세요:

.d-header .sign-up-button {
    background: #48bb6a;
}

작동하지 않으면, 이 색상이 우선순위를 갖도록 !important를 추가해야 할 수 있습니다. 다음과 같이요:

.d-header .sign-up-button {
    background: #48bb6a !important;
}
3

@Steven님 안녕하세요, 감사합니다. 작동했습니다! 그런데 signup 변수를 찾지 못했어요. CSS 변수에 익숙해져야 하고, HTML에서 어떻게 찾아야 하는지도 배워야 할 것 같아요. 감사합니다!

4

변수를 찾는 일은 까다로울 수 있습니다. 저에게 큰 도움이 되었던 기능은 브라우저의 검사(Inspect) 기능입니다. 이 기능을 사용하면 코드와 CSS를 탐색하고 실시간으로 변경 사항을 시도해 볼 수 있습니다.

이 경우, Discourse 개발자가 가입과 로그인 버튼에 특정 클래스를 추가했는데, 이는 매우 유용합니다.

d-header signup class
d-header signup class661×166 9.14 KB

하지만 여기서 주저하지 말고 질문하세요. 커뮤니티는 항상 도움을 주려 노력합니다.

5

@Steven 와, 정말 멋지네요!!! 정말 감사합니다! 제 가입 버튼이 초록색으로 바뀌었어요!

그래서 검사(inspect) 도구를 사용해보았는데, 제 용도에 맞춰서 “All Tags” 메뉴 버튼의 이름을 "LFX Tools"처럼 변경할 방법이 있는지 궁금했어요. 포럼 전체가 태그 기반으로 되어 있으니 HTML에서 찾아야 할 것 같은데, 태그 기능의 이름을 도구(tools)로 변경하는 것이 얼마나 복잡할 것 같나요?

chrome_ShkMNx2URC
chrome_ShkMNx2URC2048×1112 412 KB

6

이 특정 텍스트는 관리자 패널에서 수정할 수 있습니다: Customize > Texts

검색창에 다음을 입력하세요: js.tagging.selector_all_tags
그리고 텍스트를 확인하세요.

하지만 일반적인 맥락에서 질문하신 내용에 답변하자면, CSS를 사용하여 텍스트를 수정하는 것은 가능하지만 다소 까다롭습니다. 저는 보통 ::before 또는 ::after 클래스에서 content 선택자를 사용합니다.

https://www.w3schools.com/cssref/sel_before.asp

텍스트를 수정할 수 있는 옵션이 없다면, 저는 전문가가 아니지만 다음과 같은 방법으로 처리하겠습니다.

먼저, all tags 텍스트를 숨깁니다:

summary.tag-drop-header .name {
    font-size: 0;
}

그 다음, 원하는 텍스트를 추가하기 위해 content를 가진 새로운 CSS 클래스를 만들고, 이전 설정을 덮어쓰기 위해 font-size를 지정해야 합니다:

summary.tag-drop-header .name::after {
    content: "LFX Tools";
    font-size: 15px;
}