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 „Gefällt mir“
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 „Gefällt mir“
Fantastic, thank you!
Gute Nachrichten, das ist jetzt der Fall. In einem Theme kann die Inhaltsbreite eines Themas mit etwas CSS erhöht werden:
:root {
--topic-body-width: 1000px;
}
Das ist alles! Keine Überlappung. Beachten Sie, dass die maximale Breite immer noch durch die Gesamtbreite von Discourse begrenzt ist. Wenn Sie also extrem vorgehen und etwas wie folgt tun möchten:
:root {
--topic-body-width: 2000px;
}
müssen Sie auch --d-max-width erhöhen, das standardmäßig auf 1110px gesetzt ist.
:root {
--d-max-width: 3000px;
--topic-body-width: 2000px;
}
6 „Gefällt mir“
Danke @awesomerobot, ich werde die Theme-Komponente entsprechend aktualisieren
1 „Gefällt mir“
Ich habe nun die TC aktualisiert und einen Parameter hinzugefügt, um die Themenbreite in der Anpassungs-Benutzeroberfläche steuern zu können. Dies funktioniert auch, da der CSS-Parameter geändert wird und dies beim Überprüfen des Seitenquelltextes sichtbar ist. Die tatsächliche Breite des Themenkörpers scheint sich jedoch nicht zu ändern.
2 „Gefällt mir“
Ich habe es gerade ausprobiert und es hat für mich funktioniert. Ich musste die Seite neu laden, nachdem ich die Komponente aktiviert hatte
2 „Gefällt mir“
Hallo, es ist großartig, diese jüngsten Entwicklungen für breitere Themen zu sehen, meine Benutzer und ich werden Ihnen danken!
Es sieht so aus, als ob pacharanero’s Theme-Komponente wahrscheinlich sauberer und moderner ist als @Alex_P 's Version hier? (Ähnlicher Thread: Increasing post width with CSS?) Ich mag @Alex_P 's Option, die Breite des Beitragseditors auf Vollbild zu erweitern, wirklich sehr.
Ich möchte auch die Listen Neueste / Neu / Kategorien auf der Homepage deutlich breiter machen. Dazu wäre es sinnvoll, die extremen linken und rechten Ränder zu reduzieren, wenn möglich auf die gleiche Breite wie in der Themenansicht zur Konsistenz.
Danke @rahim123 und ich freue mich sehr, mit @Alex_P zusammenzuarbeiten, um dieselben Funktionen für beide bereitzustellen, oder wenn jemand die beiden TCs zu einer einzigen, vereinheitlichten Funktion mit der Option „Editor-Breite“ zusammenführen möchte. Oder ein PR in meinem Repository. Es ist ein sehr einfaches Plugin, also überhaupt nicht schwer zu verstehen. Ich bin im Moment nur zu beschäftigt, um dies zu tun, obwohl ich vielleicht in den kommenden Wochen die Gelegenheit dazu bekomme.
1 „Gefällt mir“
Ich habe das ausprobiert, zuerst den Thema-Körper, dann habe ich --d-max-width hinzugefügt, was dann den Körper nach rechts auf dem Bildschirm verschoben hat – unerwartet!?
Sie sagen also, dass es selbst dann, wenn die Breite auf 1400px eingestellt ist, ohne die obige --d-max-width nicht mehr als die Standardeinstellung von 1110px herausdrücken wird – ist das richtig?
Ich habe es geändert zu:
:root {
--topic-body-width: 100w;
--d-max-width:100w;
}
wobei 100w die Breite des Fensters ist
Dieses Thema wurde nach 2290 Tagen automatisch geschlossen. Neue Antworten sind nicht mehr erlaubt.