Can I assign a user-specific title / banner?

[Nicolas FR]

Your add-on does what I wanted (though limited to 5) by putting the text in a colored banner. I thought maybe this was a way to do the same thing natively.

You are doing something wrong somewhere.
What is the ID of you custom user field ?
And what are the settings you choose for it ?

 

[eL_]

/me facepalm!

 

[PatriotGB]

You are doing something wrong somewhere.
What is the ID of you custom user field ?
And what are the settings you choose for it ?

Thanks for your help! I played around with the settings with the same result.

 

[Nicolas FR]

Creates a custom profile field named Banner, not editable by the user. A simple text field with userBanner as ID for example.

I think you missed this important point.

Your ID is userbanner, the code i provided you contain userBanner.
Change one or the other but they must be the same.

 

[PatriotGB]

I think you missed this important point.

Your ID is userbanner, the code i provided you contain userBanner.
Change one or the other but they must be the same.

Aha! OK. Deleted that one and made a new one. It worked!
Next question (so sorry!)... That banner is left aligned. How to center it?

Thanks SO much again!

PS... I noticed that there is a tiny "blank banner" on everyone's user info when the custom field is blank. At end of red arrow below:

 

[Nicolas FR]

Post the code you use in message_macros and in extra.less templates.

 

[PatriotGB]

Post the code you use in message_macros and in extra.less templates.

<div class="message-userDetails">
<h4 class="message-name"><xf:username user="$user" rich="true" defaultname="{$fallbackName}" itemprop="name" /></h4>
<xf:usertitle user="$user" tag="h5" class="message-userTitle" banner="true" itemprop="jobTitle" />
<xf:userbanners user="$user" tag="div" class="message-userBanner" itemprop="jobTitle" />
<span class="label label--lightGreen">{$user.Profile.custom_fields.userBanner}</span>

I haven't changed anything in "extra.less." I just looked. In the default style, it's blank. In the "Shades of Gray" style the following is seen in the "extra.less":
The little blank empty "banner" is there in both styles (dark / light) when on the site.
------------------------------------------------------------
//////////////////////////////////////////////////////////////////////////////
/////////////////////// Shades of Grey - CSS additions ///////////////////////
//////////////////////////////////////////////////////////////////////////////

/* scrollbar colors */
/* Works on Firefox-only */
* {
scrollbar-width: 12px;
scrollbar-color: #373737 @xf-paletteColor5 !important;
}
/* Works on Chrome/Edge/Safari */
*::-webkit-scrollbar {
width: 10px;
overflow: scroll;
}
*::-webkit-scrollbar-track {
background-color: @xf-paletteColor5 !important;
}
*::-webkit-scrollbar-thumb {
background-color: #373737 !important;
border-radius: 20px;
}

/* enlarge Unfurl */
.bbCodeBlock--unfurl .contentRow-figure.contentRow-figure--fixedSmall
{
width: 250px;
img { max-height: 150px; }
img { min-width: 250px; }
}
@media (max-width: 650px){
.bbCodeBlock--unfurl .contentRow-figure.contentRow-figure--fixedSmall
{
width: auto;
img { max-height:50px; }
img { min-width: 50px; }
}
}

/* media category selected override */
.categoryList-link.is-selected {
color: white;
}

/* media number text override */
.embedTabs .embedTabs-tab.has-selected .badge.badge--highlighted {
color: @xf-paletteColor2 !important;
}

/* overlay footer override */
.overlay {
background-color: @xf-paletteNeutral2;
}

/* button link background overide */
.button.button--link, a.button.button--link {
color: #fff;
background: #323232;
border-color: #444 !important;
}
.button.button--link:hover, a.button.button--link:hover, .button.button--link:active, a.button.button--link:active, .button.button--link:focus, a.button.button--link:focus {
text-decoration: none;
background: #444;
border-color: transparent !important;
}

/* userBanner.userBanner--staff override */
.userBanner.userBanner--staff, .userBanner.userBanner--primary {
color: @xf-paletteAccent3;
background: @xf-paletteNeutral2;
border-color: @xf-paletteNeutral1;
}

/* Tag input field text fix */
.select2 .select2-selection ul .select2-search .select2-search__field {
color: @xf-paletteColor2;
}
.select2-results__options li {
background-color: @xf-paletteColor3;
}
------------------------------------------------------------