Profile Cover Image plugin [AVAILABLE NOW]

[Nathan Lecompte]

Wait, no worries I fixed it myself. I had to change mini_custom_field to custom_field.

[Nathan Lecompte]

One final question:
How do I make this into a plug-in?

[Boy_Wonder]

It doesn't need to be a plugin and wouldn't work if it was turned into a plugin? Its something put directly into your template using a custom field to supply it with the information and doesn't need to be a plugin, its just template modification.

[Nathan Lecompte]

Boy_Wonder Yeah I thought so, I guess I'll just put up some instructions on how-to-install in this thread. (or I could post it somewhere else if you'd prefer because this isn't exactly a plug-in)

[Nathan Lecompte]

Okay, here are the instructions on setting up the Cover Photo "plug-in theme thingy" on your forum:

--------------------------------

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  OR 

Hope this helps!

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

[MC3K_Neonz]

That's what I asked for !!!!!! 

EDIT : anyways, now that you've done it.

[MC3K_Neonz]

Oct 19, 2014 21:53:52 GMT -8 Nathan Lecompte said:

Okay, here are the instructions on setting up the Cover Photo "plug-in theme thingy" on your forum:

--------------------------------

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  OR 

Hope this helps!

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

Could I use your help in the theme im workin on ?

[Nathan Lecompte]

mkay

[Former Member]

Nathan Lecompte

You see how the send message/edit profile/gear/etc options are hovering with an opaque white background behind it? I was wondering how do I move that down and to the left, and put the avatar/display name/all that in the same box/with the same background so they are all connected.



I hope this makes sense   I can try to create a mock-up if you would like

[Nathan Lecompte]

Just move the float left div into the name and group float right code, then in the CSS change the float right to float left. (<< I'm making this up on the spot so it probably doesn't work, I'll test it once I get home)