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.

Chatbox name glow

View previous topic View next topic Go down

Solved Chatbox name glow

Post by Itami on April 1st 2015, 3:42 am

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?

Itami
Forumember

Posts : 31
Reputation : 1
Language : English

http://fairytailendless.forumotion.com

Back to top Go down

Solved Re: Chatbox name glow

Post by Fierce Star on April 1st 2015, 5:05 am

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.

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 on April 1st 2015, 5:58 pm

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

Itami
Forumember

Posts : 31
Reputation : 1
Language : English

http://fairytailendless.forumotion.com

Back to top Go down

Solved Re: Chatbox name glow

Post by Fierce Star on April 1st 2015, 6:40 pm

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)

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 on April 1st 2015, 8:08 pm

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.

Itami
Forumember

Posts : 31
Reputation : 1
Language : English

http://fairytailendless.forumotion.com

Back to top Go down

Solved Re: Chatbox name glow

Post by Fierce Star on April 1st 2015, 8:33 pm

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

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 on April 1st 2015, 8:40 pm

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;

Itami
Forumember

Posts : 31
Reputation : 1
Language : English

http://fairytailendless.forumotion.com

Back to top Go down

Solved Re: Chatbox name glow

Post by Fierce Star on April 1st 2015, 9:47 pm

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.

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 on April 2nd 2015, 12:16 am

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.

Itami
Forumember

Posts : 31
Reputation : 1
Language : English

http://fairytailendless.forumotion.com

Back to top Go down

Solved Re: Chatbox name glow

Post by Ange Tuteur on April 2nd 2015, 5:46 am

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
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Chatbox name glow

Post by Itami on April 5th 2015, 10:56 pm

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.

Itami
Forumember

Posts : 31
Reputation : 1
Language : English

http://fairytailendless.forumotion.com

Back to top Go down

Solved Re: Chatbox name glow

Post by Ange Tuteur on April 6th 2015, 3:15 am

You're welcome. Smile

Topic archived

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
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