Personalizzare 'Palette' del nuovo editor


Tutorial Personalizzare 'Palette' del nuovo editor

Messaggio Da Niko il 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;
}

Astuzia creata da: Forum dei forum Francese e tradotto da Niko
Copyrigth © FORUMATTIVO.COM


avatar
Niko
Veterano dello staff


Sesso : Maschile
Età : 20
Messaggi : 7694
Località : Provincia di Varese


Vedere il profilo dell'utente https://www.translationscloud.com
Niko è stato ringraziato dall'autore di questo topic.

Vedere l'argomento precedente Vedere l'argomento seguente Tornare in alto

- Argomenti simili

 
Permessi di questa sezione del forum:
Non puoi rispondere agli argomenti in questo forum