[Tutorial] Individuelle Farbpalette der Editoren gestalten

[inde]



Individuelle Farbpalette der Editoren gestalten [Alle Versionen]

TUTORIAL

Mit Hilfe dieses Tutorials könnt ihr euch die Farbpalette in den Editoren, individuell für euren Forenstyle zugeschnitten, selbst gestalten. Das verwendete Script, CSS sowie deren Anleitung gilt für alle Versionen von Forumieren inklusive ModernBB. Hinweise und Tipps Vor der Installation des Scripts muss die Art der Farbpalette auf "Einfach" eingestellt werden, geht dazu in den…. Administrations-Bereich > Allgemeines > Nachrichten und E-Mails > Einstellungen > Beiträge > Klick dann unterhalb auf "ABSENDEN". Installieren des Scripts Zum Installieren des Scripts geht in den… Administrations-Bereich > Module > HTML und JAVASCRIPT > Javascript Codes Verwaltung Falls noch nicht geschehen, bitte noch "Die Javascript-Code Verwaltung aktivieren", durch einen Klick auf den Radiobutton "Ja" und danach auf "ABSENDEN". Nun klickt auf "EIN NEUES JAVASCRIPT ERSTELLEN". Titel: Editor-Farbpalette Platzierung: Auf allen Seiten Bei "Javascript Code" den nachfolgenden Code einsetzen und klickt dann auf "ABSENDEN". Code: $(function(){$(function(){           if ($("#text_editor_textarea").length < 1) return;           $.sceditor.command.get('color')._menu  = function (editor, caller, callback) {             var mColorBasic = [],             html = $('<div />');                                     // Anfang der Farbpalette                                   mColorBasic["Schwarz"] = "#000000";             mColorBasic["Dunkelblau"] = "#00008B";             mColorBasic["Krickentengrün"] = "#008080";             mColorBasic["Dunkelgrün"] = "#006400";             mColorBasic["Indigo"] = "#4B0082";             mColorBasic["Karmesinrot"] = "#DC143C";             mColorBasic["Orangerot"] = "#FF4500";             mColorBasic["Braun"] = "#663300";                             mColorBasic["Dunkelgrau"] = "#666666";             mColorBasic["Königsblau"] = "#4169E1";             mColorBasic["Dunkeltürkis"] = "#00CED1";             mColorBasic["Grün"] = "#008000";             mColorBasic["Dunkelviolett"] = "#9400D3";             mColorBasic["Rot"] = "#FF0000";             mColorBasic["Orange"] = "#FF9933";             mColorBasic["Siennaerde"] = "#A0522D";                             mColorBasic["Hellgrau"] = "#D3D3D3";             mColorBasic["Himmelblau"] = "#87CEEB";             mColorBasic["Türkis"] = "#00FFFF";             mColorBasic["Limonengrün"] = "#32CD32";             mColorBasic["Orchidee"] = "#DA70D6";             mColorBasic["Lachsfarben"] = "#FA8072";             mColorBasic["Gold"] = "#FFD700";             mColorBasic["Peru"] = "#CD853F";                             mColorBasic["Weiß"] = "#FFFFFF";             mColorBasic["Blasstürkis"] = "#AFEEEE";             mColorBasic["Aquamarinblau"] = "#7FFFD4";             mColorBasic["Blassgrün"] = "#98FB98";             mColorBasic["Rosa"] = "#FFC0CB";             mColorBasic["Pfirsich"] = "#FFDAB9";             mColorBasic["Gelb"] = "#FFFF00";             mColorBasic["Gelbbraun"] = "#DEB887";                                   // Ende der Farbpalette                                   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);           }         })}); Einsetzen des CSS-Codes Hinweis: User ohne Kenntnisse über das CSS, lesen bitte zuerst das nachfolgende Tutorial.  Wie mache ich einen Eintrag in das CSS? Setzt den nachfolgenden CSS-Code in eurem Administrations-Bereich ein. Code: /* -- Anfang zum Script Editor-Farbpalette -- */ /*Farbpaletten Icons*/ .color-option {   display: inline-block !important;   width: 15px !important; /* Weite der Icons */   height: 15px !important; /* Höhe der Icons */   border: 2px solid #fff !important;  /* Rahmen um die Icons */   margin: 3px !important; /* Abstand der Icons */   box-shadow: 0 0 2px #778899; /* Schatten */   cursor: pointer !important; } .color-option span{   display: block !important;   width: 15px !important; /* Weite der Icons */   height: 15px !important; /* Höhe der Icons */ } .color-option, .color-option span {   border-radius: 2px; /* Abrunden der Icons */ } /*Farbpalette komplett, beeinflusst wird die Breite sowie die Anzahl der Icons in einer Reihe*/ .sceditor-dropdown.sceditor-color-picker {   width: 200px !important; /* Breite der Palette */   height: 100px !important; /* Hoöhe der Palette */   padding: 5px !important;   border-radius: 5px !important; } /* -- Ende zum Script Editor-Farbpalette -- */ Natürlich können sich geübte User unter euch auch gerne am CSS versuchen. Individuelle Gestaltung der Farbpalette Innerhalb des Scripts könnt ihr an den Codezeilen individuelle Veränderungen, wie im nachfolgenden Beispiel erklärt vornehmen. Code: mColorBasic["Weiß"] = "#FFFFFF"; MColorBasic ["Weiß"]: Setzt den Namen der Farbe ein, dieser erscheint sobald sich der Mauscursor (bei Mouseover) darüber befindet. #FFFFFF: Hier kann der Farbwert entsprechend angepasst werden. Auch können weitere Farben durch hinzufügen nach gleichem Schemata eingesetzt oder aber auch entfernt werden. Hinweis: Arbeitet bitte innerhalb der Codezeilen sowie auch bei der Umsetzung des Tutorials sorgfältig! Unser Team stellt euch zwar die Tutorials zur Verfügung, jedoch bedeutet dies keinesfalls, dass es dafür auch eine Unterstützung im Support-Bereich gibt! Wir hoffen, euch gefällt dieses Tutorial! Euer Team von Forumieren

 Dieses Tutorial stammt von Ange Tuteur aus dem Englischen Support. Dieses Tutorial unterliegt dem Copyright von hilfe.forumieren.com. Eine Veröffentlichung außerhalb von hilfe.forumieren.com ist nicht gestattet!