Adding unique ID to custom user fields

Feature
1

I would like to be able to target custom user profile fields with CSS in both the user profile/card, and the user preferences. Currently, all custom user fields get the same div and span class, making it very difficult to have CSS target any single field.

I looked at users.hbs, and this is the relevant section:

        {{#if publicUserFields}}
          <div class="public-user-fields">
            {{#each uf in publicUserFields}}
              {{#if uf.value}}
                <div class="public-user-field">
                  <span class="user-field-name">{{uf.field.name}}</span>:
                  <span class="user-field-value">{{uf.value}}</span>
                </div>
              {{/if}}
            {{/each}}
          </div>
        {{/if}}

It would be great to add something that could uniquely identify a custom user field and its value, like this:

<div class="public-user-field" id="{{uf.field.name.sanitized}}">

Where .sanitized would replace spaces with dashes, strip out nasty characters, and convert to lowercase. Embers has underscore and dasherize methods which could go a long way (but to be completely safe, only alphanumeric characters and dashes should be permitted).

I’m nowhere near enough of an Embers and Ruby person to be able to make this change without some pointers.

As a general principle, it would be great to always add classes or ids such that element styling can be modified with custom CSS.

2 Likes
2

Agreed that this could use more semantic class or id names. Meanwhile as a workaround did you try using the :nth-child(n) selector to target a specific field?

http://www.w3schools.com/cssref/sel_nth-child.asp

2 Likes
3

Nice workaround, I completely forgot about that! You’re at the mercy of the order of the elements, so you would have to make sure that Discourse updates don’t mess things up.

That will also help with my other feature request for similar treatment of the topic map.