Latest list as grid view

Dev
1

Hi!

I’m currently develop my own “blog” theme and I would like to set the latest view in grid style (like here in the theme category).
I know that there are a few components for this, but I don’t have images in my posts so this looks a bit strange. And there’s no option (for example in the topic-thumbnails component) to set it to 2 or 3 columns (or even flexible).

I tried many things (more or less the site was broken after that :joy: ) but couldn’t figure out how to do this.

Can someone can give a hint on how to solve this? I only need the basic setting for this and afterwards I can “style” it to fit my needs.

Kind regards

PS. If this is the wrong category pls move it. :slightly_smiling_face:

2

most of things like that can be set up in the CSS through admin > customize > themes > Custom CSS

i also wanted to have two columns and a more narrow view so I reduced the max-width from 1100px (?) to 950px and this also changed from three to two columns - in my case it was this

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

3

Topic list previews is responsive so sets the number of columns automatically. You just squeeze it a little with sidebars (eg with Layouts plugin) and the number of columns number decreases. (See this example https://www.starzen.space - starts out 2 columns but click on a tag and it reverts to 3 columns)

2 Likes
4

Yes I know that this can be done with css, my whole theme is done with css.
And, I don’t have 1100px, my design is flexible to the screen resolution. And no, I don’t want this ultra small fixed width 1100px. :wink:

@merefield
I tried this theme component a lot, but it’s not was I was looking for. I don’t have images in posts, and it should be flexible with the columns (depends on the screen resolution).

What I am looking for is the css class to turn the list into a grid. :slightly_smiling_face:

5

It is, that is why there is only one column on mobile.

On 11inch iPad with a single right side-bar, TLP shows two columns in landscape, and one in portrait

This is the key line in TLP:

You should read this:

and this (but I’m not sure ‘resolution’ is what you mean because that can be confused with DPI):

2 Likes
6

Thank you!

My problem was to find the proper css class from discourse for the list.
Is it topic-list-item or topic-list-item-seperator or anything else.

I will try it later.

7

The grid CSS needs to be above the item level. Copy the way TLP or TLT does it.

3 Likes
8

I’m using Topic List Thumbnails now and have overridden a few things via CSS. Didn’t want anything with images in the text but you can use a default image.

9

Don’t you mean icon?

You don’t have to use images with TLP and you can use a default image.

1 Like
10

Yes, of course, a default icon. :wink:

11

Sorry for the double posting, but I have another question regarding register/login button.

I want to hide these 2 buttons for anon users but then I can’t login too. Is there a URL to a login site or anything similar?

12

No one?

Is there really no login url?

13

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

Depending on your login methods and what you want. :slight_smile: