Farbgestaltung im Forum und Header Grafik

Allgemeiner Support zum phpBB 2 Board und phpBB 2 Modifikationen
Forumsregeln
Auch wenn hier der Support für phpBB 2 weiterhin aufrecht erhalten bleibt, weisen wir darauf hin, dass das phpBB 2 nicht mehr offiziell unterstützt und weiterentwickelt wird!
Antworten
Benutzeravatar
snobbel
Beiträge: 53
Registriert: Mo 26.Feb, 2007 00:52
Wohnort: noch Oberhausen

Farbgestaltung im Forum und Header Grafik

Beitrag von snobbel »

Zur Header Grafik:
Ich habe gestern eine neue hochgeladen und Werte probiert.
Nur ist nun das Problem, dass die Grafik trotz Änderung in der overall_header und natürlich auch der Größenänderung an sich noch mit "alten, zu großen" Werten dargestellt wird.
Habe schon mehrfach die Cookies gelöscht und Browser auf und zu gemacht, das Übliche eben, aber die Grafik bleibt stur bei 1284 x 168 pxl... ^6 ^6

Zur Farbgestaltung:

Ich möchte gerne das Layouts meines Forums bearbeiten, und zwar sollte farblich so aussehen:

Bild

Gehe ich jetzt in den Administrationsbereich "Style anpassen" und ändere diese Werte -
Bild

dann sieht das Ganze so aus:
Bild

Bild

Also ist es mir bisher nur möglich gewesen zwei Farben zu ändern, aber nicht so, dass die Boxen vom IM-Portal eine eigene Farbe haben - was kann/muß ich nich machen????
Benutzeravatar
oxpus
Administrator
Beiträge: 28735
Registriert: Mo 27.Jan, 2003 22:13
Wohnort: Bad Wildungen
Kontaktdaten:

Beitrag von oxpus »

Zum Header selber:
Wie groß ist denn das Image dort selber?
Und dazu reicht es nicht immer, den Browser nur zu schliessen, man muss meist auch den Cache leeren (also den vom Browser!), um Veränderungen wirklich zu sehen.

Zu den Farben:
Es kommt hierbei darauf an, welche in der css-Datei des betreffenden Styles definierten Klassen wie formatiert werden und welche das Template-File des Portals verwendet.
Beispiel:
Die Boxen sind hier mit den CSS-Klassen class="row1" oder class="row2" formatiert worden.
Änderst Du nun, wie in Deinem Beispiel, im ACP die Farben hierfür, werden alle Elemente mit diesen Angaben auch geändert, sprich ebenso die Farbhintergründe der Boxen!

Um hier Abhilfe zu schaffen gibt es 2 sinnvolle Methoden:
Für das Portal eine eigene css-Datei je Style installieren, die dann allerdings auch in der page_header.php zu einer eigenen overall_header.tpl für das Portal führt und diese tpl-Datei einen neuen Namen bekommen muss, ebenso wie in der page_header.tpl das Portal als solches "erkannt" werden muss.
So habe ich z. B. mein Portal hier unabhängig vom restlichen Forum abgehoben.
Ein aber umfangreiches Unterfangen, was meist nicht nötig ist.

Für Deine Zwecke wäre die einfachere, zweite Methode besser, indem Du einfach weitere Klasse mit "row..." definierst, z. B. row4 (wenn row3 bereits belegt ist).
In Deinem Fall die wirklich bessere Methode, da ja "nur" eine Klasse, bzw. ein Bereich anders formatiert werden soll, als der Rest des Boards.

Kopiere also dazu in der overall_header.tpl und .css-Datei jeweils in allen Styles die Zeile

Code: Alles auswählen

td.row1	{ background-color: #EFEFEF; }
der css-Datei (der hier angegebene Farbcode ist nur ein Beispiel), bzw.

Code: Alles auswählen

td.row1	{ background-color: {T_TR_COLOR1}; }
in der overall_header.tpl in

Code: Alles auswählen

td.row4	{ background-color: #EFEFEF; }
bzw.

Code: Alles auswählen

td.row4	{ background-color: {T_TR_COLOR1}; }
und ersetze die Farbangaben durch die gewünschten Werte.
Dabei aber auch einen festen Farbwert in der overall_header.tpl eintragen, da row4 sich zunächst nicht direkt im ACP steuern lässt!

Soweit zur Vorbereitung, kommen wir dann gleich zum Portal selber:

Hier musst Du in der portal_body.tpl nun alle Klassen aller Blöcke, die die Farbe "hinter" "row4" erhalten sollen, anpassen.
Also wird so jeweils aus

Code: Alles auswählen

... class="row1" ...
eben

Code: Alles auswählen

... class="row4" ...
und nach dem Leeren des Browser Caches wird das Portal wie gewünscht formatiert angezeigt.

Wobei row1 hier nur ein Beispiel ist. Das verdoppeln aller anderen Klassen ist selbstverständlich auch möglich, also z. B. row2 oder row3, wobei man immer in den betreffenden tpl-Files den "alten" Klassennamen nur durch den dann neu geschaffenen Namen ersetzen muss.
Dabei darf sich ein Klassenname nicht wiederholen, denn dann gilt immer die in den Styledefinitionen zuletzt getroffene Formatierung!
Viele machen hier entscheidene Fehler...

Tipp an dieser Stelle:
Da Du aktuell die Farben im ACP verwaltest, was aus Bequemlichkeitsgründen ja nicht schlecht ist, sich die Farben aber in der Regel nicht alle Nase lang ändern, solltest Du erwägen, die css-Datei des jeweiligen Styles direkt zu verwenden.
Die meisten Styles besitzen dazu eben nach der Installation die gleichen Farbinformationen in den gleichlautenden bereits o. g. css-Dateien, wie sie auch im ACP zunächst vorhanden sind.
Wenn Du nun die css-Datei des Styles verwendest, lädt der Browser die Style-Informationen dazu nur einmal in den Speicher (bis zum Schliessen), verarbeitet sie auch nur einmal und muss die Style-informationen nicht bei jedem Seitenaufruf neu abarbeiten, da sie in der overall_header.tpl enthalten und damit bei jeder Seite mit geladen werden.

Um das zu erreichen, ersetze in der overall_header.tpl lediglich die Zeile (hier mal die Original-Zeile für subSilver)

Code: Alles auswählen

<!-- link rel="stylesheet" href="templates/subSilver/{T_HEAD_STYLESHEET}" type="text/css" -->
durch

Code: Alles auswählen

<link rel="stylesheet" href="templates/subSilver/{T_HEAD_STYLESHEET}" type="text/css">
und lösche in der gleichen Datei alles zwischen und einschliesslich der Zeilen

Code: Alles auswählen

<style type="text/css">
und

Code: Alles auswählen

</style>
Das beschleunigt den Seitenaufbau etwas und gerade Besitzer langsamerere Internetanbindungen werden es Dir danken.

Zukünftige Änderungen an den CSS-Definitionen des Styles, auch die von diversen MODs, sind dann allerdings direkt in der css-Datei aller Styles anstelle der jeweiligen overall_header.tpl zu erledigen, aber das dürfte dann nicht das Problem darstellen.
Das Ergebnis ist dabei jedenfalls sauberer und der Traffic auf Deinen Server/Webspace wird dazu ebenfalls reduziert. Bei häufigen Seitenaufrufen um einen nicht unerheblichen Anteil!
Dann muss man aber nach bei jeder Änderung an den css-Dateien immer den Browser Cache leeren, sonst sieht man u. U. die Änderungen nicht sofort und die Verwaltung der Styleangaben im ACP ist damit nutzlos (was aber aufgrund der nur selten zu änderden Styleangaben verschmerzt werden kann).
Das sind aber die wohl einzigsten echten Nachteile dieser Methode...
Karsten Ude
-={ Das Mädchen für alles }=-
Kein Support per Messenger, Email oder PN! Unaufgeforderte Nachrichten werden ignoriert!
No support per Messenger, Email or PM. Each unasked message will be ignored!
Benutzeravatar
snobbel
Beiträge: 53
Registriert: Mo 26.Feb, 2007 00:52
Wohnort: noch Oberhausen

Beitrag von snobbel »

Vielen lieben dank für die äusserst ausfürliche Antwort!!!!!
:p :p :p
Das mit dem Header hat sich erledigt, vielen lieben Dank für die Antwort dafür!!!


[quote="oxpus";p="84319"]

Für Deine Zwecke wäre die einfachere, zweite Methode besser, indem Du einfach weitere Klasse mit "row..." definierst, z. B. row4 (wenn row3 bereits belegt ist).
In Deinem Fall die wirklich bessere Methode, da ja "nur" eine Klasse, bzw. ein Bereich anders formatiert werden soll, als der Rest des Boards.

Kopiere also dazu in der overall_header.tpl und .css-Datei jeweils in allen Styles die Zeile

Code: Alles auswählen

td.row1	{ background-color: #EFEFEF; }
der css-Datei (der hier angegebene Farbcode ist nur ein Beispiel), bzw.

Code: Alles auswählen

td.row1	{ background-color: {T_TR_COLOR1}; }
in der overall_header.tpl in

Code: Alles auswählen

td.row4	{ background-color: #EFEFEF; }
bzw.

Code: Alles auswählen

td.row4	{ background-color: {T_TR_COLOR1}; }
und ersetze die Farbangaben durch die gewünschten Werte.
Dabei aber auch einen festen Farbwert in der overall_header.tpl eintragen, da row4 sich zunächst nicht direkt im ACP steuern lässt!

Soweit zur Vorbereitung, kommen wir dann gleich zum Portal selber:

Hier musst Du in der portal_body.tpl nun alle Klassen aller Blöcke, die die Farbe "hinter" "row4" erhalten sollen, anpassen.
Also wird so jeweils aus

Code: Alles auswählen

... class="row1" ...
eben

Code: Alles auswählen

... class="row4" ...
und nach dem Leeren des Browser Caches wird das Portal wie gewünscht formatiert angezeigt.[/quote]

Das habe ich probiert, war ja auch eigentlich gar nicht soviel Arbeit, jedoch werden meine Blöcke nun mit weißen anstatt mit "grünem" Hintergrund dargestellt:

Bild

Hier mal meine
°overall_header.tpl
°portal_body.tpl
°.css
Tipp an dieser Stelle:
Da Du aktuell die Farben im ACP verwaltest, was aus Bequemlichkeitsgründen ja nicht schlecht ist, sich die Farben aber in der Regel nicht alle Nase lang ändern, solltest Du erwägen, die css-Datei des jeweiligen Styles direkt zu verwenden.
Die meisten Styles besitzen dazu eben nach der Installation die gleichen Farbinformationen in den gleichlautenden bereits o. g. css-Dateien, wie sie auch im ACP zunächst vorhanden sind.
Wenn Du nun die css-Datei des Styles verwendest, lädt der Browser die Style-Informationen dazu nur einmal in den Speicher (bis zum Schliessen), verarbeitet sie auch nur einmal und muss die Style-informationen nicht bei jedem Seitenaufruf neu abarbeiten, da sie in der overall_header.tpl enthalten und damit bei jeder Seite mit geladen werden.

Um das zu erreichen, ersetze in der overall_header.tpl lediglich die Zeile (hier mal die Original-Zeile für subSilver)

Code: Alles auswählen

<!-- link rel="stylesheet" href="templates/subSilver/{T_HEAD_STYLESHEET}" type="text/css" -->
durch

Code: Alles auswählen

<link rel="stylesheet" href="templates/subSilver/{T_HEAD_STYLESHEET}" type="text/css">
und lösche in der gleichen Datei alles zwischen und einschliesslich der Zeilen

Code: Alles auswählen

<style type="text/css">
und

Code: Alles auswählen

</style>
Das beschleunigt den Seitenaufbau etwas und gerade Besitzer langsamerere Internetanbindungen werden es Dir danken.

Zukünftige Änderungen an den CSS-Definitionen des Styles, auch die von diversen MODs, sind dann allerdings direkt in der css-Datei aller Styles anstelle der jeweiligen overall_header.tpl zu erledigen, aber das dürfte dann nicht das Problem darstellen.
Das Ergebnis ist dabei jedenfalls sauberer und der Traffic auf Deinen Server/Webspace wird dazu ebenfalls reduziert. Bei häufigen Seitenaufrufen um einen nicht unerheblichen Anteil!
Dann muss man aber nach bei jeder Änderung an den css-Dateien immer den Browser Cache leeren, sonst sieht man u. U. die Änderungen nicht sofort und die Verwaltung der Styleangaben im ACP ist damit nutzlos (was aber aufgrund der nur selten zu änderden Styleangaben verschmerzt werden kann).
Das sind aber die wohl einzigsten echten Nachteile dieser Methode...
Habe es leider nicht gefunden bei mir.... ^6


PS: Wo bekomme ich das her, dass sich beim Einfügen eines Bildes, Zitates etc. ein extra Fenster öffnet?????
Benutzeravatar
oxpus
Administrator
Beiträge: 28735
Registriert: Mo 27.Jan, 2003 22:13
Wohnort: Bad Wildungen
Kontaktdaten:

Beitrag von oxpus »

PS: Wo bekomme ich das her, dass sich beim Einfügen eines Bildes, Zitates etc. ein extra Fenster öffnet?????
Das ist ein anderes Thema und gehört daher in ein neues Topic.
Vorher solltest Du allerdings mal in das Forum "Snippets" schauen ;)
Das habe ich probiert, war ja auch eigentlich gar nicht soviel Arbeit, jedoch werden meine Blöcke nun mit weißen anstatt mit "grünem" Hintergrund dargestellt:
Hast Du denn auch den Farbcode nach Deinen Wünschen geändert? Wohl nicht ;)
Meine Angaben sind allesamt nur Beispiele und müssen auf Dein Forum angepasst werden!

Wenn die Zeile

Code: Alles auswählen

<!-- link rel="stylesheet" href="templates/subSilver/{T_HEAD_STYLESHEET}" type="text/css" -->
(wie gesagt: subSilver muss dabei ggf. durch Deinen Stylenamen ersetzt werden!) nicht vorhanden ist, dann füge nach <title>...</title> diese Zeile ein:

Code: Alles auswählen

<link rel="stylesheet" href="templates/subSilver/{T_HEAD_STYLESHEET}" type="text/css">
Und eben die vorhandenen Style-Angaben löschen.
Sollte dem Style allerdings keine css-Datei beiliegen, so kann man die auch erstellen.
Einfach eine Text-Datei mit dem Namen des Templates unter templatename.css erstellen (Groß- und Kleinschreibung dabei unbedingt beachten!) und den Inhalt aus der overall_header.tpl, der zwischen den Zeilen

Code: Alles auswählen

<style ...>
und

Code: Alles auswählen

</style>
steht, dorthin "verschieben" und in den Ordner des Templates hochladen. Also dort, wo auch die overall_header.tpl enthalten ist.
Das gleiche machst Du übrigends dann auch mit der simple_header.tpl...

Danach können die o. g. Zeile eingefügt und die Styleangaben auch dort gelöscht werden, da diese ja nun in der css-Datei enthalten sind.
Karsten Ude
-={ Das Mädchen für alles }=-
Kein Support per Messenger, Email oder PN! Unaufgeforderte Nachrichten werden ignoriert!
No support per Messenger, Email or PM. Each unasked message will be ignored!
Benutzeravatar
snobbel
Beiträge: 53
Registriert: Mo 26.Feb, 2007 00:52
Wohnort: noch Oberhausen

Beitrag von snobbel »

Natürlich habe ich das angepasst - siehe meine angefügten Links, daher habe ich die ja mit eingebunden ;)


Zu dem Style - gesagt - getan, seitdem sieht mein Forum so aus:

Bild

(auch noch nach hochladen der gsicherten Datei, löschen der Cookies und schliessen des Browsers (hoffe nur, dass mein Freund es so schnell nicht sieht.... :fl :pfff :fl )
Benutzeravatar
oxpus
Administrator
Beiträge: 28735
Registriert: Mo 27.Jan, 2003 22:13
Wohnort: Bad Wildungen
Kontaktdaten:

Beitrag von oxpus »

Häng mal Deine Dateien bitte als Archiv an.
So kann man nichts damit anfangen!
Karsten Ude
-={ Das Mädchen für alles }=-
Kein Support per Messenger, Email oder PN! Unaufgeforderte Nachrichten werden ignoriert!
No support per Messenger, Email or PM. Each unasked message will be ignored!
Benutzeravatar
snobbel
Beiträge: 53
Registriert: Mo 26.Feb, 2007 00:52
Wohnort: noch Oberhausen

Beitrag von snobbel »

Habe das letzte soweit revidieren können allerdings sind die Hintergründe der Boxen eigentlich immernoch weiß, nur mit ganz viel Schmu und HTML habe ich sie wieder grün bekommen (alle bis auf eine) nur ist da jetzt noch immer der weiße Rahmen drum.
Hier die Dateien, die zu dem weiß geführt haben, also womit das Chaos begonnen hat:
Du hast keine ausreichende Berechtigung, um die Dateianhänge dieses Beitrags anzusehen.
Benutzeravatar
oxpus
Administrator
Beiträge: 28735
Registriert: Mo 27.Jan, 2003 22:13
Wohnort: Bad Wildungen
Kontaktdaten:

Beitrag von oxpus »

Du hattest weiterhin den Link zum Stylesheet nicht in der overall_header.tpl!
Also die Zeile

Code: Alles auswählen

<link rel="stylesheet" href="templates/subSilver/{T_HEAD_STYLESHEET}" type="text/css">
Dann kann es auch nicht wirklich klappen, da die Farbdefinitionen die Du angegeben hattest, wie ich bereits einige Posts vorher geschrieben hatte, nicht über das ACP verwaltet werden!

Anbei nun die korrigierten Dateien, mit denen die Blocks im Portal nun korrekt formatiert werden sollten.
Du hast keine ausreichende Berechtigung, um die Dateianhänge dieses Beitrags anzusehen.
Karsten Ude
-={ Das Mädchen für alles }=-
Kein Support per Messenger, Email oder PN! Unaufgeforderte Nachrichten werden ignoriert!
No support per Messenger, Email or PM. Each unasked message will be ignored!
Benutzeravatar
snobbel
Beiträge: 53
Registriert: Mo 26.Feb, 2007 00:52
Wohnort: noch Oberhausen

Beitrag von snobbel »

Hm, sorry wenn ich dir jetzt (oder länger schon) ziemlich dumm vorkomme, aber ist es richtig, dass in der von Dir korrigierten overall_header die Farbangabe

Code: Alles auswählen

/* Main table cell colours and backgrounds */
td.row1	{ background-color: {T_TR_COLOR1}; }
td.row2	{ background-color: {T_TR_COLOR2}; }
td.row3	{ background-color: {T_TR_COLOR3}; }
td.row4	{ background-color: {T_TR_COLOR4}; }
komplett weg ist????

^6 ^6 ^6

Habe es noch nicht ausprobiert... :eek:
Zuletzt geändert von snobbel am So 20.Jan, 2008 22:39, insgesamt 2-mal geändert.
Benutzeravatar
oxpus
Administrator
Beiträge: 28735
Registriert: Mo 27.Jan, 2003 22:13
Wohnort: Bad Wildungen
Kontaktdaten:

Beitrag von oxpus »

Das habe ich doch die ganze Zeit geschrieben, daß genau dieser Teil doch in die css-Datei kommt und diese verlinkt wird.
Hast Du denn meine Post nicht komplett gelesen ausser sie nur zu zitieren?
Karsten Ude
-={ Das Mädchen für alles }=-
Kein Support per Messenger, Email oder PN! Unaufgeforderte Nachrichten werden ignoriert!
No support per Messenger, Email or PM. Each unasked message will be ignored!
Benutzeravatar
snobbel
Beiträge: 53
Registriert: Mo 26.Feb, 2007 00:52
Wohnort: noch Oberhausen

Beitrag von snobbel »

...ich schaue es mir morgen mal in aller Ruhe an, bevor sich da noch einige Fehler einschleichen....
;)
Antworten