منتدى الدعم العربي لمنتديات أحلى منتدى
مرحبا بك في منتدى دعم منتديات AhlaMontada

لتتمكن من الإستمتاع بكافة ما يوفره لك هذا المنتدى من خصائص, يجب عليك أن تسجل الدخول الى حسابك في المنتدى. إن لم يكن لديك حساب بعد, نتشرف بدعوتك لإنشائه.

انشاء منتدى مجاني شبيه بهذا المنتدى
أحلى الشبكات الإجتماعية

انشاء منتدى مجاني



 انشاء منتدى مجاني

أقسام الدعم

دعم الخدمات العامة:
مشاكل كلمة السر
مشاكل فتح المنتدى
مشاكل لوحة الإدارة
مشاكل تنسيق المظهر
المشاكل الأخرى

----------------------

دعم الخدمات التكميلية :
مشاكل النطاقات
مشاكل التومبلايت

----------------------

مراسلة الإدارة :

طلب كلمة السر
إرسال أكواد أو شروحات
أتصل بنا
كيفية طلب كلمة سر جديدة
> طريقة طلب كلمة سر

تنبيه: لا تضع أبداً ايميل الإنشاء في مساهماتك و لا تعطيه لأحد!
المواضيع الأخيرة
أفضل 10 أعضاء في هذا الأسبوع
ahd allah
 
Mohamed Nsr
 
Mr. Mido
 
muslmasan
 
a.sat65
 
DeLeTe
 
MiSho
 
{عذآب}
 
JAR7
 
mustafa ali
 

أفضل الأعضاء الموسومين
@الزعيم
 
@@
 
@stones
 
@Mohamed Nsr
 
@JAR7
 

عمل منتدى

(JAVASCRIPT) تغيير شكل لوحة محرر الألوان في صندوق الكتابة**Mohamed Nsr

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

(JAVASCRIPT) تغيير شكل لوحة محرر الألوان في صندوق الكتابة**Mohamed Nsr

مُساهمة من طرف Mohamed Nsr في الجمعة 13 ديسمبر 2013 - 16:46

 بسم الله الرحمان الر 
والصلاة والسلام على افضل الخلق الله سيدنا محمد عليه افضل الصلاة والسلام 
اليوم اتيت لكم بكود جميل جدا 
الا وهو كود تغيير شكل لوحة محرر الالوان في صندوق الكتابه 
وسيصبح بالشكل التالي:




قبل كل شئ يجب عمل الاتي:

لوحة الاداره>>ادارة عامة>>الرسائل والايميلات>>تشكيل >>نوع لوحة محرر الألوان في صندوق الكتابة :بسيط




الكود الاول يوضع في JAVASCRIPT
لوحة الاداره>>عناصر اضافية>>HTML و JAVASCRIPT>>إدارة أكواد Javascript>>انشاء كود جديد
العنوان * :حسب ما تريد
أضف الكود الى :جميع الصفحات
كود Javascript * :



الرمز:
$(function(){$(function(){
 
  if ($("#text_editor_textarea").length != 0) {
    $.sceditor.command.get('color')._menu  = function (editor, caller, callback) {
      var mColorBasic = [],
        html = $('<div />');
       
// Lista de Colores
     
      mColorBasic["أسود"] = "#000000";
      mColorBasic["ازرق قاتم"] = "#00008B";
      mColorBasic["اخضر قاتم"] = "#006400";
      mColorBasic["نيلي"] = "#4B0082";
      mColorBasic["قرمزي"] = "#DC143C";
      mColorBasic["برتقالي"] = "#FF4500";
      mColorBasic["بني قاتم"] = "#663300";
 
      mColorBasic["رمادي قاتم"] = "#666666";
      mColorBasic["ازرق"] = "#4169E1";
      mColorBasic["سماوي قاتم"] = "#00CED1";
      mColorBasic["اخضر"] = "#008000";
      mColorBasic["ارجواني"] = "#9400D3";
      mColorBasic["احمر"] = "#FF0000";
      mColorBasic["برتقالي فاتح"] = "#FF9933";
      mColorBasic["بني"] = "#A0522D";
 
      mColorBasic["رمادي فاتح"] = "#D3D3D3";
      mColorBasic["ازرق فاتح"] = "#87CEEB";
      mColorBasic["سماوي"] = "#00FFFF";
      mColorBasic["اخضر"] = "#32CD32";
      mColorBasic["ارجواني فاتح"] = "#DA70D6";
      mColorBasic["احمر فاتح"] = "#FA8072";
      mColorBasic["ذهبي"] = "#FFD700";
      mColorBasic["بني فاتح"] = "#CD853F";
 
      mColorBasic["ابيض"] = "#FFFFFF";
      mColorBasic["سماوي فاتح"] = "#AFEEEE";
      mColorBasic["اخضر مزرق"] = "#7FFFD4";
      mColorBasic["اخضر فاتح"] = "#98FB98";
      mColorBasic["وردي"] = "#FFC0CB";
    mColorBasic["اصفر"] = "#FFFF00";
      mColorBasic["اخضر"] = "#DEB887";
     
// Fin de la lista de colores
     
 
     for(key in mColorBasic) html.append('<div class="color-option"
title="' + key + '"><span color="' + mColorBasic[key] + '"
style="background-color: ' + mColorBasic[key] + '
!important;"></span></div>');
     
      html.find('span').click(function(e) {
        callback($(this).attr('color'));
        editor.closeDropDown(true);
        e.preventDefault();
      });
     
      editor.createDropDown(caller, "color-picker", html);
    }   
  }
})});


ملحوظه:يمكنك اضافة الوان زيادة الى القائمة عن طريق الكود التالي:
الرمز:
mColorBasic["اسم اللون"] = "كود اللون";
وطبعا يمكن وضعه بعد كلمة 
// Lista de Colores
الى
Fin de la lista de colores
بمعني يوضع في اي مكان بين الكلمتين 


ثانيا الكود يوضع في ال CSS
لوحة الاداره>>مظهر المنتدى>>الصور والالوان>>الوان>>ورقة تصميم ال CSS 
الرمز:
/* تغيير شكل لوحة محرر الألوان في صندوق الكتابة**Mohamed Nsr */
.color-option {
display: inline-block !important;
width: 15px !important;  /* Ancho del icono del color */
height: 15px !important;  /* Altura del icono del color */
border: 2px solid #fff !important;  /* Color del borde del color */
margin: 3px !important;   /* Espacio entre cada icono */
box-shadow: 0 0 2px #778899;   /* Sombras */
cursor: pointer !important;
}
.color-option span{
display: block !important;
width: 15px !important;  /* Anchor del icono del color */
height: 15px !important;  /* Altura del icono del color */
}
.color-option, .color-option span {
border-radius: 2px;  /* Redondeado */  
}
 
/* تغيير شكل لوحة محرر الألوان في صندوق الكتابة**Mohamed Nsr */
.sceditor-dropdown.sceditor-color-picker {
width: 200px !important;  /* Ancho del icono del color */
height: 100px !important;  /* Ancho del icono del color */
padding: 5px !important;
border-radius: 5px !important;
}
منقول للافادة 


وبها قد انتهى الشرح 
 
تحياتي 
Mohamed Nsr
فريق المساعدة




عدل سابقا من قبل Mohamed Nsr في الجمعة 13 ديسمبر 2013 - 16:58 عدل 1 مرات

Mohamed Nsr
أحلى إشراف
أحلى  إشراف

ذكر
عدد المساهمات : 12749
معدل النشاط : 12323

http://help.ahlamontada.com/forum

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

(JAVASCRIPT) كود تغيير شكل المحرر في الصندوق الماسي ***Mohamed Nsr

مُساهمة من طرف Mohamed Nsr في الإثنين 16 ديسمبر 2013 - 10:53

بسم الله الرحمان الر
والصلاة والسلام على افضل الخلق سيدنا محمد عليه افضل الصلاة والسلام 
اما بعد 
اليوم اتيت لكم بكود جميل جدا الا وهو تغيير شكل محرر الالوان 
في الصندوق الماسي
صورة للكود بعد الوضع 



الان طريقة وضع الكود 
اولا في الجافا
لوحة الاداره>>عناصر اضافيه>>HTML و JAVASCRIPT>>إدارة أكواد Javascript>>انشاء كود جديد
العنوان:كما تريد
اضف الكود الى:جميع الصفحات
كود Javascript * :
الرمز:

$(function(){$(function(){

        if ($("#text_editor_textarea").length != 0) {

            var lista5ColoresPorGama = [];

            //################### ZONA EDITABLE ###################################################################################

            lista5ColoresPorGama["ffffff"] = ["f2f2f2", "d8d8d8", "bfbfbf", "a5a5a5", "7f7f7f"];
            lista5ColoresPorGama["000000"] = ["7f7f7f", "595959", "3f3f3f", "262626", "0c0c0c"];
            lista5ColoresPorGama["eeece1"] = ["ddd9c3", "c4bd97", "938953", "494429", "1d1b10"];
            lista5ColoresPorGama["1f497d"] = ["c6d9f0", "8db3e2", "548dd4", "17365d", "0f243e"];
            lista5ColoresPorGama["4f81bd"] = ["dbe5f1", "b8cce4", "95b3d7", "366092", "244061"];
            lista5ColoresPorGama["c0504d"] = ["f2dcdb", "e5b9b7", "d99694", "953734", "632423"];
            lista5ColoresPorGama["9bbb59"] = ["ebf1dd", "d7e3bc", "c3d69b", "76923c", "4f6128"];
            lista5ColoresPorGama["8064a2"] = ["e5e0ec", "ccc1d9", "b2a2c7", "5f497a", "3f3151"];
            lista5ColoresPorGama["4bacc6"] = ["dbeef3", "b7dde8", "92cddc", "31859b", "205867"];
            lista5ColoresPorGama["f79646"] = ["fdeada", "fbd5b5", "fac08f", "e36c09", "974806"];

            var lista10ColoresBasicos = ["c00000", "ff0000", "ffc000", "ffff00", "92d050", "00b050", "00b0f0", "0070c0", "002060", "7030a0"];

            //################### FIN ZONA EDITABLE ################################################################################

            $.sceditor.command.get('color')._dropDown = $.sceditor.command.get('color')._menu = 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 coloresGama = "";
                    for (var col = 0; col < 5; col++) {
                        for (key in lista5ColoresPorGama) {
                            if (lista5ColoresPorGama[key][col]) coloresGama += lista5ColoresPorGama[key][col] + ",";
                        }
                    }
                    coloresGama = coloresGama.substring(0, coloresGama.length - 1);
                    var htmlGen = [pre, Object.keys(lista5ColoresPorGama).toString().split(',').join(suf + pre), suf].join('');
                    var htmlList = [pre, coloresGama.split(',').join(suf + pre), suf].join('');
                    var htmlStandard = [pre, lista10ColoresBasicos.toString().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);
            }
        }
    })
});
 


ثانيا في اكواد ال css 
لوحة الاداره>>مظهر المنتدى>>الصور والالوان>>الوان>>ورقة تصميم ال css 
وضع الكود التالي:
الرمز:
/* Mohamed Nsrكود تغيير شكل محرر الالوان*/
.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;
}
/*انتهاء الكود Mohamed Nsr*/

منقول للافادة



وبهذا قد انتهى الشرح
بالتوفيق ليكم

تحياتي
[Mohamed Nsr]
فريق المساعدة

Mohamed Nsr
أحلى إشراف
أحلى  إشراف

ذكر
عدد المساهمات : 12749
معدل النشاط : 12323

http://help.ahlamontada.com/forum

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

(JAVASCRIPT) كود اضافة زر الالوان في صندوق الماسي**Mohamed Nsr

مُساهمة من طرف Mohamed Nsr في الإثنين 16 ديسمبر 2013 - 12:02

بسم الله الرحمان الر
والصلاة والسلام على افضل الخلق سيدنا محمد عليه افضل الصلاة والسلام
اما بعد
اليوم اتيت لكم بكود جميل جدا الا وهو تغيير شكل محرر الالوان
في الصندوق الماسي
صورة للكود بعد الوضع



الان طريقة وضع الكود
اولا في الجافا
لوحة الاداره>>عناصر اضافيه>>HTML و JAVASCRIPT>>إدارة أكواد Javascript>>انشاء كود جديد
العنوان:كما تريد
اضف الكود الى:جميع الصفحات
كود Javascript * :

الرمز:
var skin_color_picker = "light"; // Cambiar a "dark" si se prefiere oscuro.
/**
 *
 * Color picker
 * Author: Stefan Petre www.eyecon.ro
 *
 * Dual licensed under the MIT and GPL licenses
 *
 */
 $(function(){$(function(){$("#text_editor_textarea").length!=0&&(function(e){var t=function(){var t=65,n={eventName:"click",onShow:function(){},onBeforeShow:function(){},onHide:function(){},onChange:function(){},onSubmit:function(){},color:"ff0000",livePreview:!0,skin:"light",flat:!1},r=function(t,n){var r=D(t);e(n).data("colorpicker").fields.eq(1).val(r.r).end().eq(2).val(r.g).end().eq(3).val(r.b).end()},i=function(t,n){e(n).data("colorpicker").fields.eq(4).val(t.h).end().eq(5).val(t.s).end().eq(6).val(t.b).end()},s=function(t,n){e(n).data("colorpicker").fields.eq(0).val(P(D(t))).end()},o=function(t,n){e(n).data("colorpicker").selector.css("backgroundColor","#"+P(D({h:t.h,s:100,b:100})));e(n).data("colorpicker").selectorIndic.css({left:parseInt(150*t.s/100,10),top:parseInt(150*(100-t.b)/100,10)})},u=function(t,n){e(n).data("colorpicker").hue.css("top",parseInt(150-150*t.h/360,10))},a=function(t,n){e(n).data("colorpicker").currentColor.css("backgroundColor","#"+P(D(t)))},f=function(t,n){e(n).data("colorpicker").newColor.css("backgroundColor","#"+P(D(t)))},l=function(n){n=n.charCode||n.keyCode||-1;if(n>t&&n<=90||n==32)return!1;e(this).parent().parent().data("colorpicker").livePreview===!0&&h.apply(this)},h=function(t){var n=e(this).parent().parent(),a;if(this.parentNode.className.indexOf("_hex")>0){a=n.data("colorpicker");var l=this.value,h=6-l.length;if(h>0){for(var p=[],d=0;d<h;d++)p.push("0");p.push(l);l=p.join("")}l=_(M(l));a.color=a=l}else this.parentNode.className.indexOf("_hsb")>0?n.data("colorpicker").color=a=O({h:parseInt(n.data("colorpicker").fields.eq(4).val(),10),s:parseInt(n.data("colorpicker").fields.eq(5).val(),10),b:parseInt(n.data("colorpicker").fields.eq(6).val(),10)}):(a=n.data("colorpicker"),l={r:parseInt(n.data("colorpicker").fields.eq(1).val(),10),g:parseInt(n.data("colorpicker").fields.eq(2).val(),10),b:parseInt(n.data("colorpicker").fields.eq(3).val(),10)},a.color=a=_({r:Math.min(255,Math.max(0,l.r)),g:Math.min(255,Math.max(0,l.g)),b:Math.min(255,Math.max(0,l.b))}));t&&(r(a,n.get(0)),s(a,n.get(0)),i(a,n.get(0)));o(a,n.get(0));u(a,n.get(0));f(a,n.get(0));n.data("colorpicker").onChange.apply(n,[a,P(D(a)),D(a)])},p=function(){e(this).parent().parent().data("colorpicker").fields.parent().removeClass("colorpicker_focus")},d=function(){t=this.parentNode.className.indexOf("_hex")>0?70:65;e(this).parent().parent().data("colorpicker").fields.parent().removeClass("colorpicker_focus");e(this).parent().addClass("colorpicker_focus")},v=function(t){var n=e(this).parent().find("input").focus(),t={el:e(this).parent().addClass("colorpicker_slider"),max:this.parentNode.className.indexOf("_hsb_h")>0?360:this.parentNode.className.indexOf("_hsb")>0?100:255,y:t.pageY,field:n,val:parseInt(n.val(),10),preview:e(this).parent().parent().data("colorpicker").livePreview};e(document).bind("mouseup",t,g);e(document).bind("mousemove",t,m)},m=function(e){e.data.field.val(Math.max(0,Math.min(e.data.max,parseInt(e.data.val+e.pageY-e.data.y,10))));e.data.preview&&h.apply(e.data.field.get(0),[!0]);return!1},g=function(t){h.apply(t.data.field.get(0),[!0]);t.data.el.removeClass("colorpicker_slider").find("input").focus();e(document).unbind("mouseup",g);e(document).unbind("mousemove",m);return!1},y=function(){var t={cal:e(this).parent(),y:e(this).offset().top};t.preview=t.cal.data("colorpicker").livePreview;e(document).bind("mouseup",t,w);e(document).bind("mousemove",t,b)},b=function(e){h.apply(e.data.cal.data("colorpicker").fields.eq(4).val(parseInt(360*(150-Math.max(0,Math.min(150,e.pageY-e.data.y)))/150,10)).get(0),[e.data.preview]);return!1},w=function(t){r(t.data.cal.data("colorpicker").color,t.data.cal.get(0));s(t.data.cal.data("colorpicker").color,t.data.cal.get(0));e(document).unbind("mouseup",w);e(document).unbind("mousemove",b);return!1},E=function(){var t={cal:e(this).parent(),pos:e(this).offset()};t.preview=t.cal.data("colorpicker").livePreview;e(document).bind("mouseup",t,x);e(document).bind("mousemove",t,S)},S=function(e){h.apply(e.data.cal.data("colorpicker").fields.eq(6).val(parseInt(100*(150-Math.max(0,Math.min(150,e.pageY-e.data.pos.top)))/150,10)).end().eq(5).val(parseInt(100*Math.max(0,Math.min(150,e.pageX-e.data.pos.left))/150,10)).get(0),[e.data.preview]);return!1},x=function(t){r(t.data.cal.data("colorpicker").color,t.data.cal.get(0));s(t.data.cal.data("colorpicker").color,t.data.cal.get(0));e(document).unbind("mouseup",x);e(document).unbind("mousemove",S);return!1},T=function(){e(this).addClass("colorpicker_focus")},N=function(){e(this).removeClass("colorpicker_focus")},C=function(t){var n=e(this).parent(),r=n.data("colorpicker").color;n.data("colorpicker").origColor=r;a(r,n.get(0));n.data("colorpicker").onSubmit(r,P(D(r)),D(r),n.data("colorpicker").el,t);e(this).parent().hide()},k=function(){var t=e("#"+e(this).data("colorpickerId"));t.data("colorpicker").onBeforeShow.apply(this,[t.get(0)]);var n=e(this).offset(),r;r=document.compatMode=="CSS1Compat";r={l:window.pageXOffset||(r?document.documentElement.scrollLeft:document.body.scrollLeft),t:window.pageYOffset||(r?document.documentElement.scrollTop:document.body.scrollTop),w:window.innerWidth||(r?document.documentElement.clientWidth:document.body.clientWidth),h:window.innerHeight||(r?document.documentElement.clientHeight:document.body.clientHeight)};var i=n.top+this.offsetHeight,n=n.left;i+176>r.t+r.h&&(i-=this.offsetHeight+176);n+356>r.l+r.w&&(n-=356);t.css({left:n+"px",top:i+"px"});t.data("colorpicker").onShow.apply(this,[t.get(0)])!=!1&&t.show("fast");e(document).bind("mousedown",{cal:t},L);return!1},L=function(t){A(t.data.cal.get(0),t.target,t.data.cal.get(0))||(t.data.cal.data("colorpicker").onHide.apply(this,[t.data.cal.get(0)])!=!1&&t.data.cal.hide(),e(document).unbind("mousedown",L))},A=function(e,t,n){if(e==t)return!0;if(e.contains)return e.contains(t);if(e.compareDocumentPosition)return!!(e.compareDocumentPosition(t)&16);for(t=t.parentNode;t&&t!=n;){if(t==e)return!0;t=t.parentNode}return!1},O=function(e){return{h:Math.min(360,Math.max(0,e.h)),s:Math.min(100,Math.max(0,e.s)),b:Math.min(100,Math.max(0,e.b))}},M=function(e){e=parseInt(e.indexOf("#")>-1?e.substring(1):e,16);return{r:e>>16,g:(e&65280)>>8,b:e&255}},_=function(e){var t={h:0,s:0,b:0},n=Math.max(e.r,e.g,e.b),r=n-Math.min(e.r,e.g,e.b);t.b=n;t.s=n!=0?255*r/n:0;t.h=t.s!=0?e.r==n?(e.g-e.b)/r:e.g==n?2+(e.b-e.r)/r:4+(e.r-e.g)/r:-1;t.h*=60;t.h<0&&(t.h+=360);t.s*=100/255;t.b*=100/255;return t},D=function(e){var t={},n=Math.round(e.h),r=Math.round(e.s*255/100),e=Math.round(e.b*255/100);if(r==0)t.r=t.g=t.b=e;else{var r=(255-r)*e/255,i=(e-r)*(n%60)/60;n==360&&(n=0);n<60?(t.r=e,t.b=r,t.g=r+i):n<120?(t.g=e,t.b=r,t.r=e-i):n<180?(t.g=e,t.r=r,t.b=r+i):n<240?(t.b=e,t.r=r,t.g=e-i):n<300?(t.b=e,t.g=r,t.r=r+i):n<360?(t.r=e,t.g=r,t.b=e-i):(t.r=0,t.g=0,t.b=0)}return{r:Math.round(t.r),g:Math.round(t.g),b:Math.round(t.b)}},P=function(t){var n=[t.r.toString(16),t.g.toString(16),t.b.toString(16)];e.each(n,function(e,t){t.length==1&&(n[e]="0"+t)});return n.join("")},H=function(){var t=e(this).parent(),n=t.data("colorpicker").origColor;t.data("colorpicker").color=n;r(n,t.get(0));s(n,t.get(0));i(n,t.get(0));o(n,t.get(0));u(n,t.get(0));f(n,t.get(0))};return{init:function(t){t=e.extend({},n,t||{});if(typeof t.color=="string")t.color=_(M(t.color));else if(t.color.r!=void 0&&t.color.g!=void 0&&t.color.b!=void 0)t.color=_(t.color);else if(t.color.h!=void 0&&t.color.s!=void 0&&t.color.b!=void 0)t.color=O(t.color);else return this;return this.each(function(){if(!e(this).data("colorpickerId")){var n=e.extend({},t);n.origColor=t.color;var m="collorpicker_"+parseInt(Math.random()*1e3);e(this).data("colorpickerId",m);m=e('<div class="sceditor-dropdown colorpicker '+n.skin+'"><div class="colorpicker_color"><div><div></div></div></div><div class="colorpicker_hue"><div></div></div><div class="colorpicker_new_color"></div><div class="colorpicker_current_color"></div><div class="colorpicker_hex"><input type="text" maxlength="6" size="6" /></div><div class="colorpicker_rgb_r colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_rgb_g colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_rgb_b colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_h colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_s colorpicker_field"><input type="text" size="3" /><span></span></div><div class="colorpicker_hsb_b colorpicker_field"><input type="text" size="3" /><span></span></div><div class="colorpicker_submit"></div></div>').attr("id",m);n.flat?m.appendTo(this).show("fast"):m.appendTo(document.body);n.fields=m.find("input").bind("keyup",l).bind("change",h).bind("blur",p).bind("focus",d);m.find("span").bind("mousedown",v).end().find(">div.colorpicker_current_color").bind("click",H);n.selector=m.find("div.colorpicker_color").bind("mousedown",E);n.selectorIndic=n.selector.find("div div");n.el=this;n.hue=m.find("div.colorpicker_hue div");m.find("div.colorpicker_hue").bind("mousedown",y);n.newColor=m.find("div.colorpicker_new_color");n.currentColor=m.find("div.colorpicker_current_color");m.data("colorpicker",n);m.find("div.colorpicker_submit").bind("mouseenter",T).bind("mouseleave",N).bind("click",C);r(n.color,m.get(0));i(n.color,m.get(0));s(n.color,m.get(0));u(n.color,m.get(0));o(n.color,m.get(0));a(n.color,m.get(0));f(n.color,m.get(0));n.flat?m.css({position:"relative",display:"block"}):e(this).bind(n.eventName,k)}})},showPicker:function(){return this.each(function(){e(this).data("colorpickerId")&&k.apply(this)})},hidePicker:function(){return this.each(function(){e(this).data("colorpickerId")&&e("#"+e(this).data("colorpickerId")).hide()})},setColor:function(t){if(typeof t=="string")t=_(M(t));else if(t.r!=void 0&&t.g!=void 0&&t.b!=void 0)t=_(t);else if(t.h!=void 0&&t.s!=void 0&&t.b!=void 0)t=O(t);else return this;return this.each(function(){if(e(this).data("colorpickerId")){var n=e("#"+e(this).data("colorpickerId"));n.data("colorpicker").color=t;n.data("colorpicker").origColor=t;r(t,n.get(0));i(t,n.get(0));s(t,n.get(0));u(t,n.get(0));o(t,n.get(0));a(t,n.get(0));f(t,n.get(0))}})}}}();e.fn.extend({ColorPicker:t.init,ColorPickerHide:t.hidePicker,ColorPickerShow:t.showPicker,ColorPickerSetColor:t.setColor})}(jQuery),$('<a class="sceditor-button sceditor-button-paletaavanzada" unselectable="on" title="لون خط الكتابة"><div unselectable="on" style="cursor: pointer !important; opacity: 1 !important; background-image:url(http://i83.servimg.com/u/f83/17/45/19/77/color_10.png)"></div></a>').insertAfter(".sceditor-button-color").ColorPicker({color:my_getcookie("defColCP")?my_getcookie("defColCP"):"#000000",flat:false,skin:skin_color_picker,onSubmit:function(e,t,n,r){my_setcookie("defColCP",t,1,0);var i=$("#text_editor_textarea").sceditor("instance");i.inSourceMode()?i.insertText("[color=#"+t+"]","[/color]"):i.execCommand("forecolor","#"+t);return!1}}))})});



ثانيا في اكواد ال css 
لوحة الاداره>>مظهر المنتدى>>الصور والالوان>>الوان>>ورقة تصميم ال css 
وضع الكود التالي:
الرمز:
/*Mohamed Nsr كود اضافة زر الالوان في الصندوق الماسي*/

.colorpicker {
   width: 356px;
   height: 176px;
   overflow: hidden;
   position: absolute;
   background: url(http://im38.gulfup.com/rxrjB.jpg) !important;
   font-family: Arial, Helvetica, sans-serif;
   display: none;
   padding: 0 !important;    
}
.colorpicker.dark{
 background: url(http://im35.gulfup.com/Vliab.jpg) !important;
}
.colorpicker_color {
   width: 150px;
   height: 150px;
   left: 14px;
   top: 13px;
   position: absolute;
   background: #f00;
   overflow: hidden;
   cursor: crosshair;
}
.colorpicker_color div {
   position: absolute;
   top: 0;
   left: 0;
   width: 150px;
   height: 150px;
   background: url(http://i83.servimg.com/u/f83/17/45/19/77/colorp10.png);
}
.colorpicker_color div div {
   position: absolute;
   top: 0;
   left: 0;
   width: 11px;
   height: 11px;
   overflow: hidden;
   background: url(http://i83.servimg.com/u/f83/17/45/19/77/colorp10.gif);
   margin: -5px 0 0 -5px;
}
.colorpicker_hue {
   position: absolute;
   top: 13px;
   left: 171px;
   width: 35px;
   height: 150px;
   cursor: n-resize;
}
.colorpicker_hue div {
   position: absolute;
   width: 35px;
   height: 9px;
   overflow: hidden;
   background: url(http://i83.servimg.com/u/f83/17/45/19/77/colorp11.gif) left top;
   margin: -4px 0 0 0;
   left: 0px;
}
.colorpicker_new_color {
   position: absolute;
   width: 60px;
   height: 30px;
   left: 213px;
   top: 13px;
   background: #f00;
}
.colorpicker_current_color {
   position: absolute;
   width: 60px;
   height: 30px;
   left: 283px;
   top: 13px;
   background: #f00;
}
.colorpicker input {
   background-color: transparent;
   border: 1px solid transparent;
   position: absolute;
   font-size: 10px;
   font-family: Arial, Helvetica, sans-serif;
   color: #898989;
   top: 4px;
   right: 11px;
   text-align: right;
   margin: 0;
   padding: 0 !important;
   height: 11px;
}
.colorpicker_hex {
   position: absolute;
   width: 72px;
   height: 22px;
   background: url(http://i83.servimg.com/u/f83/17/45/19/77/custom11.png) top;
   left: 212px;
   top: 142px;
}
.colorpicker.dark .colorpicker_hex {
   background: url(http://i83.servimg.com/u/f83/17/45/19/77/colorp11.png) top;
}
.colorpicker_hex input {
   right: 6px;
}
.colorpicker_field {
   height: 22px;
   width: 62px;
   background-position: top;
   position: absolute;
}
.colorpicker_field span {
   position: absolute;
   width: 12px;
   height: 22px;
   overflow: hidden;
   top: 0;
   right: 0;
   cursor: n-resize;
}
.colorpicker_rgb_r {
   background-image: url(http://i83.servimg.com/u/f83/17/45/19/77/custom12.png);
   top: 52px;
   left: 212px;
}
.colorpicker.dark .colorpicker_rgb_r{
 background-image: url(http://i83.servimg.com/u/f83/17/45/19/77/colorp12.png);
}
.colorpicker_rgb_g {
   background-image: url(http://i83.servimg.com/u/f83/17/45/19/77/custom13.png);
   top: 82px;
   left: 212px;
}
.colorpicker.dark .colorpicker_rgb_g {
 background-image: url(http://i83.servimg.com/u/f83/17/45/19/77/colorp13.png);
}
.colorpicker_rgb_b {
   background-image: url(http://i83.servimg.com/u/f83/17/45/19/77/custom14.png);
   top: 112px;
   left: 212px;
}
.colorpicker.dark .colorpicker_rgb_b {
 background-image: url(http://i83.servimg.com/u/f83/17/45/19/77/colorp14.png);
}
.colorpicker_hsb_h, .colorpicker_hsb_s, .colorpicker_hsb_b {
 display: none;
}
.colorpicker_submit {
 position: absolute;
    background: url("http://i83.servimg.com/u/f83/17/45/19/77/accept10.png") no-repeat;
    cursor: pointer;
    right: 10px;
 width: 48px;
 height: 50px;
    top: 118px;  
 overflow: hidden;
}
.colorpicker_focus {
   background-position: center;
}
.colorpicker_hex.colorpicker_focus {
   background-position: bottom;
}
.colorpicker_submit.colorpicker_focus {
   background-position: bottom;
}
.colorpicker_slider {
   background-position: bottom;
}
.colorpicker { z-index: 3; }
/*انتهاء الكود Mohamed Nsr*/


ملحوظه:يمكنك حذف الزر الاصلي لاختيار الالوان الموجود في الصندوق الماسي()
عن طريق الكود التالي :
يوضع الكود في:
لوحة الاداره>>عناصر اضافيه>>HTML و JAVASCRIPT>>إدارة أكواد Javascript>>انشاء كود جديد
العنوان:كما تريد
اضف الكود الى:جميع الصفحات
كود Javascript * :
الرمز:
$(function(){$(function(){
      $(".sceditor-button-color").hide();
})});
منقول للافادة


وبهذا قد انتهى الشرح
بالتوفيق ليكم

تحياتي
[Mohamed Nsr]
فريق المساعدة

Mohamed Nsr
أحلى إشراف
أحلى  إشراف

ذكر
عدد المساهمات : 12749
معدل النشاط : 12323

http://help.ahlamontada.com/forum

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

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

- مواضيع مماثلة

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