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 Mi Piace
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 Mi Piace
Fantastic, thank you!
Buone notizie, questo è il caso ora. In un tema, la larghezza del contenuto di un argomento può essere aumentata con un po’ di CSS:
:root {
--topic-body-width: 1000px;
}
Questo è tutto! nessuna sovrapposizione. Nota che la larghezza massima è ancora limitata dalla larghezza massima complessiva di Discourse, quindi se vuoi fare qualcosa di estremo come:
:root {
--topic-body-width: 2000px;
}
dovrai anche aumentare --d-max-width, che per impostazione predefinita è 1110px
:root {
--d-max-width: 3000px;
--topic-body-width: 2000px;
}
6 Mi Piace
Grazie @awesomerobot, aggiornerò il componente del tema di conseguenza
1 Mi Piace
Ho aggiornato il TC e aggiunto un parametro per consentire il controllo della larghezza dell’argomento nell’interfaccia utente di personalizzazione. e funziona nel senso che il parametro CSS viene modificato e puoi vederlo ispezionando il codice sorgente della pagina. Tuttavia, la larghezza effettiva del corpo dell’argomento non sembra cambiare.
2 Mi Piace
L’ho appena provato e ha funzionato, ho dovuto aggiornare la pagina dopo aver abilitato il componente
2 Mi Piace
Ciao, sono lieto di vedere questi recenti sviluppi per temi più ampi, i miei utenti e io vi ringrazieremo!
Quindi sembra che il componente tema di pacharanero sia probabilmente più pulito e moderno della versione di @Alex_P qui? (Discussione simile: Increasing post width with CSS?) Mi piace molto l’opzione di @Alex_P per aumentare la larghezza dell’editor dei post a schermo intero.
Vorrei anche rendere le liste Latest / New / Categories della homepage molto più ampie. Per fare ciò, sembrerebbe sensato ridurre i margini estremi sinistro e destro, se possibile alla stessa larghezza della visualizzazione dell’argomento per coerenza.
Grazie @rahim123 e sono molto felice di lavorare con @Alex_P per portare le stesse funzionalità a entrambi, o se qualcuno volesse rifattorizzare i due TC insieme in uno unificato con l’opzione Editor Width aggiunta. O un PR sul mio repository. È un plugin molto semplice, quindi non è affatto difficile da capire, sono solo troppo impegnato al momento per farlo, anche se potrei avere la possibilità nelle prossime settimane, forse.
1 Mi Piace
Ho provato questo, prima il corpo dell’argomento, poi ho aggiunto --d-max-width, che ha poi riallineato il corpo a destra dello schermo - inaspettato!?
Quindi, anche se la larghezza è impostata su 1400px, stai dicendo che senza il suddetto --d-max-width non supererà i 1110px predefiniti - è corretto?
beh, l’ho cambiato in:
:root {
--topic-body-width: 100w;
--d-max-width:100w;
}
essendo 100w la larghezza della finestra
Questo argomento è stato chiuso automaticamente dopo 2290 giorni. Non sono più consentite nuove risposte.