- Joined
- Jul 25, 2024
- Messages
- 142
- Reaction score
- 131
- Points
- 43
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".
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}
Then make template modifications, message_macros, find:
replace:
In the member_view template we find:
replace:
Result:
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".
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}
Then make template modifications, message_macros, find:
Code:
<div class="m-userDetails">
<h4 class="m-name"><xf:username user="$user" rich="true" defaultname="{$fallbackName}" itemprop="name" /></h4>
<xf:usertitle user="$user" tag="h5" class="m-userTitle" banner="true" itemprop="jobTitle" />
<xf:userbanners user="$user" tag="div" class="m-uB" itemprop="jobTitle" />
<xf:if is="{$dateHtml}"><div class="m-date">{$dateHtml}</div></xf:if>
Code:
<xf:if is="{$user.Profile.custom_fields.p_banner} AND {$user.Profile.custom_fields.p_banner_color}">
<div class="uB uB--{$user.Profile.custom_fields.p_banner_color} m-uB" dir="auto" itemprop="jobTitle">
<span class="uB-before"></span>
<strong>{$user.Profile.custom_fields.p_banner}</strong>
<span class="uB-after"></span>
</div>
</xf:if>
Code:
<xf:if contentcheck="true">
<div class="memberHeader-banners">
<xf:contentcheck><xf:userbanners user="$user" /></xf:contentcheck>
Code:
<xf:if is="{$user.Profile.custom_fields.p_banner} AND {$user.Profile.custom_fields.p_banner_color}">
<em class="uB uB--{$user.Profile.custom_fields.p_banner_color}" dir="auto">
<span class="uB-before"></span>
<strong>{$user.Profile.custom_fields.p_banner}</strong>
<span class="uB-after"></span>
</em>
</xf:if>Result: