المعلومات | الكاتب: | | اللقب: | المشرف العام | الرتبه: | | الصورة الرمزية | | البيانات | الجنس : | | عدد المساهمات : | 215 | السٌّمعَة : | 11 | تاريخ التسجيل : | 08/12/2014 | الموقع : | بيت الجزائر لكل العرب |
الإتصالات | الحالة: | | وسائل الإتصال: | |
| موضوع: اكواد تغيير مظهر صندوق الرد و ارسال الموضوع حصريا هنا الخميس 21 أبريل 2016 - 14:20 |
|
اكواد تغيير مظهر صندوق الرد و ارسال الموضوع حصريا هنامثال بسيط مع بعض التغييرات لصندوف الرد السريع
مثال بسيط مع بعض التغييرات لموضوع جديد
تغيير الرد السريع : - الكود:
-
/*--- Bloc réponse rapide ---*/ .sceditor-container.ltr.sourceMode { width:550px !important; background-color: #XXXXXX !important; } .sceditor-container.ltr.wysiwygMode { width:550px !important; background-color: #XXXXXX !important; } مع تغيير ما يناسبك :كود اللون :# XXXXXXالعرض : width: 550px2 - تغيير الجزء أعلى الصندوق : - الكود:
-
/*--- Partie supérieur contenant les outils ---*/ div.sceditor-toolbar { background-color: #XXXXXX !important; width: 540px !important; } كود اللون :# XXXXXXالعرض : width: 540px3 - تغيير منطقة النص: - الكود:
-
/*--- Partie texte area : fond ---*/ .sceditor-container iframe, .sceditor-container textarea { background-color: #XXXXXX !important; text-align:justify; margin:0 !important; line-height: 16px; width: 540px !important; color: #XXXXXX !important; font-size:11px !important; } كود اللون :# XXXXXXالعرض : width: 540px4 - تغيير محموعة الازرار : - الكود:
-
/*--- Groupe de boutons ---*/ div.sceditor-group { background-color: #XXXXXX !important; } كود اللون :# XXXXXX5 - تغيير الازرار: - الكود:
-
/*--- Boutons ---*/ a.sceditor-button { ... } كود اللون : ...6 - تغيير الازرار المختارة - الكود:
-
/*--- Boutons sélectionnés ---*/ a.sceditor-button.hover { background-color: #XXXXXX !important; } كود اللون :# XXXXXX7 - تغيير حجم الوجوه الضاحكة: - الكود:
-
/*--- Smileys ---*/ .sceditor-emoticons { width: 350px !important; height: 250px !important; overflow: auto !important; } img.smiley { width: auto !important; height : auto !important; } 8 - تغيير عرض الصندوق - الكود:
-
/* largeur de l'éditeur */ .sceditor-container { width: 710px!important; } /* largeur de la zone de saisie de texte */ .sceditor-container iframe, .sceditor-container textarea { width: 99%!important; } width: 710px9 - تغيير ألوان الخلفية : - الكود:
-
/* fond de la barre d'outil */ .sceditor-toolbar { background: blue !important; } /* fond de la zone de saisie de texte */ .sceditor-container{ background-color:#A4A440 !important; } .sceditor-container iframe, .sceditor-container textarea{ background-color:#A4A440 !important; } /* fond de groupe de bouton */ body div.sceditor-group { background: orange; } /* fond d'un bouton survolé ou activé */ .sceditor-button.hover, a.sceditor-button:hover { background: purple; } هنا يتم تغيير أكواد الالوان الموجودة في الكود10 - حذف الحدود و الظلال - الكود:
-
/* bordure de l'éditeur */ div.sceditor-container { border: none; } /* bordure entre la barre d'outils et la zone de saisie de texte */ body div.sceditor-toolbar { border-bottom: none; } /* bordure sous les groupes de bouton */ body div.sceditor-group { border-bottom: none; } /* ombre d'un bouton survolé ou activé */ a.sceditor-button:hover, a.sceditor-button.hover { box-shadow: none; } 11 - تقليل الوجوه الضاحكة: - الكود:
-
/* limitation de la taille du cadre des smileys */ .sceditor-emoticons { max-width: 350px !important; max-height: 250px !important; overflow: auto !important; text-align: center; } .sceditor-emoticons div { display: inline!important; } /* taille maximum de 40 pixels */ img.smiley { width: auto !important; height : auto !important; vertical-align: middle; max-width: 40px; max-height: 40px; } 12 - حذف الازدزاجية في الوجوه الضاحكة و ذات صلة:الكود يوضع في الجافا سكريبت - الكود:
-
$(function(){ $(function() { $(".sceditor-button-emoticon").click(function() { $(".smiley").unbind("hover") }) })}); 13 - تغيير اللون في طريقة wysiwygالكود يوضع في الجدافا سكريبت - الكود:
-
$(function() { var a = $("#text_editor_textarea"); 0 != a.length && $(function() { a.sceditor && a.sceditor("instance") && a.sceditor("instance").css("body,p{color:red}"); }); }); 14 - وضع تحديد اللون مع لون أقل: - الكود:
-
$(function () { $(function () { if(!$.fn["sceditor"]) return; $.sceditor.command.get('color')._dropDown = function (editor, caller, callback) { var content = $("<div />"), cmd = $.sceditor.command.get('color'); if (!cmd._htmlCache) { var pre = '<strong style="background-color:#', suf = ';" unselectable="on"><span></span></strong>'; var htmlGen = [pre, 'ffffff,000000,eeece1,1f497d,4f81bd,c0504d,9bbb59,8064a2,4bacc6,f79646'.split(',').join(suf + pre), suf].join(''); var htmlList = [pre, 'f2f2f2,7f7f7f,ddd9c3,c6d9f0,dbe5f1,f2dcdb,ebf1dd,e5e0ec,dbeef3,fdeada,d8d8d8,595959,c4bd97,8db3e2,b8cce4,e5b9b7,d7e3bc,ccc1d9,b7dde8,fbd5b5,bfbfbf,3f3f3f,938953,548dd4,95b3d7,d99694,c3d69b,b2a2c7,92cddc,fac08f,a5a5a5,262626,494429,17365d,366092,953734,76923c,5f497a,31859b,e36c09,7f7f7f,0c0c0c,1d1b10,0f243e,244061,632423,4f6128,3f3151,205867,974806'.split(',').join(suf + pre), suf].join(''); var htmlStandard = [pre, 'c00000,ff0000,ffc000,ffff00,92d050,00b050,00b0f0,0070c0,002060,7030a0'.split(',').join(suf + pre), suf].join(''); var htmlGeneralPanel = ['<div class="editor_color_panel" style="z-index:12;" unselectable="on"><div class="color_general" unselectable="on">', htmlGen, '</div><div class="color_list" unselectable="on">', htmlList, '</div><div class="color_standard" unselectable="on">', htmlStandard, '</div></div>'].join(''); cmd._htmlCache = htmlGeneralPanel; } content.append(cmd._htmlCache) .find('strong') .click(function (e) { callback($(this).attr('style').substr(17, 7)); editor.closeDropDown(true); e.preventDefault(); }); editor.createDropDown(caller, "color-picker", content); }; }) }); ثم سجل و ضع الكود التالي في الورقة : - الكود:
-
.editor_color_panel{ background-color:#fff; width:189px;height:135px; } .editor_color_panel .color_general{ height:16px; margin:11px 7px 9px 11px; } .editor_color_panel .color_list{ height:70px; margin:0 7px 0 11px; } .editor_color_panel .color_standard{ height:16px; margin:13px 7px 8px 11px; } .editor_color_panel strong{ font-size:0; display:block; width:14px; height:14px; margin-right:3px; float:left; cursor:pointer; } 15 - و هذا الكود النهائي للتعديل على سبيل المثال: - الكود:
-
/*--- Bloc réponse rapide ---*/ .sceditor-container.ltr.sourceMode {width:550px !important; background-color: #XXXXXX !important;} .sceditor-container.ltr.wysiwygMode {width:550px !important; background-color: #XXXXXX !important;} /*--- Partie supérieur contenant les outils ---*/ div.sceditor-toolbar { background-color: #XXXXXX !important; width: 540px !important; } /*--- Partie texte area : fond ---*/ .sceditor-container iframe, .sceditor-container textarea { background-color: #XXXXXX !important; text-align:justify; margin:0 !important; line-height: 16px; width: 540px !important; color: #XXXXXX !important; font-size:11px !important; } /*--- Groupe de boutons ---*/ div.sceditor-group { background-color: #XXXXXX !important; } /*--- Boutons ---*/ a.sceditor-button { } /*--- Boutons sélectionnés ---*/ a.sceditor-button.hover { background-color: #XXXXXX !important; } /*--- Smileys ---*/ .sceditor-emoticons {width: 350px !important; height: 250px !important; overflow: auto !important;} img.smiley {width: auto !important; height : auto !important;} ملاحظة : الاكواد مقتبسة من منتدى أجنبي و من شرحي الخاص و لانحل نقل الاكواد دون تقدير و شكر و ذكر للمصدر |
|