The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Chatbox name glow

3 posters

Go down

Solved Chatbox name glow

Post by Itami Wed 1 Apr 2015 - 3:42

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?
avatar
Itami
Forumember

Posts : 39
Reputation : 1
Language : English

http://fairytailendless.forumotion.com

Back to top Go down

Solved Re: Chatbox name glow

Post by Fierce Star Wed 1 Apr 2015 - 5:05

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.
avatar
Fierce Star
Forumember

Male Posts : 110
Reputation : 17
Language : English
Location : United States

http://inactivesite.onlyhelpwithothersnow.com

Back to top Go down

Solved Re: Chatbox name glow

Post by Itami Wed 1 Apr 2015 - 17:58

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

Posts : 39
Reputation : 1
Language : English

http://fairytailendless.forumotion.com

Back to top Go down

Solved Re: Chatbox name glow

Post by Fierce Star Wed 1 Apr 2015 - 18:40

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)
avatar
Fierce Star
Forumember

Male Posts : 110
Reputation : 17
Language : English
Location : United States

http://inactivesite.onlyhelpwithothersnow.com

Back to top Go down

Solved Re: Chatbox name glow

Post by Itami Wed 1 Apr 2015 - 20:08

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.
avatar
Itami
Forumember

Posts : 39
Reputation : 1
Language : English

http://fairytailendless.forumotion.com

Back to top Go down

Solved Re: Chatbox name glow

Post by Fierce Star Wed 1 Apr 2015 - 20:33

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
avatar
Fierce Star
Forumember

Male Posts : 110
Reputation : 17
Language : English
Location : United States

http://inactivesite.onlyhelpwithothersnow.com

Back to top Go down

Solved Re: Chatbox name glow

Post by Itami Wed 1 Apr 2015 - 20:40

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;
avatar
Itami
Forumember

Posts : 39
Reputation : 1
Language : English

http://fairytailendless.forumotion.com

Back to top Go down

Solved Re: Chatbox name glow

Post by Fierce Star Wed 1 Apr 2015 - 21:47

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.
avatar
Fierce Star
Forumember

Male Posts : 110
Reputation : 17
Language : English
Location : United States

http://inactivesite.onlyhelpwithothersnow.com

Back to top Go down

Solved Re: Chatbox name glow

Post by Itami Thu 2 Apr 2015 - 0:16

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.
avatar
Itami
Forumember

Posts : 39
Reputation : 1
Language : English

http://fairytailendless.forumotion.com

Back to top Go down

Solved Re: Chatbox name glow

Post by Ange Tuteur Thu 2 Apr 2015 - 5:46

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
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Chatbox name glow

Post by Itami Sun 5 Apr 2015 - 22:56

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.
avatar
Itami
Forumember

Posts : 39
Reputation : 1
Language : English

http://fairytailendless.forumotion.com

Back to top Go down

Solved Re: Chatbox name glow

Post by Ange Tuteur Mon 6 Apr 2015 - 3:15

You're welcome. Smile

Topic archived
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Back to top

- Similar topics

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