شاطر
 

 تغيير شكل لوحة محرر الألوان لمنتديات ahlamontada

اذهب الى الأسفل 
كاتب الموضوعرسالة
moufdi
Admin
Admin
moufdi

الجزائر
firefox
ذكر
عدد المساهمات : 12417
تاريخ التسجيل : 17/03/2009
العمر : 32

تغيير شكل لوحة محرر الألوان لمنتديات ahlamontada Empty
مُساهمةموضوع: تغيير شكل لوحة محرر الألوان لمنتديات ahlamontada   تغيير شكل لوحة محرر الألوان لمنتديات ahlamontada Empty2014-03-27, 11:35

تغيير شكل لوحة محرر الألوان لمنتديات ahlamontada MuSoa


تغيير شكل لوحة محرر الألوان  ' الشكل 1 '

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

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





الكود الاول يوضع في 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);
    }   
  }
})});


ثانيا الكود يوضع في ال 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;
}

يتبع

ستجد في الرد الشكل 2
الرجوع الى أعلى الصفحة اذهب الى الأسفل
https://www.amaltilimsan.net
moufdi
Admin
Admin
moufdi

الجزائر
firefox
ذكر
عدد المساهمات : 12417
تاريخ التسجيل : 17/03/2009
العمر : 32

تغيير شكل لوحة محرر الألوان لمنتديات ahlamontada Empty
مُساهمةموضوع: رد: تغيير شكل لوحة محرر الألوان لمنتديات ahlamontada   تغيير شكل لوحة محرر الألوان لمنتديات ahlamontada Empty2014-03-27, 11:38

تغيير شكل لوحة محرر الألوان لمنتديات ahlamontada WhTp0

تغيير شكل لوحة محرر الألوان  ' الشكل 2 '


الان طريقة وضع الكود 
اولا في الجافا

لوحة الاداره>>عناصر اضافيه>>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*/


يتبع في الرد الشكل 3
الرجوع الى أعلى الصفحة اذهب الى الأسفل
https://www.amaltilimsan.net
moufdi
Admin
Admin
moufdi

الجزائر
firefox
ذكر
عدد المساهمات : 12417
تاريخ التسجيل : 17/03/2009
العمر : 32

تغيير شكل لوحة محرر الألوان لمنتديات ahlamontada Empty
مُساهمةموضوع: رد: تغيير شكل لوحة محرر الألوان لمنتديات ahlamontada   تغيير شكل لوحة محرر الألوان لمنتديات ahlamontada Empty2014-03-27, 11:43

تغيير شكل لوحة محرر الألوان لمنتديات ahlamontada GB7cU


تغيير شكل لوحة محرر الألوان  ' الشكل 3 '


الان طريقة وضع الكود
اولا في الجافا

لوحة الاداره>>عناصر اضافيه>>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*/

انتهى

شكرا لكم على حسن المتابعة و لا تنسو الردود
الرجوع الى أعلى الصفحة اذهب الى الأسفل
https://www.amaltilimsan.net
 
تغيير شكل لوحة محرر الألوان لمنتديات ahlamontada
الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1
 مواضيع مماثلة
-
» صور عمل لوحة فنية جدارية
» اختصارات الكيبورد لوحة المفاتيح
» [ كود ] لوحة المفاتيح العربية Key board Arabic
» تأثير الألوان على الإنسان
» غير حياتك بتغير الألوان

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
منتديات أمل تلمسان :: دعم و تطوير المواقع و المنتديات :: تطوير منتديــ Ahlamontada ــات :: أكواد html/css-
انتقل الى: