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
  • 3
Username Styling Code v3.1; Requested by RichardInTN
Topic Started: Mar 16 2014, 10:03 PM (3,847 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
 
Zarvarza
Member Avatar
Member
[ * ]
Interesting, I think I get the concept. Essentially you are giving all users a choice on what color their name will appear as?
Offline Profile Quote Post Goto Top
 
Ferby
Member Avatar
Developer
[ *  *  *  *  * ]
Zarvarza
Mar 18 2014, 09:02 PM
Interesting, I think I get the concept. Essentially you are giving all users a choice on what color their name will appear as?
Yes and providing the option to choose a font but at this time I haven't implemented a feature which allows the administrator to choose which styling the users can use (at this time: color & font) so if you would want to restrict your community from using the font feature, it wouldn't be possible so that is something I would have to change at a later date.

Glad you find the code interesting :)
Offline Profile Quote Post Goto Top
 
spiiike
Member
[ *  *  *  * ]
I'm having a bit of trouble with this Ferby...you name the profile field Username Colour right? If so, it's not working for me :cry:
Offline Profile Quote Post Goto Top
 
Ferby
Member Avatar
Developer
[ *  *  *  *  * ]
You name it to whatever you want and then set these to what you named it to.
Code:
 
var username = {
font:"Username Font:",
color:"Username Colour:"
}


If you haven't changed these at all then use Username Colour: :)
Offline Profile Quote Post Goto Top
 
spiiike
Member
[ *  *  *  * ]
Had it right :P just realised it's only colouring names on viewing a topic...any way to extend the colouring to the online list and everywhere else usernames is shown? :shock:
Offline Profile Quote Post Goto Top
 
Ferby
Member Avatar
Developer
[ *  *  *  *  * ]
The Skater Boy
Mar 20 2014, 11:12 PM
Had it right :P just realised it's only colouring names on viewing a topic...any way to extend the colouring to the online list and everywhere else usernames is shown? :shock:
Sadly not. Because it uses profile fields which are only displayed in topics, I can only design the code to style the usernames in topics :/
On some happier news, I've upgraded the code!

The new version now features a Glow feature and you now have the option to enable & disable options. It's pretty much an entire new code with the amount of time it took me to get it right :giggle:
Offline Profile Quote Post Goto Top
 
Ferby
Member Avatar
Developer
[ *  *  *  *  * ]
Version 3!
I've taken it upon myself to release version 3 of this code. The newer version includes a Username Icon feature that allows the user to add an icon to their username by editing their profile. I've updated the original code for you :)
Offline Profile Quote Post Goto Top
 
Cameron RedGem
Member Avatar
Member
[ * ]
So what type of fonts and glow colors are allowed by this code?
Offline Profile Quote Post Goto Top
 
Ferby
Member Avatar
Developer
[ *  *  *  *  * ]
Cameron RedGem
Jul 29 2014, 11:20 PM
So what type of fonts and glow colors are allowed by this code?
If you wish to restrict the user to a selected number of fonts/colours then I recommend you create a multiple choice profile field rather than a text one for that specific option and enter the values in which you want members to choose from. But otherwise, they're free to use any font/colour that they please :)
Offline Profile Quote Post Goto Top
 
Cameron RedGem
Member Avatar
Member
[ * ]
Ferby
Jul 30 2014, 09:23 AM
Cameron RedGem
Jul 29 2014, 11:20 PM
So what type of fonts and glow colors are allowed by this code?
If you wish to restrict the user to a selected number of fonts/colours then I recommend you create a multiple choice profile field rather than a text one for that specific option and enter the values in which you want members to choose from. But otherwise, they're free to use any font/colour that they please :)
I used that choice for them to select there own color and font but the codes seems not to work.
Offline Profile Quote Post Goto Top
 
Ferby
Member Avatar
Developer
[ *  *  *  *  * ]
Cameron RedGem
Jul 30 2014, 12:06 PM
Ferby
Jul 30 2014, 09:23 AM
Cameron RedGem
Jul 29 2014, 11:20 PM
So what type of fonts and glow colors are allowed by this code?
If you wish to restrict the user to a selected number of fonts/colours then I recommend you create a multiple choice profile field rather than a text one for that specific option and enter the values in which you want members to choose from. But otherwise, they're free to use any font/colour that they please :)
I used that choice for them to select there own color and font but the codes seems not to work.
Could I see a screenshot of what you have done? I think I know the issue and I can help you with it :)
Offline Profile Quote Post Goto Top
 
RichardInTN
Member Avatar
I believe in I.D.I.C.
[ *  *  * ]
Awesome work Ferby!
Edited by RichardInTN, Jul 30 2014, 10:49 PM.
Offline Profile Quote Post Goto Top
 
Ferby
Member Avatar
Developer
[ *  *  *  *  * ]
RichardInTN
Jul 30 2014, 09:20 PM
Awesome work Ferby!
Glad you like it :)
Offline Profile Quote Post Goto Top
 
RichardInTN
Member Avatar
I believe in I.D.I.C.
[ *  *  * ]
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.
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
  • 3