새 주제 버튼 사용자 지정

위키 개발자
1

안녕하세요,

저희가 만든 새 주제 버튼 제작 과정을 공유해 드리고자 합니다. 아주 작은 CSS입니다. :slight_smile:

이 작업을 위해 색상 변수(tertiary, secondary 및 primary-medium)를 사용했습니다.

새 주제 버튼

new-topic

초안 열기 버튼

draft-topic

#create-topic {
  color: var(--secondary);
  border: 2px solid var(--tertiary);
  background: var(--tertiary);
  transition: background .25s ease-out;
  .d-icon {
    color: var(--secondary);
  }
  &:hover,
  &:focus {
    background: var(--secondary);
    color: var(--tertiary);
    .d-icon {
      color: var(--tertiary);
    }
  }
  &.open-draft {
    background: var(--primary-medium);
    border: 2px solid var(--primary-medium);
    transition: background .25s ease-out;
    &:focus,
    &:hover {
      background: var(--secondary);
      color: var(--primary-medium);
      border: 2px solid var(--primary-medium);
      .d-icon {
        color: var(--primary-medium);
      }
    }
  }
}

좋은 하루 보내세요! :slight_smile:

10개의 좋아요
Developer Index
2021: The Year in Review
2

before

image
image303×115 2.82 KB

after
image
image294×106 2.54 KB

아무것도 바뀌지 않았어요 :no_good_man:

3

@valsha 추측일 뿐이지만, 그 CSS 트릭이 hover 상태를 변경하기 때문일 수 있어요. 그리고 현재 hover 상태가 아니니까요.

일반적으로, 그리고 대부분이 알고 있듯이, hover(그리고 다른 많은 것들)는 마우스를 사용하는 시스템에서만 표시됩니다. 모바일에서는 사용자가 버튼을 그냥 탭하기 때문이죠 :wink:

2개의 좋아요
4

그 버튼 디자인이 마음에 들어. 어떻게 만든 거야?

그리고 이건 완전히 다른 이야기인데… 그 gif들을 녹화/변환할 때 어떤 도구를 쓰고 있어?

(아… 잘못 누른 건가? 그래서: @Don)

2개의 좋아요
5

안녕하세요,

이것은 Dracula 테마인 것 같습니다. 소스를 확인해 보았습니다.

오버라이드를 하려면 #create-topic 앞에 button을 추가해야 합니다.

따라서 시작 부분은 다음과 같아야 합니다 :arrow_down:

button#create-topic {

초록색 success 색상을 유지하려면 var(--tertiary)를 var(--success)로 변경해야 합니다. 다음과 같이요 :arrow_down:

button#create-topic {
  color: var(--secondary);
  border: 2px solid var(--success);
  background: var(--success);
  transition: background .25s ease-out;
  .d-icon {
    color: var(--secondary);
  }
  &:hover,
  &:focus {
    background: var(--secondary);
    color: var(--success);
    .d-icon {
      color: var(--success);
    }
  }
}
2개의 좋아요
6

네, 이 버튼은 Dracula 테마에서 가져온 거예요.
@Don, 늘 그렇듯이 구원자세요 :+1:

2개의 좋아요
7

그리고 여러분, 누군가가 자신이 무엇을 하는지(항상 '그’가… 하는) 조금만 더 생각하지 않으면 어떤 일이 일어나는지 보여주는 시연이었습니다. 이번에는 사람을 잘못 태그하고 잘못된 곳에서 질문을 던지는 것이 혼란을 줄 수 있죠. 정말 다행인 것은 이것이 CSS/테마에 관한 주제일 뿐, 세계 평화나 42, 혹은 다른 중요한 문제가 아니라는 점입니다 :rofl:

사실 @Don의 버튼이 궁금했었는데. 하지만 네온 그린도 꽤 괜찮네요 :+1:

2개의 좋아요
8

「New Topic」에서 「Create a new Topic」로 텍스트를 어떻게 변경하나요? @Don

9

안녕하세요,

/admin/customize/site_texts 페이지로 이동하여 해당 텍스트를 검색하고 수정해 주세요. :slightly_smiling_face:

10

테마 자체에서 이 작업을 수행할 수 있을까요?

11

테마를 통해 이를 수행하는 방법은 I18n.translations 객체를 변경하는 스크립트를 추가하는 것입니다.

2개의 좋아요
13

이제 텍스트, 아이콘 및 기타 관련 버튼 동작을 쉽게 사용자 지정할 수 있는 Theme 컴포넌트가 있습니다:

버튼 스타일 변경은 지원하지 않지만, 추후 추가될 수 있을 것으로 생각합니다.

2개의 좋아요