Profile Custom Background Image
Register
Dear Guest, Welcome to our forums. Please take a second to register our forum! In a few simple steps you will be able to enjoy all the features of our fine community!

Lobos
05-02-2021, 12:56 PM
#1
Preview
Quote:
[Image: 26b356b9ad2b62bea4d13cb00aa243d0.jpg]



Install this plugin
http://mybbhacks.zingaburga.com/showthread.php?tid=464

ACP > Configuration > Custom Profile Fields > Add New Profile Field
TitleTonguerofileCover
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.

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.p...n=edit&fid=X
the red X is the required field ID.

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['fid6
replace the red number with your field ID
and this /images/default-Cover.png
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;
}
Signature
reusers.to
forum.robloxscripts.com