Color picker with more colors Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skinReturn to the skin page

The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.
3 posters

    Color picker with more colors

    Derp-chan
    Derp-chan
    Forumember


    Female Posts : 29
    Reputation : 1
    Language : English

    Solved Color picker with more colors

    Post by Derp-chan December 22nd 2015, 7:19 am

    The extended one is nice, but I'm wondering if it's possible to add one with a slider, I guess is the best way to describe it? Like the one you see when editing a group color on the admin panel.


    Last edited by Derp-chan on January 5th 2016, 4:53 am; edited 1 time in total
    Sir. Mayo
    Sir. Mayo
    Forumember


    Male Posts : 980
    Reputation : 90
    Language : English, Some french.
    Location : you can also reach me on snoonet's irc server. I idle in #Techsupport Username is Vault108

    Solved Re: Color picker with more colors

    Post by Sir. Mayo January 1st 2016, 11:15 am

    Hello I edited Ange Tuters code in this Post some to add more colors
    Add this to your css:
    Code:
            /* Color palette icons */
            .color-option {
              display: inline-block !important;
              width: 15px !important;  /* width of the icon */
              height: 15px !important;  /* height of the icon */
              border: 2px solid #fff !important;  /* white border around the icon */
              margin: 3px !important;  /* space between each icon */
              box-shadow: 0 0 2px #778899;  /* shadow */
              cursor: pointer !important;
            }
           
            .color-option span{
              display: block !important;
              width: 15px !important;  /* width of the icon */
              height: 15px !important;  /* height of the icon */
            }
           
            .color-option, .color-option span {
              border-radius: 2px;  /* roundness */ 
            }
           
            /* Whole palette - the width influences how many icons appear */
            .sceditor-dropdown.sceditor-color-picker {
              width: 200px !important;  /* width of the palette */

              padding: 5px !important;
              border-radius: 5px !important;
            }
    Add this to your Administration Panel > Modules > Javascript codes management > Create a new script

    Title : Color picker
    Placement : In all the pages

    Code:
    $(function(){$(function(){
              if ($("#text_editor_textarea").length < 1) return;
              $.sceditor.command.get('color')._menu  = function (editor, caller, callback) {
                var mColorBasic = [],
                html = $('<div />');
                           
                // begin list of colors
                       
                mColorBasic["Black"] = "#000000";
                mColorBasic["Dark Blue"] = "#00008B";
                mColorBasic["Teal"] = "#008080";
                mColorBasic["Dark Green"] = "#006400";
                mColorBasic["Indigo"] = "#4B0082";
                mColorBasic["Crimson"] = "#DC143C";
                mColorBasic["Orange"] = "#FF4500";
                mColorBasic["Brown"] = "#663300";
                   
                mColorBasic["Dark Gray"] = "#666666";
                mColorBasic["Royal Blue"] = "#4169E1";
                mColorBasic["Dark Turquoise"] = "#00CED1";
                mColorBasic["Green"] = "#008000";
                mColorBasic["Purple"] = "#9400D3";
                mColorBasic["Red"] = "#FF0000";
                mColorBasic["Light Orange"] = "#FF9933";
                mColorBasic["Sienna"] = "#A0522D";
                   
                mColorBasic["Light Gray"] = "#D3D3D3";
                mColorBasic["Sky Blue"] = "#87CEEB";
                mColorBasic["Cyan"] = "#00FFFF";
                mColorBasic["Green Apple"] = "#32CD32";
                mColorBasic["Mauve"] = "#DA70D6";
                mColorBasic["Salmon"] = "#FA8072";
                mColorBasic["Gold"] = "#FFD700";
                mColorBasic["Light Brown"] = "#CD853F";
                   
                mColorBasic["White"] = "#FFFFFF";
                mColorBasic["Pale Turquoise"] = "#AFEEEE";
                mColorBasic["Blue Green"] = "#7FFFD4";
                mColorBasic["Pale Green"] = "#98FB98";
                mColorBasic["Pink"] = "#FFC0CB";
                mColorBasic["Peach"] = "#FFDAB9";
                mColorBasic["Yellow"] = "#FFFF00";
                mColorBasic["Wood"] = "#DEB887";
               
                mColorBasic["Alice Blue"] = "#F0F8FF";
                mColorBasic["AntiqueWhite "] = "#FAEBD7";
                mColorBasic["Aqua "] = "#00FFFF";
                mColorBasic["Aquamarine"] = "#7FFFD4";
                mColorBasic["Azure"] = ""; 
                         
                      
                mColorBasic[" DarkGoldenRod "] = "   #B8860B";
                mColorBasic[" DarkGray "] = "   #A9A9A9";
                mColorBasic[" DarkGreen "] = "   #006400";
                mColorBasic[" DarkKhaki "] = "   #BDB76B";
                mColorBasic[" DarkMagenta "] = "   #8B008B";
                mColorBasic[" DarkOliveGreen    "] = "#556B2F";
                mColorBasic[" DarkOrange "] = "   #FF8C00";
                mColorBasic[" DarkOrchid    "] = "#9932CC";
                mColorBasic[" DarkRed    "] = "#8B0000";
                mColorBasic[" DarkSalmon"] = "    #E9967A";
                mColorBasic[" DarkSeaGreen    "] = "#8FBC8F";
                mColorBasic[" DarkSlateBlue    "] = "#483D8B";
                mColorBasic[" DarkSlateGray "] = "   #2F4F4F";
                mColorBasic[" DarkTurquoise    "] = "#00CED1";
                mColorBasic[" DarkViolet    "] = "#9400D3";
                mColorBasic[" DeepPink    "] = "#FF1493";
                mColorBasic[" DeepSkyBlue    "] = "#00BFFF";
                mColorBasic[" DimGray    "] = "#696969";
                mColorBasic[" DodgerBlue    "] = "#1E90FF";
                mColorBasic[" FireBrick "] = "   #B22222";
                mColorBasic[" FloralWhite    "] = "#FFFAF0";
                mColorBasic[" ForestGreen    "] = "#228B22";
                mColorBasic[" Fuchsia        "] = " #FF00FF";
                mColorBasic[" Gainsboro    "] = "#DCDCDC";
                mColorBasic[" GhostWhite    "] = "#F8F8FF";
                mColorBasic[" Gold "] = "   #FFD700";
                mColorBasic[" GoldenRod "] = "   #DAA520";
                mColorBasic[" Gray "] = "   #808080";
                mColorBasic[" Green "] = "   #008000";
                mColorBasic[" GreenYellow "] = "   #ADFF2F";
                mColorBasic[" HoneyDew "] = "   #F0FFF0";
                mColorBasic[" HotPink    "] = "#FF69B4";
                mColorBasic[" IndianRed  "] = "   #CD5C5C";
                mColorBasic[" Indigo     "] = "#4B0082";
                mColorBasic[" Ivory    "] = "#FFFFF0";
                mColorBasic[" Khaki "] = "   #F0E68C";
                mColorBasic[" Lavender "] = "   #E6E6FA";
                mColorBasic[" LavenderBlush "] = "   #FFF0F5";
                mColorBasic[" LawnGreen "] = "   #7CFC00";
                mColorBasic[" LemonChiffon "] = "   #FFFACD";
                mColorBasic[" LightBlue "] = "   #ADD8E6";

    /*
                mColorBasic["  "] = "";   
                mColorBasic["  "] = "";   
                mColorBasic["  "] = "";   
                mColorBasic["  "] = "";   
                mColorBasic["  "] = "";   
                mColorBasic["  "] = "";   
                mColorBasic["  "] = "";   
                mColorBasic["  "] = "";   
                mColorBasic["  "] = "";   
                mColorBasic["  "] = "";   
                mColorBasic["  "] = "";   
                mColorBasic["  "] = "";   
    */
               
                         
                // end list of colors
                         
                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);
              }
            })});


    If that one does not work for you here is a different one: http://fmdesign.forumotion.com/t202-sceditor-color-picker-color-cubes
    Ape
    Ape
    Administrator
    Administrator


    Male Posts : 19183
    Reputation : 1996
    Language : fluent in dork / mumbojumbo & English haha

    Solved Re: Color picker with more colors

    Post by Ape January 5th 2016, 11:27 pm

       Topic solved and archived

       Remember only mark your topic solved if your sure it is as it will be closed without warning



    Color picker with more colors Left1212Color picker with more colors Center11Color picker with more colors Right112
    Color picker with more colors Ape_b110
    Color picker with more colors Ape1010