Resource icon

PROFILE CUSTOM BACKGROUND IMAGE

Looks like this



1) Install this plugin

2)ACP > Configuration > Custom Profile Fields > Add New Profile Field

Title: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.
X
the red X is the required field ID.

4) ACP > Templates & Style > Templates > *your theme* Templates > Member Templates > member_profile
find
<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
<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.
<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
    .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 [HASH=90351]#FFFFFF[/HASH];
    border-radius: 6px;
    max-width: 350px;
    }

    .ud-img img {
    border: 2px solid [HASH=90351]#FFFFFF[/HASH];
    border-radius: 6px;
    max-width: 350px;
    }

    • Done :)
Author
Mastersly
Views
144
First release
Last update
Rating
0.00 star(s) 0 ratings