[cBB Chat] - template inheritance and icons

I just installed the chat on my forum. It works nice, but it seems that styles based on prosilver doesn't inherit templates from prosilver. I had to copy folder chat to template folder of style to make it work. It is not big deal, but it would be nice if template inheritance works with cBB chat.

EDIT: How can I use two sets of icons? Lets say I have on forum prosilver and another dark style. Thank you.

[IvanPF]

I will check the problem with inherit styles in the next version.

The best option to change the icons is change only the icon image. this image is "chat/images/icons-100.png"
You can create a copy of this image in the "styles/{your style}/theme/images/" path and edit the image to put your icons.
After this, you must edit the file 'chat.css' in the theme path to put this:

Code: Select all

.chat-icon { background-image: url('./images/icons-100.png');

If you want to use a different image for each icon, you must put the images in the "/theme/images/" path too and put each icon line in the "chat.css" file.
The default icon lines are this (common.css):

Code: Select all

.chat-icon-archive { background-position: -180px 0; }
.chat-icon-connect { background-position: 0 -20px; }
.chat-icon-bbcode { background-position: -60px -20px; }
.chat-icon-rules, .chat-icon-notice { background-position: -180px -20px; }
.chat-icon-smiley { background-position: -100px -20px; }
.chat-icon-color { background-position: -120px -20px; }
.chat-icon-sound { background-position: -140px -20px; }
.chat-icon-sound-muted { background-position: -160px -20px; }
.chat-icon-refresh { background-position: -20px -20px; }
.chat-icon-clear { background-position: -40px -20px; }
.chat-icon-clear-bbcode { background-position: -80px -20px; }
.chat-icon-clear-text { background-position: -200px -20px; }
.chat-icon-submit { background-position: -200px 0; }

.chat-bbcode-bold { background-position: 0 -40px; }
.chat-bbcode-italic { background-position: -20px -40px; }
.chat-bbcode-underline { background-position: -40px -40px; }
.chat-bbcode-list { background-position: -60px -40px; }
.chat-bbcode-list-numeric { background-position: -80px -40px; }
.chat-bbcode-list-item { background-position: -100px -40px; }
.chat-bbcode-quote { background-position: -120px -40px; }
.chat-bbcode-img { background-position: -140px -40px; }
.chat-bbcode-url { background-position: -160px -40px; }
.chat-bbcode-flash { background-position: -180px -40px; }
.chat-bbcode-code { background-position: -200px -40px; }

.chat-bbcode-custom {
   background-image: none;
   background-position: 50% 50%;
}

.chat-icon-delete { background-position: -24px -3px; }
.chat-icon-edit { background-position: -44px -3px; }
.chat-icon-quote { background-position: -64px -3px; }
.chat-icon-whois { background-position: -84px -3px; }

For example:

Code: Select all

.chat-icon-archive { background-image: url('./images/myicon1.png'); }
.chat-icon-connect { background-image: url('./images/myicon2.png'); }

Nice, that helped,

In the end I changed the color of toolbar and will change only a few icons. I also added black color for textarea.
Now I have problem with
1. BBCode buttons. Don't know how to change their text color.
2. Chat area - don't know, how to change color of rows with message and hover over them.
3. When you hover over icon it brighten. If you move away it get fade. Would be possible to make it fade less?

Also, I use Advanced BBcodes Box 3 MOD for BBCodes and it seems that cBB Chat can't read the tag tips (or help lines) from ABBC Box.

2. I was able to change color of every second row with this styling:

Code: Select all

div.chat-row{
   background-color: #000000;
}

div.chat-row:hover {
   background-color: #090B2F;
}

, but can't figure how to change the rest of it, so it looks like this:

[IvanPF]

Hi,

To change the color of even rows, you must use this:

Code: Select all

.chat-row:nth-child(even) {
   background-color: #FBFBFB;
}

Thank you. that helped a lot, I also figured out how to change button text color.