MyBB Tutorials

[MyBB] How to make profile cover like IPB.

Submitted by Hollyman13, , Thread ID: 76724

Thread Closed
Hollyman13
Newbie
Level:
0
Reputation:
1
Posts:
18
Likes:
4
Credits:
73
23-02-2018, 01:38 PM
This post was last modified: 23-02-2018, 01:55 PM by Hollyman13
#1
[Image: H8XDzVC.jpg]



[Image: H8XDP25.jpg]



[Image: H8XE2j1.jpg]


[Image: H8XEdpG.jpg]



Make sure you've backup the code!

How the hell to do that:


1. Create custom profile field for background image
ACP > Configuration > Custom Profile Fields > Add New Profile Field

Type in these parameters:

Title
Profile Cover

Short Description
Recommended size: 1080x300 (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.p...edit&fid=X
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:

<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:

Content locked
This content has been locked. Please login or register in order to unlock it.


What I did:
Removed the fieldset tag, it was sitting there, doing no visible benefit.
change table & added classes to the section.

4. Call the background image
In the same template, paste the following code between the <head> and </head> tags.

Content locked
This content has been locked. Please login or register in order to unlock it.



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)

Add these lines at the bottom:

Content locked
This content has been locked. Please login or register in order to unlock it.


And you're done!
This hidden content has been reported as still working 0 times this month.
1 times in total
The link in this hidden content has been reported as down 0 times this month.
2 times in total

RE: [MyBB] How to make profile cover like IPB.

Rockhopper
Novice
Level:
0
Reputation:
0
Posts:
21
Likes:
2
Credits:
1
15-03-2019, 08:43 AM
#2
The images are down, can you fix it, please? A visual reference is better in this cases.

RE: [MyBB] How to make profile cover like IPB.

Guest
Level:
0
Posts:
N/A
Likes:
0
Credits:
0
11-04-2020, 02:55 PM
#3
Thanks for share bro, please update img links :dscream:

RE: [MyBB] How to make profile cover like IPB.

XeFalkor
Lurker
Level:
0
Reputation:
0
Posts:
3
Likes:
0
Credits:
3
13-04-2020, 12:25 AM
#4
Was looking into this, but the image links are broken, please update OP Smile

RE: [MyBB] How to make profile cover like IPB.

HeinHtetKyaw
Novice
Level:
0
Reputation:
0
Posts:
27
Likes:
1
Credits:
11
18-05-2020, 09:53 PM
#5
Images is Dead now :( can you fix it for other and me?

RE: [MyBB] How to make profile cover like IPB.

23-08-2020, 05:03 PM
#6
Hello is this what we called postbit backgorund ?
thanks for the tutorial BTW , i might try it out

RE: [MyBB] How to make profile cover like IPB.

prtgadmin
Newbie
Level:
1
Reputation:
0
Posts:
13
Likes:
0
Credits:
1
09-12-2021, 05:45 PM
#7
The image links are dead.
Also, this website says "I only signed up to leech". Despite making a thread and giving stuff away.

RE: [MyBB] How to make profile cover like IPB.

ry4hhh
Newbie
Level:
1
Reputation:
0
Posts:
12
Likes:
0
Credits:
6
18-09-2022, 11:47 PM
#8
Thanks for share bro, please update img links

Users browsing this thread: 1 Guest(s)