Anleitung: Eigenes Forums-Design erstellen

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
JinDGF
Mitglied
Beiträge: 4
Registriert: 07.01.2009 19:22

Anleitung: Eigenes Forums-Design erstellen

Beitrag von JinDGF »

Hallo,

Ich wollte fragen wie Ihr das genau machts? Das ihr euer eigenes Design erstellt? Hat jemand eine Anleitung gefunden oder kann jemand Schritt für Schritt schreiben wie er das genau macht? Wäre echt nett :wink:
godmod23
Mitglied
Beiträge: 174
Registriert: 30.04.2008 22:20

Re: Anleitung: Eigenes Forums-Design erstellen

Beitrag von godmod23 »

Hallo,

ich hätte für dich ein englisches Tutorial auf der Wiki von phpbb.com gefunden: http://wiki.phpbb.com/Templating_Tutorial.
Greetings, godmod
JinDGF
Mitglied
Beiträge: 4
Registriert: 07.01.2009 19:22

Re: Anleitung: Eigenes Forums-Design erstellen

Beitrag von JinDGF »

danke für denn Link, hat sonst noch jemand irgendwie was? vll. auf Deutsch? :D
Benutzeravatar
Mig
Mitglied
Beiträge: 25
Registriert: 10.01.2009 10:38

Re: Anleitung: Eigenes Forums-Design erstellen

Beitrag von Mig »

Hey ich würde mich auch für ein deutsches HowTo intressieren!
Ich habe schon mehrere Fotos, Grafiken, Zeichnungen und Ideen, aber ich scheiter meist daran das ich mich hilflos durch die ordner und vorhandenen Bilder kämpfe und irgentwie nix erreiche :-(
Villeicht gibt es ja irgentjemand der sich mal die große Mühe gemacht hat, etwas auf deutsch zu schreiben.
Villeicht haben auch mehrere Leute Teilanleitungen auf Deutsch, ich stelle mich gerne zur verfügung die zu sammeln und zusammen zu fügen :-)
Bin über jeden Tip dankbar!
LG, Mig
LG Mig, wenn ich mal eine Frage stelle die hier garnichts mit zu tun hat, sondern Bspw. über Joomla! handelt, nehmt es mir nicht übel, dann habe ich lange nicht geschlafen und das Forum verwechselt ;-)
Stefan S.
Mitglied
Beiträge: 207
Registriert: 13.12.2008 14:08

Re: Anleitung: Eigenes Forums-Design erstellen

Beitrag von Stefan S. »

Hallo

bin auch interessiert. Da ich von grundauf ein fauler Mensch bin freue ich mich auch über eine deutsche Anleitung . EIne Spende in Form eines Freibieres oder eines Knoblauchbrotes
ist gerne möglich :D
VG
Stefan
JFooty
Ehemaliges Teammitglied
Beiträge: 1868
Registriert: 02.10.2007 11:46

Re: Anleitung: Eigenes Forums-Design erstellen

Beitrag von JFooty »

JinDGF hat geschrieben:Ich wollte fragen wie Ihr das genau machts? Das ihr euer eigenes Design erstellt?
Einfach die Dateien eines vorhandenen Styles (z.B. prosilver) abändern, bis es so aussieht, wie ich will. :D
Ein paar html- und css-Kenntnisse sowie rudimentäres Schulenglisch können auf keinen Fall schaden.
Für Anfänger finden sich genug Anlaufstellen mit verständlichen Erklärungen (wie diese oder diese) im Internet.
Empfehlenswert ist auch der Einsatz von Tools (wie z.B. diesem oder diesem), mit denen man einfach ein bisschen herumprobieren kann, ohne etwas kaputt zu machen.
Ansonsten hat sich auch die "Trial and Errror"-Methode bewährt.
Kein Support per PN!
Benutzeravatar
sepp71
Mitglied
Beiträge: 919
Registriert: 23.12.2006 00:03

Re: Anleitung: Eigenes Forums-Design erstellen

Beitrag von sepp71 »

Ich bastele auch immer mit Trial & Error.
1.) Ordner eines vorhandenen Styles kopieren, mit dem Namen des neuen Styles versehen.
2.) In diesem Ordner die style.cfg mit einem Editor öffnen und anstelle von name=prosilver den Namen setzen, den man auch dem Style-Ordner gegeben hat.

Ab jetzt hat man zwei Styles und kann in dem einen herumbasteln, während der andere unangetastet bleibt. Theoretisch kann man das ab dann auch alles im Live-Forum machen, wenn man die Rechte so vergibt, dass andere Nutzer den Style nicht frei wählen können.
Wissen sollte man, dass phpbb davon ausgeht, dass die Style-Informationen in der Datenbank (und nicht in den Verzeichnissen des Webspaces) vorgehalten werden. An den Styles in der DB kann man über das ACP/Styles herumbasteln, muss nur am Ende daran denken, dass auch mal zu exportieren (d.h. in den Webspace oder in andere Dateien) zu schreiben, damit es nicht bei der nächsten Aktualisierung verlorengeht.
Umgekehrt: Wenn man lieber in den Datein arbeitet, muß man jedesmal den Style aktualisieren, um zu sehen, was herausgekommen ist.

Was ich allerdings immer noch suche, ist ein "Cheatsheet", aus dem ich ersehen kann, welche CSS-Definitionen für welche Bereiche gültig sind - denn der CSS-Code ist ja doch etwas unübersichtlich.
Für Kleinkram hole ich mir das per Firefox (Auswahl-Quelltext ansehen) aus meinem Forum - aber dort kann man z.B. nicht erkennen, welche Zuweisungen nur in bestimmten Elementen (z.B. div) funktionieren, so dass es für größere Änderungen nicht reicht.

Bedenken sollte man aber auch: Größere Änderungen an den Styles rächen sich beim nächsten Update - denn dann muß man sehen, wie man seinen eigenen Style angepaßt bekommt. Farbschemata, die lediglich fabrliche Änderungen gegenüber einem Standard-Style sind, sind natürlich kein Problem. Irgendwo gab es hier auch mal einen Link, mit dem man durch Zieh- und Drehschalter die Farben seines phpbb-Boards nach Belieben ändern und später herunterladen konnte.
Sepp
Benutzeravatar
Dr.Death
Moderator
Moderator
Beiträge: 17475
Registriert: 23.04.2003 08:22
Wohnort: Xanten
Kontaktdaten:

Re: Anleitung: Eigenes Forums-Design erstellen

Beitrag von Dr.Death »

Hallo,

zum Anfang kann man hiermit anfangen:
KB:173
Benutzeravatar
Mig
Mitglied
Beiträge: 25
Registriert: 10.01.2009 10:38

Re: Anleitung: Eigenes Forums-Design erstellen

Beitrag von Mig »

Also, ich habe auch Intresse daran meinen eigenen Style zu erstellen.
Am liebsten ein sehr schönen mit meinen Bildern und Zeichnungen, für die ich auch manches Größenverhältniss anpassen müsste.
Es gibt leider keine wirkliche deutsche Anleitung für volldoofe ;-)
Also dachte ich mir, ich als König der volldoofen versuche mal so eine Anleitung ins Leben zu rufen!
Denkt bitte daran, es ist schon spät und ich leide unter Alkoholeinfluss ;-) Ich fände es super wenn wir die von mir hier aufgeführte Liste "vervollständigen und weiter ausfühern könnten".
Mal sehen wie ihr das findet, so als Grundlage auf die man aufbauen kann.
Die Zahlen vor dem Code beschreiben die Zeile in der er vorkommt und das fettgedrucke wie man überhaupt zu den Zeilen kommt. Ich bearbeite die Dateien immer mit Notepad++.

Wenn ihr Fehler oder neue Sachen postet nehme ich sie mit in meinen Post auf! Tschaaaka wir schaffen das ;-)


Verändern der Farbe in der CSS.Datei

style/ prosilver/ theme/ colours.css

/* Die drei Balken wo "Forenübersicht", "persönlicher Bereich" und unten nomma "Forenübersicht" drin steht hat*/

Code: Alles auswählen

57	.navbar {
58	background-color: #000099;
59	}

/*Hier wird die Farbe von den Schriften verändert die im hauptforum sind "unter forum"*/
hover = "maus drüber" active =a ktive und das andere ist Standartfarbe*/

Code: Alles auswählen

265	/* a.forumtitle:visited { color: #105289; } */
266
267	a.forumtitle:hover {
268	color: #BC2A4D;
269	}
270
271	a.forumtitle:active {
272	color: #105289;
273	}
274
275	a.topictitle {
276	color: #105289;
277	}
278
279	/* a.topictitle:visited { color: #368AD2; } */
280
281	a.topictitle:hover {
282	color: #BC2A4D;
283}
284
285	a.topictitle:active {
286	color: #105289;
/*Die dünnen Balken zwischen "themen" und "beiträge" und "letzter Beitrag" im forum*/

Code: Alles auswählen

373ul.topiclist dd {
374	border-left-color: #FFFFFF;
375	}
/*das selbe für die horizontalen linien*/

Code: Alles auswählen

390	i.row {
391	border-top-color:  #000000;
392	border-bottom-color: #00608F;
/*Für die Schriftfarbe bei den vorherigen Lienien ("forum", "Themen", "Beiträge" und letzter Beitrag"*/

Code: Alles auswählen

412	li.header dt, li.header dd {
413	color: #000000;
414	}
Verändern der Bilder unter styles/ prosilver/ theme/
Bitte immer nach dem Strich mit der Erklärung alles weg!

Hier habe ich einfach die Bilder verändert und geschaut wo sich das Forum verändert!
Überigends ist das Forum mit den Farbvorgaben von oben sehr häßlich ;-)

bg_header - (ist oben der hauptbalken).gif
bg_list - (Hauptforum oben unterforen komplett).gif
bg_menu - (noch unbekannt).gif
bg_tabs1 - (menü oben unter persöhnlicher Bereich).gif
bg_tabs2 - (noch unbekannt).gif
no_avatar - (unbekannt wenn einer kein Aventar hat).gif

Die Buttons in diesem Ordner verstehen sich von selber, welchen man im Forum ändern will, hier suchen!
Bitte vergesst beim ändern der Bilder nciht darauf zu achten das die neuen die selbe Größe haben!
Kann man bei Pain zB. unten rechts sehen!

styles/ prosilver/ imageset
site_logo.gif <--- Das Logo oben Links in der Ecke
LG Mig, wenn ich mal eine Frage stelle die hier garnichts mit zu tun hat, sondern Bspw. über Joomla! handelt, nehmt es mir nicht übel, dann habe ich lange nicht geschlafen und das Forum verwechselt ;-)
Antworten

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