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,
...
}





Spamschutz für ein phpBB Board

22 10 2007

Der Untergrundhandel mit Cybercrime-Dienstleistungen floriert und wirft für Hacker und Spammer viel Geld ab. Dabei finden sich wie im Supermarkt um die Ecke ebenso Lockangebote und Discount-Preise, berichten die Sicherheitsexperten von G Data im Vorfeld der ITK-Fachmesse Systems. “Die Professionalisierung der Online-Kriminellen ist nichts Neues. Wir haben es bereits seit Jahren mit einer Industrie zu tun, die im Internet kriminelle Dienstleistungen im großen Rahmen anbietet”, sagt Ralf Benzmüller, Leiter der G Data Security Labs, gegenüber pressetext. […]

Bereits für wenige hundert Euro sind gezielte Angriffe auf Webangebote oder der Versand von Millionen von Spam-E-Mails als Auftragsarbeit möglich. Die Cyber-Kriminellen operieren hierbei in Netzwerken, um möglichst viele Facetten der kriminellen Dienstleistungen aus einer Hand anbieten zu können. Kombinationsangebote auf dem Schwarzmarkt sind keine Seltenheit. Das Spektrum der Dienstleistungen ist dabei breit gefächert. 350 Euro kostet beispielsweise der Versand von 20 Mio. Spam-E-Mails. Für Schnäppchenjäger gibt es ein Starterpaket zum Preis von 140 Euro. Es beinhaltet ein Do-It-Yourself-Tool für den Eigenversand und fünf Mio. E-Mail-Adressen.

Quelle: http://pressetext.at/pte.mc?pte=071022014

In dem Textausschnitt dreht es sich hauptsächlich um die Email-Spammer. Ein in der Öffentlichkeit nicht so beachtetes Problem, aber doch ungemein ärgerlicher für jeden Webmaster einer Seite mit Kommentarmöglichkeiten von Besuchern stellt der Webseiten-Spam dar. Massenhaft werden hier Kommentare zu Blogs, Newsmeldungen und Diskussionsforen mit häufig nicht jugendfreier Werbung zugeschüttet. Besonders eingeschossen haben sich die Spambots auf phpBB Boards, die in großer Anzahl im Netz installiert sind und deren Spamschutz in der Version 2.x als recht schwach zu bezeichnen ist. Ein leicht gefundenes Fressen also für die Kriminellen, dem normalerweise nur mit großem Aufwand von Seiten der Webmaster zu begegnen ist.

Nun habe ich mich schon seit einiger Zeit mit dem Thema Webseitenspamming beschäftigt. Für eine Internetplattforum auf Grundlage des phpBB sollte eine möglichst einfache Lösung her, der Plage Herr zu werden.

Hier habe ich mir die normale Vorgehensweise der Spambots zunutze gemacht. Diese registrieren sich zuerst einen Mitgliedsnamen im Board, um damit anschließend ungehemmt spammen zu können. Diese Registrierung ist zwar durch ein Captcha gegen automatische Vorgänge geschützt, solche Grafiken können aber längst von den Bots gelesen werden. Genau da setze ich nun an. Die Bots versuchen immer, die dargestellte Grafik auf der Registrierungsseite zu entziffern und die Lösung zu übermitteln. Was macht der Bot aber, wenn er eben diese Zeichenfolge nicht eingeben darf? Genau, er scheitert und gibt irgendwann auf.

Deshalb verändere ich die Registrierung dahingehend, dass das Captcha zwar noch ganz normal angezeigt wird, ein erklärender Text aber darauf hinweist, dass genau dieser Code nicht eingegeben werden darf. Da die Bots aber auch nicht unfehlbar sind und evtl. durch die versehentliche Eingabe eines falschen Codes weiter kommen, ändere ich die Länge des einzugebenden Codes. phpBB Captchas sind immer sechs Zeichen lang, Bots geben also immer sechs Zeichen ein. Ich prüfe, ob ein fünfstelliger Code eingegeben wurde und leite die Registrierung nur dann weiter.

In der Datei includes/usercp_register.php suche ich nach der Zeile :

if ($row[‘code’] != $confirm_code)

und ersetze diese durch:

if (strlen($confirm_code) != 5)

Jetzt noch den erklärenden Text entsprechend anpassen. Dazu in der language/lang_german/lang_main.php suchen nach:

$lang[‘Confirm_code_explain’] = ‘Gebe den Code exakt so ein, wie du ihn siehst. Der Code unterscheidet zwischen Groß- und Kleinschreibung, die Null hat im Inneren einen schrägen Strich.’;

und ersetzen durch:

$lang[‘Confirm_code_explain’] = ‘Gebe eine beliebige fünfstellige Zeichenkette ein, aber NICHT die auf der Grafik abgebildeten!’;

Da viele Besucher vermutlich aus reiner Gewohnheit blind die Grafik abtippen, machen wir das Ganze durch eine optische Spielerei noch offensichtlicher. Das Eingabefeld für den Code erhält bei der Eingabe einen roten Hintergrund verpasst. Sobald sich fünf Zeichen im Feld befinden, ändert sich der Hintergrund im Ampelsystem in grün.

Hierfür kommen in den Stylesheets zwei neue Klassen hinzu. Dazu in der templates/subSilver/overall_header.tpl suchen nach:

input.post, textarea.post, select {
	background-color : {T_TD_COLOR2};
}

und ersetzen durch:

input.post, textarea.post, select {
	background-color : {T_TD_COLOR2};
}
input.postrot{
	background-color: #FFCC00;
}
input.postgruen{
	background-color: #00FF00;
}

Ein winziges JavaScript zeichnet zuständig für die Farbänderung je nach Status des Input-Feldes. In der templates/subSilver/profile_add_body.tpl (bei anderen Templates wird das Verzeichnis entsprechend anders lauten) ganz oben einfügen:

function PruefeLaenge(zeichen){
	if (zeichen < 1){
		document.forms[0].confirm_code.className="post";
	} else if (zeichen == 5){
		document.forms[0].confirm_code.className="postgruen";
	} else{
		document.forms[0].confirm_code.className="postrot";
	}
}

JavaScripts gehören zwar eigentlich in den Header einer Seite, aber ich wüsste keine vernünftige Möglichkeit, das mit dem phpBB zu realisieren, ohne den Code in jeder Seite einzubinden. Das wäre unnötiger Overhead, deshalb lebe ich einfach mit dieser Unschönheit.

Anschließend bringe ich dem Input-Feld noch bei, dass es die JavaScript Funktion auch nutzen soll. In der selben Datei suchen nach:

<input type="text" class="post" style="width: 200px;" name="confirm_code" size="6" maxlength="6" value="" />

und ersetzen durch:

<input id="confirm_code" OnKeyUp="PruefeLaenge(this.value.length)" type="text" class="post" style="width: 200px;" name="confirm_code" size="6" maxlength="6" value="" />