Cards design for topics?

UX
1

Hello Discourse!

I’m curious if anyone in the Discourse community tried to display topics as cards instead of a list, the result would look like this

For those who tried fully customizing the stylesheet, how do you usually tackle this? And does the hosted version allow full CSS customization?

Thank you

1 Like
2

The topic list is structured as a table, so I think it would be impossible to do this in CSS. You’d need to write a plugin that hijacks the topic-list template and the topic-list-item method to create <div>s instead. No small task.

EDIT: Hang on, you can’t display: inline-block a <tr> can you? that might work.

Yes it does work. Styling each card would be a bottomless pit of CSS despair, but I believe it can be done. Combine with the Topic List Previews plugin and you’d get an excerpt on each card.

https://meta.discourse.org/t/topic-list-previews/41630

4 Likes
3

I had a quick go at this (combined with Topic Previews plugin)

Pasted image1145×873 327 KB

CSS:

// Display topic list rows as cards

.topic-list-item {
    display: inline-block;
    max-width: 350px;
    box-shadow: 2px 2px 2px 2px #888888;
    margin: 10px;
}

// Hide extraneous topic list columns

.posters, th.posts, td.posts, .views, .activity, {
    display:none;
}

You can embellish from there.
(change the post excerpt maxlength setting to get longer excerpts)

Getting Author Info to display properly is outside the scope of simple styling, as this isn’t included in the standard list.

18 Likes
4

How difficult it would be to create clean cards fully integrated with likes and comment as shown in the main post

5

nice design :smiley:

is it possible to arrange these cards based on their tags or their category? something like the ted design:

blob.jpg1366×768 471 KB

3 Likes
6

I am looking forward to wordpress + discourse comment integration but if anyone could write a theme/plugin i will get rid of wordpress.

7

I don’t think that can be done by styling any of Discourse’s default views. You’d be in plugin territory

8

thanks,

the previous category page was doing this type of organization for topics, more or less. wasn’t it?

10

Yes, but without topic excerpts. The topic previews plugin would need expanding (again!) to cover that view as well.

1 Like
11

Actually it might be due to it using the Mobile view. And prior to today, Mobile view templates couldn’t be overridden. So now that they can be, he might already be working on that.

Relevant discussion
https://meta.discourse.org/t/how-to-override-an-existing-handlebars-template-from-plugin-part-ii/12245/25?u=cpradio

1 Like