Topic Cards

[Moin]

You can create a new component and add that to your theme

Customizing themes without an Edit code button

Sometimes, you may want to customize a Discourse theme but find that there’s no “Custom code” section with an “Edit code” button available. This often happens with remote themes (themes installed from an external source) and the preinstalled themes (Horizon & Foundation). Here’s how you can still add your customizations: Understanding the limitation For preinstalled themes, you see a banner telling you This theme is preinstalled and can not be deleted or customized For remote themes, you’ll…

[jrgong]

Hey guys

I forked the TC and played a bit around to add a few more features:

• Placeholder when no thumbnail
• Choose between grid and list style for desktop/mobile
• More granular dimension control
• More granular border radius control

You can find details in the repo: GitHub - jrgong420/discourse-topic-cards: This changed the topic list into cards with a modified layout, and a thumbnail if available.

Disclosure: The fork was planned, implemented, and tested with the help of AI coding tools. Use at your own risk.

[Heliosurge (Dan DeMontmorency)]

Do you have a couple of SS to demo the list & Grid with maybe some of your other additions?

[jrgong]

Hey guys and @Heliosurge

In the meantime we did an extensive rework and extension of the theme component with tons of new features, a full refactoring of all components and extensive restructuring.

In addition we also added a few new features. Check it out here:

Roast my Theme Component: Advanced Topic Cards

Hey guys Disclaimer: No AI was hurt in building this theme component Yes guys, I am guilty of shamelessly vibe-coding a rip off of the Topic Cards theme component. Hence a huge shoutout to the original authors and contributors for the great work! While at first this was a fork, over 80% of the code and structure was completely rewritten. We added a ton of new features and on first glance all the various settings can be quite overwhelming. Advanced Topic Cards - Preliminary Release …

[Lilly]

So when Show for suggested topics is enabled - it doesn’t seem to play nicely with the headers when using related topics too.

[TheWalkingDead110]

Please create a setting for mobile card max height.

[Luna_Mora]

Would it be possible to add the Bulk Actions back while the topic cards component is in use? I’ve unhidden it with some CSS tweaks for my forum but the UX on it isn’t great Might be better if it was included by default within the component.

Oh and as I’m typing this I have scrolled up and this has already been requested. Any idea on whether it could be implemented?

This is the CSS I used to make it at least useable if not very pretty:

.topic-cards-list .topic-list-header {
  display: block;

  .topic-list-data.posters,
  .topic-list-data.posts,
  .topic-list-data.views,
  .topic-list-data.activity {
    display: none;
  }

  .topic-list-data.default > span:not([class]) {
    display: none; // removes the stray 'Topic' text that has no span class to target
  }
}

.topic-list-body {
  tr.bulk-selecting.topic-card {
    gap: 0; // removes huge spacing between the checkbox and the rest of the topic card
  }
}