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:
Add Reply
  • Pages:
  • 1
  • 2
Username Styling Code v3.1; Requested by RichardInTN
Topic Started: Mar 16 2014, 10:03 PM (3,850 Views)
Ferby
Member Avatar
Developer
[ *  *  *  *  * ]
Code Name: Username Styling Code v3.1
Code Description: This code was made for RichardInTN and since it's not a small code, I'm releasing it here. The code reads profile fields which you (the admin) create and then uses the content of those two and styles the user's username. I will supply a link to a preview board later.


How to install the code: The code requires little to no editing. I have given you the option of naming the profile fields yourself rather than setting them in the code and asking you to create these profile fields based on what's in the code. If you don't know what I'm on about then don't worry about it :r

First off, go to Admin CP > Profile Fields. Here you can create either a 1 Line Text field or a Multiple Choice field. A 1 line text field would allow the user to style their username to whatever colour they want and to whatever font they want but if you want to restrict their choosing then choose Multiple Choice. Do not set Allow selection of more than 1 choice? to yes or the code will not work. Create 4 of these for the colour, font, username icon & glow effect. Name them what you wish.

Once you have done this, go to Admin CP > Board Template > Below the Board and place this code.
Code:

Code:
 
<script type="text/javascript">
// <![CDATA[
$(".c_user .user_profile").each(function() {
var username = {
//
enable_font:true,
font:"Username Font:",
//
enable_color:true,
color:"Username Colour:",
//
enable_glow:true,
glow:"Username Glow:",
glow_amount:5,
//
enable_icon:true,
icon:"Username Icon:",
icon_type:1,
}
// Editing below is not required
var css="",thisIs,image;
if(username.enable_font == true) var font = $(this).find("dt:contains("+username.font+") + dd").text();
if(username.enable_color == true) var color = $(this).find("dt:contains("+username.color+") + dd").text();
if(username.enable_glow == true) var glow = $(this).find("dt:contains("+username.glow+") + dd").text();
if(username.enable_icon == true) var icon = $(this).find("dt:contains("+username.icon+") + dd").text();
//
thisIs = $(this).parent().parent().prev().find(".c_username a:first").text();
$(this).parent().parent().prev().find(".c_username a:first").html("<span>"+thisIs+"</span>");
//
if(username.enable_color == true && color !== undefined) css = css+"color:"+color+";";
if(username.enable_font == true && font !== undefined) css = css+"font-family:"+font+";";
if(username.enable_glow ==true && glow !== undefined) css = css+"text-shadow:0px 0px "+username.glow_amount+"px "+glow+";";
if(username.enable_icon == true && icon !== undefined) {
if(username.icon_type == 1) {
$(this).parent().parent().prev().find(".c_username a:first span").append(" <img src='"+icon+"' alt='Username Image' style='max-height:20px' />");
}
else if(username.icon_type == 2) {
$(this).parent().parent().prev().find(".c_username a:first span").prepend("<img src='"+icon+"' alt='Username Image' style='max-height:20px' /> ");
}
else if(username.icon_type == 3) {
$(this).parent().parent().prev().find(".c_username a:first span").append(" <img src='"+icon+"' alt='Username Image' style='max-height:20px' />");
$(this).parent().parent().prev().find(".c_username a:first span").prepend("<img src='"+icon+"' alt='Username Image' style='max-height:20px' /> ");
}
}
$(this).parent().parent().prev().find(".c_username a:first span").attr("style",css);
console.log(css);
$(this).find("dt:contains("+username.font+") + dd, dt:contains("+username.font+")").hide();
$(this).find("dt:contains("+username.color+") + dd, dt:contains("+username.color+")").hide();
$(this).find("dt:contains("+username.glow+") + dd, dt:contains("+username.glow+")").hide();
$(this).find("dt:contains("+username.icon+") + dd, dt:contains("+username.icon+")").hide();
if($(this).find("dd").length == 0) $(this).hide();
});
// ]]>
</script>


In here you will find a couple of settings which you need to edit. These are the name of your profile fields that you have created and whether you want to enable/disable a style-type.
Code:

Code:
 
var username = {
//
enable_font:true,
font:"Username Font:",
//
enable_color:true,
color:"Username Colour:",
//
enable_glow:true,
glow:"Username Glow:",
glow_amount:5,
//
enable_icon:true,
icon:"Username Icon:",
icon_type:1,
}

For each style type there is a name and whether you want to enable/disable it. Name the setting with what you have named your profile field for that option. Remember to keep it in the quotation marks. To enable/disable something, you simply change `true` to `false` for that option. You will also notice there is a `glow_amount` option. This is how big the glow is on the username. Have a play around with it and you'll get the hang of how it works.

Version 3.1!
The newer version includes a Username Icon feature. It allows users to add an icon after their name at will. The image will automatically restricted to 20px in height and the code also allows you to set it to one of two types. Type 1 will place the icon after the username, type 2 will place it before the username and type 3 will do both. Edit the option according to what you'd prefer.

That's it, you've done it! If you find a problem with the code that results in it no longer functioning as it should then please either PM me or reply below. PMing me would probably be the better option. I'm open to adding more style options if you wish so please do ask. There's no copyright included and you're granted permission to edit the code as you see fit. Have a ball!
Offline Profile Quote Post Goto Top
 
Replies:
Ferby
Member Avatar
Developer
[ *  *  *  *  * ]
RichardInTN
Jul 30 2014, 10:51 PM
One question about the Username Icons... is it possible to have a choice between "left of the name", "right of the name", or "both sides of the name" (same Icon... or maybe even different Icons left and right)?


*I saw where there's already a "left" or "right" option.... Just wondering about the possibility of BOTH.
I don't mind tweaking the code to have it on both sides :)
Done! The OP is updated. The code hasn't been tested but it should work just fine :)
Edited by Ferby, Jul 31 2014, 09:56 AM.
Offline Profile Quote Post Goto Top
 
RichardInTN
Member Avatar
I believe in I.D.I.C.
[ *  *  * ]
Found a "bug" in the code.

It looked and worked great on my test board, but when I put it on my "real" board... MOST of the members now have oblong boxes either above and below their names or one to the left and one below (as if an image had been loaded, but wasn't displayed). Weird thing is... not everyone has the problem.

Would it be possible to run the icon part ONLY if there's a link in the icon field?

ETA: figured out a fix... I changed
Code:
 
if(username.enable_icon == true && icon !== undefined) {
to
Code:
 
if(username.enable_icon == true && icon !== "") {
and the problem disappeared!
Edited by RichardInTN, Jul 31 2014, 09:48 PM.
Offline Profile Quote Post Goto Top
 
Ferby
Member Avatar
Developer
[ *  *  *  *  * ]
Ah okay, I'll update the code in the morning :)
Offline Profile Quote Post Goto Top
 
Cameron RedGem
Member Avatar
Member
[ * ]
I would like it
 
<script type="text/javascript">
// <![CDATA[
$(".c_user .user_profile").each(function() {
var username = {
//
enable_font:true,
font:"Username Font:",
//
enable_color:true,
color:"Username Colour:",
//
enable_glow:false,
glow:"Username Glow:",
glow_amount:5,
//
enable_icon:false,
icon:"Username Icon:",
icon_type:1,
}
// Editing below is not required
var css="",thisIs,image;
if(username.enable_font == true) var font = $(this).find("dt:contains("+username.font+") + dd").text();
if(username.enable_color == true) var color = $(this).find("dt:contains("+username.color+") + dd").text();
if(username.enable_glow == true) var glow = $(this).find("dt:contains("+username.glow+") + dd").text();
if(username.enable_icon == true) var icon = $(this).find("dt:contains("+username.icon+") + dd").text();
//
thisIs = $(this).parent().parent().prev().find(".c_username a:first").text();
$(this).parent().parent().prev().find(".c_username a:first").html("<span>"+thisIs+"</span>");
//
if(username.enable_color == true && color !== undefined) css = css+"color:"+color+";";
if(username.enable_font == true && font !== undefined) css = css+"font-family:"+font+";";
if(username.enable_glow ==true && glow !== undefined) css = css+"text-shadow:0px 0px "+username.glow_amount+"px "+glow+";";
if(username.enable_icon == true && icon !== undefined) {
if(username.icon_type == 1) {
$(this).parent().parent().prev().find(".c_username a:first span").append(" <img src='"+icon+"' alt='Username Image' style='max-height:20px' />");
}
else if(username.icon_type == 2) {
$(this).parent().parent().prev().find(".c_username a:first span").prepend("<img src='"+icon+"' alt='Username Image' style='max-height:20px' /> ");
}
else if(username.icon_type == 3) {
$(this).parent().parent().prev().find(".c_username a:first span").append(" <img src='"+icon+"' alt='Username Image' style='max-height:20px' />");
$(this).parent().parent().prev().find(".c_username a:first span").prepend("<img src='"+icon+"' alt='Username Image' style='max-height:20px' /> ");
}
}
$(this).parent().parent().prev().find(".c_username a:first span").attr("style",css);
console.log(css);
$(this).find("dt:contains("+username.font+") + dd, dt:contains("+username.font+")").hide();
$(this).find("dt:contains("+username.color+") + dd, dt:contains("+username.color+")").hide();
$(this).find("dt:contains("+username.glow+") + dd, dt:contains("+username.glow+")").hide();
$(this).find("dt:contains("+username.icon+") + dd, dt:contains("+username.icon+")").hide();
if($(this).find("dd").length == 0) $(this).hide();
});
// ]]>
</script>

Then I go to profile fields to put in these types,
Posted Image
Posted Image

Then in the profile area where it show the small profile when posting
Posted Image

Shouldn't the font and color work? Cause the username when looking at it is plan white with nothing on it.
That also goes for one line text. It will show the same thing as the finial picture. Not sure on how you can help me to make this work.
Edited by Cameron RedGem, Aug 12 2014, 08:22 AM.
Offline Profile Quote Post Goto Top
 
Ferby
Member Avatar
Developer
[ *  *  *  *  * ]
Hi Cameron RedGem,

You need to set the profile fields to the exact name of what it is set in the code. So either you need to change the variables in the code to what you have set the profile fields to or change the profile fields to what the variables in the code are. That will fix your problem :)
Offline Profile Quote Post Goto Top
 
Cameron RedGem
Member Avatar
Member
[ * ]
Wow forgot the ":" in them :P
Offline Profile Quote Post Goto Top
 
RichardInTN
Member Avatar
I believe in I.D.I.C.
[ *  *  * ]
LOL... it's ALWAYS the little things.

A colon is just two little dots.
Offline Profile Quote Post Goto Top
 
tomorio
Member
[ * ]
quick question on this. i know this is old etc but just been skimming through everything. I take it that all the options for which colour, icons etc etc have to be added in to the part where you made the profile fields? how are these added in etc? thanks.
Offline Profile Quote Post Goto Top
 
RichardInTN
Member Avatar
I believe in I.D.I.C.
[ *  *  * ]
They don't HAVE to be, but they CAN be.

If you choose to limit the choices, you have to do so when you set up the profile fields. Create them as "Multiple Choice" and set them as follows:
On Registration:Yes or No (whatever your preference is, either will work)
Show field in topics: Yes
Admin Only Edit: No
Allow selection of more than 1 choice?No

Then just populate them with the choices you would like them restricted to.


ETA: I hope you don't mind me answering this one, Ferby!
Edited by RichardInTN, Sep 17 2015, 07:46 PM.
Offline Profile Quote Post Goto Top
 
tomorio
Member
[ * ]
thanks for the quick reply. What im looking for is how to add in the options for people to choose? sorry if this is very nooby but im still learning a lot with this stuff, so apologies if this has already been addressed.

At the moment all i have done is make the profile fields and pop the code into the board template, other than that im unsure how to add options.

thanks again.
Offline Profile Quote Post Goto Top
 
RichardInTN
Member Avatar
I believe in I.D.I.C.
[ *  *  * ]
The options for people to choose from have to be set up in the profile fields themselves, when you create them. The options do not "live" in the code itself.

If you didn't originally set the profile fields to "Multiple choice" when you created them, then you'll have to delete the fields and re-create them as "Multiple choice". There's no way that I know of to edit that.

Once it's set to "Multiple choice" though, the field possibilities ARE editable at will so if you decide to change options, you can do so at any time.
Offline Profile Quote Post Goto Top
 
tomorio
Member
[ * ]
okay so when editing options in the profile fields, it has 2 boxes. a small one which i guess is for the title? {e.g. green, blue, red or whatever the colour may be?)
and then the big box is for what? a hex code? or do i just insert multiple hex codes?

this is what i am stuck with :)

thanks for all the help.
Offline Profile Quote Post Goto Top
 
RichardInTN
Member Avatar
I believe in I.D.I.C.
[ *  *  * ]
The first box (single entry line) is for the displayed title of the field (that had to match what you have in the code)

The bigger box (multi-line entry) is for the options you want to have. Personally, I'd steer clear of using hex codes (you could though, if you wanted to, and didn't mind explaining them every time someone wanted to change), I'd just use actual color words.

Here's a link to all 140 "color names" that most modern browsers understand: http://www.w3schools.com/html/html_colornames.asp


ETA: one color per line in the multi-line entry box
Edited by RichardInTN, Sep 25 2015, 07:53 AM.
Offline Profile Quote Post Goto Top
 
tomorio
Member
[ * ]
RichardInTN
Sep 25 2015, 07:48 AM
The first box (single entry line) is for the displayed title of the field (that had to match what you have in the code)

The bigger box (multi-line entry) is for the options you want to have. Personally, I'd steer clear of using hex codes (you could though, if you wanted to, and didn't mind explaining them every time someone wanted to change), I'd just use actual color words.

Here's a link to all 140 "color names" that most modern browsers understand: http://www.w3schools.com/html/html_colornames.asp


ETA: one color per line in the multi-line entry box
Awesome sauce. Thanks for all the help and patience mate .
Offline Profile Quote Post Goto Top
 
RichardInTN
Member Avatar
I believe in I.D.I.C.
[ *  *  * ]
No worries, mate!
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
Go to Next Page
« Previous Topic · ZetaBoards Codes & Modifications · Next Topic »
Add Reply
  • Pages:
  • 1
  • 2