We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Locked Topic
  • Pages:
  • 1
[ C ] Profile BG; reopened
Topic Started: Jul 10 2015, 01:42 AM (722 Views)
Tyler Dream
Member Avatar
Member
[ *  *  *  * ]
ZB
thewizardlycommons.com

I'm looking a way so that members can choose from various predefined backgrounds which they can use as their mini profile background (let me know dimensions?) I would also like a way that some backgrounds are only available to certain people, for example outlineforum.com, has an exclusive bg for retired staff.

Also would it be possible to allow certain people to use it? I plan on selling it in the shop as a customization. Staff will be receiving this feature for free however
Edited by Tyler Dream, Jul 13 2015, 04:23 AM.
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
The width of the area you are referring to is 175px by default. Most theme coders don't change this. As for the height, that is a bit tricky, because the height depends on how long the post and signature is. What would work well for the height is to have semi-transparency applied to the background image so it would blend well on top of a background color.
Offline Profile Goto Top
 
Tyler Dream
Member Avatar
Member
[ *  *  *  * ]
Ok
Offline Profile Goto Top
 
DaPizzaMan
Member Avatar
#TeamSupport

Code:
 
<script type="text/javascript">
var profileBackgroundFieldName = "Profile Background";
var profileDefaultBackground = "Default Profile Background URL";
var canUse = ['123456', '213567', 'enter user OR group ID of permitted user/group here'];

$(function() {
if ($.inArray($.zb.stat.mid, canUse) === -1 || $.inArray($.zb.stat.gid, canUse) === -1) {
if (location.href.indexOf(main_url + 'home/?c=6') !== -1) {
$('#edit_profile tbody td.c_desc:contains(' + profileBackgroundFieldName + ')').parent().remove();
}
}

if (location.href.indexOf(main_url + 'topic/') !== -1 || location.href.indexOf(main_url + 'single/') !== -1) {
$('table.topic tbody td.c_user').each(function() {
/* Background */
var $this = $(this);
var field = $this.find('dt:contains(' + profileBackgroundFieldName + ')').next();
$this.css('background-image', field.text().indexOf('http://') !== -1 ? 'url(' + field.text() + ')' : 'url(' + profileDefaultBackground + ')');
field.prev().andSelf().remove();
$this.find('dl:has(dd.spacer:only-child)').remove();
});
} else if (location.href.indexOf(main_url + 'profile/') !== -1) {
var $this = $('table.profile td.c_user');
var field = $this.find('dt:contains(' + profileBackgroundFieldName + ')').next();
field.prev().andSelf().remove();
$this.find('dl:has(dd.spacer:only-child)').remove();
}
}
});
</script>
The two variables at the top of the above code is where you replace what is between the quotation marks. For the first variable, you replace the placeholder text with your custom profile field title/name. The second variable is for the default background URL for users who have yet to set a background. Find an image that you like, and leave the link between the quotation marks of the second variable. You can create any type of custom profile field, just as long as the result is a URL for a background. Lastly, enter the user/group IDs for all the users/groups that you want to allow to use this.
Offline Profile Goto Top
 
Tyler Dream
Member Avatar
Member
[ *  *  *  * ]
Mk thanks. Where does this code go though?
Offline Profile Goto Top
 
Quozzo
Member Avatar
By the blood of Sanguinius!
[ *  *  *  *  * ]
TDreamW101
Jul 21 2015, 09:50 PM
Mk thanks. Where does this code go though?
Where have you tried?
Offline Profile Goto Top
 
DaPizzaMan
Member Avatar
#TeamSupport

Admin CP >> Board Template >> Below the Board should be fine.
Offline Profile Goto Top
 
Tyler Dream
Member Avatar
Member
[ *  *  *  * ]
Doesn't work. My board link is here: http://thewizardlycommons.com/index/
Offline Profile Goto Top
 
DaPizzaMan
Member Avatar
#TeamSupport

Try this in Admin CP >> Board Template >> Below the Board:
Code:
 
<script type="text/javascript">
var profileBackgroundFieldName = "Profile Background";
var profileDefaultBackground = "http://i1316.photobucket.com/albums/t614/tdreamw101/Aurora_zps6xra6c9o.png";
var canUse = ['291320', '213567', 'enter user OR group ID of permitted user/group here'];

if ($.inArray($.zb.stat.mid, canUse) === -1 || $.inArray($.zb.stat.gid, canUse) === -1) {
if (location.href.indexOf(main_url + 'home/?c=6') !== -1) {
$('#edit_profile tbody td.c_desc:contains(' + profileBackgroundFieldName + ')').parent().remove();
}
}

if (location.href.indexOf(main_url + 'topic/') !== -1 || location.href.indexOf(main_url + 'single/') !== -1) {
$('table.topic tbody td.c_user').each(function() {
/* Background */
var $this = $(this);
var field = $this.find('dt:contains(' + profileBackgroundFieldName + ')').next();
$this.css('background-image', field.text().indexOf('http://') !== -1 ? 'url(' + field.text() + ')' : 'url(' + profileDefaultBackground + ')');
field.prev().andSelf().remove();
$this.find('dl:has(dd.spacer:only-child)').remove();
});
} else if (location.href.indexOf(main_url + 'profile/') !== -1) {
var $this = $('table.profile td.c_user');
var field = $this.find('dt:contains(' + profileBackgroundFieldName + ')').next();
field.prev().andSelf().remove();
$this.find('dl:has(dd.spacer:only-child)').remove();
}
</script>
Offline Profile Goto Top
 
Tyler Dream
Member Avatar
Member
[ *  *  *  * ]
Works great, Thanks DPM
Offline Profile Goto Top
 
Cody
Member Avatar
Member
[ *  *  *  *  *  * ]
Completed!

Your request has been completed. If you have any questions or concerns regarding the state of your request, please feel free to contact me via PM.
Offline Profile Goto Top
 
Cody
Member Avatar
Member
[ *  *  *  *  *  * ]
Reopened upon user request.
Offline Profile Goto Top
 
Tyler Dream
Member Avatar
Member
[ *  *  *  * ]
I had the problem you mentioned that the picture depends on the users post size. Is it possible to add the picture multiple times like this:

Code:
 
<img src='http://z2.ifrm.com/static/1/w_empty.png' alt='-' />
<img src='http://z2.ifrm.com/static/1/w_empty.png' alt='-' />
<img src='http://z2.ifrm.com/static/1/w_empty.png' alt='-' />
<img src='http://z2.ifrm.com/static/1/w_empty.png' alt='-' />
<img src='http://z2.ifrm.com/static/1/w_empty.png' alt='-' />
?
Edited by Tyler Dream, Jul 28 2015, 04:29 PM.
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
You could define a precise image size with the CSS background-size property.
Offline Profile Goto Top
 
DaPizzaMan
Member Avatar
#TeamSupport

TDreamW101
Jul 28 2015, 04:29 PM
I had the problem you mentioned that the picture depends on the users post size. Is it possible to add the picture multiple times like this:

Code:
 
<img src='http://z2.ifrm.com/static/1/w_empty.png' alt='-' />
<img src='http://z2.ifrm.com/static/1/w_empty.png' alt='-' />
<img src='http://z2.ifrm.com/static/1/w_empty.png' alt='-' />
<img src='http://z2.ifrm.com/static/1/w_empty.png' alt='-' />
<img src='http://z2.ifrm.com/static/1/w_empty.png' alt='-' />
?
I could make the image repeat within the code, yes. Or...
Cory
Jul 30 2015, 06:36 PM
You could define a precise image size with the CSS background-size property.
I could do as Cory suggested and just make any/every image fit the mini profile.
Offline Profile Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
ZetaBoards - Free Forum Hosting
Free Forums. Reliable service with over 8 years of experience.
Learn More · Register Now
Go to Next Page
« Previous Topic · Closed Requests · Next Topic »
Locked Topic
  • Pages:
  • 1