Chatbox Header Color Change

[Peja16]

Hi everyone. I just started with my first forum and was liking the chatbox feature. However, my black and gray themed background is conflicting with the default chatbox color of grey and white. Is there anyway to change the color that says Chatbox, Refresh, Archives, Login, etc.??

Like I said I am really new to this so if it has something to do with editing a CSS sheet, can you point me on a sticky on how to edit the CSS.

Thanks for all the help and I am loving how easy it is to create this forum so far.

Peja

[Nifster]

Sorry if I am invading this thread but I also need help with editing the chatbox, and if it is even possible.

I will also need some direction with the CSS if there is any.



My chatbox looks incredibly messy.

I would like to know if it is possible to remove the logging in and off of users as well as how to make the chatbox look more cohesive. It would be great if I could make the gray bars behind the instant message text black like the rest of it. Or the black parts gray.

[ankillien]

Peja16,

You can change those link colors by adding this code to your CSS...

For members online column...

Code:

#chatbox_main_options li a {
color : RED;
}

You can change red to whatever you want.

Nifster,
You can change background of you chatbox by adding this code to your CSS...

Code:

.chatbox-members {
background : pink;
}


For messages part...

Code:

#chatbox , #chatbox p {
background : pink;
}

Hope this helps

[Nifster]

Thanks for responding rather quickly ankillien. But where exactly would I put the CSS for me? As I tried putting it in the site description and under the Display Tab > Colors > CSS Style sheet but neither worked. >: The chatbox remains the same.

[ankillien]

Can I have a link to your forum?

[Nifster]

Here you go: [ Here ]

Chatbox at the bottom.

On another note...

I've also been notified, but only one user has this problem, with image caching. Apparently he see's the forum like this: [ Here ] But the true way is this: [ Here ] I'm not asking this to be fixed. I'll make sure he purges his cache and all that before I rename my files or what have you to fix it. I'm just showing you this in case you happen to have the same problem. But like I said, only one user has this problem so far. It's pretty funny though heh.

[ankillien]

For chatbox, try using important tags like this...

Code:

.chatbox-members {
background : RED !important;
}
#chatbox , #chatbox p {
background : RED !ijmportant;
}

About the image problem, I think the member facing this problem should clear his browser cache.

[Nifster]

Ahhh! You have my gratitude ankillien! It's fixed on my end. Just made parts gray.

EDIT: The CSS you gave me to copy has one error though. Where you placed an extra "j" in "ijmportant". Just a head's up.

[ankillien]

Sorry, it was a typo
Does it work now?

[Nifster]

It's alright. xD No worries. I caught it so the coding was fine beforehand. Yes it does indeed work now. Thanks again! I'll remember to learn using that "important" tag. Seems handy. I came into Forumotion with literally no CSS experience so this was helpful.

[ankillien]

Using important is not actually a good practice. You should only use them when you need to override another style applied to an element.

[Nifster]

Ah I can imagine so. Too much of anything is bad. Duly noted.

[Peja16]

No problem Nifster. As long as you are getting help and it works out for you I don't mind you jumping in.

ankillien, what you told me worked for certain parts of the header but not for all of it. Here is a picture so you can see what isn't working at this point. Its the part that says Chatbox, Auto Refresh, and Message (down below where you type). Any ideas for these?? Sorry, I am not good with HTML or writing to the CSS.

Thanks again for the super fast responses. Peja

[ankillien]

The link colors on top-right corners are changed, right?
Do you also want to change color of "Chatbox" link?
Please explain

[Peja16]

Yes sorry about not being specific enough. At the top of the chat box on the left hand side it says chatbox and when you click on it it will make it full screen. I would like that changed as well as the Auto Refresh next to the Log Out in the upper right corner and the Message down below next to wear you type.

Does this make sense? I guess I am not sure how else to describe it. Are you able to see my picture? You can see it in there. I love the new red look though.

Thanks again ankillien. I appreciate it.

[ankillien]

Hello,

Here are the codes...

For the word "Chatbox"

Code:

#chatbox_header .chatbox-title .chat-title {
color : RED !important;
}

For links on top-right corner...

Code:

.chatbox-options li label , .chatbox-options li a {
color : GREEN !important;
}

For the word "Message" on bottom...

Code:

.text-field label {
color : yellow  !important;
}

Before adding this code, please remove the previous code that didn't work.
Hope this helps

[Peja16]

Absolutely amazing ankillien!!!! Everything looks great now. I really appreciate your skills and help with this.

I am satisfied so you can do what you want with this thread now!!!

Once again, Thank You!!

Peja

[ankillien]

Glad I could help

Topic Solved > Locked