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:

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; }

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)

[image] anderer: 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; } 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:

[image] Alex: I don’t have images in posts, and it should be flexible with the columns (depends on the screen resolution). 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: common/common.scss a4c3fc6ed th { display: none; } tbody { .topic-list-item-separator { display: none; } display: grid; gap: 4px; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); grid-auto-rows: 4px; border-top: none; } .topic-list-item, tr { border: none; } .tiles-grid-item-width2 { box-sizing: border-box; You should read this: [image] A Complete Guide to CSS Grid Layout | CSS-Tricks Our comprehensive guide to CSS grid, focusing on all the settings both for the grid parent container and the grid child elements. and this (but I’m not sure ‘resolution’ is what you mean because that can be confused with DPI): [Dennis Burton] Is there a way to use DPI in css media queries instead of px css, media-queries asked by Dennis Burton on 01:19PM - 30 Jul 12 UTC

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.

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

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.

[image] Alex: but you can use a default image. Don’t you mean icon? You don’t have to use images with TLP and you can use a default image.

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

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?

Latest list as grid view

Development

Canapin (Coin-coin le Canapin) June 22, 2023, 3:00pm 13

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

Depending on your login methods and what you want.

Topic		Replies	Views
How to display posts in grid? Product Support	2	360	April 30, 2024
Discussion grid latest UX	1	552	November 12, 2023
Pictures in grid page layout Feature	1	474	August 25, 2023
Different theme for personal message topics list? Development personal-messages	20	919	January 15, 2024
Don't show grid, just topics list Product Support	2	208	July 1, 2024

Latest list as grid view

Related topics