Nederlands Ondersteuningsforum :
Welkom op het Nederlandse Ondersteuningsforum van ActieForum.


Om ondersteuning te vragen of om in één van onze andere forumsecties te kunnen posten dien je een account te hebben, bedankt voor het inloggen als je al geregistreerd bent, of registreer direct een account op ons ondersteuningsforum als je dit nog niet gedaan hebt.

Maak je eigen kleureneditor

Vorige onderwerp Volgende onderwerp Go down

Maak je eigen kleureneditor

Bericht van George op ma 28 okt 2013 - 17:41

Maak je eigen kleureneditor


♣ Inleiding
Deze tutorial zal je laten zien hoe je je eigen kleuren zet 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


♣ 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):

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!




Laatst aangepast door 10spetter10 op di 5 jan 2016 - 16:20; in totaal 2 keer bewerkt (Reden van aanpassing : Tutorial Goedgekeurd!)

George
Mega Actief Forumlid

Man Aantal berichten : 508
Leeftijd : 18
Registratiedatum : 06-07-11
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja

Profiel bekijken http://dariusnl.actieforum.com
George is bedankt door de starter van dit topic.

Vorige onderwerp Volgende onderwerp Terug naar boven


Permissies van dit forum:
Je mag geen reacties plaatsen in dit subforum