Farbgestaltung in phpBB3

Alles zu Styles, Templates, Icons und Smilies für phpBB 3.0.x, sowie allgemeine Designfragen zur Integration von phpBB in bestehende Websites.
phpBB Styles Demo
Forumsregeln
Bei Style spezifischen Fragen ist der Stylename und die Downloadquelle des Styles erforderlich, besser noch die URL vom betroffenen Forum.
Antworten
Capone
Mitglied
Beiträge: 4
Registriert: 12.09.2007 11:44

Farbgestaltung in phpBB3

Beitrag von Capone »

Hi,

Ich habe ein Problem mit meinem Forum. (War klar ne. :P)

Mir gefällt das phpBB3 bis jetzt schon recht gut. Von der Benutzerfreundlichkeit für Admins abgesehen. :-?
Naja, jetzt habe ich soweit alles eingestellt, und sehe immer noch das mein Forum nicht farblich an meine Homepage angepasst ist. Das Problem dabei ist, dass ich aus diesem 3 Kilometer langem CSS Code nicht ganz schlau werden. Ich wollte z.B. schonmal die Farben der Schrift ändern. Hat irgendwie nicht ganz hingehauen... Dann wollte ich den Hintergrund ändern. Auch das ging nicht. Ich habe den Browser neu geladen, und ich habe den Style im ACP aktualisiert. Also ändert sich nichts... Das ist aber auch nur das eine Übel, denn wie schon gesagt blicke ich überhaupt nicht durch den ganzen Code durch.
Wenn wenigstens eine ordentlich ausführliche Beschriftung dran wäre, wäre das ja kein Problem, aber immer nur diese winzigen Überschriften, helfen so einem Laien wie mir wohl kaum. :x

Also, meine Frage: Könnte einer von euch irgendwie eine Beschriftung, die einem erklärt wofür die entsprechende Farbe oder die entsprechende Schriftgröße steht in den Style reinschreiben? Wäre euch sehr sehr dankbar!

Also hier ist das jetztige Forum: Klick mich!
Hier die Homepage: Klick mich!
Und hier der Link zum Stylesheet: Klick mich!

Dann noch was anderes: Ich wurde schon von einem User darauf angesprochen, dass die Links sich automatisch im selben Tab öffnen und das es nervig seie. Jetzt hatte ich schon von der Seite hier: Klick mich! Den Mod installiert, aber er funktioniert kein Stück wie man sieht... Hat auch einer eine Lösung dafür?

Danke an alle helfenden im Vorraus!
Zuletzt geändert von Capone am 14.09.2007 10:38, insgesamt 1-mal geändert.
ComDex
Mitglied
Beiträge: 32
Registriert: 31.08.2007 15:10

Beitrag von ComDex »

Das Problem hatte ich auch, denn durch das kpl. CSS durchzublicken ist schon fast ne Wissenschaft für sich ;)

Ich hab mir dann einfach ein Style ausgesucht, was schon so ungefähr farblich meinen Vorstellungen entspricht.

Als nächstes hab ich dann mit Firefox geguckt, welche Farbe diese oder jene Tabelle (extra Firefox Plugin "Web Developer Toolbar").

Wenn ich dann z.B. anstelle von "#003300" überall "#000000" haben wollte, einfach im CSS alles ersetzt was "#003300" hatte ... gespeichert und im Browser aktualisiert.
Anschließend dann noch ein paar andere sachen geändert und sofort geguckt, wo der Unterschied ist. Ist zwar etwas zeitaufwendig, aber hat den Vorteil, dass man so relativ schnell mitbekommt, welche "class" für was zuständig ist.

Vielleicht hilft es dir ja etwas.
Es gibt auch ganz nette Freeware Tools, mit denen man CSS-Dateien bearbeiten kann.
Benutzeravatar
darkon
Mitglied
Beiträge: 1133
Registriert: 08.08.2003 15:07
Wohnort: Wölfersheim

Beitrag von darkon »

Einige Codes kommen doppelt vor, such also besser ausgiebig. ;)

Zum Farbenändern ist http://beta.colorizeit.com/index.php sehr praktisch.

Wenn du die Hintergrundfarbe von ProSilver änderst, mußt du gucken, daß die Grafiken für die abgerundeten Ecken in dieser Farbe sind. Ich habe jetzt den Namen der Dateien leider nicht mehr im Kopf...
Capone
Mitglied
Beiträge: 4
Registriert: 12.09.2007 11:44

Beitrag von Capone »

Danke für die Tipps! Wie man sieht, habe ich das jetzt schon ganz gut hingekriegt. Doch nun habe ich einige Probleme...

Zum einen wird auf einmal die Datei "bg_header.gif" nicht mehr angezeigt. Also die Grafik oben direkt unter dem Banner, welcher übrigens auch weg ist. Die Pfade werden allerdings noch in der CSS Datei aufgeführt und die Grafiken sind in den entsprechenden Ordnern. Müsste also eigentlich alles glatt laufen. Tut es aber nicht. :-?

Dazu finde ich auch einfach nicht den Hex-Code #FFFFFF für die Border. Also die Ränder zwischen den Foren. Ich habe alles abgesucht, habe jeden Code der #FFFFFF umgeschrieben in #FF0000 damit es Rot wird. Dennoch ist keiner dieser Codes für die Ränder! Ist der Rand standardlich weiß, dass er nicht aufgeführt werden muss, oder ist er irgendwo anders aufgeführt. Wenn ersteres, wie heißt der Code für die Ränder und wo muss er rein. Wenn zweiteres, in welcher Datei ist er gespeichert? Das selbe übrigens auch mit der Standardschrift. Sie wird anscheinend auch nicht aufgeführt.

Und nein, es ist weiß. Habe es mit dem Colorpicker Add-On für Firefox nachgesehen und sogar ein Screenshot gemacht, in Painthop geladen, rangezoomt und den Code des Randes als Farbe genommen. 255, 255, 255, #FFFFFF... Weiß.

Danke auch hier wieder im Vorraus.

EDIT: Ach ja, hier nochmal der Link zur CSS-Datei: Klick mich!
ComDex
Mitglied
Beiträge: 32
Registriert: 31.08.2007 15:10

Beitrag von ComDex »

Also ... bzgl. der border: Änder doch mal das Bild "spacer.gif" ... denn vielleicht ist das keine Tabellenfarbe, sondern es wird die Grafik geladen (ist vielleicht ein Versuch wert)

Und bzgl. der Datei "bg_header.gif": Wenn ich mal gucke, welches Bild geladen wird, zeigt er mir: http://forum.biohazard-modding.de/images/spacer.gif .. Vielleicht mal im ACP unter "Styles" - "Grafiksammlungen" - "ändern" ... gucken, ob du da was ändern kannst.

*edit*
und wenn da gar nichts geht, würde ich versuchshalber mal gucken, was passiert, wenn du in der CSS Datei das Logo "hart" verlinkst ... also in etwa:

.headerbar {
background-color: #4b6673;
background-image: url('styles/Retro/imageset/bg_header.gif');
color: #FFFFFF;


anstelle von:

.headerbar {
background-color: #4b6673;
background-image: url({IMG_SITE_LOGO_SRC});
color: #FFFFFF;
Capone
Mitglied
Beiträge: 4
Registriert: 12.09.2007 11:44

Beitrag von Capone »

Also, mittlerweile habe ich es geschafft, dass das "bg_header" Bild wieder angezeigt wird. Auch die Schriftfarbe habe ich nun angepasst. Ein Thread im Forum zum Style konnte mir da weiter helfen.

Leider funktioniert das mit den Bordern und dem Logo immer noch nicht. Ich habe alles gemacht, was du vorgeschlagen hattest, dennoch geht es nicht. Irgendeine Idee?
ComDex
Mitglied
Beiträge: 32
Registriert: 31.08.2007 15:10

Beitrag von ComDex »

das logo ist ein PNG?
"...styles/Arrow/theme/images/site_logo.png.."

und du hast gesagt, du hast im CSS #FFFFFF überall mal ersetzt?

auch bei
/* proSilver Content Styles
---------------------------------------- */

li.row {
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #8f8f8f;

.. und weiter unten:

--------------------------------------------------------------
Colours and backgrounds for content.css
-------------------------------------------------------------- */
li.row {
border-top-color: #FFFFFF;
border-bottom-color: #19191e;


.. denn wenn es nicht das GIF ist, muss es ja irgendwo im CSS sein ;)
Capone
Mitglied
Beiträge: 4
Registriert: 12.09.2007 11:44

Beitrag von Capone »

Muss ich wohl übersehen haben. :lol:

Funktioniert jetzt, nur leider sind...

[ externes Bild ]

...diese immer noch weiß. Ich finde diesen Code einfach nicht. Den Code für die selben Border, aber im mouse_over habe ich schon gefunden und geändert. Nur den Code für den Normalzustand finde ich einfach nicht.

Auch wenn ich z.B. den Code für die Horizontale Linie oben im "bg_header" ändere, bleibt dieser weiß!

Und ja, es ist .png. War vorher auch schon png. Nur seit dem ich den Style ja umgeändert habe, wird er nicht mehr angezeigt. Obwohl alles richtig ist. Wenn ich jetzt wieder den Standard Stylesheet reinpacken würde, würde dieser wieder angezeigt werden.
Benutzeravatar
Dr.Death
Moderator
Moderator
Beiträge: 17473
Registriert: 23.04.2003 08:22
Wohnort: Xanten
Kontaktdaten:

Beitrag von Dr.Death »

Hi,

ich glaube es sind die "border-left" Attribute in der colours.css

Bereich:

Code: Alles auswählen

/*  	
--------------------------------------------------------------
Colours and backgrounds for content.css
-------------------------------------------------------------- */
Suche dort mal nach:

Code: Alles auswählen

ul.topiclist dd {
	border-left-color: #FFFFFF;
}
Benutzeravatar
Papa Schlumpf
Mitglied
Beiträge: 63
Registriert: 18.01.2006 17:48

Beitrag von Papa Schlumpf »

Gibt es schon irgendwo eine Übesicht über die ganzen CSS-Inhalte? Ich meine so etwas ähnliches wie die tpl-Übersicht in der Dokumentationen zu Version 2.0.xx.

Die css-Dateien sind schon etwas komplex für mich :-? . So frag ich mich z.B. ob die "headerbar"-Werte beide gleich sein müssen wenn ich was ändere? Das Design ändert sich auch wenn ich nur einen ändere, daher frage ich mich warum es den überhaupt 2 mal gibt.

Noch eine viell. etwas naive Frage :oops: : Im ACP im Edit Styles-Bereich, genauer im Theme-Editor, wird mir ja eine ellenlange CSS-Datei zum verändern angezeigt. Ist das die Summe aller einzelnen CSS-Dateien oder was ist das?
Antworten

Zurück zu „[3.0.x] Styles, Templates und Grafiken“