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 curtidas
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 curtidas
Fantastic, thank you!
Boas notícias, este é o caso agora. Em um tema, a largura do conteúdo de um tópico pode ser aumentada com um pouco de CSS:
:root {
--topic-body-width: 1000px;
}
É isso! sem sobreposição. Observe que a largura máxima ainda é limitada pela largura máxima geral do Discourse, então se você quiser ir ao extremo e fazer algo como:
:root {
--topic-body-width: 2000px;
}
você também precisará aumentar --d-max-width, que tem o valor padrão de 1110px
:root {
--d-max-width: 3000px;
--topic-body-width: 2000px;
}
6 curtidas
Obrigado @awesomerobot, atualizarei o Componente de Tema de acordo
1 curtida
Eu atualizei o TC e adicionei um parâmetro para permitir que a Largura do Tópico seja controlada na UI de Personalização. e está funcionando, pois o parâmetro CSS está sendo alterado e você pode ver isso ao inspecionar o código-fonte da página. No entanto, a largura real do corpo do tópico não parece mudar.
2 curtidas
2 curtidas
Olá, ótimo ver esses desenvolvimentos recentes para temas mais amplos, meus usuários e eu agradeceremos!
Parece que o componente de tema de pacharanero é provavelmente mais limpo e moderno do que a versão de @Alex_P aqui? (Tópico semelhante: Increasing post width with CSS?) Eu realmente gosto da opção de @Alex_P de aumentar a largura do editor de posts para tela cheia.
Eu também gostaria de tornar as listas Mais recentes / Novos / Categorias da página inicial bem mais largas também. Para fazer isso, pareceria sensato reduzir as margens extremas esquerda e direita, se possível para a mesma largura da visualização do tópico para consistência.
Obrigado @rahim123 e estou muito feliz em trabalhar com @Alex_P para trazer os mesmos recursos para ambos, ou se alguém quisesse refatorar os dois TCs juntos em um unificado com a opção Largura do Editor adicionada. Ou um PR no meu repositório. É um plugin muito simples, então não é nada difícil de resolver, estou apenas muito ocupado no momento para fazer isso, embora possa ter chance nas próximas semanas, talvez.
1 curtida
Tentei isso, primeiro o corpo do tópico, depois adicionei --d-max-width, que então realinhou o corpo à direita da tela - inesperado!?
Portanto, mesmo que a largura seja definida como 1400px, você está dizendo que sem o --d-max-width acima, ela não excederá o padrão de 1110px - isso está correto?
bem, eu mudei para:
:root {
--topic-body-width: 100vw;
--d-max-width:100vw;
}
sendo 100vw a largura da janela
Este tópico foi automaticamente fechado após 2290 dias. Novas respostas não são mais permitidas.