Personalize the color palette of the editor

by Ange Tuteur August 4th 2014, 1:09 pm

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.

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: