Lexi Help
Partner
www.forumieren.com

[Tutorial] Das Aussehen des neuen Editors anpassen.

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach unten

Auftrag - erledigt [Tutorial] Das Aussehen des neuen Editors anpassen.

Beitrag von #Frank am 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:
http://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



Keine Unaufgeforderten PN senden! Unsere Regeln Passwort vergessen ? Info's zu den Gründerdaten
Mein IPad schreibt die tollsten Wörter... Nicht wundern... Einfach geniessen...!

Meine Geduld wird geladen:

Fortschritt: 67%
Never change a running system on Friday!

#Frank
Admin a.D.
Admin a.D.

Männlich Beiträge : 34547
Hinweis : Admin außer Dienst
Anmeldedatum : 13.08.08
Firefox

Benutzerprofil anzeigen

Nach oben Nach unten

Auftrag - erledigt Re: [Tutorial] Das Aussehen des neuen Editors anpassen.

Beitrag von Günther am 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
Admin a.D.
Admin a.D.

Männlich Beiträge : 15349
Anmeldedatum : 16.07.08
Firefox

Benutzerprofil anzeigen

Nach oben Nach unten

Auftrag - erledigt Re: [Tutorial] Das Aussehen des neuen Editors anpassen.

Beitrag von #Frank am 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.


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.



Keine Unaufgeforderten PN senden! Unsere Regeln Passwort vergessen ? Info's zu den Gründerdaten
Mein IPad schreibt die tollsten Wörter... Nicht wundern... Einfach geniessen...!

Meine Geduld wird geladen:

Fortschritt: 67%
Never change a running system on Friday!

#Frank
Admin a.D.
Admin a.D.

Männlich Beiträge : 34547
Hinweis : Admin außer Dienst
Anmeldedatum : 13.08.08
Firefox

Benutzerprofil anzeigen

Nach oben Nach unten

Auftrag - erledigt Re: [Tutorial] Das Aussehen des neuen Editors anpassen.

Beitrag von #Frank am 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;
}



Keine Unaufgeforderten PN senden! Unsere Regeln Passwort vergessen ? Info's zu den Gründerdaten
Mein IPad schreibt die tollsten Wörter... Nicht wundern... Einfach geniessen...!

Meine Geduld wird geladen:

Fortschritt: 67%
Never change a running system on Friday!

#Frank
Admin a.D.
Admin a.D.

Männlich Beiträge : 34547
Hinweis : Admin außer Dienst
Anmeldedatum : 13.08.08
Firefox

Benutzerprofil anzeigen

Nach oben Nach unten

Auftrag - erledigt Re: [Tutorial] Das Aussehen des neuen Editors anpassen.

Beitrag von Günther am 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
Admin a.D.
Admin a.D.

Männlich Beiträge : 15349
Anmeldedatum : 16.07.08
Firefox

Benutzerprofil anzeigen

Nach oben Nach unten

Auftrag - erledigt Aussehen des Editors an dunkle Designs anpassen

Beitrag von inde am 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.


Um den besagten Bereich aufzuhellen, habe ich die entsprechende Grafik nachbearbeitet.

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

inde
Moderator
Moderator

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

Benutzerprofil anzeigen

Nach oben Nach unten

Auftrag - erledigt Re: [Tutorial] Das Aussehen des neuen Editors anpassen.

Beitrag von inde am 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



LG inde

inde
Moderator
Moderator

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

Benutzerprofil anzeigen

Nach oben Nach unten

Auftrag - erledigt Re: [Tutorial] Das Aussehen des neuen Editors anpassen.

Beitrag von inde am 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.



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

inde
Moderator
Moderator

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

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