XenForo Personal banner

[</clown>]

1. Create two additional fields for banner title and banner color.
Field ID: p_banner
Title: Personal Banner Header
Display location: Personal details
Display order: 1
Field Type: Single-line text box
Value Matching Requirement: None
Only "Can be edited by a moderator" should be checked in the "General options".

Spoiler: 1.screen

Now for the color of the banner
Field ID: p_banner_color
Title: Personal Banner Color
Display location: Personal details
Display order: 2
Field Type: Radio buttons
Value Matching Requirement: Color
"Choices field settings" see on the screenshot
"Basic settings" as above
The HTML for the value output: {$choice}

Spoiler: 2.screen

Then make template modifications, message_macros, find:

        <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" />
            <xf:if is="{$dateHtml}"><div class="message-date">{$dateHtml}</div></xf:if>

replace:

        <xf:if is="{$user.Profile.custom_fields.p_banner} AND {$user.Profile.custom_fields.p_banner_color}">                               
            <div class="userBanner userBanner--{$user.Profile.custom_fields.p_banner_color} message-userBanner" dir="auto" itemprop="jobTitle">
                <span class="userBanner-before"></span>
                <strong>{$user.Profile.custom_fields.p_banner}</strong>
                <span class="userBanner-after"></span>
            </div>
        </xf:if>

In the member_view template we find:

                        <xf:if contentcheck="true">
                            <div class="memberHeader-banners">
                                <xf:contentcheck><xf:userbanners user="$user" /></xf:contentcheck>

replace:

                                <xf:if is="{$user.Profile.custom_fields.p_banner} AND {$user.Profile.custom_fields.p_banner_color}">
                                    <em class="userBanner userBanner--{$user.Profile.custom_fields.p_banner_color}" dir="auto">
                                        <span class="userBanner-before"></span>
                                        <strong>{$user.Profile.custom_fields.p_banner}</strong>
                                        <span class="userBanner-after"></span>
                                    </em>
                                </xf:if>

Result: