게시물 내부의 <div>에 사용자 지정 스타일을 적용할 수 있을까요?
확인해본 결과 화이트리스트에 없는 class는 제거된다고 하더군요. div와 span에 style=을 추가해 보았지만 효과가 없었으니, 이걸 할 수 있는 방법이 있는지 아는 사람이 있을까요?
기본적으로 내부 도구에서 게시물을 올리는 봇을 운영하고 있는데, 이 봇이 일반 discourse 게시물이 아님을 명확히 알 수 있도록 도구와 비슷한 모양으로 게시물을 올리고 싶습니다. 이런 식으로요:
아름다운 외관을 위해 몇 개의 중첩된 div/span이 있고, 각각 고유한 css가 적용되어 있습니다.
이deal적으로는 봇이 다음과 같은 형태로 게시물을 올릴 수 있다면 좋겠습니다:
<div class="mytool">
<div class="item">
<div class="name">Machine64</div>
<div class="message">Top Secret operation has executed sucessfully</div>
</div>
<div class="item">
<div class="name">Device 08</div>
<div class="message">Test operation failed at 16:22</div>
</div>
</div>
이때 추가된 class들은 전역 discourse css에서 정의될 것입니다. 하지만 모든 스타일링을 style 태그에 묶을 수만 있다면 제 문제는 해결될 것입니다.
어떻게 하면 될지 아이디어가 있을까요? 감사합니다!
이건 dev에 적합하지 않을 수도 있지만, 테마나 플러그인도 아닌 것 같아서 어디에 올릴지 확신이 서지 않았습니다! 잘못된 곳에 올렸다면 이동해 주세요 
david
(David Taylor)
3
스타일/클래스는 제거되지만, 게시글에서 요소를 지정하기 위해 data-theme-* 속성을 사용할 수 있습니다:
<div data-theme-bot>
여기 콘텐츠
</div>
예를 들어, 이 문단은 data-theme-bot div로 감싸져 있습니다
그리고 테마에서 다음과 같이 지정할 수 있습니다:
div[data-theme-bot] {
background-color: red;
}
@david님 감사합니다!
그런데 이 div 내부의 태그(예: <a> 또는 <span>) 스타일을 변경하려면 어떻게 해야 하나요?
david
(David Taylor)
6
SCSS에서:
div[data-theme-bot] {
a {
background-color: red;
}
}
또는 일반 CSS에서
div[data-theme-bot] a {
background-color: red;
}
@david 님, 감사합니다! 그게 바로 그거였네요.
@david 님, 말씀하신 div를 그대로 토픽에 넣고, 테마 컴포넌트에 이 CSS를 추가했습니다.
div[data-theme-bot] {
color: red;
}
인스펙터에는 div data-theme-bot (< >로 둘러싸인 형태)이 표시되지만, 계산된(color) 값은 var(--primary) html로 나와요.
추가 선택자를 넣거나, 관리자 설정을 변경해야 하나요? 감사합니다.
저도 같은 코드를 테스트해 보았는데, 제 환경에서는 잘 작동합니다. 다음을 시도해 보세요:
div[data-theme-bot] {
color: red !important;
}
이렇게 하면 작동한다면, 다른 곳(테마, 컴포넌트 또는 플러그인)의 CSS가 이 스타일보다 더 구체적이어서 오버라이드되고 있었다는 뜻입니다.
맞습니다. 제 브라우저에 캐시 문제가 있었던 것 같습니다.
이 트릭은 제 WordPress 게시물을 Discourse에 게시할 때 WordPress 버전과 유사한 모양으로 보이게 하는 데 중요한 요소입니다.
모두 감사합니다.
