Posted by Have CSS Questions - Seeking Help

{Shamhna} πŸŽƒ [S] (#9102)

Cursed
View Forum Posts


Posted on
2023-06-02 16:15:06
*I didn't really know we're to post this, since I can't find a Layout & CSS Help page, hopefully this is a good spot - if not let me know and I'll move it.*

Hey everyone, I'm Shamhna. I'm a mobile user and I recently figured out how to create CSS on my phone but there's a lot that don't know or can't figure out on my own, I have questions that I can't find the answers too, so I decided to step out of my comfort zone and ask the community for help. I'd appreciate any help in expanding my CSS knowledge.


My questions:
How do you do glow text?
How do you customize the comments box?
How do you change the color of Mod messages in chat?
How do you keep the little sticky note icon on Pinned Message?

Answers:
Glow text:
Comments Box:
Sticky Note:



Hrt Icon 0 players like this post! Like?

Edited on 04/06/23 @ 01:07:49 by {Shamhna} πŸŽƒ [S] (#9102)

Chris (Main) 🌼 (#105465)

Heavenly
View Forum Posts


Posted on
2023-06-03 23:37:11
to make text glow you'd use the text-shadow property and set it to a light color

to customize the comments box you have to target the elements #commentBox to grab the entire box, .comment to grab all the comments, and .comment:nth-child(even) to grab every other comment to make it alternate like in chat. you'll also have to set a lot of the properties to important since the comment box is styled directly in the code for the page instead of being a part of the site stylesheets

I don't typically change mod comments so I don't remember that off the top of my head unfortunately lol sorry

and as for keeping the sticky note icon you can do something like:
#chatMessagePinned.s-chat-message__pinned {
background: #HEXCODE url('//static.lioden.com/images/layout/sticky.png') no-repeat 10px 6px;
color: #HEXCODE !important;
border: none !important;
}
and it'll let you keep the sticky note but alternatively if you just want to get rid of the space at the front of the pinned messages you'd just put:
.s-chat-sidebar #chatMessagePinned.s-chat-message__pinned {
text-indent: 4px;
}
and that'll make the spacing match the rest of the defaults for the chat box (I have it set that way in my main den if you wanna take a look at how it looks)



Hrt Icon 0 players like this post! Like?

{Shamhna} πŸŽƒ [S] (#9102)

Cursed
View Forum Posts


Posted on
2023-06-04 01:00:42
@ Chris (Main) 🌼 (#105465) - Thank you so much for the info/codes! I really appreciate it!



Hrt Icon 0 players like this post! Like?







Memory Used: 625.08 KB - Queries: 2 - Query Time: 0.00046 - Total Time: 0.88564s