Normalmente, los temas se ven así. No tan grandes como quiero.
Así que escribí este código para aumentar el ancho:
.topic-body {
width: 830px;
}
Para que se vea así:
Pero cuando mi pantalla es más pequeña, se ve así:
¿Cómo evitar esto?
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.
Hola, me topé con esto ya que ha sido una solicitud de nuestros usuarios.
¿No funcionaría simplemente aplicar el mismo tipo de reglas a la regla topic.body?
En lugar de esto:
.topic-body {
width: 830px;
}
¿Podría ser, por ejemplo, así:
.topic-body {
width: 727px;
@media all and (min-width: 1140px) {
width: 790px;
}
@media all and (min-width: 1250px) {
width: 870px;
}
}
De esta manera, el ancho del tema siempre iría acorde con el ancho del margen de la línea de tiempo.
Uso una pantalla más ancha en mis temas. Está mezclado con un montón de otras cosas, pero creo que he extraído todo lo relacionado con pantallas anchas solo para la página de publicaciones de temas en este componente, lo cual debería ser lo suficientemente fácil de editar para obtener el max-width que desees.
Si deseas que el ancho del encabezado se mantenga consistente y no se haga más ancho en la página de publicaciones de temas, entonces elimina
, .archetype-regular .d-header .wrap de la línea 20
Utiliza avatares de 90px, así que si deseas uno de 45px, simplemente elimina el head_tag.html y estas líneas al final del CSS:
.topic-avatar {
width: 90px;
.avatar {
width: 90px;
height: 90px;
}
}
.embedded-posts .topic-avatar {
width: 45px;
img.avatar {
width: 45px;
height: 45px;
}
}
He creado un componente de tema muy simple que ensancha el tema solo en escritorio. Lo hice para mi foro personal de toma de notas/blogging en bawmedical.co.uk, no es muy avanzado y aún no utiliza consultas @media. Pero podría ser útil para casos de uso sencillos. Si alguien lo usa y tiene comentarios, podemos crear un nuevo tema para discutirlo aquí en Meta, o enviar problemas o PRs en GitHub.
(Esto es tanto un recordatorio para mí como cualquier otra cosa, porque en $sometimeperiod habré olvidado cómo lo hice y estaré buscando en Meta de nuevo).
¡Fantástico, gracias!
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;
}
Gracias @awesomerobot, actualizaré el Componente de Tema en consecuencia
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.
¡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.
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