Themenkarten

[Discourse]

	Summary	Topic Cards restyle the topic list to display as cards with a thumbnail
	Preview	Preview on Discourse Theme Creator
	Repository	https://github.com/discourse/discourse-topic-cards
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

Install this theme component

As this is an official theme component maintained by the Discourse team, support, bug, ux, and feature requests can be made in the respective categories here on Meta, and tagged with the appropriate theme component tag. Click on a link below to get one started.

 Support  Bug  UX  Feature

This theme component may cause conflicts with other customisations to the topic list

Features

This component takes inspiration from Topic Thumbnails, simplifies the use, adds excerpts & full-card clicking, and sprinkles some extra CSS magic.

• Make full card clickable (except for the original poster avatar)
• Show the excerpt
• Show a topic thumbnail, if available
• Show published date
• Trim away some metadata and make likes more prominent

Desktop

Mobile

Settings

Translation	Default
published	Published

Hosted by us? Theme components are available to use on our Standard, Business, and Enterprise plans.

Last edited by @chapoi 2024-06-18T00:42:14Z

Check document

Perform check on document:

[Moin]

The vertical blue line covers parts of the text

(Seems not to depend on browser/device, I tried Edge/Windows, Chrome/Android and firefox/Android)

[frold]

worked out of the box in chrome on windows and chrome at iphone 8

[chapoi (Charlie)]

@Moin

The vertical blue line covers parts of the text

Right, forgot this. Will fix – thanks

[jayme]

how do I get rid of the “replies” and the “activity” tabs under the “+New Topic” button?
its making my topic exert really short and it looks bad haha

[Lilly (Lillian Louis)]

Hi @jayme, it look like those tabs are not part of this component and are likely put there by another theme component or plugin. When I load a test forum with this component, those tabs don’t exist, nor do they show in the screenshots in the OP. You may have to disable other components to find which one, then if there is no setting for those tabs you may have to disable it.

[chapoi (Charlie)]

Border/box-shadow doesn’t work well with cards, so had to improvise a bit to get a replacement indication

UX: replace border with text colour on select with keyboard

[Moin]

@chapoi

so had to improvise a bit to get a replacement indication

Somehow I don’t see any indicator now

[chapoi (Charlie)]

Are you using the j/k commands to navigate?

[Moin]

No, I just used Tab. Well I actually used my tablet. After I used the back button, the post is usually highlighted. That didn’t happen here. I only tried this on the computer for the recording.

[derak (Cristian Deraco)]

awesome theme component!

[Gonerdot]

I tried to install this component on many themes, but it looks a little crooked everywhere. What am I doing wrong?

[chapoi (Charlie)]

Hmmm… difficult to say. It looks like somehow the height of the cards is constrained, and the content bigger than usual.

Can you first verify it’s not due to a conflict with other components or theme? I see you also have the right sidebar enabled and that could affect some size calculations maybe.

So please check that and let me know?

[Gonerdot]

I disabled all other components, but the problem did not solve.

[chapoi (Charlie)]

Odd! Can I have a look at the forum youve installed it on?

[Gonerdot]

BearBlog

But you need to change the theme to dracula in your profile settings.

[chapoi (Charlie)]

Thanks, Ill have a look!

[Gonerdot]

It seems to me that the problem can be solved by limiting the number of characters in the preview, but I don’t know how to do this

[chapoi (Charlie)]

Okay so, the topic-cards need a max-height, otherwise you get issues like:

I can’t say why yours is not fitting well, because in the example on theme creator I can also uses multi-line titles and still fits:

It might have something to do with the font-size, font-family, or line-height. Unfortunately that will require some individual tweaking, and not something I can apply a fix-for-all for.

A possible solution is, as you said, limiting the title to only take 1 line, which you could do by adding this css:

.topic-card {
  .link-top-line {
      max-width: 100%;
      overflow: hidden;
      
     .title {
        display: block;
        white-space: no-wrap;
      }
   }
}