Das Forum der Foren
Willkommen im offiziellen Supportforum von Forumieren!

Um alle Vorteile unseres Forums zu nutzen, melden Sie sich bitte an. Wenn Sie bereits Mitglied sind loggen Sie sich ein.


Erstellen Sie ein kostenloses Forum wie dieses hier.
Forenaustausch

Alle Anzeigen ansehen

Regeln und nützliche Hinweise
Lexi Help
Lexi Help
Schnelle
Hilfe
Klicke Hier
www.forumieren.de

[Tutorial] Individuelle Farbpalette der Editoren gestalten

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach unten

[Tutorial] Individuelle Farbpalette der Editoren gestalten

Beitrag von inde am Mo 29 Mai 2017 - 18:06

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….

  1. Administrations-Bereich > Allgemeines > Nachrichten und E-Mails > Einstellungen > Beiträge >

  2. Klick dann unterhalb auf "ABSENDEN". Absenden



Installieren des Scripts


Zum Installieren des Scripts geht in den…

  1. Administrations-Bereich > Module > HTML und JAVASCRIPT > Javascript Codes Verwaltung
  2. Falls noch nicht geschehen, bitte noch "Die Javascript-Code Verwaltung aktivieren", durch einen Klick auf den Radiobutton "Ja" und danach auf "ABSENDEN". Absenden
  3. Nun klickt auf "EIN NEUES JAVASCRIPT ERSTELLEN".
  4. Titel: Editor-Farbpalette
  5. Platzierung: Auf allen Seiten
  6. Bei "Javascript Code" den nachfolgenden Code einsetzen und klickt dann auf "ABSENDEN". 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";

  1. MColorBasic ["Weiß"]: Setzt den Namen der Farbe ein, dieser erscheint sobald sich der Mauscursor (bei Mouseover) darüber befindet.
  2. #FFFFFF: Hier kann der Farbwert entsprechend angepasst werden.
  3. 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! Smile

Euer Team von Forumieren king
avatar
inde
Administrator
Administrator

Männlich Beiträge : 4971
Hinweis : Flash The Scene™
Anmeldedatum : 20.10.11
keine
Firefox phpBB3

Benutzerprofil anzeigen

Nach oben Nach unten

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach oben


 
Befugnisse in diesem Forum
Sie können in diesem Forum nicht antworten