Personalizzare 'Palette' del nuovo editor

Da **Niko** Sab 28 Set 2013 - 14:56

Personalizzare 'Palette' del nuovo editor

Il seguente trucco vi permetterà di creare il vostro proprio set di colori da utilizzare sul vostro forum forumattivo. Questo trucco può essere applicato a tutte le versioni: phpBB2, phpBB, phpBB3 e Invision.

Primo passo: installare lo script

1. Vai a: PDA ► Generale ► Messaggi es e-mail ►Configurazione
Assicurarsi di aver abilitato palette semplice
2. Vai a: PDA ► Moduli► HTML e JavaScript ► Gestione codici JavaScript
In primo luogo, assicurarsi che la gestione dei codici script sia attivata sul tuo forum: Una volta fatto, create un nuovo file.

Titolo: Personalizzazione Colore Palette
Dove: Su tutte le pagine

Codice:: $(function(){$(function(){ if ($("#text_editor_textarea").length != 0) { $.sceditor.command.get('color')._menu = function (editor, caller, callback) { var mColorBasic = [], html = $('<div />'); // liste des couleurs mColorBasic["Noir"] = "#000000"; mColorBasic["Bleu foncé"] = "#00008B"; mColorBasic["Sarcelle"] = "#008080"; mColorBasic["Vert foncé"] = "#006400"; mColorBasic["Indigo"] = "#4B0082"; mColorBasic["Cramoisi"] = "#DC143C"; mColorBasic["Orange"] = "#FF4500"; mColorBasic["Marron"] = "#663300"; mColorBasic["Gris foncé"] = "#666666"; mColorBasic["Bleu royal"] = "#4169E1"; mColorBasic["Turquoise foncé"] = "#00CED1"; mColorBasic["Vert"] = "#008000"; mColorBasic["Pourpre"] = "#9400D3"; mColorBasic["Rouge"] = "#FF0000"; mColorBasic["Orange clair"] = "#FF9933"; mColorBasic["Sienne"] = "#A0522D"; mColorBasic["Gris clair"] = "#D3D3D3"; mColorBasic["Bleu ciel"] = "#87CEEB"; mColorBasic["Cyan"] = "#00FFFF"; mColorBasic["Vert pomme"] = "#32CD32"; mColorBasic["Mauve"] = "#DA70D6"; mColorBasic["Saumon"] = "#FA8072"; mColorBasic["Or"] = "#FFD700"; mColorBasic["Brun clair"] = "#CD853F"; mColorBasic["Blanc"] = "#FFFFFF"; mColorBasic["Turquoise pâle"] = "#AFEEEE"; mColorBasic["Bleu vert"] = "#7FFFD4"; mColorBasic["Vert pâle"] = "#98FB98"; mColorBasic["Rose"] = "#FFC0CB"; mColorBasic["Pêche"] = "#FFDAB9"; mColorBasic["Jaune"] = "#FFFF00"; mColorBasic["Bois"] = "#DEB887"; // fin de la liste des couleurs 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); } } })});

Come cambiare i colori correnti?
Nell'esempio di codice trovate:

Codice:: mColorBasic["Blanc"] = "#FFFFFF";

mColorBasic ["White"] Imposta il nome del colore
# FFFFFF : si riferisce al codice colore del bianco ( Codici colore )

Se si desidera modificare un colore, quindi basta cambiare il "white" e "# FFFFFF".

Ultimo passo: installare lo stile
Visita: PDA ► Visualizzazione ► Colori ► Foglio di stile CSS e Incollare il codice seguente:

Codice:: /* Icônes couleur dans la palette */ .color-option { display: inline-block !important; width: 15px !important; /* largeur de l'icône couleur */ height: 15px !important; /* hauteur de l'icône couleur */ border: 2px solid #fff !important; /* cadre blanc sur l'icône couleur */ margin: 3px !important; /* espace entre chaque icône */ box-shadow: 0 0 2px #778899; /* ombre */ cursor: pointer !important; } .color-option span{ display: block !important; width: 15px !important; /* largeur de l'icône couleur */ height: 15px !important; /* hauteur de l'icône couleur */ } .color-option, .color-option span { border-radius: 2px; /* arrondi */ } /* Palette complète - la largeur influence le nombre d'icônes affichées */ .sceditor-dropdown.sceditor-color-picker { width: 200px !important; /* largeur de la palette complète */ height: 100px !important; /* hauteur de la palette complète */ padding: 5px !important; border-radius: 5px !important; }