Cùng nhau chinh phục CSS phần 5 - chatbox

[CPFounder]

/* Chatbox-------------------------------------------------*/
body.chatbox {
background-image: url(https://msp279.photobucket.com/albums/kk125/Riktascale/ColourSmileyFace.jpg);
background-repeat: repeat; <---Dòng này thêm vào để hình nền nó lặp lại, còn ở trên là thêm ảnh nền
}
.chatbox {
background-color: #999999; <----Màu nền
}
#chatbox_header {
height: 30px;
background-color: #000000;<----Có thể chèn hình nền vào, dùng hình ghi câu chú ý hay quy định là tốt nhất
}
.chatbox .forabg {
margin: 0;
border: none;
}
.chatbox-title,.chatbox-title a.chat-title {
color: #ffffff !important;
}
.chatbox-title {
float: left;
margin: 0;
padding: 2px 5px 0 5px;
width: 12em;
}
.chatbox-options {
float: right;
list-style: none;
font-size: 11px;
margin: 0.7em 0.5em 0.5em 0.5em;
}
.chatbox-options li {
display:inline;
}
.chatbox-options li,.chatbox-options li a,.chatbox-options li label {
color: #ffffff;
}
#chatbox_members {<----Có thể dùng hình nền để chatbox thêm sinh động. Chú ý chỉnh bề rộng tương ứng.
position: absolute;
top: 30px;
bottom: 30px;
width: 180px;
overflow: auto;
border-right: 1px solid ;<----Tùy chỉnh đường kẻ ngăn cách phần member và phần nội dung chat
}
#chatbox_members .member-title {
text-align: center;
padding: 0.5em 0.25em;
background-image: none;
font-size: 12px;
background-color: #02710e;
}
#chatbox_members ul {
list-style-image: url(http://www.freeiconsweb.com/Icons/16x16_Flag_icons/objects_062.gif); <----Ứng dụng list style là hình ảnh, nhớ chỉnh số cuối ở dòng margin bên dưới tăng lên chút đỉnh.
margin: 0 0 0 3em;
}
#chatbox_members ul li {
margin: 0.5em 0.5em 0.5em 0;
}
#chatbox { <---- Chỉnh vị trí của khung hiển thị lời thoại bào gồm cách lề trên, trái phải, dưới
position: absolute;
top: 30px;
left: 181px;<----Nếu đã chỉnh bề rộng khung member list thì cần chỉnh cái này tương ứng
right: 0;
bottom: 40px;
overflow: auto;
line-height: 10px;
}
.chatbox_row_1 { <---- Chỉnh màu của dòng chữ thứ I
padding: 4px;
background-color: #999999;
}
.chatbox_row_2 { <---- Chỉnh màu của dòng chữ thứ II
padding: 4px;
background-color: #ffffff;
}
.chatbox_row_3 {
padding: 4px;
background-color: #02710e;
}
.memberlist_row_1 {
background-color: #999999;
}
#chatbox_footer { <---- Chỉnh vị trí màu nền của các button ở góc dưới cùng của chatbox
position: absolute;
bottom: 20px;
left: 0;
right: 0;
padding: 5px;
}
#chatbox_footer label {
color: #ffffff;
}
#message,#submit_button{
border-width: 1px;
}
.fontbutton {
padding: 1px;
cursor: pointer;
text-align: left;
}
.fontbutton_normal {
background: transparent;#E1E1E2
}
.fontbutton_selected {
background: #BBC7CE;
border: 1px solid #22229C;
}
.fontbutton_clicked {
background: #959595;
border: 1px solid #22229C;
}
.fontbutton_hover {
background: #E1E1E2;
border: 1px solid #22229C;
}
#chatbox_contextmenu {
border: 2px solid black;
background-color: #f3f3f3;
}
#chatbox_contextmenu p {
border-bottom: 1px solid #000009;
padding: 5px 20px 5px 0px;
margin: 0px;
}
#chatbox_contextmenu p.close {
background-color: #105290;
padding: 0px;
}

Từ từ khám phá thêm sẽ bổ sung.
...Vừa bổ sung thêm 1 số khám phá.

[CPFounder]

Nâng cao : [phpBB 2 + 3]Tạo NOtice cho chatbox
Để hỗ trợ việc chỉnh sửa ảnh nền tham khảo http://chinhphuc.info/forum-f77/topic-t168.htm

[Lowie]

lục lọi thử tí

[Sponsored content]