PhpBB Template » CSS Hacken im PhpBB Template

Erste Erfahrungen mit Direkthacks in die CSS werde ich an dieser Stelle einmal festhalten. In erster Linie natürlich mal wieder aus völlig egoistischen Gründen denn die neue CSS ist weitaus komplexer als die vom alten Standarddesign und ich möchte gerne selber den Überblick behalten um auch nach längerer Schaffenspause schnell wieder den Einstieg finden zu können.

Ganz auf verlorenem Posten steht man auch bei der neuen CSS nicht denn sie ist recht gut in ein paar grobe Abschnitte unterteilt deren Beginn und Ende sich durch einigermaßen aussagekräftige Kommentare abgrenzen. Als Beispiel sei hier der Abschnitt "Colours and backgrounds for common.css" und der Abschnitt "Colours and backgrounds for content.css" genannt die wohl die beiden wichtigsten für Forendesigner sein dürften. Dazwischen befindet sich noch der Abschnitt "Colours and backgrounds for links.css", auch nicht ganz unwichtig.


CSS Hacks Vorbereitung:

Ein paar Arbeitserleichterungen sollten ebenfalls nicht unerwähnt bleiben die Entwicklungen sehr beschleunigen können:

1.
Die Suchfunktion der Browser (nicht die Websuche bei irgendwelchen Suchmaschinen!), diese Suchfunktion sucht nach Begriffen auf der gerade angewählten Seite. Aufgerufen wird diese Suche mit der Tastenkombination [strg]+[f]. Es erscheint über der Statuszeile vom Browser, das ist die letzte Zeile ganz unten, eine Suchzeile mit Eingabefeld - siehe Bild:



Beim Arbeiten mit der CSS erweist sie sich als sehr nützliches Werkzeug denn sie springt sofort an die Stelle im Text der den Suchbegriff enthält. Leider springt die Suche beim Firefox die Begriffe nicht so an dass sie in der ersten Zeile des Eingabefensters befinden sondern vielmehr in der letzten Zeile, ich muss beispielsweise immer erstmal eine Zeile tiefer scrollen damit der markierte Suchbegriff überhaupt erstmal sichtbar wird da sich die Zeile immer eine ausserhalb des sichtbaren Bereiches befindet. Man sollte sich trotz erfolgreicher Suche vergewissern dass man sich an der richtigen Stelle in der CSS befindet, Suchbegriffe können mehrmals auftauchen.


2.
Doppelklick bei Hexadezimalwerten (Farbencodes) - mit einem Doppelklick auf Hexcodes, zB. 00a5a4, wird der komplette Zahlencode markiert und kann mit einem darauffolgenden Rechtsklick über das Menü kopiert werden, beim Einfügen genauso verfahren. Das kann bei vielen zu ändernden Zahlencodes die Arbeit enorm beschleunigen. Die allgemeine Bedienung von Copy&Paste sollte man sich zunutze machen.


3.
Kostenloses Grafikprogramm - da gibt es einige, meine Empfehlung ist Paint.net, damit bekommt man ratzfatz die oft gewünschten Farbverläufe hin und die Bedienung ist kinderleicht. Wie man jetzt genau Farbverläufe macht werde ich aber in der Grafikabteilung hier später näher beschreiben. Das ist total simpel und das kann jeder!

4.
Der "Zoomtrick" - ist glaube ich bereits fest in Windows integriert. Vorraussetzung: Eine Maus mit Rad und eine funktionstüchtige Steuerungstaste.
Ausführung: Steuerungstaste drücken und festhalten, dann am Mausrad drehen. Mit Zoom kann man auch kleinere Grafiken pixelgenau ansteuern und somit gezielt einzelne Farben herauspicken, der Nutzen wird bei der Arbeit ersichtlich. Ansonsten kann ich nur wieder mal dieses Thema ans Herz legen: http://www.foreninformation.de/t1689f25-...orendesign.html

---

CSS Hacks für PhpBB-Template - Forenfarben - Forumübersicht:
Grafik:


1 + 4
.forabg {
background-color: #8c4725;
background-image: url("http://img.homepagemodules.de/s2/dynimg/...btop_e0a689.png");
}
Die Hintegrundfarbe sollte der letzten Farbe vom Farbverlauf entsprechen um einen nahtlosen Übergang zu bewirken wenn das Feld durch mehr Inhalt gestreckt wird. Das direkt darunter liegende .forumbg ist für die Forenansicht zuständig

2
ul.forums {
background-color: #fbf9f7; /* eef5f9 ist unten hell */
background-image: url("http://img.homepagemodules.de/s2/dynimg/...ttom_fbf9f7.png"); /* gradient.gif */
}
Hintergrundfarbe für das Innere der Forenfelder

3
li.row:hover {
background-color: #CECECE;
}
Hightlightfarbe beim überfahren der einzelnen Foren.



Später mehr.....

Neueste Erfahrungen zeigen dass von einem direkten "Hacken" in die CSS ganz stark abgeraten werden muss. Was beim alten - und übersichtlicherem - Standardtemplate noch relativ gefahrlos möglich war ist zwar auch bei den neuen Templates möglich, allerdings verlieren weniger versierte "Direkthacker" schnell den Überblick, nicht umsonst hat HPM bereits beim alten Template vor Ort im Adminmenü darauf hingewiesen nur als erfahrener Benutzer bestimmte Bereiche zu betreten oder gar Änderungen daran vorzunehmen.

Die CSS für das PhPBB wirkt auf mich persönlich sehr unaufgeräumt da viele Klassen auf sehr viele Stellen darin verteilt sind - sprich: an unterschiedlichen Stellen vorkommen, man muss bei Änderungen ständig darauf achten die ganze CSS nach der gewünschten Klasse zu durchsuchen. Ich kann nicht beurteilen ob das guter oder sinnvoller Programmierstil ist oder ob das aus technischen Gründen vielleicht sogar so sein muss, im Endeffekt bedeutet es für den Endverbraucher (Admin) viel Zeitaufwand beim suchen von Klassen.

Einen Button zum zurücksetzen der CSS habe ich ohne Erfolg gesucht - beim alten Standardtemplate gabs den noch - man muss zum zurücksetzen der CSS unter Admin-Layout-CSS einmal auf "einfache Bedienung" zurückstellen und speichern um die CSS in den Originalzustand zurückzusetzen (alle durch direktes Hacken gemachten Änderungen gehen dabei verloren!!).
Die Umstellmöglichkeit befindet sich direkt im oberen Bereich von Admin-Layout-CSS und bedarf sicherlich keiner weiteren Anleitung.

Unter genannter Umstellmöglichkeit befindet sich eine wichtige Information:
"Sie können die CSS-Datei auch über "Farben & Einstellungen" unter "CSS, HTML & Co" um eigenen Inhalt ergänzen und müssen so nicht auf die einfache Eingabe von Werten verzichten"
Es empfiehlt sich nach genau diesem Vorschlag auch zu verfahren und die Ansicht "direktes Hacken" nur zu dem Zweck zu nutzen sich einen Überblick über die CSS zu verschaffen - ohne direkt darin Änderungen vorzunehmen!
Eigene Änderungen und Ergänzungen werden auf diese Verfahrensweise an die ursprüngliche CSS drangehängt ohne diese zu verändern. Aus der technischen Sicht werden dann zwar, mehr oder weniger häufig, ein paar Zeilen unnötigerweise zuviel geladen was aber im Zeitalter von DSL&Co durchaus zu verschmerzen ist. Codeoptimierern für schnellere Ladezeiten werden allerdings die Haare zu Berge stehen.....

---

Da eigentlich auch nur noch die "sichere" Methode empfohlen werden kann und auf genau diese in diesem Thema "Gezielte und sichere Farbanpassungen mit eigener CSS" genauer eingegangen wird werde ich das Thema hiermit schliessen.....

~closed~