07-09-2018, 08:27 PM
Have you Been on Many Forums using Mybb like HackForums etc and seen a Twitter Profile or Facebook Profile you now know how to create it. I found this on Icyboards and since it hasn't been posted here as yet I decided to share it has I found it helpful I left the credits here so if you guys have any problem please add Electric Shock I am sure he will be more then happy to help.
Credits: https://forums.icyboards.net/showthread.php?tid=7707 Electric Shock I Hope this alright!.
1. Create custom profile field for background image
ACP > Configuration > Custom Profile Fields > Add New Profile Field
Type in these parameters:
Title
Profile Background
Short Description
Recommended size: 1125x182 (Only .jpg, .gif, .png supported)
Field Type
Textbox
Regular Expression
(I didn't type anything in, but feel free to nose around google)
This will allow you for validating if the provided link is actually an image link.
Maximum Length
500 (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.
2. Find out the field ID.
The field ID is the essential part of this tweak. To find it out, hover over the name of the custom field we just created. "Profile Background", in this case.
![[Image: ?url=http%3A%2F%2Ft1.someimage.com%2FazvM7on.jpg]](https://prox.icyboards.net/?url=http%3A%2F%2Ft1.someimage.com%2FazvM7on.jpg)
After you hover over the link, check the bottom left corner of your browser. A link should appear in the following format:
http://example.com/mybbdir/admin/index.php?module=config-profile_fields&action=edit&fid=X
Where green stands for you don't need to pay attention to this.
And the red X is the required field ID.
![[Image: ?url=http%3A%2F%2Ft1.someimage.com%2Fb95Az2S.jpg]](https://prox.icyboards.net/?url=http%3A%2F%2Ft1.someimage.com%2Fb95Az2S.jpg)
3. Edit the templates.
Now it's time for editing the templates.
ACP > Templates & Style > Templates > *your theme* Templates > Member Templates > member_profile
Find:
PHP Code:
And replace it with:
PHP Code:
What I did:
In the same template, paste the following code between the <head> and </head> tags.
<style>
.profbg {
background-image: url({$userfields['fidX']});
}
</style>
Where X is to be replaced by the obtained field ID in step 2.
What I did:
The {$userfields['fidX']} is the main part of the smarkup. It'll pull the value entered in the custom profile field by the user. I didn't put this specific CSS rule along with the other styles that'll be put in the stylesheet.
Why?
Because the parser doesn't process the stylesheets, the variable won't pull the required link if placed in the stylesheet.
5. Do the rest of the styling.
The rest is fairly easy.
ACP > Templates & Style > *Your Theme* > global.css > Options > Edit Style
(I recommend the Advanced Mode)
Optionally, you may create another stylesheet exclusively for member.php?action=profile if you're feeling nitpicky.
Add these lines at the bottom:
PHP Code:
And you're done!![[Image: biggrin.png]](https://static18.icyboards.net/support/images/smilies/biggrin.png)
Credits: https://forums.icyboards.net/showthread.php?tid=7707 Electric Shock I Hope this alright!.
1. Create custom profile field for background image
ACP > Configuration > Custom Profile Fields > Add New Profile Field
Type in these parameters:
Title
Profile Background
Short Description
Recommended size: 1125x182 (Only .jpg, .gif, .png supported)
Field Type
Textbox
Regular Expression
(I didn't type anything in, but feel free to nose around google)
This will allow you for validating if the provided link is actually an image link.
Maximum Length
500 (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.
2. Find out the field ID.
The field ID is the essential part of this tweak. To find it out, hover over the name of the custom field we just created. "Profile Background", in this case.
After you hover over the link, check the bottom left corner of your browser. A link should appear in the following format:
http://example.com/mybbdir/admin/index.php?module=config-profile_fields&action=edit&fid=X
Where green stands for you don't need to pay attention to this.
And the red X is the required field ID.
3. Edit the templates.
Now it's time for editing the templates.
ACP > Templates & Style > Templates > *your theme* Templates > Member Templates > member_profile
Find:
PHP Code:
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> And replace it with:
PHP Code:
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> What I did:
- Removed the fieldset tag, it was sitting there, doing no visible benefit.
- Added classes to the tables, trs and tds.
In the same template, paste the following code between the <head> and </head> tags.
<style>
.profbg {
background-image: url({$userfields['fidX']});
}
</style>
Where X is to be replaced by the obtained field ID in step 2.
What I did:
The {$userfields['fidX']} is the main part of the smarkup. It'll pull the value entered in the custom profile field by the user. I didn't put this specific CSS rule along with the other styles that'll be put in the stylesheet.
Why?
Because the parser doesn't process the stylesheets, the variable won't pull the required link if placed in the stylesheet.
5. Do the rest of the styling.
The rest is fairly easy.
ACP > Templates & Style > *Your Theme* > global.css > Options > Edit Style
(I recommend the Advanced Mode)
Optionally, you may create another stylesheet exclusively for member.php?action=profile if you're feeling nitpicky.
Add these lines at the bottom:
PHP Code:
Code:
.user-details {
background: transparent;
}
.profbg {
background-size: 100% 100%;
border: 1px solid #555555;
border-radius: 3px;
box-shadow: 0px 0px 10px 5px #888888;
}
.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;
} And you're done!