Thread Rating:
  • 4 Vote(s) - 5 Average
  • 1
  • 2
  • 3
  • 4
  • 5
[For 1.8] Twitter-like Profile Backgrounds
#1
Brainwaves keep coming. I had this idea like months ago, but didn't know how to print the link. But thanks to .m. from the MyBB community, I now do.

Twitter and Facebook has a pretty cool profile background image feature, that allows you to personalize your profile even more. MyBB's forum profile looks pretty stale, so to color things up, I came up with this. Toungue


   

[Image: fSuS7xB.jpg]

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 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: azvM7on.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: b95Az2S.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:

<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:
<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.
4. Call the background image
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:

.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! Big Grin

Just a few footnotes:

  1. I didn't keep in mind the numerous themes out there that have a different way of styling than the default, so you'll probably require some styling to make it look suitable.
  2. If the image doesn't get loaded, or the user hasn't specified an image, it results in this: http://someimage.com/27OuWIg
  3. I originally made this in 1.8, but I think there's a chance this should work for 1.6 without any hitches.

Edit: January 2018
I haven't touched any JS for two years now and my jQuery is very rusty. In fact, I barely get any time to come browse these forums; with my deepest apologies I have to decree that I cannot provide anymore support on a regular basis.
[Image: MaDuhur.png]
by Dukhor, IcyBoards Community Forums
Reply
#2
Thanks, what file I need change for member inform url for this image? where I put fidX for member send this info.
Reply
#3
I don't understand what you mean. Are you confused on what number to put in place of X in {$userfields['fidX']}? If so, please read through step 2.

Or are you having some other kind of problem?
[Image: MaDuhur.png]
by Dukhor, IcyBoards Community Forums
Reply
#4
Tutorial is fine, my question is where member inform specified image url?
Reply
#5
Oh. It's in USER CP > "Edit Profile". In the custom profile fields section.
[Image: MaDuhur.png]
by Dukhor, IcyBoards Community Forums
Reply
#6
This is really awesom, I can't wait to try it.
Hey man, what's up?
Reply
#7
This also lets user use and CSS they want on their profile Toungue

Because no filtering is done on the field value I could set it to:

http://image.url/some.jpg);} body{color:pink !important;}

and have lovely pink text on my profile~
Reply
#8
You can add a RegEx validation too, y'know.
[Image: MaDuhur.png]
by Dukhor, IcyBoards Community Forums
Reply
#9
I did'n't find any custom filed for changing my background. could you please share something more clear ? Thanks so much.
Reply
#10
I've done all the other parts but just stuck on the templates part, EShock this is my template I'm using for member profile, can you edit it and send it to me.

<html>
<head>
<title>{$mybb->settings['bbname']} - {$lang->profile}</title>
{$headerinclude}
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/report.js?ver=1800"></script>
  
  <script>
  $(function() {
    $( "#tabs" ).tabs();
  });
  </script>
  
</head>
<body id="forums">
{$header}
  
<table width="100%" cellspacing="0" cellpadding="{$theme['tablespace']}" border="0" align="center">
<tr>
<td valign="top">
  
  <div class="float_left"><span class="proname" style="font-size:24px;"><strong>{$formattedname}</strong></span></div><br />
<div class="float_right"><span class="smalltext"><font color="white"> {$userstars}   ({$usertitle})</font></span></div>
  <br/>
<div id="tabs">
  <ul>
    <li><a href="#tabs-1"><i style="font-size: 14px;" class="fa fa-info-circle fa-fw"></i> Forum info</a></li>
    <li><a href="#tabs-2"><i style="font-size: 14px;" class="fa fa-envelope-o fa-fw"></i> Contact me</a></li>
    <li><a href="#tabs-3"><i style="font-size: 14px;" class="fa fa-user fa-fw"></i> About me</a></li>
    <li><a href="#tabs-4"><i style="font-size: 14px;" class="fa fa-image fa-fw"></i> Signature</a></li>
  </ul>
  <div id="tabs-1">
    
               <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
				<tr>
					<td class="" style="width: 30%;"><div class="largetext">{$lang->joined}</strong></td>
					<td class=""><div class="smalltext">{$memregdate}</div></td>
				</tr>
				<tr>
					<td class=""><div class="largetext">{$lang->lastvisit}</strong></td>
					<td class=""><div class="smalltext">{$memlastvisitdate}</div></td>
				</tr>
				<tr>
					<td class=""><div class="largetext">{$lang->total_posts}</strong></td>
					<td class=""><div class="smalltext">{$memprofile['postnum']} ({$lang->ppd_percent_total})</div></td>
				</tr>
				<tr>
					<td class=""><div class="largetext">{$lang->total_threads}</strong></td>
					<td class=""><div class="smalltext">{$memprofile['threadnum']} ({$lang->tpd_percent_total}) </div></td>
				</tr>
				<tr>
					<td class=""><div class="largetext">{$lang->timeonline}</strong></td>
					<td class=""><div class="smalltext">{$timeonline}</div></td>
				</tr>
				{$referrals}
				{$reputation}
				{$warning_level}{$newpoints_profile}{$newpoints_shop_profile}
			</table>
    
  </div>
  <div id="tabs-2">
    
    
    {$contact_details}
    
  </div>
  <div id="tabs-3">
    
    {$profilefields}
    
  </div>
  <div id="tabs-4">
    
    
    {$signature}
    
  </div>
</div>
 <div class="float_left" style="text-align: center"><br />{$buddy_options}{$ignore_options}{$report_options}</div>
   
  
</td>
<td>&nbsp;</td>
<td valign="top" width="35%">

  <div class="proi">
 <div class="float_right"><div class="proav">{$avatar}</div></div>

				<span class="smalltext">
					
					{$groupimage}
					<br />
					<br />
					<strong>Join date:</strong> &nbsp;{$memregdate}<br />
					<strong>D.O.B:</strong>&nbsp; {$membday} {$membdayage}<br />
					<strong>Time:</strong>&nbsp; {$localtime}<br /><br /> 
<a href="private.php?action=send&amp;uid={$memprofile['uid']}"><span class="largetext"><i style="font-size: 14px;" class="fa fa-envelope fa-fw"></i>  Send Private Message</span></a><br />
<strong><span class="largetext"><a href="search.php?action=finduserthreads&amp;uid={$uid}"><i style="font-size: 14px;" class="fa fa-bookmark fa-fw"></i> View my threads</a></span></strong><br />
                  
                  
<strong><span class="largetext"><a href="search.php?action=finduser&amp;uid={$uid}"><i style="font-size: 14px;" class="fa fa-bookmark-o fa-fw"></i> View my posts</a></span></strong>
  <br />
				</span>  
    	<span class="smalltext">{$online_status}</span>
</div>
  {$adminoptions}
  {$modoptions}
  
</td>
</tr>
</table> <br />
{$footer}
</body>
</html>
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)