Profile cover image for ProBoards forums

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:
https://image.tf/show/vztLnHn9MbtFYyXT
https://image.tf/show/MnkPJz6xft2J1HLq

Hope this helps! 1f609

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

Like +1 Dislike

Hello!

Thanks for this awesome feature!

Unfortunately it looks like it conflicted with some code in my forum...not sure what. Would you mind helping me? @admin

Like 0 Dislike

@bunnyhoney Please make a subforum in the Web Questions section. It makes it easier to access.
Please also explain what code it conflicted with, and maybe show us the code you used so we can see if there are any errors 1f600
Thanks!

A post by brwck

Like +1 Dislike

brwck wrote:

@bunnyhoney Please make a subforum in the Web Questions section. It makes it easier to access.
Please also explain what code it conflicted with, and maybe show us the code you used so we can see if there are any errors 1f600
Thanks!

I'll remember that but apparently I did a newb/noob thing and wasn't paying attention to where I put the code. My excuse is that I have been working non-stop for 10 hours.

Like +1 Dislike