Welcome

Profile Cover Image for ProBoards

This is a "plug-in/theme thingy" for the ProBoards forum system. This will add a nice Profile Cover image to a user's profile page and allow them to change it to whatever they want.

Instructions

1. Go to your forum's admin page > Themes > Layout templates > Select "User Profile" from the list.

2. In the "User Profile" tab (selected by default) replace the following code:

<div class="pad-all-double clear">
<div class="float-left">
<div class="float-left pad-right">$[user.avatar_medium]</div>
<div class="name_and_group float-right">
<span class="big_username" style="color: $[user.color];">$[user.name]</span><br />
{if $[user.group]}
$[user.group.name]<br />$[user.group.stars]
{else}
$[user.rank.name]<br />$[user.rank.stars]
{/if}
</div>
</div>
<div class="float-right controls">
$[options]
$[send_message_button]
$[edit_profile_button]
$[follow_button]
$[invite_button]
<div class="float-right clear pad-top">
Username: <span class="note pad-right">$[user.username]</span>
{if $[user.is_online]}
Member is Online
{else}
Last Online: <span class="note">$[user.last_online]</span>
{/if}
</div>
</div>
</div>
With this code:

<div style="background-color: #f5f5f5;height: 145px;border-bottom: 5px solid #eeeeee;{foreach $[user.custom_field]}{if $[user.custom_field.name] == 'Cover Photo'} background-image: url('$[user.custom_field.value]');{/if}{/foreach};background-position: center;background-size:cover;">
<div class="pad-all-double clear">
<div style="margin-top: -10px;margin-left: 20px;">
<div class="float-left">
<div style="background-color: #ffffff;/* opacity: 0.9; */padding-right: 26px;margin-top: 35px;color: white;text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.72);">
   <div class="float-left pad-right"><div class="avatar-wrapper avatar_size_medium avatar-1" style="background-color:#f5f5f5;border: 2px solid #eeeeee;-webkit-box-shadow: 0px 0px 16px -2px rgba(0,0,0,0.75);  -moz-box-shadow: 0px 0px 16px -2px rgba(0,0,0,0.75);  box-shadow: 0px 0px 16px -2px rgba(0,0,0,0.75);border-radius: 5px;">$[user.avatar_medium]</div></div>
<div class="name_and_group float-right" style="padding-left: 15px;">
<span class="big_username" style="color: $[user.color];">$[user.name]</span><br />
{if $[user.group]}
$[user.group.name]<br />$[user.group.stars]
{else}
$[user.rank.name]<br />$[user.rank.stars]
{/if}
</div>
 </div>
</div>
</div>
<div class="float-right controls">
<div style="padding: 10px;background-color: #e3e3e3;width: 335px;opacity: 0.9;border: 1px solid #eeeeee;border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;border-top: 0px solid transparent;">
$[options]
$[send_message_button]
$[edit_profile_button]
$[follow_button]
$[invite_button]
   <div class="float-right clear pad-top" style="float:left;margin-top: 4px;">
Username: <span class="note pad-right">$[user.username]</span>
{if $[user.is_online]}
Member is Online
{else}
Last Online: <span class="note">$[user.last_online]</span>
{/if}
</div>
 </div>
</div>
</div>
</div>

3. Now save your changes and go to Members > Custom Profile Fields.


4. Set the following properties for the new field (your changes should save automatically):

Field Name: Cover Photo
Type: Text Field
Options: URL(plain text)
Character Limit: (none)
Location: Member Profiles Only
Who Can Edit: Member And Staff With Power


5. Go to Themes > Layout Templates > Select "User Profile" from the list > Select the "Summary" tab.


6. Now replace the following code:

<tr class="$[user.custom_field.content_class]">
<td class="headings">
$[user.custom_field.name]:
</td>
<td>
$[user.custom_field.value]
</td>
</tr>
With this code:

{foreach $[user.custom_field]}
                       {if $[user.custom_field] = "Cover Photo"}
{else}
<tr class="$[user.custom_field.content_class]">
<td class="headings">
$[user.custom_field.name]:
</td>
<td>
$[user.custom_field.value]
</td>
</tr>
{/if}
{/foreach}
7. You have now successfully added the Cover Photo "plug-in/theme thingy" to your forum! To change the Cover Photo for your profile go to Profile > Edit Profile > Personal > Cover Photo (scroll down to bottom) and enter an image URL to set as your Cover Photo!

8. Your Cover Photo should look a little something like this:
 OR 

Hope this helps!

PS: Special thanks to the members/staff at ProBoards who helped!