Tutorial Profile Background Like Twitter
poeja .

As we know that facebook and twitter has a beautiful profile view with a background that can be changed. Well from there I was thinking what could be made into MyBB? The following tutorial will explain how to do that in MyBB. This tutorial is very easy to use, does not require special coding just add some setting in Admin CP.

Ok here's how:

1. Create a custom profile field for the background image
go to Admin CP> Configuration> Custom Profile Fields> Add New Profile Field

fill the content as:

Title
Profile Background

Short Description
Recommended size: 1125x182 (Only .jpg, .gif, .png supported)

Field Type
Textbox

Regular Expression
empty

Maximum Length
500 (up to you)

Minimum Post Count, Display Order, Required, Show on Registration
up to you

Display on profile?
Yes

Display on postbit?
No

Viewable By
All groups

Editable by
All groups

Parser Options
none

ok save all the above settings, then we continue again by searching Field ID

What is Field ID?
Field ID is the ID used by Custom Field and usually it is obtained by way of mouse om to Custom Field and then look in the left / bottom right corner, there will appear a link from Custom Field. The following example
http://example.com/admin/index.php?module=config-profile_fields&action=edit&fid=X


X is Field ID and green is domain. No need to edit just remember its Field ID

Ok now go into the templates section.

Edit templates go to Admin CP> Templates & Style> Templates> * theme * Templates> Member Templates> member_profile

then find the following code
PHP 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


then replace with

PHP 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

ok, save and open themes css, then add the following line

PHP Code:
<style>
.
profbg {
background-imageurl({$userfields['fidX']});
}
</
style

See the above code fidX, replace X with the ID field that om remembered earlier.
now we add sweetener, add the following code after the above code

PHP Code:
.user-details {
backgroundtransparent;
}

.
profbg {
background-size100100%;
border1px solid #555555;
border-radius3px;
box-shadow0px 0px 10px 5px #888888;
}

.
ud-text {
backgroundrgba(255,255,255,0.7);
padding5px;
border2px solid #FFFFFF;
border-radius6px;
max-width350px;
}

.
ud-img img {
border2px solid #FFFFFF;
border-radius6px;
max-width350px;


ok save and see the result

Settings

Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
0 Vote(s) - 0 Average