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.
The forum of the forums

    Personalize the color palette of the editor

    Ange Tuteur
    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13207
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania
    • Post n°1

    Tutorial Personalize the color palette of the editor

    Post by Ange Tuteur August 4th 2014, 7:09 am

    Personalize the color palette of the editor


    The following tutorial will allow you to create your own palette of colors to use on your Forumotion forum. This tutorial can be used on any forum version.

    Palette - Personalize the color palette of the editor Captur63


    Installing the Script

    1. ) Go to :
    Administration Panel > General > Messages and e-mails > Configuration
    Make sure that the color palette is set to simple :
    Palette - Personalize the color palette of the editor 1224310

    2. ) Go to :
    Administration Panel > Modules > HTML and JavaScript > JavaScript codes management
    Make sure that JavaScript codes management is enabled on your forum :
    Palette - Personalize the color palette of the editor Captur65

    Once done, create a new script by clicking the following button : Palette - Personalize the color palette of the editor Creer10

    Title : Personalized color palette
    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";
                  
        // 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);
      }
    })});

    How do you change the current colors ?
    For example we'll use the color white :
    Code:
    mColorBasic["White"] = "#FFFFFF";

    mColorBasic["White"] : Sets the name of the color ( it appears in a tooltip on hover )
    #FFFFFF : Is the hex color for white ( use this to get the hex color )


    Installing the Style

    Go to :
    Administration Panel > Display > Colors > CSS stylesheet

    Copy and paste the following code :
    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 */
      height: 100px !important;  /* height of the palette */
      padding: 5px !important;
      border-radius: 5px !important;
    }

    Then submit and it is done !  :wouhou:



    This tutorial was written by Ange Tuteur

    • Back to top

      Current date/time is November 11th 2024, 1:59 pm