Normally, topic look like this. Not as large as I want.
So, I wrote this code to increase the width :
.topic-body {
width: 830px;
}
To make it look like this :
But when my screen is smaller, it looks like this :
How to avoid this?
The position of the timeline is based on the default topic width, so that needs to be moved too… our default CSS is:
.timeline-container {
margin-left: 757px;
@media all and (min-width: 1140px) {
margin-left: 820px;
}
@media all and (min-width: 1250px) {
margin-left: 900px;
}
}
So I think you’d either want to reduce the topic width for smaller screens, or increase the margin-left of the timeline-container a bit.
Another difficulty you might run into is when we switch from the timeline to the progress bar at smaller browser widths… because that switch is determined in JS so it’s more involved than just updating the CSS.
I think eventually we’d want the layout to be more flexible so it would be in the right position automatically if the topic column width is different, but for now it’s a manual adjustment at a few breakpoints.
안녕하세요, 사용자분들의 요청 사항이어서 이 내용을 알게 되었어요.
topic.body 규칙에 동일한 종류의 규칙을 적용하면 안 될까요?
이렇게 하는 대신:
.topic-body {
width: 830px;
}
예를 들어 이렇게 하면 어떨까요:
.topic-body {
width: 727px;
@media all and (min-width: 1140px) {
width: 790px;
}
@media all and (min-width: 1250px) {
width: 870px;
}
}
이렇게 하면 토픽 너비가 항상 타임라인 여백 너비와 함께 조정될 수 있습니다.
제 테마에서 더 넓은 화면을 사용합니다. 다른 여러 요소와 섞여 있지만, 주제 게시물 페이지에만 적용되는 와이드스크린 관련 설정을 모두 이 컴포넌트로 추출한 것 같습니다. 원하는 최대 너비(max-width)로 수정하기에는 충분히 쉬울 것입니다.
헤더 너비가 일관되게 유지되고 주제 게시물 페이지에서 더 넓어지지 않도록 하려면, 20번째 줄에서 , .archetype-regular .d-header .wrap를 삭제하세요.
이 코드는 90px 아바타를 사용하므로, 45px를 원한다면 head_tag.html 파일과 css 끝부분의 아래 라인들을 삭제하면 됩니다.
.topic-avatar {
width: 90px;
.avatar {
width: 90px;
height: 90px;
}
}
.embedded-posts .topic-avatar {
width: 45px;
img.avatar {
width: 45px;
height: 45px;
}
}
데스크톱에서만 주제를 넓히는 아주 간단한 테마 컴포넌트를 만들었습니다. 이 컴포넌트는 bawmedical.co.uk의 개인 노트/블로그용 Discourse를 위해 만들었고, 고급 기능이 많지 않으며 (아직) @media 쿼리를 사용하지 않습니다. 하지만 단순한 사용 사례에는 적합할 수 있습니다. 이 컴포넌트를 사용해 보신 분들의 피드백이 있다면, Meta에서 이를 논의하기 위한 새로운 주제를 만들거나 GitHub에 이슈나 PR을 제출할 수 있습니다.
(이것은 다른 것보다도 제 자신을 위한 메모 성격이 강합니다. $sometimeperiod이 지나면 제가 어떻게 이걸 했는지 잊어버려서 다시 Meta에서 검색하게 될 테니까요!)
훌륭하네요, 감사합니다!
좋은 소식은, 이제 그것이 가능하다는 것입니다. 테마에서 다음과 같은 간단한 CSS로 토픽의 콘텐츠 폭을 늘릴 수 있습니다:
:root {
--topic-body-width: 1000px;
}
이것으로 끝입니다! 겹침 현상이 없습니다. 최대 폭은 여전히 Discourse의 전체 최대 폭으로 제한되므로, 극단적으로 다음과 같은 작업을 하려면:
:root {
--topic-body-width: 2000px;
}
기본값이 1110px인 --d-max-width도 함께 늘려야 합니다.
:root {
--d-max-width: 3000px;
--topic-body-width: 2000px;
}
@awesomerobot 감사합니다. Theme 컴포넌트를 이에 맞게 업데이트하겠습니다.
현재 TC를 업데이트하고, 커스터마이즈 UI에서 주제 폭(Topic Width)을 제어할 수 있도록 매개변수를 추가했습니다. CSS 매개변수가 변경되고 있으며, 페이지 소스를 검사하면 이를 확인할 수 있습니다. 그러나 실제 주제 본문의 폭은 변경되지 않는 것 같습니다.
안녕하세요, 넓은 테마에 대한 최근 개발 소식에 기쁩니다. 저와 제 사용자분들 모두 감사드립니다!
pacharanero님의 테마 컴포넌트가 @Alex_P 님의 여기 버전보다 더 깔끔하고 현대적인 것 같습니다? (유사한 스레드: Increasing post width with CSS?) @Alex_P 님의 게시글 편집기를 전체 화면으로 늘릴 수 있는 옵션은 정말 마음에 듭니다.
또한 홈페이지의 최신(Latest) / 새로움(New) / 카테고리(Categories) 목록도 훨씬 넓게 만들고 싶습니다. 이를 위해서는 가능하면 토픽 뷰와 동일한 너비로 일관성을 유지하기 위해 왼쪽과 오른쪽의 과도한 여백을 줄이는 것이 합리적일 것 같습니다.
@rahim123에게 감사드립니다. @Alex_P와 함께 동일한 기능을 모두에 적용하거나, Editor Width 옵션을 추가하여 두 TC를 하나의 통합된 것으로 리팩토링하는 작업을 하고 싶습니다. 아니면 제 저장소에 PR을 올려주셔도 됩니다. 매우 간단한 플러그인이라 구현하는 데 전혀 어렵지 않은데, 지금은 너무 바빠서 진행하기가 힘듭니다. 앞으로 몇 주 안에 시간이 날지 모르겠네요.
이것을 시도해 보았는데, 먼저 topic body를 적용하고 나서 --d-max-width를 추가하니 본문이 화면 오른쪽으로 정렬이 바뀌었습니다 - 예상치 못한 결과!?
즉, 위 --d-max-width가 없다면 폭을 1400px으로 설정해도 기본값인 1110px 이상으로 확장되지 않는다는 말씀이신가요? 맞습니까?
음, 이렇게 바꿨어요:
:root {
--topic-body-width: 100w;
--d-max-width:100w;
}
여기서 100w는 창(window)의 너비를 의미합니다.