Chatbox name glow

I hope I am posting this in the correct area.

I am new to forumotion coding. CSS doesn't seem too complicated even though Ive never done this sort of thing before at all. I have my own forum Im working on: I changed the color of my (Admin Founder) account to black with a sift while glow, yet my name is still yellow in the chatbox with no glow. Could someone help me understand & fix this so the chatbox name is colored black with white glow?

Add this code to your CSS (ACP -> Display -> Colors -> CSS Stylesheet):

Code:

.chatbox-username[data-user="1"] {
  text-shadow: 1px 1px 3px #FFF;
}

and modify the code to your liking; .chatbox-username[data-user="1"] will target the username of the person on the chatbox who has an ID of 1.

That worked! I had tried similar a couple of times but it didn't seem to work  Now, how do I make the @ symbol the same color?

I don't believe it's possible to change the style of the @ sign without effecting all the users of the group you're in, but there is another way to do it.

You can add another @ sign on top of the other, and style it to your liking with the following code:

Code:

.chatbox-username[data-user="1"]:before {
    color: rgb(0, 0, 0);
    content: "@";
    margin-left: -16px;
    position: absolute;
    text-shadow: 1px 1px 6px rgb(200, 200, 200);
}

(Note that you might have to adjust the amount of margin-left: pixels if the alignment is off)

When adding the over-lapping @ symbol, I can align the @ symbol on the left for the list of the current people in the chatbox: however, the @ symbol on the right side in the chatbox does not align & looks up & right of the original.

To target the online users list on the left side, you can use this code and make any necessary adjustments:

Code:

#chatbox_members .chatbox-username[data-user="1"]:before {
    color: rgb(0, 0, 0);
    content: "@";
    margin-left: -16px;
    position: absolute;
    text-shadow: 1px 1px 6px rgb(200, 200, 200);
}

To target the usernames of the panel on the right side, you can use this code:

Code:

#chatbox .chatbox-username[data-user="1"]:before {
    color: rgb(0, 0, 0);
    content: "@";
    margin-left: -16px;
    position: absolute;
    text-shadow: 1px 1px 6px rgb(200, 200, 200);
    margin-top: -5px;
}

If you need to adjust the alignments,
margin-left: -5px; will move it 5 pixels to the left
margin-left: 5px; will move it 5 pixels to the right
margin-top: -5px; will move it 5 pixels to the top
margin-top: 5px; will move it 5 pixels to the bottom

I appreciate the assistance. I am learning a bit from the process. This is the coding I have in regards to "u1" in the chatbox. I have the @ symbols aligned and yet they still seem to inadequately overlap or completely covered the prior symbols. Yellow can be seen on the edges- Is there away to "bolden" the symbol to make it thicker?

Code:

#chatbox .chatbox-username[data-user="1"]:before {
    color: rgb(0, 0, 0);
    content: "@";
    margin-left: -16px;
    position: absolute;
    text-shadow: 1px 1px 6px rgb(200, 200, 200);
    margin-top: 2px;
}
.chatbox-username[data-user="1"]:before {
    color: rgb(0, 0, 0);
    content: "@";
    margin-left: -17px;
    position: absolute;
    font-weight: 800;
    text-shadow: 1px 1px 6px rgb(200, 200, 200);
    transition: all 5s ease 0s;
}
.chatbox-username[data-user="1"] {
  color: rgb(0, 0, 0);
    font-weight: 700;
    text-shadow: 1px 1px 6px rgb(200, 200, 200);
    transition: all 5s ease 0s;

I see. I'm not 100% sure this will work, considering I'm unable to see the actual chatbox on your forum, but adding a background color to the "@" sign should block the original symbol that it's overlapping. You might still need to adjust the code slightly, as I'm unable to perfect it without access to your chatbox.

Code:

#chatbox .chatbox-username[data-user="1"]::before {
    background: none repeat scroll 0 0 #151217;
    color: rgb(0, 0, 0);
    content: "@";
    margin-left: -15px;
    position: absolute;
    text-shadow: 1px 1px 6px rgb(200, 200, 200);
}

This should work for the right side of the chatbox, and as for the left side: is there any background color, or is it transparent?
I'll try to come up with a solution for the left side, but in the meantime, @Ange Tuteur might be more helpful than I am. She tends to make me realize I missed the most obvious solutions, lol.

Fairy Tail Endless is my forum on forumotion, easy to find I think. Could look at it & tell me what you think. I only started messing with CSS the last day or so, so Im still learning a lot about this stuff :s


I tried the code you suggested & nothing changed, the left & right side are both still jumbled black & yellow.

Try this :

Code:

/* reset cb usernames to hide @ symbol */
#chatbox .user, #chatbox_members li { font-size:0 }
#chatbox .user .chatbox-username, #chatbox_members li .chatbox-username { font-size:12px }

/*
  add the @ symbol back to a specific user
  all styles applied to this username will be inherited
*/
.chatbox-username[data-user="1"]:before { content:"@ " }

It'll hide the @ symbol and reset it on user 1

Apologies on the late reply, have been preoccupied. That code indeed removed the @ symbol and I am satisfied with the effort put into helping me resolve this. Thank you very much, this topic can be closed.

You're welcome.

Topic archived