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
» kann man noch Blogs hier erstellen?
von Joost Gestern um 18:40

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

» Gründer-E-Mail-Adresse ändern
von Skouliki Mo 25 März 2024 - 13:48

» PN's werden nicht mehr rot eingefärbt
von Skouliki Fr 22 März 2024 - 7:44

» Forum löschen, Probleme mit Gründeraccount
von Skouliki Do 21 März 2024 - 9:04

»  Missbrauchsmeldung "Sexueller Inhalt" war (wieder) Werbung/Spam/Scam
von Skouliki Do 21 März 2024 - 9:03

» [phpBB3] Suchfunktion ohne Funktion
von Skouliki Mi 20 März 2024 - 8:41

» Neuer User kann sich anmelden.
von Skouliki Mi 20 März 2024 - 8:38

» Zugangsdaten vergessen/verloren
von Joost Sa 16 März 2024 - 21:07

» Schwierigkeiten mit BBCode
von Skouliki Fr 15 März 2024 - 11:51

» Entdeckt die neue Option Servimg Premium
von Joost Mi 6 März 2024 - 19:50

» Neues YAMAHA XT660-Forum
von gnadenlos Fr 1 März 2024 - 7:33

» Forum nur noch für Eingeloggte sichtbar?
von Skouliki Di 27 Feb 2024 - 7:53

» [phpBB3] Eine Frage zum Forum selbst.
von Skouliki Di 27 Feb 2024 - 7:52

» Beiträge verschwinden
von Skouliki Do 22 Feb 2024 - 7:47

» [Tutorial - alle Versionen] (De)aktiviert die Anzeige von Signaturen aus Eurem Profil
von Eto Do 15 Feb 2024 - 22:17

» Datenback-Dump?
von Skouliki Mo 12 Feb 2024 - 22:02

» Einloggen nicht mehr möglich [erbitte schnelle Rückmeldung!]
von Skouliki Mo 12 Feb 2024 - 8:15

[Tutorial] Das Aussehen des neuen Editors anpassen.

3 verfasser

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach unten

[Tutorial] Das Aussehen des neuen Editors anpassen. Empty [Tutorial] Das Aussehen des neuen Editors anpassen.

Beitrag von #Frank Di 18 Jun 2013 - 12:27

Es ist zwar in absehbarer Zeit geplant, das sich die Farben im Editor dem des Forums anpassen soll, aber bis dahin möchte ich hier mal einige CSS Codes zusammentragen, die man einsetzen kann um den Editor an sein Forum anpassen zu können.

Es sollte allen klar sein, das es sich hierbei um eine Temporäre Lösung handeln könnte.

CSS Codes werden bitte an dieser Stelle im Adminbereich eingesetzt und zwar bitte immer am Ende, für den Fall, das dort schon etwas eingetragen ist:

Adminbereich Arrow Anzeige Arrow Logos & Bilder Arrow Farben Arrow Reiter Arrow CSS Stylesheet

Hintergrundfarbe des Editors (Textfeld und Toolbox) ändern:
Arrow Hintergrundfarbe des Editors anpassen

Rahmen Textfeld
Code:
.sceditor-container {
    background: none repeat scroll 0 0 padding-box #000000 !important;
}

Äußerer Rahmen um den Editor:
Code:
   .sceditor-container {
      border: 1px solid #000000 !important;
    }

Linie zwischen den Icons und dem Textfeld:
Code:
   div.sceditor-toolbar {
        border-bottom: 1px solid #000000 !important;
    }

Schriftfarbe im Code Modus
Code:
.sceditor-container iframe, .sceditor-container textarea {
  background: none repeat scroll 0 0 #010021 !important;
  color: #CCCCC0 !important;
}

Und für die Schriftgrösse eine weitere Zeile:
Code:
.sceditor-container iframe, .sceditor-container textarea {
  background: none repeat scroll 0 0 #010021 !important;
  color: #CCCCC0 !important;
  font-size: 15px;
}


Für die Schriftfarbe im WYSIWJG Modus ist es nicht ganz so einfach.
Hierzu muss man im Forum die Javascriptverwaltung Aktiviert haben. Näheres dazu hier:
https://hilfe.forumieren.com/t28358-neues-update-vom-05-juli-2011-javascript-verwaltung

Man fügt dann dieses Java Script hinzu (Anzeige auf allen Seiten):
Code:
   $(window).load(function () {
          $(".sceditor-container iframe").contents().find("head").append("<style>body,html,code:before,p,table{background-color:#DCDCDC!important;color:#000!important;font-size:15px!important;}</style>")
        });
Dieses Script wurde von Dana Domirani aus dem Russischen Support erstellt.
Hiermit kann die Hintergrundfarbe, die Schriftfarbe und die Schriftgröße für den WYSIWJG Modus eingestellt werden.

Übrigens, wer nicht will, dass die Smileys runterskaliert werden, der kann die in der Vorschau auch in Originalgröße anzeigen lassen:
Code:
   img.smiley {
        background-repeat: no-repeat;
        height: auto !important;
        width: auto !important;
    }

Hintergrund der Smiley Box:
Code:
   .sceditor-dropdown.sceditor-emoticons {
        background-color: #FF6600 !important;
    }

Hintergrundgrafik im Editorfenster:
Code:
   .sceditor-container iframe, .sceditor-container textarea {
        background: none repeat scroll 0 0 #000000 !important;
    }
Code:
    .sceditor-container iframe, .sceditor-container textarea {
        background: url("BILDURL") !important;
    }

Hintergrundfarbe bei Expressantwort anpassen (ist nicht überall notwendig):
Code:
   .qreply {
      background-color: transparent;
    }

Sollte noch jemand etwas neues haben kann er das gerne hier noch dazu posten.
Bitte nur Codes, die auch funktionieren.

Alle Codes hier sind erstellt von LouiXIV, Günther und #Frank
#Frank
#Frank
Admin a.D.
Admin a.D.

Männlich Beiträge : 34614
Anmeldedatum : 13.08.08
keine
Mozilla Firefox phpBB2

Nach oben Nach unten

[Tutorial] Das Aussehen des neuen Editors anpassen. Empty Re: [Tutorial] Das Aussehen des neuen Editors anpassen.

Beitrag von Günther Fr 21 Jun 2013 - 12:48

Hintergrundfarbe der neuen Smileybox ändern (Expressantwort + erweiterte Antwort):
Code:
#sceditor_smilies body, #sceditor_smilies body * {
  background-color: #FF0000;
}

Edit:
Sollte in der Smileybox ein Hintergrundbild angezeigt werden und ihr möchtet dieses entfernen, fügt zusätzlich diesen Code ein:
Code:
#sceditor_smilies body, #sceditor_smilies body * {
  background-image: none !important;
}


Zuletzt von Günther am Sa 22 Jun 2013 - 21:35 bearbeitet; insgesamt 1-mal bearbeitet
Günther
Günther
Admin a.D.
Admin a.D.

Männlich Beiträge : 15349
Anmeldedatum : 16.07.08
keine
Mozilla Firefox phpBB3

Nach oben Nach unten

[Tutorial] Das Aussehen des neuen Editors anpassen. Empty Re: [Tutorial] Das Aussehen des neuen Editors anpassen.

Beitrag von #Frank Sa 22 Jun 2013 - 18:20

Unser User Inde hat hier einen interessanten Lösungsweg, der den Button der Beitragseingabe je nach gewählten Modus hervorheben kann.
Ich zitiere ihn an dieser Stelle nochmal:
inde schrieb:
Abgesehen davon das sich nun etwas getan hat am Editor, möchte ich euch noch die Möglichkeit vorstellen, dass man den Schalter "Modus der Beitragseingabe ändern" auch noch optisch mit einem anderen Hintergrund oder Grafik hervorheben kann. Somit wird der Schalter bei eingeschaltetem Codemodus zusätzlich hervorgehoben.

So sieht es dann aus.
[Tutorial] Das Aussehen des neuen Editors anpassen. BB_code_an

Ich stelle hier einmal den entsprechenden Code zur Verfügung wie ich ihn in meinem Forum verwendet habe.
Da die erstellte Grafik keinerlei künstlerischen Wert besitzt darf diese auch verwendet werden.
Code:
/*Schalter Eingabemodus im Editor*/
.hover {
background: url("http://i79.servimg.com/u/f79/16/90/45/33/moduss10.png") repeat scroll 0 0 transparent !important;
border: 1px solid #3E78A8 !important;
border-radius: 3px 3px 3px 3px !important;
box-shadow: 0 1px 2px #000000 inset !important;
-webkit-box-shadow: 0 1px 2px #000000 inset !important;
}


LG inde
Wie das ganze dann aussieht, könnt ihr auch hier bei uns im Forum sehen, wenn ihr den Button mal anklickt.
#Frank
#Frank
Admin a.D.
Admin a.D.

Männlich Beiträge : 34614
Anmeldedatum : 13.08.08
keine
Mozilla Firefox phpBB2

Nach oben Nach unten

[Tutorial] Das Aussehen des neuen Editors anpassen. Empty Re: [Tutorial] Das Aussehen des neuen Editors anpassen.

Beitrag von #Frank So 30 Jun 2013 - 14:10

Günther schrieb:Hintergrundfarbe der Button-Blöcke:
Code:
div.sceditor-group {
  background-color: #FF0000 !important;
}
Hintergrundfarbe eines ausgewählten/aktiven/gehoverten Buttons:
Code:
.sceditor-button.active, .sceditor-button:active, .sceditor-button:hover {
  background-color: #00FF00 !important;
}
#Frank
#Frank
Admin a.D.
Admin a.D.

Männlich Beiträge : 34614
Anmeldedatum : 13.08.08
keine
Mozilla Firefox phpBB2

Nach oben Nach unten

[Tutorial] Das Aussehen des neuen Editors anpassen. Empty Re: [Tutorial] Das Aussehen des neuen Editors anpassen.

Beitrag von Günther Mo 1 Jul 2013 - 17:33

WYSIWYG-Modus - Hintergrundfarbe und Schriftfarbe der Zitatbox ändern

Einzusetzen über die Javascript-Verwaltung, Platzierung: "Alle Seiten"
Code:
$(window).load(function () {
  $(".sceditor-container iframe").contents().find("head").append("<style>blockquote{background-color:#FF0000!important;color:#00FF00!important;}</style>")
});
Günther
Günther
Admin a.D.
Admin a.D.

Männlich Beiträge : 15349
Anmeldedatum : 16.07.08
keine
Mozilla Firefox phpBB3

Nach oben Nach unten

[Tutorial] Das Aussehen des neuen Editors anpassen. Empty Aussehen des Editors an dunkle Designs anpassen

Beitrag von inde So 19 Okt 2014 - 21:25

Wer seinen Editor mit einem dunklen Hintergrund versehen hat und allgemein ein dunkles Design hat.... der bekommt die Ecke zum Ziehen des Eingabefensters mitunter gar nicht zu sehen.
Somit bemerken die User gar nicht, dass man das Fenster über diese Ecke aufziehen kann.
[Tutorial] Das Aussehen des neuen Editors anpassen. Dark-e10

Um den besagten Bereich aufzuhellen, habe ich die entsprechende Grafik nachbearbeitet.
[Tutorial] Das Aussehen des neuen Editors anpassen. Dark-e11
Der entsprechende Code
Code:
/*Zugecke für Editor-Texteingabefenster für dunkles Design*/
.sceditor-button div, div.sceditor-grip {
background-image: url("http://i39.servimg.com/u/f39/16/90/45/33/editor10.png") !important;
}

Wer Lust verspürt und sich mit Grafiken und CSS ein wenig auskennt, dem sollte es dann auch gelingen die Grafiken für den Editor neu/anders zu gestalten.

LG inde


Zuletzt von inde am Mo 20 Okt 2014 - 13:36 bearbeitet; insgesamt 1-mal bearbeitet
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

[Tutorial] Das Aussehen des neuen Editors anpassen. Empty Re: [Tutorial] Das Aussehen des neuen Editors anpassen.

Beitrag von inde So 19 Okt 2014 - 21:50

Wer in der Expressantwort den Smilie auf dem Schalter des Editors verändern möchte um diesen an seine Smilies anzupassen, nutzt folgenden Code.

Code:
/*Smilie auf Editorschalter in der Expressantwort ändern*/
.sceditor-button-emoticon div {
background: url("BILDURL") no-repeat scroll 0 0 transparent !important;
}

Achte bitte darauf, dass die Grafik für den Smilie nicht größer als 15x15px ist! Exclamation
Bedenke bitte auch, dass eine Vielzahl an Smilies nicht von Dir selbst bearbeitet werden dürfen (Urheberrecht). Exclamation

[Tutorial] Das Aussehen des neuen Editors anpassen. Smilie11

LG inde
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

[Tutorial] Das Aussehen des neuen Editors anpassen. Empty Re: [Tutorial] Das Aussehen des neuen Editors anpassen.

Beitrag von inde Mo 20 Okt 2014 - 12:40

Ändern des Hintergrunds der Buttons im Editor, somit kann man auch die Buttons an sein persönliches Design anpassen.

[Tutorial] Das Aussehen des neuen Editors anpassen. Button12

Dafür habe ich in meinem Beispiel ein paar Farbverläufe genutzt, wobei man hierfür natürlich auch eine richtige Grafik einsetzen kann.
Auch lässt sich die Hintergrundfarbe unter dem Attribut "background" am Ende des Codes anders gestalten bzw. man setzt nur einen Farbcode anstelle der Grafik ein.
Ebenso wurden von mir die Rahmen farblich sowie in der Form des Rahmens ein wenig umgestaltet.

Für das ändern des Hintergrundes nutze den folgenden Code.
Code:
/*Hintergrund der Schalter im Editor ändern*/
.sceditor-button {
background: url("http://www.imgbox.de/users/independent2/Formieren/FRPV_27.png") repeat-x scroll 0 50% #FFFFFF !important;
border: 2px outset #41533B !important;
margin:1px !important;
}

Um die Anzeige beim Hovern sowie für die eingeschalteten Buttons zu verändern.... nutze den folgenden Code.
Code:
/*Aussehen der Schalter beim Hovern und Eingeschaltet*/
.sceditor-button.active, .sceditor-button:active, .sceditor-button:hover {
background: url("http://www.imgbox.de/users/independent2/Formieren/FRPV_30.png") repeat-x scroll 0 50% #FFFFFF !important;
border: 2px ridge #FD0972 !important;
}

Solltest Du noch ein paar Verlaufs-Grafiken für Deine Buttons suchen, dann findest Du hier noch eine kleine Auswahl. Andere Verläufe/Grafiken kannst Du natürlich auch im Bereich Grafik & Design hier im Forum bestellen.

LG inde
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