Adding unique ID to custom user fields

Contribute Feature

AI-generated summary

The discussion revolves around adding unique IDs to custom user fields in Discourse for easier CSS targeting. OnceWas proposed adding a sanitized field name as an ID to the public-user-field div, to allow for styling specific fields. Currently, all custom fields share the same class, making it difficult to target individual fields.

downey suggested using the :nth-child(n) CSS selector as a workaround, which OnceWas acknowledged as a viable solution, although it relies on the order of elements remaining consistent. This issue is also relevant to another feature request for unique class names in the topic map.

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
Adding unique class names to to the elements in the topic map
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
Adding unique class names to to the elements in the topic map
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.