I really liked the theme shared way back in 2016 by @jsthon
Name
Description
background image
Enter image url
tile background
no background image
Disable the background image and tiling settings above.
This theme has three settings:
A field to add your own background image
An option to tile it
And an option to remove both of the above options
If you disable the tile option, the image will be set to background-size: cover, and your browser will scale your image to proportionately cover the full background. For example:
Credit for the default background pattern included goes to Toptal Subtle Patterns .
Hosted by us? Themes are available to use on our Standard, Business, and Enterprise plans.
Last edited by @JammyDodger 2024-06-17T11:28:20Z
Check document Perform check on document:
76개의 좋아요
eextra
1월 18, 2020, 2:00오후
54
이 테마를 사용하면서 이 문제를 겪는 사람은 저뿐인가요? 구글 페이지 스피드로 테스트하면 99%가 나오지만, 실제로는 페이지가 로딩되지 않아 결과가 왜곡됩니다.
구글이 이 페이지를 인식하지 못해서 그런 건가요?
6개의 좋아요
음, 네, 저도 같은 문제를 보고 있어요… 테마의 어떤 부분이 Google에 제공하는 Discourse 버전과 충돌하는 것 같습니다. 조사해 보겠습니다. 위에서 보고된 인쇄 보기 문제를 일으키는 것과 같은 문제인 것 같습니다.
3개의 좋아요
neounix
3월 22, 2020, 4:41오전
70
@awesomerobot
정말 멋진 테마네요.
데스크톱에서 Graceful의 폭을 훨씬 넓게 만들려고 시도하고 있습니다. 이렇게 시도해 봤습니다:
#main-outlet {
width: auto;
max-width: 1210px; /* 이 설정으로 컨테이너가 로고/헤더 컨트롤과 같은 폭이 됩니다 */
}
이 CSS 덕분에 전체 컨테이너가 넓어졌고, 하단의 추천 주제들이 페이지를 아름답게 채우지만, 주제 안의 게시물 전체 폭은 제 넓은 버전에는 너무 좁습니다.
인스펙터를 사용해 여러 요소를 시도해 봤지만, 전문가가 아니어서 주제/게시물의 폭을 #main-outlet의 폭과 일치시킬 수 없었습니다.
도와주실 수 있을까요?
감사합니다.
또한 이것도 시도해 봤습니다:
#main-outlet {
width: auto;
max-width: 80%;
}
하지만 게시물 폭을 컨테이너 폭과 일치시킬 수 없습니다:
1개의 좋아요
topic-body에는 자체 너비 설정이 있습니다.
기본값:
.topic-body {
width: calc(690px + (11px * 2));
}
690px 값만 변경하고 나머지는 유지하세요(토픽 게시글의 패딩과 연동되어 있습니다).
6개의 좋아요
neounix
3월 23, 2020, 7:32오전
72
감사합니다! 나중에 시도해 보고 결과를 다시 올릴게요.
어제 .topic-body를 변경해 봤지만, @Steven님의 제안에 따라 다시 시도해 볼게요.
1개의 좋아요
neounix
3월 23, 2020, 11:20오전
73
@Steven님 ,
데스크톱 CSS에 다음 내용을 추가했습니다:
#main-outlet {
width: auto;
max-width: 80%;
}
.topic-body {
width: calc(1020px + (11px * 2));
}
부분적으로 작동했지만, 일부 문제가 있습니다. 이를 해결하는 CSS 트릭을 아시는 분 있을까요?
이미지 참조:
1개의 좋아요
Steven
3월 23, 2020, 12:10오후
74
지금 컴퓨터에 있지는 않지만, timeline-container 클래스에서 margin-left를 수정해야 하는 부분이 있는 것 같습니다.
1개의 좋아요
네, 타임라인의 경우 .timeline-container에서 오버라이드해야 하는 margin-left가 몇 개 있습니다 (브레이크포인트 3개):
.timeline-loading {
width: 900px;
}
.timeline-container {
box-sizing: border-box;
z-index: z("timeline");
margin-left: 757px;
@include breakpoint(extra-large, min-width) {
margin-left: 820px;
}
@media all and (min-width: 1250px) {
margin-left: 900px;
}
position: fixed;
-webkit-transform: translate3d(0, 0, 0);
4개의 좋아요
neounix
3월 24, 2020, 9:11오전
76
Hi @awesomerobot
Kris,
우리가 원하는 wide look를 얻기 위해 graceful하지 않은 방법으로 .timeline-container를 숨겼습니다.
#main-outlet {
width: auto;
max-width: 70%;
}
.topic-body {
width: 100%;
}
.timeline-container .topic-timeline {
display: none;
}
graceful하지는 않지만, 적어도 큰 코드 블록이 있는 경우 ‘괜찮게’ 작동하며, 큰 개발자 화면에서 읽기가 더 쉽습니다.
제안대로 클래스를 오버라이드하여 .timeline-container를 표시하면 좋겠지만, 제 CSS 실력이 부족해서인지 작동하지 않았습니다:
도와주셔서 감사드리며, 이 멋진 테마도 감사합니다.
1개의 좋아요
지금까지 이 테마가 정말 마음에 듭니다. 공유해 주셔서 감사합니다!
모바일 화면에서 카테고리 색상 바가 사라지는 것을 확인했습니다. 의도된 것인지, 그리고 다시 표시할 방법이 있는지 궁금합니다.
또한, 카테고리에 배경이 설정된 경우 배경을 끄는 방법이 있을까요? 잘 작동하는 것 같긴 한데, 긴 게시글을 스크롤할 때 화면이 끊기면서 테마 배경이 잠깐 보이는 현상이 있습니다.
감사합니다!
1개의 좋아요
모바일 CSS를 살펴보니 해당 스타일이 제외되어 있는 것을 확인했습니다. left-border 부분을 주석 처리하니 색상 테두리가 다시 표시되었습니다:
.category-list-item {
// border-left: none;
border-top: 2px solid;
.category-name {
font-weight: normal;
}
}
하지만 테마가 업데이트될 때마다 이 변경 사항이 덮어써질 것임을 알고 있습니다. 이러한 상황에서 수정 사항을 유지하는 최선의 방법은 무엇인가요?
모바일 CSS 부분에 커스텀 CSS 변경 사항을 보관하는 커스텀 테마 컴포넌트가 있습니다:
.category-list-item {
border-left: 4px !important;
}
…하지만 특정 카테고리 색상이 표시되지 않고 흰색 바만 보입니다. 올바른 카테고리 색상을 표시하려면 어떻게 해야 하나요? 카테고리 색상 변수와 관련이 있다는 것은 알지만, 이에 대한 참조를 찾을 수 없습니다.
CSS 등에 대해서는 초보자인 실수하고 있을 수도 있습니다.
감사합니다,
2개의 좋아요
IAmGav
11월 29, 2020, 6:04오후
91
헤더 색상 관련 문제가 있습니다.
헤더 배경색과 헤더 텍스트를 변경했는데, 설정이 반영되지 않습니다.
아이콘은 여전히 회색입니다.
dax
11월 30, 2020, 10:51오전
92
색상이 순수한 색이 아니라 #ffffff의 “중간~낮은” 변수이기 때문에 기본 동작입니다.
해당 색상을 덮어쓰는 방법은 여기를 참고하세요. How to Change Header Icon Color? - #2 by awesomerobot
3개의 좋아요
Jack51
1월 17, 2021, 4:39오전
100
이 테마가 정말 훌륭하다는 점을 꼭 언급하고 싶습니다. 깔끔한 디자인을 정말 사랑합니다.
2개의 좋아요
Solari
1월 20, 2021, 4:01오전
101
동의합니다! 가장 멋진 Discourse 테마 중 하나입니다.
Ray
1개의 좋아요
oshyan
2월 12, 2021, 2:06오전
102
내가 둔한 건지 모르겠지만, CSS를 조정하기 위해 만든 테마 컴포넌트로 로고 크기를 변경할 수 없습니다. 헤더의 전체 높이는 변경할 수 있지만, 로고는 여전히 변하지 않습니다. 이 CSS가 제가 시도하는 모든 변경 사항을 무효화하는 것 같습니다:
.d-header #site-logo {
크롬 인스펙터에 따르면 이 스타일은 desktop-scss-graceful.scss에서 유래한다고 합니다.
기본 테마에서는 로고 크기 변경이 정상적으로 작동하고, 앞서 말했듯이 Graceful 테마에서는 헤더 높이 변경은 되지만 로고만 변경되지 않습니다…
2개의 좋아요
네, !important는 !important가 없는 다른 모든 CSS를 덮어쓰는 거죠… 왜 거기 있는지 기억은 안 나는데, 제거할 수 있는지 알아봐야겠어요. 여러분이 작성한 CSS에도 !important를 포함하면 동작할까요?
.d-header #site-logo {
max-height: 50px !important; // <-- 여기서 원하는 높이를 지정하세요
}
3개의 좋아요
oshyan
2월 12, 2021, 6:13오전
104
빠른 답변 감사합니다! 사실 !important를 알아차렸고 제 코드에 추가해 보았지만 효과가 없었습니다. 이상한 점은, 지금 다시 시도해 보면 해당 변경 사항을 저장하고 새로고침할 때 순간적으로 올바른 크기로 보이다가 다시 축소된다는 것입니다. 그리고 인스펙터에서는 올바르게 동작하는 것처럼 보입니다:
적어도 35px가 비활성화되는 의미에서는 그렇습니다. 하지만 순서가 좀 이상해 보입니다. 어쨌든 여전히 작동하지 않습니다. 이상하네요.
참고로 저는 이것을 공통 CSS(Common CSS)에 넣고 있습니다…
업데이트: 찾았어요! 이게 원인이었네요:
.d-header #site-logo {
height: 2.667em;
}
이 코드가 header.scss 안에 있습니다!
그리고 제 own height:에 !important를 추가하면 작동합니다!
oshyan
2월 13, 2021, 1:49오전
105
좋아요, 다음 질문입니다. 이 질문은 이 테마에 특화된 것이라 생각 합니다. 저는 이 테마를 기반으로 일종의 개인 “블로그”(사실은 디지털 가든인데, 좀 생소한 용어긴 합니다)을 만들고 있습니다. 기본적으로 모든 게시글을 제가 작성하기 때문에, 특정 저자 관련 시각 요소, 주로 아바타를 제거하거나 강조를 줄이고 싶습니다. 특히 앞 페이지와 카테고리 목록의 토픽 목록에서요. 빨간색으로 표시한 부분은 가능하면 숨기고 싶은 부분입니다:
왜 그러는지 아마 짐작하시겠지요.
해본 시도들:
또한 토픽의 첫 번째 이미지를 섬네일로 표시하기 위해 다양한 컴포넌트를 조사하고 실험 중입니다. 만약 아바타를 토픽의 첫 번째 이미지 작은 섬네일로 대체할 수 있다면 정말 좋겠습니다. 하지만 일단 숨기는 것부터 시작하는 것이 좋습니다.
미리 감사드립니다!
. They haven’t been around since it was initially posted, so I’ve updated it, expanded it, and added it to github.
)