이걸 어떻게 설명해야 할지 감이 안 잡혀서 사진 올립니다:
빨간색 박스가 있는 부분에서 “새롭고 읽지 않은 주제” 영역을 별도의 "박스/버블"로 분리하고 싶습니다. 빨간색 물결선이 있는 부분은 그 공간이 비어 있고, “추적” 벨 아이콘 아래 부분은 그것도 별도의 "박스/버블"이 되도록 하려고 합니다. 기본적으로는 이 부분을 그 사이에 여백이 있는 둥근 테두리 두 개로 만들고 싶은 겁니다. 결국 “새롭고 읽지 않은 주제” 영역을 바로 위에 있는 것에서 분리하려는 거죠. 이게 가능한가요? 가능하다면 방법을 알려주세요.
주제 영역의 div ID가 suggested-topics이고 div 클래스가 more-topics__list인 것 같습니다. 그리고 이미 모든 것을 감싸고 있는 둥근 박스 전체는 main-outlet인 것 같은데, 추적 벨 아이콘이 있는 위의 영역이 어느 것인지 알 수가 없습니다.
그래서 이렇게 보이도록 하고 싶습니다:
빨간색 박스는 위에서 언급한 "박스/버블"을 나타냅니다. 그들 사이의 주황색 선은 제가 여백을 넣고 싶은 부분입니다. 그리고 네, 일반적으로 권장되는 CSS 주제 등을 다 읽어봤습니다. 6시간 정도 헤맨 끝에 해결하지 못했습니다. 이것저것 해보면서, 다음과 같이 하면:
.more-topics__list{
display:none;
}
추적 벨 아이콘과 하단의 “더 읽고 싶나요?..” 사이의 모든 것이 기본적으로 사라지는데, 콘텐츠를 유지하면서 섹션을 분리하고 싶은데 그렇게는 아무 데도 도움이 되지 않습니다.
manuel
3월 28, 2024, 7:11오전
2
섹션을 두 개의 컨테이너로 나누려면 기본 템플릿을 변경해야 합니다. 기본 템플릿은 CSS만으로 조정할 수 없다고 생각합니다. 그 이유는 다음과 같습니다:
기본 템플릿에는 다른 래퍼가 없기 때문입니다.
pfaffman
3월 28, 2024, 9:31오전
3
거기에 플러그인 아웃렛이 있는지 확인해 볼 수 있습니다
Don
3월 28, 2024, 12:18오후
4
안녕하세요
이와 같은 효과를 다음과 같이 구현할 수 있습니다.
공통 CSS
body.archetype-regular,
body.archetype-banner,
body.archetype-private_message {
#main-outlet {
margin-top: 30px;
margin-bottom: 0px;
background: transparent !important;
box-shadow: none;
padding: 0em 0em 5%;
width: 100% !important;
}
#topic-title {
margin-bottom: 0;
background: var(--secondary);
padding: 3em 3em 1em;
border-radius: 1em 1em 0 0;
}
.container.posts {
margin-bottom: 0;
background: var(--secondary);
padding: 0 3em var(--below-topic-margin);
}
.topic-above-footer-buttons-outlet.presence {
margin: 0;
padding: var(--below-topic-margin) 0;
background: var(--secondary);
}
#topic-footer-buttons {
max-width: 100%;
background: var(--secondary);
border-radius: 0 0 1em 1em;
margin: 0;
padding: var(--below-topic-margin) 3em 1em;
}
.more-topics__container {
border-radius: 1em;
background: var(--secondary);
max-width: 100%;
padding: 3em;
}
}
}
manuel
3월 28, 2024, 12:32오후
5
하하, 그 정도 작업량이라면 절대 선택하지 않을 옵션인데! 잘했어 @Don
Discourse Air Theme