daemon
(Alex)
6월 18, 2023, 8:26오전
1
안녕하세요!
현재 저만의 “블로그” 테마를 개발 중인데, 최신 글 목록을 그리드 스타일로(이곳의 테마 카테고리처럼) 설정하고 싶습니다.
이 기능을 위한 몇 가지 컴포넌트가 있다는 것은 알고 있지만, 제 글에는 이미지가 없어서 그렇게 하면 약간 어색해 보입니다. 그리고 (예를 들어 topic-thumbnails 컴포넌트에서처럼) 2열 또는 3열(또는 유연한 설정)로 변경할 수 있는 옵션도 없습니다.
여러 가지를 시도해 봤지만(그 결과 사이트가 거의 깨지기도 했습니다 ) 어떻게 해야 하는지 도저히 알 수가 없었습니다.
이 문제를 해결하는 방법에 대한 힌트를 주실 수 있는 분이 있을까요? 저는 기본적인 설정만 알면 되고, 이후에는 제 필요에 맞게 "스타일"을 조정할 수 있습니다.
감사합니다.
P.S. 만약 이 질문이 잘못된 카테고리에 올라온 것이라면 옮겨 주시면 감사하겠습니다.
이런 것들의 대부분은 관리자 > 커스터마이즈 > 테마 > 사용자 정의 CSS를 통해 CSS로 설정할 수 있습니다.
저는 두 개의 열과 더 좁은 뷰를 원했기 때문에 max-width를 1100px(?)에서 950px으로 줄였는데, 이 덕분에 열이 세 개에서 두 개로 바뀌었습니다. 제 경우엔 다음과 같았습니다.
:root { --d-max-width: 950px; }
토픽 목록 미리보기는 반응형으로 동작하여 열 수를 자동으로 설정합니다. 사이드바(예: Layouts 플러그인)로 화면을 약간 좁히면 열 수가 줄어듭니다. (이 예시 https://www.starzen.space 를 참고하세요 - 처음에는 2열로 시작하지만 태그를 클릭하면 3열로 돌아옵니다)
daemon
(Alex)
6월 19, 2023, 7:05오전
4
anderer:
이런 것들은 대부분 관리자 > 커스터마이즈 > 테마 > 사용자 정의 CSS를 통해 CSS로 설정할 수 있습니다.
저도 두 개의 열과 더 좁은 뷰를 원했기 때문에 max-width를 1100px(?)에서 950px으로 줄였고, 이렇게 하면 세 열에서 두 열로 변경되었습니다. 제 경우에는 다음과 같았습니다.
:root { --d-max-width: 950px; }
네, 이것이 CSS로 가능하다는 것은 알고 있습니다. 제 테마 전체가 CSS로 만들어졌으니까요.
그리고 제 디자인은 1100px가 아니라 화면 해상도에 따라 유연하게 반응합니다. 그리고 아니요, 저는 그런 초소형 고정 폭인 1100px을 원하지 않습니다.
@merefield
이 테마 구성 요소를 많이 시도해 보았지만, 제가 찾던 것이 아니었습니다. 포스트에 이미지가 없으며, 열은 화면 해상도에 따라 유연하게 변해야 합니다.
제가 찾는 것은 리스트를 그리드로 전환하는 CSS 클래스입니다.
그렇습니다. 그래서 모바일에서는 열이 하나만 표시됩니다.
11인치 iPad에서 오른쪽 사이드바가 하나 있는 경우, TLP는 가로 모드에서 두 열, 세로 모드에서 한 열을 표시합니다.
TLP의 핵심 코드는 다음과 같습니다:
th {
display: none;
}
tbody {
.topic-list-item-separator {
display: none;
}
display: grid;
gap: 4px;
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
grid-auto-rows: 4px;
border-top: none;
}
.topic-list-item, tr {
border: none;
}
.tiles-grid-item-width2 {
box-sizing: border-box;
다음 글을 읽어보시기 바랍니다:
그리고 이것도 참고해 주세요(다만, '해상도’가 DPI와 혼동될 수 있어 정확히 의도하신 것이 해상도인지 확신은 없습니다):
https://stackoverflow.com/questions/11722442/is-there-a-way-to-use-dpi-in-css-media-queries-instead-of-px
daemon
(Alex)
6월 19, 2023, 8:48오전
6
감사합니다!
제 문제는 목록에 사용할 적절한 discourse CSS 클래스를 찾는 것이었습니다.
topic-list-item인지, topic-list-item-seperator인지, 아니면 다른 것인지요.
나중에 시도해 보겠습니다.
Grid CSS는 아이템 레벨보다 위에 있어야 합니다. TLP나 TLT가 하는 방식을 그대로 따라 하세요.
daemon
(Alex)
6월 19, 2023, 5:08오후
8
현재 https://meta.discourse.org/t/topic-list-thumbnails/150602/1을 사용하고 있으며, CSS를 통해 몇 가지 항목을 오버라이드했습니다. 텍스트에 이미지가 포함된 것은 원하지 않았지만, 기본 이미지를 사용할 수 있습니다.
Alex:
하지만 기본 이미지를 사용할 수 있습니다.
아이콘을 말하는 거 아닌가요?
TLP를 사용할 때 이미지를 사용할 필요가 없으며, 기본 이미지 를 사용할 수 있습니다.
daemon
(Alex)
6월 20, 2023, 6:25오후
11
더블 포스트를 해서 죄송합니다. 그런데 등록/로그인 버튼에 대해 또 다른 질문이 있습니다.
비로그인 사용자에게 이 두 버튼을 숨기려고 하면, 제가 로그인도 할 수 없게 됩니다. 로그인 페이지로 이동할 수 있는 URL이나 비슷한 방법이 있을까요?
Canapin
(Coin-coin le Canapin)
6월 22, 2023, 3:00오후
13
Alex:
정말 로그인 URL이 없나요?
https://meta.discourse.org/login 또는
I think the [YourSite]u/admin-login/ link can bypass SSO.
로그인 방법과 원하는 목적에 따라 다릅니다.