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;
}
}
Таким образом, ширина темы всегда будет соответствовать ширине отступа временной шкалы.
В моих темах я использую широкий экран. Это смешано с множеством других вещей, но я думаю, что вынес все стили для широкого экрана только для страницы тем в этот компонент, который достаточно прост в редактировании, чтобы задать любое желаемое максимальное значение ширины.
Если вы хотите, чтобы ширина заголовка оставалась неизменной и не становилась шире на странице тем, удалите , .archetype-regular .d-header .wrap из строки 20.
Здесь используются аватары размером 90 пикселей, поэтому, если вы хотите 45 пикселей, просто удалите файл 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;
}
}
Я создал очень простой компонент темы, который расширяет тему только на настольных компьютерах. Он был разработан для моего личного сайта для ведения заметок и блогов на платформе Discourse по адресу bawmedical.co.uk. Он не является особенно продвинутым и пока не использует медиа-запросы (@media). Однако он может подойти для простых случаев использования. Если кто-то воспользуется им и захочет поделиться обратной связью, мы можем создать новую тему для обсуждения здесь, на Meta, или отправить проблемы (Issues) и запросы на слияние (PRs) на GitHub.
(Это в первую очередь напоминание для меня самого, потому что через $sometimeperiod я забуду, как это сделал, и снова буду искать это на Meta!)
Отлично, спасибо!
Хорошая новость: сейчас это уже работает. В теме ширину контента темы можно увеличить с помощью небольшого CSS:
:root {
--topic-body-width: 1000px;
}
Всё! Никаких наложений. Обратите внимание, что максимальная ширина всё ещё ограничена общим параметром max-width в Discourse, поэтому, если вы захотите пойти на крайние меры и сделать что-то вроде:
:root {
--topic-body-width: 2000px;
}
вам также потребуется увеличить --d-max-width, который по умолчанию равен 1110px:
:root {
--d-max-width: 3000px;
--topic-body-width: 2000px;
}
Спасибо @awesomerobot, я обновлю компонент темы соответствующим образом
Я обновил TC и добавил параметр, позволяющий управлять шириной темы через интерфейс настройки. Это работает: параметр CSS изменяется, и это видно при проверке исходного кода страницы. Однако фактическая ширина тела темы, похоже, не меняется.
Привет! Очень рад видеть эти недавние обновления для более широких тем — мои пользователи и я благодарим вас!
Похоже, что компонент темы pacharanero выглядит чище и современнее, чем версия от @Alex_P здесь? (Схожая тема: Increasing post width with CSS?) Мне действительно нравится вариант @Alex_P по расширению редактора постов на весь экран.
Также я хотел бы значительно расширить списки Последние / Новые / Категории на главной странице. Для этого, по-видимому, разумно уменьшить экстремальные отступы слева и справа, желательно до той же ширины, что и в режиме просмотра темы, для обеспечения единообразия.
Спасибо @rahim123! Я очень рад работать с @Alex_P, чтобы реализовать одинаковые функции для обоих, или если кто-то захочет объединить два TC в один унифицированный с добавлением опции «Ширина редактора». Или можно сделать PR в моём репозитории. Это очень простой плагин, так что разобраться в нём совсем несложно, просто сейчас у меня слишком много дел, хотя, возможно, в ближайшие недели у меня появится такая возможность.
Я попробовал это: сначала настроил ширину тела темы, а затем добавил --d-max-width, после чего тело темы выровнялось по правому краю экрана — неожиданно!?
Таким образом, даже если ширина установлена на 1400 пикселей, вы утверждаете, что без вышеуказанного --d-max-width она не выйдет за пределы стандартных 1110 пикселей — верно ли это?
Я изменил это на:
:root {
--topic-body-width: 100w;
--d-max-width:100w;
}
где 100w — это ширина окна