منتديات تقنيات
يسعدنا تسجيلكم بالمنتدى اهلا بكم


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

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل

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

مُساهمة من طرف JAR7 في 11/10/16, 12:04 am

كود 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}


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


عدل سابقا من قبل JAR7 في 26/10/16, 07:26 am عدل 7 مرات



JAR7
ادارة المنتدى


الجنس : انثى
عدد المساهمات : 2202
التقييم : 290
تاريخ التسجيل : 05/01/2016
اوسمتي : :10:10:10

معاينة صفحة البيانات الشخصي للعضو http://www.t3qnyiat.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف BAZOKA Libya في 11/10/16, 01:10 am

رؤ9ؤ9ؤ9ؤعــةة ،، 


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



BAZOKA Libya
عضو نشيط


الجنس : ذكر
عدد المساهمات : 57
التقييم : 30
تاريخ الميلاد : 14/01/1996
تاريخ التسجيل : 07/10/2016
العمر : 20
الموقع : ليبيا
العمل/الترفيه : Developper & Coder
المزاج : الحمد لله
اوسمتي : :1:0:0

معاينة صفحة البيانات الشخصي للعضو http://www.techno-livya.ga/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف walid dz في 12/10/16, 01:34 pm

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

http://eps-dz.arab.st/

walid dz
عضو نشيط


الجنس : ذكر
عدد المساهمات : 90
التقييم : 20
تاريخ التسجيل : 11/04/2016

معاينة صفحة البيانات الشخصي للعضو

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف JAR7 في 12/10/16, 02:08 pm

صورة للامر اخي فهو ﻻ تظهر لدي الدردشة



JAR7
ادارة المنتدى


الجنس : انثى
عدد المساهمات : 2202
التقييم : 290
تاريخ التسجيل : 05/01/2016
اوسمتي : :10:10:10

معاينة صفحة البيانات الشخصي للعضو http://www.t3qnyiat.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف walid dz في 12/10/16, 04:46 pm

لم يعد يعمل اختي

walid dz
عضو نشيط


الجنس : ذكر
عدد المساهمات : 90
التقييم : 20
تاريخ التسجيل : 11/04/2016

معاينة صفحة البيانات الشخصي للعضو

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف JAR7 في 26/10/16, 06:36 am

@walid dz كتب:لم يعد يعمل اختي

مممممم



JAR7
ادارة المنتدى


الجنس : انثى
عدد المساهمات : 2202
التقييم : 290
تاريخ التسجيل : 05/01/2016
اوسمتي : :10:10:10

معاينة صفحة البيانات الشخصي للعضو http://www.t3qnyiat.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف وهبة الساحر في 06/11/16, 02:00 pm

تم التعديل ... بنقل

الرمز:

 /*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}



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


وهبة الساحر
ادارة المنتدى


الجنس : ذكر
عدد المساهمات : 335
التقييم : 61
تاريخ التسجيل : 07/03/2016
اوسمتي : :10:10:10

معاينة صفحة البيانات الشخصي للعضو

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف JAR7 في 06/11/16, 02:07 pm

ينقل اذا وفقك الله ياوهبة ^_^



JAR7
ادارة المنتدى


الجنس : انثى
عدد المساهمات : 2202
التقييم : 290
تاريخ التسجيل : 05/01/2016
اوسمتي : :10:10:10

معاينة صفحة البيانات الشخصي للعضو http://www.t3qnyiat.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف انمار في 06/11/16, 07:30 pm

واو كود كتير حلووو يعطيك الف عافية جرح تسلم ايدك جاري التجربة :9:

انمار

الجنس : انثى
عدد المساهمات : 8
التقييم : 12
تاريخ التسجيل : 05/11/2016

معاينة صفحة البيانات الشخصي للعضو

الرجوع الى أعلى الصفحة اذهب الى الأسفل

استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة

إنشاء حساب أو تسجيل الدخول لتستطيع الرد

تحتاج إلى أن يكون عضوا لتستطيع الرد.

انشئ حساب

يمكنك الانضمام لمنتديات تقنيات فعملية التسجيل سهله !


انشاء حساب جديد

تسجيل الدخول

اذا كنت مسجل معنا فيمكنك الدخول بالضغط هنا


تسجيل الدخول

 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى