Personalizare Chatbox!

CSS:

Cod:

/*----------------Begin Chatbox----------------*/
body.chatbox {
background-color: #f3f3f3;
}
/*----------------Header----------------*/
#chatbox_header  {
background:  url(http://i25.servimg.com/u/f25/14/45/99/41/untitl20.jpg) repeat-x !important;
border-bottom: 1px solid #c9c9c9;
border-top: 0px;
border-left: 0px;
border-right: 0px;
}
.chatbox-title {
padding: 6px 0px 0px 5px !important;
}
h2.chatbox-title .chat-title{
margin-left: -5px;
background:  url(http://i25.servimg.com/u/f25/14/45/99/41/112_co11.png) no-repeat;
font-size: 14px;
cursor: default;
letter-spacing: -0.4em;
color: transparent !important;
}
h2.chatbox-title .chat-title:hover{
background:  url(http://i25.servimg.com/u/f25/14/45/99/41/112.png) no-repeat;
letter-spacing: 2.2em;
}
#chatbox_main_options, #chatbox_main_options a, #chatbox_main_options {
color: #9a9a9a;
text-shadow: 1px 1px 1px #ffffff;
text-decoration:none;
font-family: Arial Black;
text-transform: uppercase;
}
#chatbox_main_options a:hover{
color: grey;
text-shadow: 1px 1px 1px #b8b8b8;
text-decoration:none !important;
font-family: Arial Black;
text-transform: uppercase;
}

#chatbox_main_options {
background:  url(http://i25.servimg.com/u/f25/14/45/99/41/untitl21.jpg) repeat-x;
float: right;
border: 1px solid #c9c9c9;
margin-right: 50px;
margin-top: -10px;
padding: 2px 3px 1px 5px;
border-radius: 0px 0px 5px 5px;
-moz-border-radius: 0px 0px 5px 5px;
-webkit-box-shadow: 0px 0px 4px #c6c6c6;
box-shadow: 0px 0px 4px #c6c6c6;
-moz-box-shadow: 0px 0px 4px #c6c6c6;
}
#chatbox_main_options:hover {
margin-top: -2px;
}
ul#chatbox_main_options li, ul#chatbox_main_options li label {
color: #9a9a9a !important;
text-shadow: 1px 1px 1px #ffffff;
}
/*----------------Members----------------*/
#chatbox_members {
background:  url(http://photobase.ro/di-C3RR.png);
margin-bottom: -30px;
border-right: 1px solid #c9c9c9;
background-color: #ffffff;
}
#chatbox_members:hover {
border-right: 1px solid #b7b7b7;
background-color: #fcfcfc;
}
h4.member-title{
background: url(http://i25.servimg.com/u/f25/14/45/99/41/untitl23.jpg) repeat-x !important;
font-family: Arial Black;
text-transform: uppercase;
color: #ffffff !important;
text-shadow: 0px 0px 3px black;
margin-top: 0px;
cursor: default;
letter-spacing: 0.5em;
}

#chatbox_members ul {
list-style: none;
margin: 0px;
}
#chatbox_members ul li {
background:  url(http://i25.servimg.com/u/f25/14/45/99/41/115.png);
font-family: Arial Black;
font-weight: bold;
font-size: 14px;
color: #393939 !important;
padding-left: 10px;
border-bottom: 1px solid #e2e2e2;
margin: 0px;
}

#chatbox_members ul li:hover {
background-color: #f4f4f4;
background-image:url('http://i25.servimg.com/u/f25/14/45/99/41/114.png');
background-repeat: no-repeat;
background-position: center left;
}
#chatbox_members ul li:active {
background-image:url('http://i25.servimg.com/u/f25/14/45/99/41/213.png');
}
#chatbox_members ul li a {
text-shadow: 1px 1px 1px #ffffff;
font-size: 12px;
color: #909090 !important;
text-decoration: none;
}
#chatbox_members ul li a:hover {
color: #393939 !important;
text-decoration: none !important;
}
/*----------------ChatBox----------------*/
#chatbox {
background-image:url(''); /*---Imaginea de fundal a chatbox-ului---*/
background-repeat: no-repeat;
background-position: center center;
}
.chatbox_row_1, .chatbox_row_2 {
background-color: transparent !important;
}
.chatbox_row_1:hover, .chatbox_row_2:hover {
background-color: #ffffff !important;
border: 1px solid #c9c9c9;
border-radius: 5px;
-moz-border-radius: 5px;
margin: 5px;
-webkit-box-shadow: 0px 0px 4px #dcdcdc;
box-shadow: 0px 0px 3px #dcdcdc;
-moz-box-shadow: 0px 0px 3px #dcdcdc;
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f9f9f9));
background: -moz-linear-gradient(top, #ffffff, #f9f9f9);
}
.date-and-time {
color: #c3c3c3;
font-style: italic;
font-size: 9px !important;
letter-spacing: -0.1em;
}
.user-msg {
font-family: Georgia;
color: #8c8c8c;
}
.user-msg a {
color: #424242;
text-decoration: none;
}
.user-msg a:hover {
color: #000000;
text-decoration: none !important;
}

/*----------------Footer----------------*/
#chatbox_footer {
background: none !important;
}
#chatbox_messenger {
background: none !important;
}
#chatbox_messenger_form {
width: 680px;
float: none !important;
bottom: 0px ;
position: fixed;
z-index: 999;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
-webkit-box-shadow: 0px 0px 4px #d4d4d4;
box-shadow: 0px -0px 4px #d4d4d4;
-moz-box-shadow: 0px 0px 4px #d4d4d4;
box-shadow: 0px 0px 4px #c6c6c6;
-moz-box-shadow: 0px 0px 4px #c6c6c6;
border-top: 1px solid #c9c9c9;
border-left: 1px solid #c9c9c9;
border-right: 1px solid #c9c9c9;
border-bottom: 0px;
height: 30px;
border-radius: 5px 5px 0px 0px;
-moz-border-radius: 5px 5px 0px 0px;
background-color: #ffffff;
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f9f9f9)) !important;
background: -moz-linear-gradient(top, #ffffff, #e2e2e2) !important;
}
#chatbox_messenger_form:hover {
border-top: 1px solid #a7a7a7;
border-left: 1px solid #a7a7a7;
border-right: 1px solid #a7a7a7;
}

#divbold, #divitalic, #divunderline, #divstrike, #divcolor, #divsmilies {
background:  url(http://i25.servimg.com/u/f25/14/45/99/41/110.jpg) repeat-x;
border: 1px solid #c9c9c9;
background-color: #ffffff;
border-radius: 3px;
-moz-border-radius: 3px;
}

#divbold:hover, #divitalic:hover, #divunderline:hover, #divstrike:hover, #divcolor:hover, #divsmilies:hover {
background:  url(http://i25.servimg.com/u/f25/14/45/99/41/hover10.jpg) repeat-x;
border: 1px solid #a2a2a2;
}
#divbold:active, #divitalic:active, #divunderline:active, #divstrike:active, #divcolor:active, #divsmilies:active {
background:  url(http://i25.servimg.com/u/f25/14/45/99/41/active10.jpg) repeat-x;
}

label input#message {
height: 17px;
font-size: 12px;
border: 1px solid #c9c9c9;
background-color: #ffffff;
border-radius: 3px;
-moz-border-radius: 3px;
}
label input#message:hover {
border: 1px solid #b2b2b2;
background-color: #f5f5f5;
}
label input#message:focus {
border: 1px solid #a4a4a4;
background-color: #e0fdff;
}

input#submit_button {
cursor: pointer;
color: #929292;
font-family: Arial Black;
text-transform: uppercase;
font-size: 12px;
padding-left: 2px;
padding-right: 2px;
background:  url(http://i25.servimg.com/u/f25/14/45/99/41/110.jpg) repeat-x;
border: 1px solid #c9c9c9;
background-color: #ffffff;
border-radius: 3px;
-moz-border-radius: 3px;
}
input#submit_button:hover {
color: #2c2c2c;
background:  url(http://i25.servimg.com/u/f25/14/45/99/41/hover10.jpg) repeat-x;
border: 1px solid #a2a2a2;
}
input#submit_button:active {
background:  url(http://i25.servimg.com/u/f25/14/45/99/41/active10.jpg) repeat-x;
}
.right-box {
padding-top: 4px !important;
}

Codul JavaScript!

Cod:

jQuery(document).ready(function(){jQuery('body').append('<div style="overflow: visible; position: fixed; bottom: 30px; height: 350px; right: 0px; z-index:10000; "><iframe src="/chatbox/index.forum" id="chatboxpop" scrolling="yes" style="overflow: visible; width: 750px; height: 350px; display: none; float:right;box-shadow: 0px 0px 3px rgba(0,0,0,0.25);-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.25);-webkitbox-shadow: 0px 0px 3px rgba(0,0,0,0.25);-o-box-shadow: 0px 0px 3px rgba(0,0,0,0.25);margin-left: 6px; background-color: #ffa34e;-moz-border-radius: 6px;border-radius: 6px;-webkit-border-radius: 6px;-o-border-radius: 6px;" marginwidth="0" marginheight="0" frameborder="0"></iframe><div onClick="jQuery(\'#chatboxpop\').animate({width:\'toggle\'},1200); jQuery(\'#chatboxopen,#chatboxclose\').toggle();" style="cursor :pointer; float:left; box-shadow: 0px 0px 3px rgba(0,0,0,0.25);-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.25);-webkitbox-shadow: 0px 0px 3px rgba(0,0,0,0.25);-o-box-shadow: 0px 0px 3px rgba(0,0,0,0.25); background-color: #ffa34e;-moz-border-radius: 6px;border-radius: 6px;-webkit-border-radius: 6px;-o-border-radius: 6px;  padding: 6px 3px 6px 3px;"><img src="http://i46.servimg.com/u/f46/15/86/71/61/button10.png" id="chatboxopen"/><img src="http://i46.servimg.com/u/f46/15/86/71/61/button12.png" id="chatboxclose" style="cursor :pointer; display:none;"></div></div>')});

Încercaţi acest CSS:

Cod:


    /*----------------Begin Chatbox----------------*/
    body.chatbox {
    background-color: #f3f3f3;
    }
    /*----------------Header----------------*/
    #chatbox_header  {
    background:  url(http://i25.servimg.com/u/f25/14/45/99/41/untitl20.jpg) repeat-x !important;
    border-bottom: 1px solid #c9c9c9;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    }
    .chatbox-title {
    padding: 6px 0px 0px 5px !important;
    }
    h2.chatbox-title .chat-title{
    margin-left: -5px;
    background:  url(http://i25.servimg.com/u/f25/14/45/99/41/112_co11.png) no-repeat;
    font-size: 14px;
    cursor: default;
    letter-spacing: -0.4em;
    color: transparent !important;
    }
    h2.chatbox-title .chat-title:hover{
    background:  url(http://i25.servimg.com/u/f25/14/45/99/41/112.png) no-repeat;
    letter-spacing: 2.2em;
    }
    #chatbox_main_options, #chatbox_main_options a, #chatbox_main_options {
    color: #9a9a9a;
    text-shadow: 1px 1px 1px #ffffff;
    text-decoration:none;
    font-family: Arial Black;
    text-transform: uppercase;
    }
    #chatbox_main_options a:hover{
    color: grey;
    text-shadow: 1px 1px 1px #b8b8b8;
    text-decoration:none !important;
    font-family: Arial Black;
    text-transform: uppercase;
    }

    #chatbox_main_options {
    background:  url(http://i25.servimg.com/u/f25/14/45/99/41/untitl21.jpg) repeat-x;
    float: right;
    border: 1px solid #c9c9c9;
    margin-right: 50px;
    margin-top: -10px;
    padding: 2px 3px 1px 5px;
    border-radius: 0px 0px 5px 5px;
    -moz-border-radius: 0px 0px 5px 5px;
    -webkit-box-shadow: 0px 0px 4px #c6c6c6;
    box-shadow: 0px 0px 4px #c6c6c6;
    -moz-box-shadow: 0px 0px 4px #c6c6c6;
    }
 
    ul#chatbox_main_options li, ul#chatbox_main_options li label {
    color: #9a9a9a !important;
    text-shadow: 1px 1px 1px #ffffff;
    }
    /*----------------Members----------------*/
    #chatbox_members {
    background:  url(http://photobase.ro/di-C3RR.png);
    margin-bottom: -30px;
    border-right: 1px solid #c9c9c9;
    background-color: #ffffff;
    }
    #chatbox_members:hover {
    border-right: 1px solid #b7b7b7;
    background-color: #fcfcfc;
    }
    h4.member-title{
    background: url(http://i25.servimg.com/u/f25/14/45/99/41/untitl23.jpg) repeat-x !important;
    font-family: Arial Black;
    text-transform: uppercase;
    color: #ffffff !important;
    text-shadow: 0px 0px 3px black;
    margin-top: 0px;
    cursor: default;
    letter-spacing: 0.5em;
    }

    #chatbox_members ul {
    list-style: none;
    margin: 0px;
    }
    #chatbox_members ul li {
    background:  url(http://i25.servimg.com/u/f25/14/45/99/41/115.png);
    font-family: Arial Black;
    font-weight: bold;
    font-size: 14px;
    color: #393939 !important;
    padding-left: 10px;
    border-bottom: 1px solid #e2e2e2;
    margin: 0px;
    }

    #chatbox_members ul li:hover {
    background-color: #f4f4f4;
    background-image:url('http://i25.servimg.com/u/f25/14/45/99/41/114.png');
    background-repeat: no-repeat;
    background-position: center left;
    }
    #chatbox_members ul li:active {
    background-image:url('http://i25.servimg.com/u/f25/14/45/99/41/213.png');
    }
    #chatbox_members ul li a {
    text-shadow: 1px 1px 1px #ffffff;
    font-size: 12px;
    color: #909090 !important;
    text-decoration: none;
    }
    #chatbox_members ul li a:hover {
    color: #393939 !important;
    text-decoration: none !important;
    }
    /*----------------ChatBox----------------*/
    #chatbox {
    background-image:url(''); /*---Imaginea de fundal a chatbox-ului---*/
    background-repeat: no-repeat;
    background-position: center center;
    }
    .chatbox_row_1, .chatbox_row_2 {
    background-color: transparent !important;
    }
    .chatbox_row_1:hover, .chatbox_row_2:hover {
    background-color: #ffffff !important;
    border: 1px solid #c9c9c9;
    border-radius: 5px;
    -moz-border-radius: 5px;
    margin: 5px;
    -webkit-box-shadow: 0px 0px 4px #dcdcdc;
    box-shadow: 0px 0px 3px #dcdcdc;
    -moz-box-shadow: 0px 0px 3px #dcdcdc;
    background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f9f9f9));
    background: -moz-linear-gradient(top, #ffffff, #f9f9f9);
    }
    .date-and-time {
    color: #c3c3c3;
    font-style: italic;
    font-size: 9px !important;
    letter-spacing: -0.1em;
    }
    .user-msg {
    font-family: Georgia;
    color: #8c8c8c;
    }
    .user-msg a {
    color: #424242;
    text-decoration: none;
    }
    .user-msg a:hover {
    color: #000000;
    text-decoration: none !important;
    }

    /*----------------Footer----------------*/
    #chatbox_footer {
    background: none !important;
    }
    #chatbox_messenger {
    background: none !important;
    }
    #chatbox_messenger_form {
    width: 680px;
    float: none !important;
    bottom: 0px ;
    position: fixed;
    z-index: 999;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    -webkit-box-shadow: 0px 0px 4px #d4d4d4;
    box-shadow: 0px -0px 4px #d4d4d4;
    -moz-box-shadow: 0px 0px 4px #d4d4d4;
    box-shadow: 0px 0px 4px #c6c6c6;
    -moz-box-shadow: 0px 0px 4px #c6c6c6;
    border-top: 1px solid #c9c9c9;
    border-left: 1px solid #c9c9c9;
    border-right: 1px solid #c9c9c9;
    border-bottom: 0px;
    height: 30px;
    border-radius: 5px 5px 0px 0px;
    -moz-border-radius: 5px 5px 0px 0px;
    background-color: #ffffff;
    background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f9f9f9)) !important;
    background: -moz-linear-gradient(top, #ffffff, #e2e2e2) !important;
    }
    #chatbox_messenger_form:hover {
    border-top: 1px solid #a7a7a7;
    border-left: 1px solid #a7a7a7;
    border-right: 1px solid #a7a7a7;
    }

    #divbold, #divitalic, #divunderline, #divstrike, #divcolor, #divsmilies {
    background:  url(http://i25.servimg.com/u/f25/14/45/99/41/110.jpg) repeat-x;
    border: 1px solid #c9c9c9;
    background-color: #ffffff;
    border-radius: 3px;
    -moz-border-radius: 3px;
    }

    #divbold:hover, #divitalic:hover, #divunderline:hover, #divstrike:hover, #divcolor:hover, #divsmilies:hover {
    background:  url(http://i25.servimg.com/u/f25/14/45/99/41/hover10.jpg) repeat-x;
    border: 1px solid #a2a2a2;
    }
    #divbold:active, #divitalic:active, #divunderline:active, #divstrike:active, #divcolor:active, #divsmilies:active {
    background:  url(http://i25.servimg.com/u/f25/14/45/99/41/active10.jpg) repeat-x;
    }

    label input#message {
    height: 17px;
    font-size: 12px;
    border: 1px solid #c9c9c9;
    background-color: #ffffff;
    border-radius: 3px;
    -moz-border-radius: 3px;
    }
    label input#message:hover {
    border: 1px solid #b2b2b2;
    background-color: #f5f5f5;
    }
    label input#message:focus {
    border: 1px solid #a4a4a4;
    background-color: #e0fdff;
    }

    input#submit_button {
    cursor: pointer;
    color: #929292;
    font-family: Arial Black;
    text-transform: uppercase;
    font-size: 12px;
    padding-left: 2px;
    padding-right: 2px;
    background:  url(http://i25.servimg.com/u/f25/14/45/99/41/110.jpg) repeat-x;
    border: 1px solid #c9c9c9;
    background-color: #ffffff;
    border-radius: 3px;
    -moz-border-radius: 3px;
    }
    input#submit_button:hover {
    color: #2c2c2c;
    background:  url(http://i25.servimg.com/u/f25/14/45/99/41/hover10.jpg) repeat-x;
    border: 1px solid #a2a2a2;
    }
    input#submit_button:active {
    background:  url(http://i25.servimg.com/u/f25/14/45/99/41/active10.jpg) repeat-x;
    }
    .right-box {
    padding-top: 4px !important;
    }

E ok.Cum scot icoana aia? care am spus mai sus?

Foarte ciudat. Mie nu îmi afişează încă odată acea imagine. Încercaţi să "reinstalaţi" codurile.

Da,e foarte ciudat.. si inainte il scoteam si il adaugam,dupa nu se mai vedea..
L-am scos si tot asa ramane acel buton;si pe Chrome si pe Mozilla :-s

EDIT!
Poblema e de la codul Javascript,daca il amplasez in tot forumu,sau sa bifez toate,atunci apare;daca las doar in index nu se mai vede..