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
» Das Plauderforum ist zurück!
von Eto Mo 25 Nov 2024 - 17:59

» Style-Wechsel funktioniert nicht mehr
von Miho Mo 25 Nov 2024 - 11:05

» Profil in beiträgen nur im blog deaktivieren.
von Skouliki Mo 25 Nov 2024 - 10:16

» [Invision] Editor über den Bildrand ziehbar + Schriftgrößenproblem
von Skouliki Mi 20 Nov 2024 - 8:06

» Passwort für meinen Adminbereich vergessen.
von Joost Sa 9 Nov 2024 - 10:13

» [Invision] Signatur wird nicht immer eingefügt
von Skouliki Mo 4 Nov 2024 - 16:33

» [Invision]  Schriftgröße Navigationsleiste, Links und Forenbeschreibungen
von Skouliki So 27 Okt 2024 - 13:29

» [Invision] Transparent Logohintergrund/Struktur
von Joost So 27 Okt 2024 - 12:58

» png wird im servimg in ein jpg umgewandelt
von Skouliki Mi 23 Okt 2024 - 20:26

» Passwort Vergessen (SilentHowl)
von Joost Do 17 Okt 2024 - 17:14

» [Invision] Hintergrundbild fixieren
von Skouliki Mo 14 Okt 2024 - 11:30

» Paßwort vergessen
von Joost So 13 Okt 2024 - 17:58

» Anti-Spam-Prüfung
von Hana19 Sa 12 Okt 2024 - 16:59

» Private Nachrichten bleiben im Postausgang hängen
von Skouliki Fr 11 Okt 2024 - 11:11

» [phpBB3] Mittelteil des Forums verschoben
von Eto Mo 7 Okt 2024 - 20:50

» [phpBB3] Farbpalette ändern
von Skouliki Mo 7 Okt 2024 - 10:08

» [Klassische Version] Account löschen
von Joost Sa 5 Okt 2024 - 21:05

» Chatbox einloggen nicht möglich
von Joost So 29 Sep 2024 - 8:01

Beiträge mit den meisten Reaktionen des Monats
» Beitrag von Agorass in Passwort für meinen Adminbereich vergessen.
( 2 )


» Beitrag von Keks in [phpBB2] Unterforen Nebeneinander
( 1 )


[Tutorial] Das Aussehen des neuen Editors anpassen.

3 verfasser

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach unten

tuto* - [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

tuto* - [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

tuto* - [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.
tuto* - [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

tuto* - [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

tuto* - [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

tuto* - [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.
tuto* - [Tutorial] Das Aussehen des neuen Editors anpassen. Dark-e10

Um den besagten Bereich aufzuhellen, habe ich die entsprechende Grafik nachbearbeitet.
tuto* - [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

tuto* - [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

tuto* - [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

tuto* - [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.

tuto* - [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