MyBB Community Forums

Pages: 1 2 3 4

Is it somehow possible to use this by requiring the user to upload the image to the forum instead of an external link (which takes long to load). Just like its working with avatars.

Maybe someone has the knowledge to provide a small tutorial to achieve that.

(2014-09-18, 05:12 PM)ElectricShock Wrote: [ -> ]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.

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.

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

Just a few footnotes:

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.

If the image doesn't get loaded, or the user hasn't specified an image, it results in this: http://someimage.com/27OuWIg

I originally made this in 1.8, but I think there's a chance this should work for 1.6 without any hitches.

And to quote:

effone Wrote:Happy Coding!

Is there anyway someone can update this? These edits aren't working for me at all.

(Edit: I've gotten this to work months later on 12/1/2017)

* I followed the steps exactly until then end. I tweaked it to match my themes .css and template.

Got a slight problem. I added it all, but somehow only I can see my header Banner, while other users just see the emptiness?
Any thoughts on why?

Still need help with this, if anyone got tips.

Bump, still need some help regarding this, would be awesome if people could help!

Can you update the images or give us a live-demo?

I'm bumping this thread in-case this can be of help to others in the future

Specifically for the Emerald Theme (Reverted)

My Member Template -> Member_Profile "edits"

<html>
<head>
<style>
.profbg {
background-image: url({$userfields['fid7']});
}
</style>
<title>{$mybb->settings['bbname']} - {$lang->profile}</title>
{$headerinclude}
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/report.js?ver=1804"></script>
</head>
<body>
{$header}
<fieldset>
<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>
<span class="smalltext">
({$usertitle})<br />
{$groupimage}
{$userstars}
<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>
</fieldset>
<br />
{$awaybit}{$bannedbit}
<table width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
<tr>
<td width="50%" valign="top">
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<tr>
<td colspan="2" class="thead"><strong>{$lang->users_forum_info}</strong></td>
</tr>
<tr>
<td class="trow1" style="width: 30%;"><strong>{$lang->joined}</strong></td>
<td class="trow1">{$memregdate}</td>
</tr>
<tr>
<td class="trow2"><strong>{$lang->lastvisit}</strong></td>
<td class="trow2">{$memlastvisitdate}</td>
</tr>
<tr>
<td class="trow1"><strong>{$lang->total_posts}</strong></td>
<td class="trow1">{$memprofile['postnum']} ({$lang->ppd_percent_total}){$findposts}</td>
</tr>
<tr>
<td class="trow2"><strong>{$lang->total_threads}</strong></td>
<td class="trow2">{$memprofile['threadnum']} ({$lang->tpd_percent_total}){$findthreads}</td>
</tr>
<tr>
<td class="trow1"><strong>{$lang->timeonline}</strong></td>
<td class="trow1">{$timeonline}</td>
</tr>
{$referrals}
{$reputation}
{$warning_level}
</table>
</br>
<div style="text-align: left">{$buddy_options}{$ignore_options}{$report_options}</div>
{$contact_details}</br>
</td>
<td>&nbsp;&nbsp;</td>
<td width="50%" valign="top">
    {$profilefields}{$signature}
    {$modoptions}
    {$adminoptions}
</td>
</tr>
</table>
{$footer}
</body>
</html>

My Global.CSS "edits"

.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: white;
padding: 5px;
border: 2px solid #FFFFFF;
border-radius: 7px;
max-height: 200px; 
max-width: 350px;
}

.ud-img img {
border: 2px solid #FFFFFF;
border-radius: 10px;
max-width: 350px;
}

Before (Without a Background):

[Image: bg-1.png]

After (With a Background):

[Image: bg-2.png]

Feel free to PM me if you need help with this

Great Experience Of Mine but Want to know how to fix Photo URL?

how can I make this with upload image function?

You're tutorial is outdated and doesn't work

but look what i did and make it works 100%

in member_profile // find <fieldset class="profile-field"> and add the div class underneath it
also you might wanna replace the background URL

code:

<div class="profile-cover" style="background-image: url(https://yashvirgaming.com/mybb/images/profilepic_1.png); background-repeat: no-repeat;background-position: center;"></div>

Results here:

[Image: bg.png]

Pages: 1 2 3 4

thelovelyone

Spizy

curkill

curkill

curkill

Camdennn

Spizy

lihagotti

Kiddo Monster

YashvirGaming