CSS 변경이 더 이상 작동하지 않음 (아바타 글로우)

개발
1

이 CSS를 테마에 추가한 지 약 6개월이 지났는데, 그 동안은 잘 작동했습니다. 특정 사용자 그룹의 아바타 주위에 굵은 금색 글로우 효과를 추가해 주는 것이었죠.

.group-Owner>article>.row>.topic-avatar>a>img {
    box-shadow: 0 0 0 1px rgba(255,255,255,0.3), 0 0 0 1.5px #F99A07, 0 0 10px 4px rgba(244,148,14,0.75);
}
.group-Admin>article>.row>.topic-avatar>a>img {
    box-shadow: 0 0 0 1px rgba(255,255,255,0.3), 0 0 0 1.5px #F99A07, 0 0 10px 4px rgba(244,148,14,0.75);
}
.group-Lead>article>.row>.topic-avatar>a>img {
    box-shadow: 0 0 0 1px rgba(255,255,255,0.3), 0 0 0 1.5px #F99A07, 0 0 10px 4px rgba(244,148,14,0.75);
}

하지만 어느 시점부터는(정확히 언제인지 모르겠습니다. 산타 모자 효과도 사라졌는데, 그게 일주일 전에 일어난 일이라고 하더군요. 저는 그걸 모르고 있었습니다. 둘 다 CSS를 추가한 것이었으므로 같은 시점에 일어난 일일 것 같습니다) 효과가 나타나지 않습니다. 저는 기존 수정 사항을 추가하거나 조정하는 것 외에는 CSS에 대해 전혀 알지 못합니다. 만약 무언가를 변경한 업데이트 때문에 발생한 문제라면, 이를 다시 활성화하려면 무엇을 변경해야 할까요? 아니면 여전히 정상으로 보인다면, 이것이 깨진 이유는 무엇일 수 있을까요?

2

지정하신 글로우 효과를 추가하는 CSS가 적용되는 페이지를 찾지 못했습니다. 다만, 주제 소유자의 게시물에서 아바타 이미지에 굵은 금빛 글로우를 추가하고 싶다면 다음 코드를 사용할 수 있습니다:

.topic-owner > article > .row > .topic-avatar > .post-avatar > a > img {
    box-shadow: 0 0 0 1px rgba(255,255,255,0.3), 0 0 0 1.5px #F99A07, 0 0 10px 4px rgba(244,148,14,0.75);
}

이전에 이 효과가 제대로 작동했던 작업 중인 페이지의 스크린샷을 제공해 주시면, 더 구체적으로 도움을 드릴 수 있을 것 같습니다.

– 수정 –

어떤 템플릿에서 이 코드를 사용하셨나요?

3

추측일 뿐이지만, .topic-avatar 대신 .post-avatar를 사용해 보셨나요? 이 부분이 문제의 일부(혹은 전부)일 수 있습니다.

데스크톱 환경에서, 올해 내내 후자 클래스에 전자 클래스가 포함되도록 변경되어 크리스마스 모자 CSS도 작동하지 않게 되었습니다(관련 해결책: Christmas hats! - #19 by merefield)

항상 브라우저의 검사기를 사용하여 HTML을 확인해 보세요(우클릭 → 검사). 이렇게 하면 어떤 일이 일어나고 있는지 파악하는 데 큰 힌트를 얻을 수 있습니다!

4

와, 다른 일로 정신이 없어서 이걸 질문했던 걸 완전히 잊고 있었네요. 아직도 다시 추가하지 못했네요. 죄송합니다.

저를 특정 사용자로 강조한 것이 아니라, "Owner"인 제 사용자 그룹, 그리고 “admin” 및 "Lead"를 강조한 것이었습니다. 제가 직접 만든 코드가 아니라, 누군가가 이전에 여기 주제에서 게시한 것을 복사해서 붙여넣은 것인데, 제가 설명한 대로 작동해서 정확히 무엇(또는 왜)인지 전혀 알지 못합니다. 게시하신 코드는 완벽하게 작동합니다(방금 테스트해봤는데) 말씀하신 대로 동작하지만, 저는 특정 사용자 그룹들이 글로우 효과를 내도록 하려고 했습니다(주제 내부와 메인보드 모두에서, 제가 처음 게시한 코드가 하던 대로요). group-owner/admin으로 수정해 보았지만, 제가 하려던 일을 하는 대신 그냥 깨져버렸습니다.

다만, 여러분의 코드는 화려해 보이는 것 이상의 용도가 있으므로 그 사이에는 그걸 사용하겠지만, 여전히 관심이 있습니다.

5

제 CSS는 아직 꽤 기본적인 수준이지만, 이렇게 하면 작동할 것 같습니다:

.group-Owner img.avatar {
    box-shadow: 0 0 0 1px rgba(255,255,255,0.3), 0 0 0 1.5px #F99A07, 0 0 10px 4px rgba(244,148,14,0.75);
}

다만 ‘Owner’ 그룹이 사용자의 기본 그룹으로 설정되어야 합니다.

(토픽과 토픽 목록 모두에 적용하도록 살짝 수정했습니다 :slight_smile:)