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 Me gusta
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 Me gusta
Fantastic, thank you!
Buenas noticias, este es el caso ahora. En un tema, el ancho del contenido de un tema se puede aumentar con un poco de CSS:
:root {
--topic-body-width: 1000px;
}
¡Eso es todo! sin superposición. Tenga en cuenta que el ancho máximo todavía está limitado por el ancho máximo general de Discourse, por lo que si desea ir a un extremo y hacer algo como:
:root {
--topic-body-width: 2000px;
}
también necesitará aumentar --d-max-width, que tiene un valor predeterminado de 1110px
:root {
--d-max-width: 3000px;
--topic-body-width: 2000px;
}
6 Me gusta
Gracias @awesomerobot, actualizaré el Componente de Tema en consecuencia
1 me gusta
He actualizado el TC y he añadido un parámetro para permitir el control del Ancho del Tema en la Interfaz de Personalización. Y está funcionando, ya que el parámetro CSS se está modificando y se puede ver al inspeccionar el código fuente de la página. Sin embargo, el ancho real del cuerpo del tema no parece cambiar.
2 Me gusta
2 Me gusta
¡Hola, me alegra ver estos desarrollos recientes para temas más amplios, mis usuarios y yo se lo agradeceremos!
Parece que el componente de tema de pacharanero es probablemente más limpio y moderno que la versión de @Alex_P aquí? (Hilo similar: Increasing post width with CSS?) Realmente me gusta la opción de @Alex_P de aumentar el ancho del editor de publicaciones a pantalla completa.
También me gustaría hacer que las listas Latest / New / Categories de la página de inicio sean bastante más anchas. Para hacer eso, parecería sensato reducir los márgenes extremos izquierdo y derecho, si es posible al mismo ancho que en la vista del tema para mayor consistencia.
Gracias @rahim123 y estoy muy contento de trabajar con @Alex_P para llevar las mismas funciones a ambos, o si alguien quisiera refactorizar los dos TCs juntos en uno unificado con la opción de Ancho del Editor añadida. O un PR en mi repositorio. Es un plugin muy simple, así que no es nada difícil de entender, solo que estoy demasiado ocupado en este momento para hacerlo, aunque quizás tenga la oportunidad en las próximas semanas.
1 me gusta
Probé esto, primero el cuerpo del tema, luego agregué --d-max-width, lo que luego realineó el cuerpo a la derecha de la pantalla, ¿inesperado?
Por lo tanto, incluso si el ancho se establece en 1400px, ¿está diciendo que sin el --d-max-width anterior no se extenderá más allá del valor predeterminado de 1110px, es correcto?
bueno lo cambié a:
:root {
--topic-body-width: 100w;
--d-max-width:100w;
}
siendo 100w el ancho de la ventana
Este tema se cerró automáticamente después de 2290 días. Ya no se permiten nuevas respuestas.