Customize Chatbox

Go down

Tutorial Customize Chatbox

Post by Shadow on Tue 31 Aug 2010 - 10:27

Customize Chatbox



Customize ChatBox

Here are the styles used to modify the text and background of the ChatBox. To be included in the section of the Custom CSS Panel Admin! Wink

► Admin Panel → Display → Color Images and Color → CSS Stylesheet

For prosilver (phpBB3) and punBB:

To change the background of the chat:

Code:
body.chatbox {
    background-color: color code;
}

To change the text of the title of the chat:

Code:
body.chatbox # chatbox_header. chatbox-title,
body.chatbox # chatbox_header. chatbox a.chat-title-title {
    color: color code! important;
}

To change the color of links in the header of the chat:

Code:
. Chatbox-options li
.chatbox-options li,
.chatbox-options label {li
  color: color code;
}


To change the color of text in the list section of members:

Code:
# Chatbox_members ul li,
#chatbox_members ul li {
    color: color code;
 }


To change the color of text in the message display section:

Code:
.chatbox_row_1,
.chatbox_row_2,
.chatbox_row_3,
.chatbox_row_1 has
.chatbox_row_2 has
.chatbox_row_3 a {
    color: color code;
}


For phpBB2:

To change the text of the title of the chat:

Code:

#chatbox_header. chatBottom. chattitle {
    color: color code;
}


To change the color of links in the header of the chat:

Code:

#chatbox_header.chatbox-options.genmed,
#chatbox_header.chatbox-options
#chatbox_header.chatbox-options a {
    color: color code;
}


To change the color of text in the list section of members:

Code:

#chatbox_members ul li,
#chatbox_members ul li {
    color: color code;
 }


To change the color of text in the message display section:

Code:

.chatbox_row_1,
.chatbox_row_2,
.chatbox_row_3,
.chatbox_row_1 has
.chatbox_row_2 has
.chatbox_row_3 a {
    color: color code;
}


To remove the background image of the chatbox:

Code:

body.chatbox {
    background-image: none;
}


To color the bottom of the chatbox:

Code:
body.chatbox {
    background-color: color code;
}


For Invision :

Body background color

Code:
body.chatbox {
background : red;
}

Chatbox title text :

Code:
a.chat-title:link {
color : yellow !important;
}

Chatbox option links and text color :

Code:
.chatbox-options li a {
color : red;
}
.chatbox-options li ,
.chatbox-options li label {
color : red;
}

Chatbox message row colors...

Code:
.chatbox_row_1 {
background : lightgreen;
}

.chatbox_row_2 {
background : pink;
}






Last edited by Typlo on Tue 31 Aug 2010 - 12:15; edited 1 time in total
Shadow
Shadow
Administrator
Administrator

Male Posts : 16202
Reputation : 1804
Language : French, English

Back to top Go down

Back to top


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