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 « J'aime »
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 « J'aime »
Fantastic, thank you!
Bonne nouvelle, c’est le cas maintenant. Dans un thème, la largeur du contenu d’un sujet peut être augmentée avec un peu de CSS :
:root {
--topic-body-width: 1000px;
}
C’est tout ! Pas de chevauchement. Notez que la largeur maximale est toujours limitée par la largeur maximale globale de Discourse, donc si vous voulez aller à l’extrême et faire quelque chose comme :
:root {
--topic-body-width: 2000px;
}
vous devrez également augmenter --d-max-width, qui est par défaut à 1110px.
:root {
--d-max-width: 3000px;
--topic-body-width: 2000px;
}
6 « J'aime »
Merci @awesomerobot, je mettrai à jour le composant de thème en conséquence
1 « J'aime »
J’ai maintenant mis à jour le TC et ajouté un paramètre pour permettre de contrôler la largeur du sujet dans l’interface utilisateur de personnalisation. et cela fonctionne dans le sens où le paramètre CSS est modifié et vous pouvez le voir en inspectant la source de la page. Cependant, la largeur réelle du corps du sujet ne semble pas changer.
2 « J'aime »
Je viens de l’essayer et cela a fonctionné pour moi, j’ai dû actualiser la page après avoir activé le composant.
2 « J'aime »
Salut, c’est formidable de voir ces développements récents pour des thèmes plus larges, mes utilisateurs et moi vous remercierons !
Il semble que le composant de thème de pacharanero soit probablement plus propre et plus moderne que la version de @Alex_P ici ? (Fil similaire : Increasing post width with CSS?) J’aime vraiment l’option de @Alex_P pour augmenter la largeur de l’éditeur de messages en plein écran.
J’aimerais également élargir considérablement les listes Latest / New / Categories de la page d’accueil. Pour ce faire, il semblerait judicieux de réduire les marges extrêmes gauche et droite, si possible à la même largeur que dans la vue du sujet pour plus de cohérence.
Merci @rahim123 et je suis très heureux de travailler avec @Alex_P pour apporter les mêmes fonctionnalités aux deux, ou si quelqu’un voulait refactoriser les deux TCs ensemble en un seul unifié avec l’option Largeur de l’éditeur ajoutée. Ou un PR sur mon dépôt. C’est un plugin très simple donc pas du tout difficile à comprendre, je suis juste trop occupé en ce moment pour le faire bien que j’aie peut-être une chance dans les semaines à venir.
1 « J'aime »
J’ai essayé cela, d’abord le corps du sujet, puis j’ai ajouté --d-max-width, ce qui a ensuite réaligné le corps sur le côté droit de l’écran - inattendu !?
Ainsi, même si la largeur est définie sur 1400px, vous dites que sans le --d-max-width ci-dessus, elle ne dépassera pas la valeur par défaut de 1110px - est-ce correct ?
eh bien, je l’ai changé en :
:root {
--topic-body-width: 100w;
--d-max-width:100w;
}
100w étant la largeur de la fenêtre
Ce sujet a été automatiquement fermé après 2290 jours. De nouvelles réponses ne sont plus autorisées.