Apply CSS to all custom (non-badge) user titles


(Joshua Rosenfeld) #1

So we are looking to add some new badges to our site which can be used as titles. At the moment, we have only ever given titles to staff and a select few extraordinary users. We’d like to keep the staff and special user’s titles visible and worry they could be less noticeable in the noise of badge titles.

Is it possible to target all titles not from a badge?

Group owners cannot see group if "Group is visible to all users" is off
(cpradio) #2

From what I can tell. No. It doesn’t seem to make that distinction (at least inspecting the element here on Meta for several accounts doesn’t indicate a way)

(Joshua Rosenfeld) #3

Going on the assumption that this isn’t currently possible, is this a feature @team would consider adding? If not, I’d love some suggestions to accomplish this. Could putting all users with a custom title in a group work? If so, is there a method to get all users with custom titles either via data explorer or the ruby console?

(Neil Lalonde) #4

If they’re in a custom group, then you can target the titles with CSS. Something like .group-GroupName .topic-meta-data .user-title should work.

(Joshua Rosenfeld) #5

Wonderful! Thanks @neil.

Now for part 2: does anyone know how to select (or get a list of) all users with custom titles?

(Daniela) #6

Maybe a data explorer query can be helpfull in this case.

(Mittineague) #7

Yes, some kind of query that joins users.title to user_profiles.badge_granted_title should do it.

(Joshua Rosenfeld) #8

My SQL knowledge is minimal, but doesn’t badge_granted_title imply that the title came from a badge? That’s what I’m trying to avoid catching here - I want titles that don’t come from a badge.

(Mittineague) #9

The values for the badge_granted_title are NULL, default false.

I’m guessing if a user has no title it’s NULL, if the title is a Badge title it’s true, else false.

Maybe try

SELECT user_id 
FROM user_profiles 
WHERE badge_granted_title 
AND badge_granted_title IS NOT TRUE

if you wanted names instead of ids you could join on to get users.username

(Joshua Rosenfeld) #10

I’m getting a development instance up now. Give me a few minutes to confirm.

Edit: @Mittineague so didn’t quite work. It gave a list of all users without a badge_granted_title, regardless of whether they have a title or not.

(Mittineague) #11

lol I did so just now.


I was in the middle of typing the same

This works for finding Badge titles, but the previous query doesn’t work for finding non-Badge titles

SELECT user_id 
FROM user_profiles 
WHERE badge_granted_title IS NOT NULL 
AND badge_granted_title IS TRUE

(Joshua Rosenfeld) #12

So, how’s my logic here:

If you run this query, you get all users with badge granted titles:

SELECT user_id 
FROM user_profiles
WHERE badge_granted_title 
AND badge_granted_title IS TRUE

Then if you run this query, you get all users that have a title:

SELECT username
FROM users 

Then you can export the results and remove all users that appear in the first query from the second, giving me the result I am looking for.

(Mittineague) #13

I had one member that was booted out if a Group and lost his title, so I needed to test for an empty string Title. But this seems to work.

, users.title 
FROM users 
JOIN user_profiles 
ON user_profiles.user_id = 
WHERE users.title IS NOT NULL 
AND users.title NOT LIKE '' 
AND user_profiles.badge_granted_title IS NOT TRUE

(Joshua Rosenfeld) #14

That works! Awesome, thanks.

(Joshua Rosenfeld) #15

Perhaps I’m doing something wrong, but this doesn’t work.

I was able to make it work as .group-GroupName .topic-meta-data .user-title a if I made the custom group “primary” but that makes it a link…and shows the group to users (resulting in an Access Denied error if clicked).

Working (mostly):

Not working:

(Mittineague) #16

The only thing I came up with is hacky and differentiates Group titles, not Badge titles.

Because all titles have span.user-title but only Badge titles have child <a> tags. I first styled all span.user-title s then “unstyled” the span.user-title a s

I used “magic numbers” which means it may not work depending on different browser font-size / zoom settings.

One thing a bit odd that I noticed is @TechnoBear 's Title links to the Team Leaders Group page. That is, if a Group member has a custom Title it still gets a link to their primary group.

span.user-title {
  background-color: #CCF;
span.user-title a {
  background-color: #FFF;
  padding: 5px 1px;
  margin-right: -10px;

(Joshua Rosenfeld) #17

Hmm…that doesn’t seem to do anything. The user vinpkl, they have a custom title and are in a group? Is the group primary?

Edit: so I got the backgroud color to work by removing span from both lines of css, but it highlights both. Regular doesn’t seem to have an <a> tag.

(Joshua Rosenfeld) #18

Let me try approaching this a different way. Is it possible (via CSS, JS, or otherwise) to remove the link from a title for a user with a primary group?
I ask because the CSS Neil shared works, but only if the group is primary which makes the title clickable.

Edit: Did some more research and came up with this:

.group-customTitleGroup .topic-meta-data .user-title a{
    color : red;
    cursor: text;


<!Doctype HTML>

$(function() {


Could doing this cause any unexpected issues? I understand that this will remove the links from all custom group titles, but since we don’t use groups this shouldn’t be an issue.

(Mittineague) #19

SitePoint forum titles are a bit of an exception. vinpkl, and many other members, have titles but do not belong to any primary group.

They are essentially custom titles that were assigned when SitePoint migrated from vBulletin to Discourse. Such members have the option of keeping their vBulletin title, having none, or using a Discourse Group or Badge title if available.

Unless I’m missing something, there is no pure CSS way to target non-Badge titles.

I don’t know how much work would be involved in adding "badge, “group” or anything else to the user-title span or how much of a demand there is for such a class, but I’m not seeing anything else that would work short of JavaScript and I haven’t looked into that to see how viable that approach might be.

(Joshua Rosenfeld) #20

Not against JavaScript at all. Did you happen to see my edit above with a possible JS/CSS solution?