Changing the Username's Color As Well As Multicolored Username and Glow

So I was wondering if I could be able to change a username's color without removing it from a group or anything, but just using a code to change it. I'm pretty sure that's possible, because I've seen quite a few people like that. Also, what about a multicolored username or glow?

The following codes are for phpBB3. If you need a different version, please let us know. =) I am assuming phpBB3, since that is in your profile information. Where you see "/u#" in the code, you will need to place the post ID of the member who's name you wish to affect in that spot. If you don't know how to find a user's post ID, that will be explained after the code. If you want to do multiple members with the same color or effect, just enter the the post ID's one after the other, separated by a comma. (This is shown as an example in the second code.)

Username Glow: (For just one user as an example.)

Code:

a[href="/u#"]{   
  text-decoration: none !important;   
  text-shadow: 0 0 0.1em gray, 0 0 0.1em gray, 0 0 0.1em gray;
}

Colorize Username: (For three users as an example.)

Code:

a[href="/u#"], a[href="/u#"] span, a[href="/u#"] span strong {
color: #088A68 !important;
}

Multiple Colors: (Splitting my own username as an example. In this example, the post ID needs to remain the same in both sections.)

Code:

a[href="/u#"] span strong { font-size:0 }
a[href="/u#"] span strong:before {
  content:"Lea";
  font-size:10px;
  color:#A7D;
}
a[href="/u#"] span strong:after {
  content:"h7";
  font-size:10px;
  color:#639;
}

In order to find a member's post ID, simply click on their username on your website. There, you will see the link to their profile that will look similar to this: www.yourwebsite.forumotion.com/u#

That number that follows is the number that you should use to change that member's username. Please let me know if you have any questions or any problems with the above codes, which were provided to me by Ange Tuteur, originally. Also, don't forget to customize your colors!

Leah7 wrote:The following codes are for phpBB3. If you need a different version, please let us know. =) I am assuming phpBB3, since that is in your profile information.

Those CSS codes should work just fine for every version

Well, that's great news, thanks Klemen!! ^.^

Leah7 wrote:Colorize Username: (For three users as an example.)

Code:

a[href="/u#"], a[href="/u#"] span, a[href="/u#"] span strong {
color: #088A68 !important;
}

This code sadly will not work if the user is in a group

Ace 1 wrote:

Leah7 wrote:Colorize Username: (For three users as an example.)

Code:

a[href="/u#"], a[href="/u#"] span, a[href="/u#"] span strong {
color: #088A68 !important;
}

This code sadly will not work if the user is in a group

It should. The reference to the child nodes "span" and "span strong" are common on usergroup names. Particularly the span element because that's used to color the username via the style attribute, whereas strong is used to bold the username.

In short, you can use "a[href="/u#"]" for users not in a group and "a[href="/u#"] span strong" for users in a group. The former however, will affect more than text links so it's best to keep to text-based styles on that one.

Ok, thanks! All of those above worked, but about the glow, what I was asking for was if you could make a multi-colored glow.

It's possible, but kinda hard to get right. For example you can chain together multiple shadows.

Code:

body {
  text-shadow:
  0px 1px 0px #F00,
  1px 0px 0px #00F,
  0px -1px 0px #0F0,
  -1px 0px 0px #F0F;
}

Excuse that one, it's sharp and trippy. I guess it really depends on what you mean by "multi-colored glow"

Ohhhh

Side Question: So for CSS, in order to do multiple shadows, you have to go to the next line?

Ace 1 wrote:Ohhhh

Side Question: So for CSS, in order to do multiple shadows, you have to go to the next line?

No, you just separate each shadow by a comma. I added line breaks to make it readable.

Then why doesn't the following code ever work?

Code:

a {text-shadow: 0 0 20px #fefcc9,
 10px -10px 30px #feec85,
 -20px -20px 40px #ffae34,
 20px -40px 50px #ec760c,
 -20px -60px 60px #cd4606,
 0 -80px 70px #973716,
 10px -90px 80px #451b0e;
}

It's supposed to make some wicked text

Ace 1 wrote:Then why doesn't the following code ever work?

Code:

a {text-shadow: 0 0 20px #fefcc9,
 10px -10px 30px #feec85,
 -20px -20px 40px #ffae34,
 20px -40px 50px #ec760c,
 -20px -60px 60px #cd4606,
 0 -80px 70px #973716,
 10px -90px 80px #451b0e;
}

It's supposed to make some wicked text

Works fine on my test forum. And by 'fine' I mean that the effect makes my eyes bleed and the website lags.


But it works. I think you must have some CSS from before that doesn't let this code affect your links.

Ace 1 wrote:Then why doesn't the following code ever work?

Code:

a {text-shadow: 0 0 20px #fefcc9,
 10px -10px 30px #feec85,
 -20px -20px 40px #ffae34,
 20px -40px 50px #ec760c,
 -20px -60px 60px #cd4606,
 0 -80px 70px #973716,
 10px -90px 80px #451b0e;
}

It's supposed to make some wicked text

You do understand that this CSS is for links, not usernames?

Yes. Sorry to side-track the orinigal topic focus :3

Okkkk.


And about the multi-colored username, I got it to work, but how do I get it into the chatbox?

You'll need to add another selector that's chatbox specific ; span[data-user="1"] replace 1 by the ID of the user.

Code:

a[href="/u#"] span strong, span[data-user="1"] { font-size:0 }
a[href="/u#"] span strong:before, span[data-user="1"]:before {
  content:"Lea";
  font-size:10px;
  color:#A7D;
}
a[href="/u#"] span strong:after, span[data-user="1"]:after {
  content:"h7";
  font-size:10px;
  color:#639;
}

Ok, I tried that, and it DID appear in the chatbox, but it didn't look right. In fact, it seemed all shiny and.. looked like metal. The font was also different. Plus, my glow was gone too?

Is it something within the code, or is it my forum? Because my forum is now Invision, not phpBB3...

Bump?

Could you provide the URL of your forum, or the modified code you're using for your name ?

Thanks

http://thebeyond.forumotion.com/ That's the url, and this is the code:

Code:

a[href="/u3"] span strong, span[data-user="3"] { font-size:0 }
a[href="/u3"] span strong:before, span[data-user="3"]:before {
  content:"Yu";
  font-size:11px;
  color:#000000;
}
a[href="/u3"] span strong:after, span[data-user="3"]:after {
  content:"uki";
  font-size:11px;
  color:#6b0000;
}

Although this time, my whole name disappeared.

The code looks fine.

The only thing that could prevent it from working would be erroneous code. So, try pasting it at the top of your stylesheet instead, if you haven't.

It went in... but now it looks like this: And my icon and glow have disappeared too, plus the front part of the name is blue now, not black..

In your stylesheet, do you have multiple rules with the following ?

[href="/u3"] or span[data-user="3"] if so, that can explain why multiple styles are being combined. I'd recommend getting rid of the duplicates that relate to your user ID and use the most recent rule sets you posted :

Code:

a[href="/u3"] span strong, span[data-user="3"] { font-size:0 }
a[href="/u3"] span strong:before, span[data-user="3"]:before {
  content:"Yu";
  font-size:11px;
  color:#000000;
}
a[href="/u3"] span strong:after, span[data-user="3"]:after {
  content:"uki";
  font-size:11px;
  color:#6b0000;
}