كود css تغيير مظهر شكل علبة الدردشة بشكل خورافي

  افضل مساهمة1
كود css تغيير مظهر شكل علبة الدردشة بشكل خورافي
السلام عليكم ورحمة الله وبركاته
اسعد الله اوقاتكم بكل خير
اقدم لكم كود css
لتغيير شكل علبة الدردشة بشكل احترافي
صورة للشكل علبة الدردشة

الكود يضاف من لوحة الادارة. مظهر المنتدى. صور والوان. الوان. ورقة css

الكود:

/*CHat*/
#chatbox{bottom:30px;left:211px!Important;line-height:10px;overflow:auto;position:absolute;right:0;top:30px}
#chatbox .msg>span[style="color:green"],#chatbox .msg>span[style="color:red"],#chatbox .msg>span[style="color:undefined"]{display:block;color:#fff!important;text-align:left;margin:-8px -4px!Important;padding:8px 16px!important;font-size:12px}
#chatbox .msg>span[style="color:undefined"]{background:rgba(231,119,0,0.51);text-align:center;color:rgb(238,16,16)!important;font-weight:bold;line-height:15px;text-shadow:0 0 1px rgba(255,255,255,0.54),0 0 18px rgba(255,255,255,0.54);border:2px dashed #DB360D;font-size:15px;margin-bottom:-5.5px!important}
#chatbox .msg>span[style="color:undefined"]:before{content:url(https://cdn2.iconfinder.com/data/icons/designer-tools/512/ERASER-2-24.png);position:absolute;top:2px;margin-top:0;margin-left:-34px;border:2px solid;border-radius:100px}
#chatbox .cb-avatar{background:none repeat scroll 0 0 #fff;border:1px solid #d5d5d5!important;box-shadow:0 2px 2px rgba(0,0,0,0.1);float:left;height:35px!Important;margin-right:4px;padding:1px;vertical-align:middle;width:35px!Important;border-radius:100%}
#chatbox .cb-avatar > img{border-radius:100px;height:35px!important;width:35px!important}
#chatbox .chatbox-message-username{font-size:11px}
#chatbox .user{color:#9c9b9b!important;font-size:0;position:relative;top:3px}
div#chatbox_members{width:200px;border-right:1px solid #e7e7e7;padding:0 5px;background:#fff;z-index:2;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}
#chatbox_header{position:absolute;height:50px;left:0;top:0;right:0;line-height:20px;padding:0 5px;background:rgba(255,255,255,0.26);color:transparent;margin-top:-2px}
#chatbox_option_co,#chatbox_option_disco,#chatbox_option_with_archives a,#chatbox_option_without_archives a,.chat-title{display:inline-block;text-indent:-9999px;margin:-5px 0;width:30px;height:30px;background:url(//i68.servimg.com/u/f68/19/38/83/61/chat6110.png) center center no-repeat #e7e7e7;border-radius:3px}
#chatbox_option_with_archives a{background-image:url(//i68.servimg.com/u/f68/19/38/83/61/archiv10.png);line-height:49px}
#chatbox_option_without_archives a{background-image:url(//i68.servimg.com/u/f68/19/38/83/61/three110.png);line-height:49px}
#chatbox_option_co{background-image:url(//i68.servimg.com/u/f68/19/38/83/61/power110.png);line-height:41px}
#chatbox_option_disco{background-image:url(//i68.servimg.com/u/f68/19/38/83/61/out10.png);line-height:41px}
#chatbox .msg>span[style="color:green"]{background:#33CC47;text-align:center}
#chatbox .msg>span[style="color:red"]{background:#39c;text-align:center}
span#chatbox_option_without_archives,span#chatbox_option_with_archives{font-size:0}
#chatbox .date-and-time{background:rgb(242,242,242);padding:3px 4px;border-radius:2px;color:#979ba0;font-size:11px;border:1px solid #c4c4c4;box-shadow:0 0 1px #DDD;opacity:0;transition:.2s}
#chatbox>p:hover .date-and-time{opacity:1}
#chatbox{background:white}
#chatbox > p{background:white;border:none!Important;margin:0}
div#chatbox_footer{background:white;border-top:1px solid #DDD;box-shadow:0 0 2px #ddd;z-index:9999999999999}
.chatbox::-webkit-scrollbar{display:none}
#divcolor,#divsmilies,#help-button,.format-message + label{transition:.2s;position:relative;right:360px;font-size:15px;padding:3px 4px;width:19px!important;line-height:22px!Important;border:1px solid #DDD!Important;height:20px!important;top:-2px;color:#333!important;background:white!Important}
.format-message:checked + label:hover{box-shadow:inset 0 2px 4px #2C789D,0 1px 2px rgba(67,166,223,0)!Important}
.format-message:checked + label{background:#39c!Important;color:white!Important;box-shadow:inset 0 2px 4px #2C789D,0 1px 2px rgba(67,166,223,0)!important;border:1px solid #39c!Important}
#divcolor:hover,#help-button:hover,.format-message + label:hover{background:#43A6DF!important;color:white!important;border-color:#43a6df!important;box-shadow:none!important}
#submit_button{display:inline-block!important;text-indent:-9999px;margin:5px 0!important;width:26px!important;height:26px!important;background:url(//i68.servimg.com/u/f68/19/38/83/61/upper110.png) center center no-repeat #2196f3!important;color:#fff!important;border:0!important;box-shadow:none!important;position:relative;top:-7px;margin-top:7px!Important}
input#submit_button:hover{opacity:.8;cursor:pointer}
input#message{position:relative;top:-7px;border-radius:4px;height:26px!important;background:white;box-sizing:border-box!important;border:1px solid #e7e7e7;box-shadow:0 1px 1px rgba(0,0,0,.075) inset;margin-right:10px}
div#divcolor,div#divsmilies{display:none}
h4.member-title.online,#chatbox_members .member-title{text-align:center;background:#f5f5f5!important;padding:5px;border-radius:3px;font-size:14px!Important;font-weight:bold;text-transform:uppercase;margin:5px 0;color:grey!important}
#chatbox .msg span[style="color:#000000"]{-webkit-font-smoothing:antialiased;font:300 13.5px/1.42857em Roboto,arial,sans-serif;padding-right:10px}


ثم سجل ومبروك شكل الدردشة الجديد


m13
  افضل مساهمة2
رؤ9ؤ9ؤ9ؤعــةة ،، 


دائما ما تبهرينا بإبداعاتك وجديدك ، مشكورة   


  افضل مساهمة3
يرجى دخولك هنا وملاحظتها كيف تظهر عندي بشكل خاطى

http://eps-dz.arab.st/
  افضل مساهمة4
صورة للامر اخي فهو ﻻ تظهر لدي الدردشة


m13
  افضل مساهمة5
لم يعد يعمل اختي
  افضل مساهمة6
@walid dz كتب:لم يعد يعمل اختي

مممممم


m13
  افضل مساهمة7
تم التعديل ... بنقل

الكود:

 /*CHat*/
    #chatbox{bottom:30px;left:211px!Important;line-height:10px;overflow:auto;position:absolute;right: 201px;}
    #chatbox .msg>span[style="color:green"],#chatbox .msg>span[style="color:red"],#chatbox .msg>span[style="color:undefined"]{display:block;color:#fff!important;text-align:left;margin:-8px -4px!Important;padding:8px 16px!important;font-size:12px}
    #chatbox .msg>span[style="color:undefined"]{background:rgba(231,119,0,0.51);text-align:center;color:rgb(238,16,16)!important;font-weight:bold;line-height:15px;text-shadow:0 0 1px rgba(255,255,255,0.54),0 0 18px rgba(255,255,255,0.54);border:2px dashed #DB360D;font-size:15px;margin-bottom:-5.5px!important}
    #chatbox .msg>span[style="color:undefined"]:before{content:url(https://cdn2.iconfinder.com/data/icons/designer-tools/512/ERASER-2-24.png);position:absolute;top:2px;margin-top:0;margin-left:-34px;border:2px solid;border-radius:100px}
    #chatbox .cb-avatar{background:none repeat scroll 0 0 #fff;border:1px solid #d5d5d5!important;box-shadow:0 2px 2px rgba(0,0,0,0.1);float:left;height:35px!Important;margin-right:4px;padding:1px;vertical-align:middle;width:35px!Important;border-radius:100%}
    #chatbox .cb-avatar > img{border-radius:100px;height:35px!important;width:35px!important}
    #chatbox .chatbox-message-username{font-size:11px}
    #chatbox .user{color:#9c9b9b!important;font-size:0;position:relative;top:3px}
    div#chatbox_members{width:200px;border-right:1px solid #e7e7e7;padding:0 5px;background:#fff;z-index:2;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}
    #chatbox_header{position:absolute;height:50px;left:0;top:0;right:0;line-height:20px;padding:0 5px;background:rgba(255,255,255,0.26);color:transparent;margin-top:-2px}
    #chatbox_option_co,#chatbox_option_disco,#chatbox_option_with_archives a,#chatbox_option_without_archives a,.chat-title{display:inline-block;text-indent:-9999px;margin:-5px 0;width:30px;height:30px;background:url(//i68.servimg.com/u/f68/19/38/83/61/chat6110.png) center center no-repeat #e7e7e7;border-radius:3px}
    #chatbox_option_with_archives a{background-image:url(//i68.servimg.com/u/f68/19/38/83/61/archiv10.png);line-height:49px}
    #chatbox_option_without_archives a{background-image:url(//i68.servimg.com/u/f68/19/38/83/61/three110.png);line-height:49px}
    #chatbox_option_co{background-image:url(//i68.servimg.com/u/f68/19/38/83/61/power110.png);line-height:41px}
    #chatbox_option_disco{background-image:url(//i68.servimg.com/u/f68/19/38/83/61/out10.png);line-height:41px}
    #chatbox .msg>span[style="color:green"]{background:#33CC47;text-align:center}
    #chatbox .msg>span[style="color:red"]{background:#39c;text-align:center}
    span#chatbox_option_without_archives,span#chatbox_option_with_archives{font-size:0}
    #chatbox .date-and-time{background:rgb(242,242,242);padding:3px 4px;border-radius:2px;color:#979ba0;font-size:11px;border:1px solid #c4c4c4;box-shadow:0 0 1px #DDD;opacity:0;transition:.2s}
    #chatbox>p:hover .date-and-time{opacity:1}
    #chatbox{background:white}
    #chatbox > p{background:white;border:none!Important;margin:0}
    div#chatbox_footer{background:white;border-top:1px solid #DDD;box-shadow:0 0 2px #ddd;z-index:9999999999999}
    .chatbox::-webkit-scrollbar{display:none}
    #divcolor,#divsmilies,#help-button,.format-message + label{transition:.2s;position:relative;right:360px;font-size:15px;padding:3px 4px;width:19px!important;line-height:22px!Important;border:1px solid #DDD!Important;height:20px!important;top:-2px;color:#333!important;background:white!Important}
    .format-message:checked + label:hover{box-shadow:inset 0 2px 4px #2C789D,0 1px 2px rgba(67,166,223,0)!Important}
    .format-message:checked + label{background:#39c!Important;color:white!Important;box-shadow:inset 0 2px 4px #2C789D,0 1px 2px rgba(67,166,223,0)!important;border:1px solid #39c!Important}
    #divcolor:hover,#help-button:hover,.format-message + label:hover{background:#43A6DF!important;color:white!important;border-color:#43a6df!important;box-shadow:none!important}
    #submit_button{display:inline-block!important;text-indent:-9999px;margin:5px 0!important;width:26px!important;height:26px!important;background:url(//i68.servimg.com/u/f68/19/38/83/61/upper110.png) center center no-repeat #2196f3!important;color:#fff!important;border:0!important;box-shadow:none!important;position:relative;top:-7px;margin-top:7px!Important}
    input#submit_button:hover{opacity:.8;cursor:pointer}
    input#message{position:relative;top:-7px;border-radius:4px;height:26px!important;background:white;box-sizing:border-box!important;border:1px solid #e7e7e7;box-shadow:0 1px 1px rgba(0,0,0,.075) inset;margin-right:10px}
    h4.member-title.online,#chatbox_members .member-title{text-align:center;background:#f5f5f5!important;padding:5px;border-radius:3px;font-size:14px!Important;font-weight:bold;text-transform:uppercase;margin:5px 0;color:grey!important}
    #chatbox .msg span[style="color:#000000"]{-webkit-font-smoothing:antialiased;font:300 13.5px/1.42857em Roboto,arial,sans-serif;padding-right:10px}



وهبة الساحر
القلوب المكسورة كالزجاج المكسور خطرة و مؤذية لا تحتاج للحب بقدر ما تحتاج للوحدة حتى يتم شفاؤها . . !!
     

  افضل مساهمة8
ينقل اذا وفقك الله ياوهبة ^_^


m13
  افضل مساهمة9
واو كود كتير حلووو يعطيك الف عافية جرح تسلم ايدك جاري التجربة :9:
  افضل مساهمة10
السلام عليكم ورحمة الله وبركاته
ألف شكر لكَ على هذا الموضوع المميز و المعلومات القيمة
إنـجاز أكثر رائــــــع
لكن أرجو منكَ عدم التوقف عند هذا الحد
مـنتظرين ابداعتــــــك
دمتـ ودام تألقـك
تحياتــي
لاتستطيع الرد على المواضيع في هذا المنتدى