منطقة الاعضاء


كلمة الادارة
تم بإذن الله فتح التبادل الاعلاني مع منتديات بيت الجزائر لكل العرب ، فلمن يهمه الامر يضع طلبه في القسم الخاص بالتبادل مح وصف المنتدى
 

أهلا وسهلا بك إلى بيت الجزائر لكل العرب.

الرئيسيةس .و .جبحـثالتسجيلدخول

بيت الجزائر لكل العرب


مرحبا بك عزيزى الزائر فى بيت الجزائر لكل العرب.

أهلا وسهلا بك زائرنا الكريم، إذا كانت هذه زيارتك الأولى للمنتدى، فيرجى التكرم بزيارة صفحة التعليمـــات، بالضغط هنا. كما يشرفنا أن تقوم بالتسجيل بالضغط هنا إذا رغبت بالمشاركة في المنتدى، أما إذا رغبت بقراءة المواضيع والإطلاع فتفضل بزيارة القسم الذي ترغب أدناه

بيت الجزائر لكل العرب

اسم الموضوع: css جعل صورة العضو دائري بجوار اخر مساهمةالخميس 4 أكتوبر 2018 - 16:49 من طرفخادم الاسلام اسم الموضوع: [JAVASCRIPT]+[CSS] حصريا صندوق الرد الاحترافي الجديد {Weeb-Editor} 2017الخميس 4 أكتوبر 2018 - 16:30 من طرفخادم الاسلام اسم الموضوع: حصرياً كود [Css] لوضع عبارة تم إظهار المحتوى المخفى الخميس 4 أكتوبر 2018 - 16:03 من طرفخادم الاسلام اسم الموضوع: الكود الحصري جدا إطار احترافي على صندوق الاكواد في المواضيع مع مميزات لن تجدها الا هناالخميس 4 أكتوبر 2018 - 16:03 من طرفخادم الاسلام اسم الموضوع: [حصري][HTML] القنبلة الحصرية علبة الدردشة المتطورة لعام 2017الخميس 4 أكتوبر 2018 - 15:20 من طرفخادم الاسلام اسم الموضوع: جديد الاكواد انبثاق روابط المنتدى المميز و النادرالخميس 4 أكتوبر 2018 - 0:16 من طرفخادم الاسلام اسم الموضوع: كود جديد لعمل وصف انيق للصور والروابط والايقونات وكل شئ بالمنتدى 2015الخميس 4 أكتوبر 2018 - 0:06 من طرفخادم الاسلام اسم الموضوع: حصريا و جديد الاكواد تغيير ثيم المنتدى لعدة ألوانالأربعاء 3 أكتوبر 2018 - 23:33 من طرفخادم الاسلام اسم الموضوع: كود أظافة بادئة للمواضيع وختم للموضوعالأربعاء 3 أكتوبر 2018 - 23:32 من طرفخادم الاسلام اسم الموضوع: جديد التومبيلات ترقيم المساهمات للنسخ:Phpbb3 و Phpbb2الأربعاء 3 أكتوبر 2018 - 23:14 من طرفخادم الاسلام اسم الموضوع: تومبيلات لوضع صور الاعضاء في المتواجدون في المنتدى - حصري -الأربعاء 3 أكتوبر 2018 - 23:13 من طرفخادم الاسلام اسم الموضوع: تومبيلات شكل التقييم في المواضيع الاحترافيالأربعاء 3 أكتوبر 2018 - 23:08 من طرفخادم الاسلام

شاطر | 
 

 اكواد تغيير مظهر صندوق الرد و ارسال الموضوع حصريا هنا

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل 
كاتب الموضوعرسالة
المعلومات
الكاتب:
coeurdelion
اللقب:
المشرف العام
الرتبه:
المشرف العام
الصورة الرمزية

avatar

البيانات
الجنس :
ذكر
عدد المساهمات :
215
السٌّمعَة :
9
تاريخ التسجيل :
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:550px
2 - تغيير الجزء أعلى الصندوق :
الكود:
    /*---  Partie supérieur contenant les outils ---*/
    
    div.sceditor-toolbar {
    background-color: #XXXXXX !important;
    width: 540px !important;
    }
كود اللون :#XXXXXX
العرض : width:540px
3 - تغيير منطقة النص:
 
الكود:
 /*---  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:540px

4 - تغيير محموعة الازرار :
الكود:
    /*---  Groupe de boutons ---*/
    
    div.sceditor-group {
    background-color: #XXXXXX !important;
    }
كود اللون :#XXXXXX
5 - تغيير الازرار:
الكود:
    /*---  Boutons ---*/
    
    a.sceditor-button {
    ...
    }
كود اللون :...
6 - تغيير الازرار المختارة
الكود:
    /*---  Boutons sélectionnés ---*/
    
    a.sceditor-button.hover {
    background-color: #XXXXXX !important;
    }
كود اللون :#XXXXXX
7 - تغيير حجم الوجوه الضاحكة:
الكود:
    /*---  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: 710px
9 - تغيير ألوان الخلفية :
الكود:
    /* 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;}
      

ملاحظة : الاكواد مقتبسة من منتدى أجنبي و من شرحي الخاص و لانحل نقل الاكواد دون تقدير و شكر و ذكر للمصدر
الرجوع الى أعلى الصفحة اذهب الى الأسفل
 
اكواد تغيير مظهر صندوق الرد و ارسال الموضوع حصريا هنا
استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة 
شارك هذا الموضوع...
روابط هذا الموضوع
URL:
BBCode:
HTML:
صفحة 1 من اصل 1

هام جداً: قوانين المساهمة في المواضيع. انقر هنا للمعاينة
الرد السريع
صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
بيت الجزائر لكل العرب :: 
دعم منتديات أحلى منتدى
 :: :: اكواد انسيابية | css code
-
انتقل الى:  

منتديات بيت الجزائر لكل العرب

↑ Grab this Headline Animator

© phpBB | Ahlamontada.com | منتدى مجاني للدعم و المساعدة | إتصل بنا | التبليغ عن محتوى مخالف | انشئ مدونتك