The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Multi-Colored Usernames in chatbox

View previous topic View next topic Go down

Solved Multi-Colored Usernames in chatbox

Post by gunsmaker on January 21st 2015, 2:25 pm

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.

gunsmaker
Forumember

Posts : 34
Reputation : 1
Language : English and Indonesian

http://tcga.forumn.org

Back to top Go down

Solved Re: Multi-Colored Usernames in chatbox

Post by Ange Tuteur on January 21st 2015, 6:48 pm

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. Wink

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2681
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Multi-Colored Usernames in chatbox

Post by gunsmaker on January 21st 2015, 7:15 pm

@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. Wink

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

gunsmaker
Forumember

Posts : 34
Reputation : 1
Language : English and Indonesian

http://tcga.forumn.org

Back to top Go down

Solved Re: Multi-Colored Usernames in chatbox

Post by Ange Tuteur on January 21st 2015, 7:38 pm

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:"" }

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2681
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Multi-Colored Usernames in chatbox

Post by gunsmaker on January 22nd 2015, 4:20 am

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.

gunsmaker
Forumember

Posts : 34
Reputation : 1
Language : English and Indonesian

http://tcga.forumn.org

Back to top Go down

Solved Re: Multi-Colored Usernames in chatbox

Post by Ange Tuteur on January 22nd 2015, 4:33 am

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;
}

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2681
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Multi-Colored Usernames in chatbox

Post by gunsmaker on January 22nd 2015, 4:54 am


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

gunsmaker
Forumember

Posts : 34
Reputation : 1
Language : English and Indonesian

http://tcga.forumn.org

Back to top Go down

Solved Re: Multi-Colored Usernames in chatbox

Post by Ange Tuteur on January 22nd 2015, 5:02 am

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 }

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2681
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Multi-Colored Usernames in chatbox

Post by gunsmaker on January 22nd 2015, 5:08 am

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


Thankyou very much @Ange Tuteur, Smile

-Solved-

gunsmaker
Forumember

Posts : 34
Reputation : 1
Language : English and Indonesian

http://tcga.forumn.org

Back to top Go down

Solved Re: Multi-Colored Usernames in chatbox

Post by Ange Tuteur on January 22nd 2015, 5:43 am

You're welcome ! Mr. Green

Topic archived

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2681
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum