커스텀 그룹 전체의 사용자 이름 색상을 CSS로 변경했는데, 가끔은 되고 안 될 때가 있어요?

개발
1

정확히 무엇이 원인이지는 모르겠지만, 이 작업을 위해 사용한 CSS 코드가 무작위로 작동했다가 멈추는 현상이 발생하고 있습니다. 업데이트 때문인지, 어떤 설정 때문인지 알 수 없어요…

가장 오래 사용해 온 코드는 다음과 같습니다.

.topic-post .Veeps a {
color: #66FF00;
}

여기서 "Veeps"는 제 커스텀 그룹입니다. 어젯밤이나 그 전날까지는 정상적으로 작동했는데, 오늘 보니 특정 사용자 이름에 연결된 색상을 제외하고 모든 색상이 모든 테마에서 기본값으로 돌아와 있더라고요. 새 테마를 만들고 모든 수정 사항을 지워 시도해 봤지만, 아무것도 작동하지 않았습니다. “admin”, “staff”, moderator 같은 사전 정의된 그룹에서는 완벽하게 작동하지만, 커스텀 그룹에서는 어떤 것도 트리거되지 않습니다. Primary Group으로 설정해 보기도 했고, 해당 사용자가 속한 유일한 그룹으로 만들어 보기도 했으며, 다른 커스텀 그룹(“Owner”)에서도 시도해 봤지만, 아무 소용이 없었습니다. 특정 사용자 이름에 적용하면 정상적으로 작동하지만, 개인별로 100개나 되는 개별 항목을 만들어야 하는 것은 번거롭고, 그룹이 변경되어도 업데이트되지 않습니다.

span.username.staff a {
      color: #00A9DB;
}

이것은 작동하지만, 커스텀 그룹에는 적용되지 않습니다. 커스텀 그룹이 작동할 수 있다는 것은 알고 있습니다. 수년간 여러 그룹에서 작동해 왔으니까요(작동하지 않을 때를 제외하고). 더 나은 CSS가 있는지, 아니면 제가 우연히 건드리는 설정이 있는지 궁금합니다.

GitHub - discourse/discourse-groups-css-classes-in-body · GitHub 를 설치했고, 이제 다음 코드가 작동합니다.

div.topic-post.group-Veeps div.names span.username a {
  color: #8A2BE2;
}

하지만 이 플러그인(또는 해당 CSS)을 지난 2년 동안 설치하거나 사용하지 않았기 때문에, 정확히 무엇이 멈췄는지 또는 무엇을 수정해야 하는지 이해하는 데 도움이 되지 않습니다. 그저 드릴로 못을 박는 격이죠.

2

안녕하세요,

어제 DEV: add title class name, prefix username class (#19482) · discourse/discourse@b1e0836 · GitHub 에서 변경 사항이 발생하여, 이제 CSS에서 그룹 이름 앞에 group-- 접두사를 추가해야 합니다. 예를 들어: .group--Veeps.

3

네, 불편을 드려 죄송합니다. 이전 방식은 그룹 클래스 이름을 추가할 때 오류가 발생하기 쉬웠습니다… CSS에서 클래스 이름과 일치하는 그룹 이름이 있으면 레이아웃 문제가 발생했기 때문입니다.

예를 들어, "hidden"이라는 이름의 그룹은 .hidden 클래스를 추가하여 사용자 이름을 숨기게 만들었습니다. group-- 접두사를 추가하면 이 문제를 방지할 수 있으며, 향후 다시 변경할 필요가 없을 것입니다. 따라서 .Veeps를 .group--veeps로만 업데이트하시면 됩니다.

4

알려 주셔서 감사합니다. 다른 문제를 해결하려다 오히려 무언가를 망가뜨렸다는 사실에 조금 덜 멍청하다고 느끼게 되었습니다(자주 있는 일이죠!). 몇 가지 다른 사례를 테스트해 보았는데 모두 정상적으로 작동하며, 이 정보를 바탕으로 해결책을 찾았습니다.

제가 질문했던 방식으로 커스텀 Primary Groups를 계속 사용하려면 GitHub - discourse/discourse-groups-css-classes-in-body · GitHub 플러그인이 필요한가요, 아니면 불필요한가요? 처음부터 그 플러그ンの 목적을 잘못 이해했을 수도 있고, 제가 하던 작업에는 애초에 필요하지 않았을 수도 있습니다. 테스트 테마에서 플러그인을 제거해 보았는데 커스텀 primary group 코드가 여전히 작동하네요. 그래서 필요 없는 것 같지만… 나중에 예상치 못한 문제가 발생하는 것을 피하기 위해, 그냥 끄기 전에 확실하게 알고 싶습니다.

5

해당 플러그인 없이도 Primary groups는 존재하므로 CSS로 타겟팅할 수 있습니다. 테마 컴포넌트를 설치하면 Primary groups가 아닌 그룹들도 타겟팅할 수 있습니다. :+1:

6

어떤 코드를 사용해야 하는지 이해가 안 되네요. 번역이 문맥에서 벗어난 것 같습니다.

그래서 저는 이 코드를

div.topic-post.group-Veeps div.names span.username a {
  color: #8A2BE2;
}

대신 이렇게 사용했습니다.

div.topic-post.group-- Veeps div.names span.username a {
  color: #8A2BE2;
}

코드에 무엇을 넣어야 하는지 이해가 안 됩니다. --만 추가된 것 같은데?

@Kartoon @Don @awesomerobot

7

안녕하세요,

아래와 같이 작동해야 합니다 :arrow_down_small:

.names span {
  &.group--GroupName a {
    color: red;
  }
}

하지만 저는 이제 이것을 위한 빠른 테마 컴포넌트를 만들었습니다. :slightly_smiling_face:

여기서 간단히 설정할 수 있습니다.

groupname;color

Screenshot 2023-01-14 at 21.07.53
Screenshot 2023-01-14 at 21.07.53767×399 31.1 KB

8

나는 시스템을 동작하게 만드는 것에는 익숙하지만, 왜 그런지 설명하는 것에는 능숙하지 않을 수 있어서 아마 가장 적합한 답변을 드리기 어려울 것 같습니다. 하지만 현재 사용하고 있으며 잘 작동하는 코드는 다음과 같습니다.

.topic-post.group-Veeps div.names span.username a {
   color: #66FF00;
 }

물론 "Veeps"는 사용자 그룹 이름으로, 제 환경에서 그렇게 이름이 붙어 있을 뿐이므로 본인의 사용자 그룹 이름으로 교체하면 됩니다.

.names span {
  &.group--Veeps a {
    color: red;
  }
}

위에서 언급했듯이 이 코드도 작동합니다. 저는 기존에 사용하던 코드로 교체했을 뿐입니다. 어쨌든 편의를 위해 방금 그가 올린 플러그인을 설치할 가능성이 높습니다.

9

저도 같은 문제를 겪고 있습니다. 무엇이 문제인지 모르겠어요. 유능한 테마나 코드를 사용해도 멤버 이름의 색상이 변하지 않아서 정말 놀랍습니다. 심지어 CSS나 수정 없이 raw 테마에서 cogido와 component 테마를 사용해 봤지만, 제목의 색상에 아무런 변화가 없어요.

흥미로운 점을 하나 발견했습니다. 누군가를 그룹의 소유주로 지정하면, 변경 코드가 작동하고 소유자로 설정한 멤버의 이름 색상이 바뀌어요. 하지만 소유주가 아닌 멤버들은 색상이 변하지 않습니다.

@Kartoon @Don @xebiyen