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.
10 إعجابات
Hi, stumbled upon this since it has been a request from our users.
Wouldn’t it work to just use the same kind of rules on the topic.body rule?
Instead of this:
.topic-body {
width: 830px;
}
Could it be like, for instance:
.topic-body {
width: 727px;
@media all and (min-width: 1140px) {
width: 790px;
}
@media all and (min-width: 1250px) {
width: 870px;
}
}
This way the topic width would always go along with the timeline margin width.
I use a wider screen on my themes. It’s mixed in with a bunch of other stuff but I think I extracted all the widescreen stuff for just the topic posts page into this component, which should be easy enough to edit to get whatever max-width you want.
https://github.com/oerog/widescreen2.git
If you want the header width to stay consistent and not go wider on the topic posts page, then remove
, .archetype-regular .d-header .wrap from line 20
It uses 90px avatars so if you want 45px just delete the head_tag.html and these lines at the end of the css
.topic-avatar {
width: 90px;
.avatar {
width: 90px;
height: 90px;
}
}
.embedded-posts .topic-avatar {
width: 45px;
img.avatar {
width: 45px;
height: 45px;
}
}I’ve made a very simple Theme Component which widens the Topic on Desktop only. It was made for my personal notebooking/blogging Discourse at bawmedical.co.uk and it’s not very advanced and doesn’t use @media queries (yet). But it may suit simple use-cases. If anyone uses it and has feedback then we can create a new Topic for discussion of it here on Meta, or submit Issues or PRs on GitHub
https://github.com/pacharanero/discourse-topic-width-desktop
(This is as much an aide-memoire for myself as anything else, because in $sometimeperiod I will have forgotten how I did this and will be searching Meta for it again!)
5 إعجابات
Fantastic, thank you!
أخبار سارة، هذا هو الحال الآن. في السمة، يمكن زيادة عرض محتوى الموضوع باستخدام بعض CSS:
:root {
--topic-body-width: 1000px;
}
هذا كل شيء! لا يوجد تداخل. لاحظ أن الحد الأقصى للعرض لا يزال مقيدًا بالحد الأقصى العام لـ Discourse، لذلك إذا كنت ترغب في الذهاب إلى أقصى حد والقيام بشيء مثل:
:root {
--topic-body-width: 2000px;
}
ستحتاج أيضًا إلى زيادة --d-max-width، والتي تكون افتراضيًا 1110 بكسل.
:root {
--d-max-width: 3000px;
--topic-body-width: 2000px;
}
6 إعجابات
شكراً @awesomerobot، سأقوم بتحديث مكون السمة وفقًا لذلك
إعجاب واحد (1)
لقد قمت الآن بتحديث TC وإضافة معلمة للسماح بالتحكم في عرض الموضوع في واجهة المستخدم المخصصة. وهي تعمل حيث يتم تغيير معلمة CSS ويمكنك رؤية ذلك عند فحص مصدر الصفحة. ومع ذلك، لا يبدو أن عرض جسم الموضوع الفعلي يتغير.
إعجابَين (2)
أهلاً بك، يسعدني رؤية هذه التطورات الأخيرة للمواضيع الأوسع، سيشكرني مستخدمي وشكراً لكم!
يبدو أن مكون السمة الخاص بـ pacharanero أنظف وأكثر حداثة من إصدار @Alex_P هنا؟ (موضوع مشابه: Increasing post width with CSS?) أنا حقاً أحب خيار @Alex_P لزيادة عرض محرر المشاركات إلى ملء الشاشة.
أود أيضاً جعل قوائم الصفحة الرئيسية الأحدث / الجديد / الفئات أوسع بكثير. للقيام بذلك، يبدو من المنطقي تقليل الهوامش القصوى اليسرى واليمنى، إن أمكن بنفس عرض عرض الموضوع للاتساق.
شكراً @rahim123 ويسعدني جداً العمل مع @Alex_P لجلب نفس الميزات لكليهما، أو إذا أراد أحدهم إعادة هيكلة كلتا حالتي الاستخدام معًا في حالة استخدام موحدة مع إضافة خيار عرض المحرر. أو طلب سحب (PR) على مستودعي. إنه مكون إضافي بسيط جدًا لذا ليس من الصعب فهمه، أنا مشغول جدًا في الوقت الحالي للقيام بذلك على الرغم من أنني قد أحصل على فرصة في الأسابيع القادمة ربما.
إعجاب واحد (1)
جربت هذا، جسم الموضوع أولاً، ثم أضفت --d-max-width، مما أدى إلى إعادة محاذاة الجسم إلى يمين الشاشة - غير متوقع!؟
إذًا حتى لو تم تعيين العرض على 1400 بكسل، فهل تقول إنه بدون --d-max-width المذكور أعلاه، فلن يتجاوز الافتراضي 1110 بكسل - هل هذا صحيح؟
حسناً، لقد قمت بتغييره إلى:
:root {
--topic-body-width: 100w;
--d-max-width:100w;
}
حيث 100w هو عرض النافذة
تم إغلاق هذا الموضوع تلقائيًا بعد 2290 يومًا. لم يعد يُسمح بالردود الجديدة.