منتديات تقنيات
يسعدنا تسجيلكم بالمنتدى اهلا بكم
لقد نسيت كلمة السر
منتديات تقنيات
1 / 4
تقنيات حصرية
2 / 4
اطلب استايلك مجانا
3 / 4
استايلات تومبلايت جديدة
4 / 4
دروس اشهار الموقع



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



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

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

مُساهمة  في 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
ادارة المنتدى


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

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

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

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

مُساهمة  في 11/10/16, 01:10 am

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


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



BAZOKA Libya
عضو نشيط


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

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

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

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

مُساهمة  في 12/10/16, 01:34 pm

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

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

walid dz
عضو نشيط


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

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

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

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

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

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



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


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

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

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

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

مُساهمة  في 12/10/16, 04:46 pm

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

walid dz
عضو نشيط


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

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

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

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

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

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

مممممم



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


الجنس : انثى
عدد المساهمات : 2336
التقييم : 297
تاريخ التسجيل : 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}



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


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


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

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

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

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

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

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



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


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

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

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

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

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

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

انمار

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

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

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

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

مُساهمة  في 31/12/16, 10:04 am

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

Judy
عضو نشيط


الجنس : انثى
عدد المساهمات : 557
التقييم : 22
تاريخ التسجيل : 23/04/2016

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

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

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

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

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

انشئ حساب

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


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

تسجيل الدخول

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


تسجيل الدخول

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