Adding unique class names to to the elements in the topic map

Feature
1

Related in spirit to this feature request, I would like to be able to target elements of the topic map through CSS.

Screen Shot 2015-05-29 at 9.51.25 AM.png701×65 16.8 KB

This is another place where CSS can’t individually target elements:

The elements in this section are not uniquely accessible.

If anybody would find this helpful, I made the following changes to topic-map.hbs:

<section {{bind-attr class=":map mapCollapsed"}}>
  <ul class="clearfix">
    <li class='topic-map-created'>
      <a href='{{unbound topic.url}}'>
      <h4>{{i18n 'created_lowercase'}}</h4>
      {{avatar details.created_by imageSize="tiny"}}
      {{format-date topic.created_at}}
      </a>
    </li>
    <li class='topic-map-lastpost'>
      <a {{bind-attr href="topic.lastPostUrl"}}>
      <h4>{{i18n 'last_reply_lowercase'}}</h4>
      {{avatar details.last_poster imageSize="tiny"}}
      {{format-date topic.last_posted_at}}
      </a>
    </li>
    <li>
      {{number topic.replyCount}}
      <h4>{{i18n 'replies_lowercase' count=topic.replyCount}}</h4>
    </li>
    <li class='secondary topic-map-views'>
      {{number topic.views class=topic.viewsHeat}}
      <h4>{{i18n 'views_lowercase' count=topic.views}}</h4>
    </li>
    <li class='secondary topic-map-participants'>
      {{number topic.participant_count}}
      <h4>{{i18n 'users_lowercase' count=topic.participant_count}}</h4>
    </li>
    {{#if topic.like_count}}
      <li class='secondary topic-map-likes'>
        {{number topic.like_count}}
        <h4>{{i18n 'likes_lowercase' count=topic.like_count}}</h4>
      </li>
    {{/if}}
    {{#if details.links.length}}
      <li class='secondary topic-map-links'>
        {{number details.links.length}}
        <h4>{{i18n 'links_lowercase' count=details.links.length}}</h4>
      </li>
    {{/if}}
    {{#if showPosterAvatar}}
      <li {{bind-attr class=":avatars mapCollapsed::hidden"}}>
        {{#each p in details.fewParticipants}}
          {{topic-participant participant=p}}
        {{/each}}
      </li>
    {{/if}}
  </ul>
</section>

I added a unique class name to each of the elements/list items. This lets you target individual elements in the topic map for styling with CSS.

If the Discourse team finds this useful, I can contribute this change myself, or if anybody else wants to run with it, feel free to take it.

It would be very helpful, as a general development principle, to make sure to add unique classes or ids to HTML elements whenever possible.

3 Likes
2

Replying with a suggestion for a workaround from @downey: use the :nth-child(n) selector.

3

I disagree with this. There is no need for every single element on the page to have a unique class.

1 Like
4

I agree with not having every element having a unique class. I have seen more than enough mark-up bloated with class values so to make it easier for those that have trouble with determining CSS selectors to last me.

On the other hand, I think it should be up to the Discourse Team to decide if a proven need really exists and add them as they see fit.

5

He’s not asking for every single element to have a unique class… just the parents of the ones that have unique functions.

Well, up until this part…

then he goes overboard and should be ignored.

What would make more sense is

3 Likes
6

OK, maybe that was close to going overboard ;). But if you want people to be able to customize how Discourse looks and behaves, which helps with its spread and adoption, you should make it as easy as possible to do this.

What if I want to give more visibility to some elements, and less to others? This is an aesthetics decision which Discourse users should feel free to make. There are several threads here that highlight the diversity of themes and visual customizations.

Hunting for elements through nth-child stuff is complex and will eventually break when Discourse is updated. Make it easy to work Discourse into other/existing platforms, styles and brands.

7

can this part be added in the customize HTML ?

8

Adding arbitrary classes to arbitrary elements on the page? No I don’t think its a good fit for customize.

9

yes, because i want hide the users field from map-collapsed and this is only possible with a unique classname. otherwise it hides replies views although

10

I think you may want to start a new support topic and provide screenshots of what you are trying to do. As it sounds like you simply want a singular class name added, which is different than what this topic is referring to.

3 Likes