Lista mais recente como visualização em grade

Dev
1

Olá!

Estou desenvolvendo meu próprio tema de “blog” e gostaria de definir a visualização mais recente em estilo de grade (como aqui na categoria de temas).
Sei que existem alguns componentes para isso, mas não tenho imagens em minhas postagens, então isso parece um pouco estranho. E não há opção (por exemplo, no componente topic-thumbnails) para defini-lo para 2 ou 3 colunas (ou até mesmo flexível).

Tentei muitas coisas (o site ficou mais ou menos quebrado depois disso :joy:), mas não consegui descobrir como fazer isso.

Alguém pode me dar uma dica de como resolver isso? Só preciso da configuração básica para isso e, depois, posso “estilizar” para atender às minhas necessidades.

Atenciosamente

PS. Se esta for a categoria errada, por favor, mova-a. :slightly_smiling_face:

2

a maioria das coisas assim pode ser configurada no CSS através de admin > personalizar > temas > CSS personalizado

eu também queria ter duas colunas e uma visualização mais estreita, então reduzi a largura máxima de 1100px (?) para 950px e isso também mudou de três para duas colunas - no meu caso foi isso

:root { --d-max-width: 950px; }

3

A lista de tópicos é responsiva, então define o número de colunas automaticamente. Você só precisa apertá-la um pouco com barras laterais (por exemplo, com o plugin Layouts) e o número de colunas diminui. (Veja este exemplo https://www.starzen.space - começa com 2 colunas, mas clique em uma tag e ela reverte para 3 colunas)

2 curtidas
4

Sim, eu sei que isso pode ser feito com CSS, todo o meu tema é feito com CSS.
E, eu não tenho 1100px, meu design é flexível à resolução da tela. E não, eu não quero essa largura fixa ultra pequena de 1100px. :wink:

@merefield
Eu tentei este componente de tema muitas vezes, mas não era o que eu estava procurando. Eu não tenho imagens nas postagens, e deve ser flexível com as colunas (depende da resolução da tela).

O que estou procurando é a classe CSS para transformar a lista em uma grade. :slightly_smiling_face:

5

É, é por isso que há apenas uma coluna no celular.

Em um iPad de 11 polegadas com uma única barra lateral direita, o TLP mostra duas colunas na paisagem e uma na retrato.

Esta é a linha chave no TLP:

Você deveria ler isto:

e isto (mas não tenho certeza se ‘resolução’ é o que você quer dizer, pois isso pode ser confundido com DPI):

2 curtidas
6

Obrigado!

Meu problema era encontrar a classe CSS adequada do Discourse para a lista.
É topic-list-item ou topic-list-item-seperator ou outra coisa.

Vou tentar mais tarde.

7

O CSS da grade precisa estar acima do nível do item. Copie a forma como TLP ou TLT fazem.

3 curtidas
8

Estou usando Topic List Thumbnails agora e substituí algumas coisas via CSS. Não queria nada com imagens no texto, mas você pode usar uma imagem padrão.

9

Você não quer dizer ícone?
Você não precisa usar imagens com TLP e pode usar uma imagem padrão.

1 curtida
10

Sim, claro, um ícone padrão. :wink:

11

Desculpe pela postagem duplicada, mas tenho outra pergunta sobre o botão de registrar/entrar.

Quero ocultar esses 2 botões para usuários anônimos, mas então não consigo fazer login. Existe um URL para um site de login ou algo semelhante?

12

Ninguém?

Realmente não há URL de login?

13

https://meta.discourse.org/login ou

Dependendo dos seus métodos de login e do que você quer. :slight_smile: