The forum of the forums
Welcome to the Official Support Forum of Forumotion!

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



Create a free forum like this one.

CSS'ing the chat box

View previous topic View next topic Go down

CSS'ing the chat box

Post by Merlin333 on October 10th 2008, 12:56 am

I've seen come pretty nice chatboxes here. Can anyone share some advice on applying CSS to change mine from plain vanilla?

Merlin333
Forumember

Male Posts : 147
Reputation : 0
Language : English

http://www.merlin333.bigforumlive.com/index.htm

Back to top Go down

Re: CSS'ing the chat box

Post by pilya on October 10th 2008, 1:04 am

are you refering to the chatbox provided by forumotion or shoutbox???

pilya
New Member

Posts : 22
Reputation : 0
Language : English

Back to top Go down

Re: CSS'ing the chat box

Post by eagle8x on October 10th 2008, 7:26 am

Share my chatbox code : You can see the demo : click my web icon

Code:
/* Chatbox-------------------------------------------------*/
body.chatbox {
    background-image: url('http://img508.imageshack.us/img508/6160/56jpgie1.gif');
        background-repeat: repeat;
     
    }
.chatbox {
    background-color: #ffffff;
    }
#chatbox_header {
    height: 60px;
    background-color: transparent;
        color: #000000;
        background-image: url(http://i292.photobucket.com/albums/mm30/huylordno1/spam7898569732-iaza.gif);
        background-position: bottom right;
        background-repeat: no-repeat;
    }
.chatbox .forabg {
    margin: 0;
    border: none;
        background-color: transparent;
    }
.chatbox-title,.chatbox-title a.chat-title {
    color: #000000 !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: #000000;
    }
#chatbox_members {
    position: absolute;
    top: 30px;
    bottom: 30px;
          width: 250px;
    overflow: auto;
    border-right: 0px solid ;
        background-image: url(http://img519.imageshack.us/img519/2301/disney19bo0.png);
        background-repeat: no-repeat;
        background-position: center right;
    }
#chatbox_members .member-title {
    text-align: center;
    padding: 0.5em 90px;
        color: #000000;
        height: 30px;
    font-size: 12px;
    background-color: transparent;
        background-image: url(http://img99.imageshack.us/img99/1452/superm10sy7.png);
        background-repeat: no-repeat;
        background-position: center;
    }
#chatbox_members ul {
    list-style-image: url(http://www.freeiconsweb.com/Icons/16x16_Flag_icons/objects_062.gif);
    margin: 0 0 0 3em;
    }
#chatbox_members ul li {
    margin: 0.5em 0.5em 0.5em 0;
    }
#chatbox {
    position: absolute;
    top: 60px;
    left: 251px;
    right: 0;
    bottom: 40px;
    overflow: auto;
    line-height: 10px;
        background-image: url(http://img262.imageshack.us/img262/9222/disney14bh9.png);
        background-repeat: no-repeat;
        background-position: bottom right;     

    }
.chatbox_row_1 {
    padding: 4px;
    background-color: transparent;
        color: #ffffff;
     
    }
.chatbox_row_2 {
    padding: 4px;
    background-color: transparent;
        color: #ffffff;
                  }
.chatbox_row_3 {
    padding: 4px;
    background-color: #02710e;
    }
.memberlist_row_1 {
    background-color: #999999;
    }
#chatbox_footer {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    padding: 5px;
        }
#chatbox_footer label {
    color: #000000;
    }
#message,#submit_button{
    border-width: 1px;
    }
.fontbutton {
    padding: 1px;
    cursor: pointer;
    text-align: left;
        background: transparent;
    }
.fontbutton_normal {
    background: transparent;#E1E1E2
    }
.fontbutton_selected {
    background: #BBC7CE;
    border: 1px solid #22229C;
        background: transparent;
    }
.fontbutton_clicked {
    background: #959595;
    border: 1px solid #22229C;
    }
.fontbutton_hover {
    background: transparent;
    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;
}

eagle8x
Forumember

Male Posts : 362
Reputation : 15
Language : Vietnamese

http://diendan.chinhphuc.info

Back to top Go down

Re: CSS'ing the chat box

Post by bonita on June 6th 2011, 12:29 pm

~ removed

bonita
New Member

Female Posts : 2
Reputation : 0
Language : Filipino
Location : Philippines

Back to top Go down

Re: CSS'ing the chat box

Post by bonita on June 6th 2011, 12:31 pm

~ removed

bonita
New Member

Female Posts : 2
Reputation : 0
Language : Filipino
Location : Philippines

Back to top Go down

View previous topic View next topic Back to top


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