Het is nu vr 24 mei 2019 - 7:12

1 resultaat gevonden

Maak je eigen kleureneditor

Pas het kleurenpalet van de editor aan



♣️ Inleiding
Deze tutorial zal je laten zien hoe je je eigen kleuren set kan creëren op je eigen forum. Overigens werkt dit op elke forumversie die momenteel aanwezig is, dus daar hoef je je niet druk over te maken. Ik, George, heb deze tutorial vertaald vanaf het Franse ondersteuningsforum

♣️ Eind Resultaat
Topics getagged onder ff9933 op Nederlands Ondersteuningsforum : 727070palette

♣️ Instructies, Het script.
1) Ga naar Beheerderspaneel ► Algemeen ► Berichten en emails ► Configuratie
Zoek hier naar: Type of the editor colors palette en vink hier Simple aan.

2) Ga naar Beheerderspaneel ► Modules ► HTML & JAVASCRIPT ► Javascript code beheer
Zoek naar: Enable Javascript code management en vink Ja aan.

Nu je de eerste twee stappen hebt voltooid gaan we verder naar het plaatsen van het script. Hiervoor klik je op de volgende button (op die pagina te vinden): Topics getagged onder ff9933 op Nederlands Ondersteuningsforum : 33k985f

Titel = Kleurentabel
Plaatsing = Op alle pagina's
Code:
$(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);
     }    
   }
})});

Hoe veranderen we hier nu de kleuren in?
In de code zie je zeker weten de volgende tekstjes staat:  mColorBasic["Zwart"] = "#000000";. In de code zelf staan de namen in het Frans (dit moet je dus zelf aanpassen), maar hier gaat het dus om kleurcode #000000 en dat is zwart. Dit kun je allemaal zelf aanpassen. Je neemt de code #FF9933 en noemt deze Oranje. Je kunt zelf beslissen hoeveel je er wilt, dus meer of minder is geen probleem.

♣️ Instructies, Het script installeren.  
1) Beheerderspaneel ► Display ► Plaatjes en Kleuren ► Kleuren ► Cascading Style Sheet
Plaats hier de volgende code:
Code:
/* 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;
}
 

♣️ Het origineel van deze Tutorial is hier te vinden: Klik!



van George
op ma 28 okt 2013 - 17:41
 
Zoek in: Tips & Trucs
Onderwerp: Maak je eigen kleureneditor
Antwoorden: 0
Bekeken: 1167

Terug naar boven

Ga naar: