elRTE Farben verändern

19 02 2011

Ein WYSIWYG Editor ist schon etwas Schönes. Man kann den Besuchern seiner Webseite einen Editor bieten, der sich ohne BBCode oder HTML fast schon wie eine normale Desktop-Textverarbeitung bedienen lässt. Das Problem mit dem ich immer zu kämpfen habe ist, das Standard-Design entsprechend an meine Seite anzupassen. Gerade experimentiere ich mit elRTE und da die CSS Definitionen weit verzweigt sind eine Kurz-Liste zur schnellen Anpassung der grundsätzlichen Farben. Will man die Pop-Ups anpassen, kann man es sich auch einfach machen und hier ein vorgefertigtes Theme herunterladen. Das gilt aber auch wirklich nur für die Dialog-Boxen.

Editor-Hintergrund
In css/elrte-inner.css hinzufügen:
body{ background-color: #000; }

Alle weiteren Werte werden in der css/elrte.min.css angepasst.

Hintergrund der Buttonleiste
.el-rte .toolbar{background-color:#eee;padding:3px 7px 2px 7px;border:1px solid #ccc;white-space:normal;}

Rahmen der Buttonleiste
.el-rte .toolbar{background-color:#eee;padding:3px 7px 2px 7px;border:1px solid #ccc;white-space:normal;}

Rahmen der Buttons
.el-rte .toolbar ul li{display:inline-block;display:-moz-inline-stack;display:inline-block;height:22px;width:22px;vertical-align:top;zoom:1;*display:inline;margin:1px 1px;padding:0;background:url('../images/elrte-toolbar.png') no-repeat;border:1px solid #ccc;}

Rahmen der Buttons beim Mouseover
.el-rte .toolbar ul li.hover{border:1px solid #54b9bf;}

Rahmen und Hintergrund der aktiven (gedrückten) Buttons
.el-rte .toolbar ul li.active{background-color:#c3dbef;border:1px solid #fff;}

Rahmen des Editors
.el-rte .workzone{border:1px solid #eee;border-top:none;height:400px;overflow:hidden;}

Hintergrundfarbe der Fußzeile
.el-rte .statusbar{height:21px;padding:0 9px;font:11px/21px 'monaco','andale mono','lucida console',monospace;background-color:#eee;border-top:1px solid #ccc;border-top:none;}

Hintergrundfarbe der unteren Tabulatoren
.el-rte .tabsbar .tab{float:left;margin-right:2px;padding:6px 17px;font-size:.82em;font-weight:bold;color:#777;text-align:center;border:1px solid #eee;border-top:none;background:#fff;cursor:default;}

Hintergrundfarbe der aktiven unteren Tabulatoren
.el-rte .tabsbar div.active{background:#eee;color:#444;}

Breite / Höhe ändern
Dafür gibt es die Optionen width und height. Allerdings weicht zumindest die Angabe für die Breite bei mir um 10 Pixel von der Breite meiner sonstigen Formular-Elemente ab. Mag allerdings sein, dass das mit meiner eigenen CSS-Datei zusammen hängt.
var opts = {
width  : 400,
height : 250,
...
}

Advertisements

Aktionen

Information

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s




%d Bloggern gefällt das: