Cards design for topics?


(Mohamed Amine) #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


Can discourse do this (Pinterest style squares per topic with pictures)?
(Tom Newsom) #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.


Topic List Previews
(Tom Newsom) #3

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

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.


Topic List Previews
Any live examples of category-specific CSS styling?
Share your custom CSS?
Topic List Previews
#4

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


(Pad Pors) #5

nice design :smiley:

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


#6

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


(Tom Newsom) #7

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


(Pad Pors) #8

thanks,

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


(Tom Newsom) #10

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


(cpradio) #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