The forum of the forums
Welcome on the Forumotion Support Forum.

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're not yet....



Create a free forum like this one.

Customize Chatbox

The forum of the forums :: About Forumotion ::   :: Tips & Tricks

View previous topic View next topic Go down

Customize Chatbox

Post by Leeloo on August 31st 2010, 2:27 am

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;
}



This tutorial was written by the staff of the French support forum,
And in particular by GodFather and translated by MrMario.

No reproduction possible without our agreement, in accordance with article L122-1 of the ICC.


Last edited by Typlo on August 31st 2010, 4:15 am; edited 1 time in total

Leeloo
Administrator
Administrator

Female
Posts: 3511
Language: French, English
Points: 3977
Join date: 2007-09-04

Back to top Go down

View previous topic View next topic Back to top

The forum of the forums :: About Forumotion ::   :: Tips & Tricks

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