Looks like this
[hide]
1) Install this plugin
http://mybbhacks.zingaburga.com/showthread.php?tid=464
2)ACP > Configuration > Custom Profile Fields > Add New Profile Field[size=small]
Title:[/size]ProfileCover
Short Description:Recommended size: 1125x182 (Only .jpg, .gif, .png supported)
Field Type:Textbox
Regular Expression:empty
Maximum Length:600 your choice
Minimum Post Count, Display Order, Required, Show on Registration are your choices.
Display on profile?:Yes
Display on postbit?:No
Viewable By:All groups
Editable by:All groups
Parser Options:none
Save it.
3) Find out the field ID.
To find it out, hover over the name of the custom field we just created. "Profile Background", in this case.
http://example.com/mybbdir/admin/index.php?module=config-profile_fields&action=edit&fid=X
the red X is the required field ID.
4) ACP > Templates & Style > Templates > *your theme* Templates > Member Templates > member_profile
find
Replace it with
5) In the same template, paste the following code between the <head> and </head> tags.
[hide]
1) Install this plugin
http://mybbhacks.zingaburga.com/showthread.php?tid=464
2)ACP > Configuration > Custom Profile Fields > Add New Profile Field[size=small]
Title:[/size]ProfileCover
Short Description:Recommended size: 1125x182 (Only .jpg, .gif, .png supported)
Field Type:Textbox
Regular Expression:empty
Maximum Length:600 your choice
Minimum Post Count, Display Order, Required, Show on Registration are your choices.
Display on profile?:Yes
Display on postbit?:No
Viewable By:All groups
Editable by:All groups
Parser Options:none
Save it.
3) Find out the field ID.
To find it out, hover over the name of the custom field we just created. "Profile Background", in this case.
http://example.com/mybbdir/admin/index.php?module=config-profile_fields&action=edit&fid=X
the red X is the required field ID.
4) ACP > Templates & Style > Templates > *your theme* Templates > Member Templates > member_profile
find
Code:
<fieldset>
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="75%">
<span class="largetext"><strong>{$formattedname}</strong></span><br />
<span class="smalltext">
({$usertitle})<br />
{$groupimage}
{$userstars}<br />
<br />
<strong>{$lang->registration_date}</strong> {$memregdate}<br />
<strong>{$lang->date_of_birth}</strong> {$membday} {$membdayage}<br />
<strong>{$lang->local_time}</strong> {$localtime}<br />
<strong>{$lang->postbit_status}</strong> {$online_status}
</span>
</td>
<td width="25%" align="right" valign="middle">{$avatar}</td>
</tr>
</table>
</fieldset>Replace it with
Code:
<table width="100%" cellspacing="0" cellpadding="25" border="0" class='profbg'>
<tr>
<td width="75%" class="user-details">
<div class="ud-text"><span class="largetext"><strong>{$formattedname}</strong></span><br />
<span class="smalltext">
({$usertitle})<br />
{$groupimage}
{$userstars}<br />
<br />
<strong>{$lang->registration_date}</strong> {$memregdate}<br />
<strong>{$lang->date_of_birth}</strong> {$membday} {$membdayage}<br />
<strong>{$lang->local_time}</strong> {$localtime}<br />
<strong>{$lang->postbit_status}</strong> {$online_status}
</span></div>
</td>
<td width="25%" align="right" valign="middle" class="user-details ud-img">{$avatar}</td>
</tr>
</table>5) In the same template, paste the following code between the <head> and </head> tags.
Code:
<if $userfields['fid6'] then>
<style>
.profbg {
? ? background: url({$userfields['fid6']}) center center no-repeat #292929;
? ? overflow: hidden;
? ? background-position: center center;
? ? background-size: cover !important;
? ? background-repeat: no-repeat;
border-radius: 2px;
}
</style>
<else>
<style>
.profbg {
? ? background-image: url(/images/default-Cover.png) !important;
? ? overflow: hidden;
? ? background-position: center center;
? ? background-size: cover !important;
? ? background-repeat: no-repeat;
border-radius: 2px;
}- userfields['fid[font=Monaco, Consolas, Courier, monospace]6/images/default-Cover.png
[/font]with your image
add the css to your global.css
Code:.user-details { background: transparent; } .profbg { background-size: 100% 100%; border: 1px solid #555555; overflow: hidden; background-position: center center; background-size: cover !important; background-repeat: no-repeat; border-radius: 2px; } .ud-text { background: rgba(255,255,255,0.7); padding: 5px; border: 2px solid #FFFFFF; border-radius: 6px; max-width: 350px; } .ud-img img { border: 2px solid #FFFFFF; border-radius: 6px; max-width: 350px; }
Done
[/hide]
