Teammitglieder online
Support-Box
Neue Beiträge seit dem letzten Besuch.
Textbausteine des MODERATIONSTOOL
AB > PFAD > GENERATOR
FORUM > PFAD > GENERATOR
Unterstützung Lösungs-Probleme
Auffällige
User
Der Runde
Tisch
HÄUFIG GESTELLTE FRAGEN
Regeln und nützliche Hinweise
Neueste Themen
» [Invision] Gefällt mir Button erscheint nicht
von Alastor Heute um 7:30

» [Invision] Erklärung PWA Aktivierung + Mobile Version Problem
von Alastor Gestern um 12:41

» Goldhauch´s Plauderforum
von Joost Fr 12 Jul 2024 - 19:34

» [Invision] User Style Änderung - Code geht nicht
von Skouliki Do 11 Jul 2024 - 23:03

» [PunBB] Forum aufsplitten/teilen - ist das möglich?
von Joost Mi 10 Jul 2024 - 17:46

» Technische Wartung in der Zentrale: Montag 1 Juli, und Montag 8 Juli
von Joost Mo 24 Jun 2024 - 17:20

» [phpBB2] Mystic - new beginning RPG
von Raine Kamiya Fr 21 Jun 2024 - 20:52

» Neue Mitarbeiter gesucht
von Joost Fr 21 Jun 2024 - 20:26

» Lange Ladezeiten
von Skouliki Mi 19 Jun 2024 - 19:35

» Gründer E-Mailadresse ändern
von Skouliki Fr 7 Jun 2024 - 12:49

» Nach Wartung Datenbankfehler
von Joost Mo 3 Jun 2024 - 12:34

» Wartung geplant Montag, 3. Juni 2024
von Joost So 2 Jun 2024 - 8:04

» Anti-Spam-Prüfung bei Mitgliedern
von Skouliki So 12 Mai 2024 - 18:10

» Die Heidekriger (WaCa) mit Punktesystem
von Rama So 21 Apr 2024 - 20:44

» Forum löschen, Probleme mit Gründeraccount
von Skouliki Di 9 Apr 2024 - 14:03

» [AwsomeBB] LogIn Farbe Weiß auf weiß
von Skouliki Sa 30 März 2024 - 21:14

» kann man noch Blogs hier erstellen?
von Joost Mi 27 März 2024 - 18:40

» Einstellen der Profilfelder funktioniert nicht
von Skouliki Di 26 März 2024 - 12:54

Beiträge mit den meisten Reaktionen des Monats
» Beitrag von Skouliki in Lange Ladezeiten
( 2 )


» Beitrag von Joost in [Invision] User Style Änderung - Code geht nicht
( 2 )


» Beitrag von Joost in [Invision] User Style Änderung - Code geht nicht
( 1 )


» Beitrag von Alastor in [Invision] User Style Änderung - Code geht nicht
( 1 )


» Beitrag von gnadenlos in Lange Ladezeiten
( 1 )


[Tutorial] Individuelle Farbpalette der Editoren gestalten

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach unten

Tutorial [Tutorial] Individuelle Farbpalette der Editoren gestalten

Beitrag von inde 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.
[Tutorial] Individuelle Farbpalette der Editoren gestalten Farbpa10


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. [Tutorial] Individuelle Farbpalette der Editoren gestalten Farbpa11
  3. 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
Admin a.D.
Admin a.D.

Männlich Beiträge : 5658
Anmeldedatum : 20.10.11
keine
Mozilla Firefox phpBB3

Nach oben Nach unten

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach oben

- Ähnliche Themen

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