Multi-Colored Usernames in chatbox

i've readed and searched on the archive for this multi colored usernames, and i found it but it doesnt apply at chatbox, my thought is because its used js.

Code:

$(function(){
  multiColor(1, '<strong><font color="#ff0000">Mid</font><font color="#ffff00">night</font> <font color="#0000ff">Bunny</font>');
  
  function multiColor(id, html){$('a[href="/u'+id+'"] strong').not(function(){return $("img",this)[0]}).html(html)}
});

why i thought that? because i've used glitter and glow in css, 

Code:

a[href="/u1"] { background:url('http://i58.servimg.com/u/f58/15/62/32/35/backro13.gif'); }
a[href="/u1"] { text-shadow: 0px 2px 6px #ff00ff; }
a[href="/g1-admins"] { background:url('http://i58.servimg.com/u/f58/15/62/32/35/backro13.gif'); }
a[href="/g1-admins"] { text-shadow: 0px 2px 6px #ff00ff; }

and this glitter and glow are applied in chatbox.


i've tried the css and js codes that i found in archive here , here , and others (i forgot to bookmark it).

Please help.
my forum is using phpbb3.

Hello @gunsmaker,

The problem is that the javascripts you install on the forum do not affect the chatbox. You'd need to access the frame and constantly reapply the style every time the chatbox refreshes; in short it can be a bit heavy and buggy. I do however, have a solution using CSS3 to make a multi-colored username, but it can only be two tones, if you want it.

Ange Tuteur wrote:I do however, have a solution using CSS3 to make a multi-colored username, but it can only be two tones, if you want it.

2 tones is ok, as long its affecting the chatbox.

Here, add this to your stylesheet :
Display > Colors > CSS stylesheet

Code:

a[href="/u1"] span strong { font-size:0 }
a[href="/u1"] span strong:before {
  font-size:10px;
  content:"Ange ";
  color:#00A5CD;
}
a[href="/u1"] span strong:after {
  font-size:10px;
  content:"Tuteur";
  color:#7CBA2C;
}
#chatbox_members li a[href="/u1"] span:first-child strong:before { content:"@" }
#chatbox_members li a[href="/u1"] span:first-child strong:after { content:"" }

There's some things you should change :

a[href="/u1"] : make sure to change the 1 in /u1 to the ID of your profile.

You'll see content:"Ange "; and content:"Tuteur"; those are the beginning and ending texts. After those are the colors they will be.

At the end of the code is a small fix for the mod icon. It will have a different color depending which rule the @ is in.

Code:

#chatbox_members li a[href="/u1"] span:first-child strong:before { content:"@" }
#chatbox_members li a[href="/u1"] span:first-child strong:after { content:"" }

it works, thanks.


but as you see, the "@" still has different color, it will be good if the "@" at right matching the left color, or maybe the "@" color at left maching the right color.

Considering that the @ on the right isn't wrapped by an anchor with your ID, your best choice would be to set it to the default color.

Code:

#chatbox_members li a[href="/u1"] span:first-child strong:before {
  content:"@";
  color:#000;
}

as you see its glow and glitter is not sync.
is there a code to hide the "@" at the left and right?

This should remove the glow on the @ :

Code:

#chatbox_members li a[href="/u1"] span:first-child strong:before {
  content:"@";
  color:#000;
  text-shadow:none;
}

To hide it on the left, you can just delete the @ from content. To hide it on the right, add this to your CSS :

Code:

.user-msg .user > span[style="color:#000000"] { display:none }

i've decided to remove the glitter, and now it looks like this.


Thankyou very much @Ange Tuteur,

-Solved-

You're welcome !

Topic archived