Display Tags on topic cards in the Horizon theme

Feature
,
1

I didn’t notice that tags were not on the topic cards in the topic lists of the Horizon theme until I saw this:

It would certainly be very helpful to have them, so this has my :+1:!

2 Likes
3

Agree! It would be nice to be able to enable/disable whether tags are displayed.

Edit: Some workaround CSS that worked well for us (WIP)

Common CSS:

/* Horizon topic list metadata + pill tags */
.topic-list-body .topic-list-item {
  row-gap: var(--space-2);
}

.topic-list-body .topic-list-item .link-bottom-line .badge-category__wrapper  {
  display: none;
}

.topic-list-body .topic-list-item td.main-link .link-bottom-line {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-top: var(--space-1);
  column-gap: var(--space-3);
  row-gap: var(--space-2);
  font-size: var(--font-0) !important;
  line-height: 1.35;
  grid-column: 2 / -2;
}

.topic-list-body .topic-list-item td.main-link .discourse-tags {
  display: inline-flex!important;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.topic-list-body .topic-list-item td.main-link .discourse-tag,
.topic-list-body .topic-list-item td.main-link .discourse-tag.box {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: calc(var(--space-1) * 1.25) var(--space-3);
  border-radius: 999px;
  border: 1px solid var(--primary-low-mid);
  background: var(--secondary);
  color: var(--primary-high);
  font-weight: 500;
  box-shadow:
    inset 0 1px 0 var(--secondary-very-high),
    inset 0 -1px 0 var(--primary-low);
  text-decoration: none;
  margin-right: var(--space-1);
}

.topic-list-body .topic-list-item td.main-link .discourse-tag:hover,
.topic-list-body .topic-list-item td.main-link .discourse-tag.box:hover {
  border-color: var(--primary-low);
  background: var(--secondary-high);
}

Mobile CSS:

    .topic-list-body .topic-list-item .badge-category__wrapper {
        font-size: var(--font-down-1);
    }
    .topic-list-item .discourse-tags {
    font-weight: normal;
    font-size: var(--font-down-2);
}
2 Likes
4

Nice!

Any chance you are interested in packaging that as a Theme Component and sharing it?

1 Like
5

I would rather see it baked into Horizon theme as a setting directly, it would be more appropriate there. Otherwise we just keep adding sigle feature TC after TC.

I will see if and how I could submit a PR….but don’t count on it

2 Likes
6

I’m not a professional, so CSS operations are a bit challenging for me……:sob: Is it possible to have this tag display feature packaged as a built-in setting within the Horizon theme? Or perhaps implemented as a separate theme component? If there’s any possibility of this happening, I’d be willing to wait! If there’s even the slightest chance, I’d really appreciate it if someone could keep me updated. Thank you so much!

7

Alternatively, could you please tell me where on the website I should add this CSS? I can’t find any place to write CSS in my Horizon theme (I apologize as you can see I’m not a professional, so I lack these programming basics :sob: :cry: ).

8

You can add your own theme component to the theme in which you add custom css

1 Like