새로운 테마 컴포넌트를 생성해서, 이 경우 air 테마에 추가한 건가요?
위에 제가 올린 모드를 확인하셨을 텐데요. 테마 설정의 일부를 오버라이드하려는 건가요, 아니면 제가 위에 쓴 것처럼 모드를 추가하거나 수정하려는 건가요?
댄, 감사합니다! 새 컴포넌트를 추가하고 거기에 사용자 지정 CSS를 적용하는 방법을 알아냈습니다.
1개의 좋아요
설정을 오버라이드(Override)하고 싶다면 "!important"를 사용하세요.
예시
.some-selector {
padding-top: 2.5em !important;
{
저도 아직 배우는 중입니다. Discourse는 매우 다양하네요.
2개의 좋아요
훌륭한 테마를 제공해 주셔서 감사합니다. 모든 기능이 정상적으로 작동합니다. 그런데 배경 이미지를 어떻게 변경할 수 있는지 궁금합니다.
도움 주셔서 감사합니다.
2개의 좋아요
테마 컴포넌트를 생성하고 다음 코드를 배경 이미지와 함께 추가하세요
html .background-container {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
background-image: url();
background-size: cover;
opacity: 1;
/* background: linear-gradient(90deg, var(--tertiary-hover) 0%, var(--tertiary) 100%); */
clip-path: unset;
background-color: var(--secondary) !important;
}
3개의 좋아요
안녕하세요,
로고 근처 헤더에 외부 링크를 추가할 수 있는 방법이 있을까요?
감사합니다!
이런 것들이 있습니다
그리고
사이트 헤더 아래 드롭다운이 있는 바를 추가하는 것도 있습니다
2개의 좋아요
안녕하세요,
답장 주셔서 정말 감사합니다.
저는 이 방법을 사용했지만 완전히 만족스럽지 않았습니다: Custom Top Navigation Links
두 번째 제안이 제가 필요로 하는 바로 그것입니다. 결과에 매우 만족하고 있습니다.
도움 주셔서 정말 감사합니다!
1개의 좋아요
안녕하세요,
이중 게시물이 죄송합니다. 데스크톱과 모바일 모두에서 하위 카테고리를 표시하면서, 모바일에서 카테고리 제목이 긴 경우에도 전체 제목을 표시하는 방법이 있을까요?
현재 설정은 'Modern Category + Group Boxes’를 사용하지 않는 CATEGORY BOXES WITH SUBCATEGORIES입니다.
데스크톱 버전을 사용할 경우 데스크톱과 모바일 모두에서 결과가 좋습니다. 하지만 모바일 버전을 사용하면 일부 카테고리 제목의 끝부분을 읽을 수 없습니다.
도와주셔서 감사합니다!
스크린샷을 올릴 수 있나요?
하위 카테고리가 두 곳에서 모두 표시되고 있습니다. 카테고리 설명을 두 곳 모두에 표시하길 원하시나요? 아니면 데스크톱과 동일하게 설명 없이 표시하길 원하시나요?
불분명하게 말씀드려서 죄송합니다.
전체 카테고리 제목을 보고 싶습니다.
예를 들어 데스크톱 버전에서는 «Discussions Générales sur la mode »라고 표시되지만, 모바일 버전에서는 « Discussions Générales »만 표시됩니다.
1개의 좋아요
CSS 코드를 바로 떠올리지는 못합니다. 하지만 첫 번째 사진에 있는 것처럼 카테고리 제목이 줄바꿈되도록 설정할 수 있어야 합니다.
데스크톱에서 요소 검사(Inspect Element)를 사용해 카테고리 이름이 2줄로 표시되도록 사용되는 CSS를 찾아보시는 것도 좋습니다.
ChatGPT와 Claude를 사용하여 CSS를 시도해 보았습니다:
.category-box-heading,
.category-box-heading a,
.category-box-heading h3 {
max-width: 100%;
width: 100%;
display: block;
word-break: break-word;
overflow-wrap: break-word;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
line-height: 1.4;
padding: 5px 0;
}
.parent-box-link {
display: block;
width: 100%;
}
@media screen and (max-width: 767px) {
.category-box-heading h3 {
font-size: 16px; /* 필요에 따라 이 값을 조정하세요 */
}
}
하지만 작동하지 않습니다.
모바일에서 데스크톱 뷰를 강제하는 방법이 있을까요? 설명과 하위 카테고리를 함께 볼 수 있다면 완벽할 것 같습니다.
감사합니다!
모바일에서 데스크톱 뷰가 어떻게 보이는지 테스트해 보셨나요? 일부 모바일 기기에서는 그렇게 좋지가 않습니다.
답장 주셔서 감사합니다.
방금 iPhone 2대에서 테스트해 보았더니 다음과 같은 결과를 얻었습니다.
제가 원하던 바로 그 모습입니다.
사용자들이 설정을 건드리지 않고 바로 이 화면을 볼 수 있으면 좋겠습니다.
커스텀 컴포넌트를 비활성화하세요. 모바일 CSS에서 새로운 테스트 컴포넌트를 만들어 다음을 시도해 보세요.
.category-box-heading h3 {
//* 아래 2줄을 주석 해제해야 할 수 있습니다.
// Overflow: unset !important;
// Text-overflow: unset !important;
text-wrap: balance !important;
}
다른 CSS 수정은 필요하지 않을 것으로 확신합니다.
방금 테스트해 보았지만, 제 스니펫에서도 작동하지 않습니다.
최신 버전의 유효한 코드:
.full-width .contents .topic-list thead th.posts {
width: 10%;
}
.full-width .contents .topic-list thead th.activity {
width: 10%;
order: 4;
}
th.num.views {
width: 10%;
order: 3;
display: block;
}
.full-width .contents .topic-list tbody tr:not(.topic-list-item-separator) td.posts {
width: 10%;
order: 2;
}
.full-width .contents .topic-list tbody tr:not(.topic-list-item-separator) td.age {
width: 10%;
order: 4;
}
.topic-list .views {
width: 10% !important;
order: 3 !important;
display: flex !important;
visibility: visible !important;
justify-content: center;
}
.full-width .contents .topic-list tbody tr:not(.topic-list-item-separator) td.views {
width: 10% !important;
order: 3 !important;
display: flex !important;
justify-content: center;
align-items: center;
}
2개의 좋아요
