Tutorial zu PHPbb

Beitrag von **Archon** » Do 27.Jan, 2005 16:47

Also freunde, der Archon braucht für seinen freund ein bisl Hilfe.

Und zwar geht es darum ein Forum grafisch umzugestallten. In meinen augen ist das ja eigendlich ultra Easy. Nur meine wenigkeit hat davon trotzdem kein Plan. Ich kann zwar Farben und Bilder ändern, aber beim LayOut bin ich weitaus überfragt.

Nun, was ich bräuchte wäre ein Leicht verständliches Tutorial in welchem Schritt für Schritt (am besten mit bildern^^) erklärt wird wie man ein PHPbb Forum umdesignt.

Also, das muss so verständlich sein das ein Idiot wie ich das versteht.

Schonmal danke im Vorraus.

Beitrag von **Susan** » Do 27.Jan, 2005 18:10

ui, das ist dann ja nen großes Projekt

Hast Du / Habt Ihr denn eine Vorstellung wie es aussehen soll? Ich denke dann wäre es viel einfach was zu erklären ^e

gruß
Susan

Beitrag von **oxpus** » Do 27.Jan, 2005 19:33

Soll Euer Board denn auch der Hauptbestandteil sein?
Ein "blankes" phpBB oder gleich ein Portalsystem wie das phpbb2 plus oder Orion NT?
Es gibt bereits auch schon viele Styles für das phpBB in fast jeder Ausprägung und für fast jede Version. Alles anpassbar an die eigenen Wünsche.

Und am besten startest Du erstmal mit einem eigenen kleinen phpBB, daß Du in komplett deutsch hier runterladen kannst: http://www.phpbb.de/download.php

Zur Installation findest Du hier in der Knowledge Base ( http://www.oxpus.de/viewtopic.php?t=1332 ) oder auch auf phpbb2.de ( http://www.phpbb.de/doku/kb/artikel.php?artikel=10 )

Ich hoffe, daß hilft Dir schon einmal, die ersten Hürden zu überstehen.

Beitrag von **Susan** » Do 27.Jan, 2005 20:00

ich glaube das meint Archon nicht

Ich habe das so verstanden das ein Forum vorhanden ist, dieses aber grafisch gestaltet werden soll. Also Farben, Bilder, Buttons usw. Also so wie ich es grad auf meiner Seite mache Bild

Oder hab ich das falsch verstanden ?

Beitrag von **Archon** » Fr 28.Jan, 2005 08:39

Ja Forum ansich is ja nich das Prob. Abereben das Umgestallten.

Muss nu los zur schule meld mich heut mittag nochmal.

Beitrag von **Susan** » Fr 28.Jan, 2005 08:56

oh, ich möchte auch noch zur Schlue gehen

Beitrag von **Archon** » Fr 28.Jan, 2005 12:42

ALso, heut mittag is ja nun mehr oder weniger. ^^

Also, es geht um die Umgestalltung eines PHPbb forums.

Also: Ausgangspunkt is folgender: http://lantoaster.la.funpic.de/phpBB2/
(ist nun nich das Betreffende Forum, das geht in etwa 2W online, is nur mein "TestForum" also wenn ich was teste/rumbasteln will)

Ein Frisch installiertes PHPbb.

Es geht nun darum dieses Forum umzugestallten.
Die Grafiken sind ja nich das Prob. Nun farblich gesehen auch nich. (bräuchte nur im Admin pannel die genaue bedeutung von den einzelnen Farben, (der fragt mich da jedemenge zeug und probieren is blöd) Also welche was ändert.

Und dann ein Tutorial wie mann das Gesammte Layout ändert. (da is das hauptprob, davon hab ich 0 ahnung oder weniger)
WIE es am ende aussehen soll, wissen wir noch nich, weil wir nich wissen wie weit wir es verändern können.

Also ein allgemeines Skinning (ich nenns mal so) tutorial.

Beitrag von **AmigaLink** » Fr 28.Jan, 2005 13:38

Also von der Farbänderung übers ACP würde ich abraten!
Da du sowieso das komplette Design bearbeiten möchtest, solltest du damit anfangen die CSS-Datei zu aktivieren, indem du

Code: Alles auswählen

[s=9]<!-- link rel="stylesheet" href="templates/subSilver/{T_HEAD_STYLESHEET}" type="text/css" -->
<style type="text/css">
<!--
/*
  The original subSilver Theme for phpBB version 2+
  Created by subBlue design
  http://www.subBlue.com

  NOTE: These CSS definitions are stored within the main page body so that you can use the phpBB2
  theme administration centre. When you have finalised your style you could cut the final CSS code
  and place it in an external file, deleting this section to save bandwidth.
*/

/* General page style. The scroll bar colours only visible in IE5.5+ */
body { 
	background-color: {T_BODY_BGCOLOR};
	scrollbar-face-color: {T_TR_COLOR2};
	scrollbar-highlight-color: {T_TD_COLOR2};
	scrollbar-shadow-color: {T_TR_COLOR2};
	scrollbar-3dlight-color: {T_TR_COLOR3};
	scrollbar-arrow-color:  {T_BODY_LINK};
	scrollbar-track-color: {T_TR_COLOR1};
	scrollbar-darkshadow-color: {T_TH_COLOR1};
}

/* General font families for common tags */
font,th,td,p { font-family: {T_FONTFACE1} }
a:link,a:active,a:visited { color : {T_BODY_LINK}; }
a:hover		{ text-decoration: underline; color : {T_BODY_HLINK}; }
hr	{ height: 0px; border: solid {T_TR_COLOR3} 0px; border-top-width: 1px;}

/* This is the border line & background colour round the entire page */
.bodyline	{ background-color: {T_TD_COLOR2}; border: 1px {T_TH_COLOR1} solid; }

/* This is the outline round the main forum tables */
.forumline	{ background-color: {T_TD_COLOR2}; border: 2px {T_TH_COLOR2} solid; }

/* 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}; }

/*
  This is for the table cell above the Topics, Post & Last posts on the index.php page
  By default this is the fading out gradiated silver background.
  However, you could replace this with a bitmap specific for each forum
*/
td.rowpic {
		background-color: {T_TD_COLOR2};
		background-image: url(templates/subSilver/images/{T_TH_CLASS3});
		background-repeat: repeat-y;
}

/* Header cells - the blue and silver gradient backgrounds */
th	{
	color: {T_FONTCOLOR3}; font-size: {T_FONTSIZE2}px; font-weight : bold; 
	background-color: {T_BODY_LINK}; height: 25px;
	background-image: url(templates/subSilver/images/{T_TH_CLASS2});
}

td.cat,td.catHead,td.catSides,td.catLeft,td.catRight,td.catBottom {
			background-image: url(templates/subSilver/images/{T_TH_CLASS1});
			background-color:{T_TR_COLOR3}; border: {T_TH_COLOR3}; border-style: solid; height: 28px;
}

/*
  Setting additional nice inner borders for the main table cells.
  The names indicate which sides the border will be on.
  Don't worry if you don't understand this, just ignore it :-)
*/
td.cat,td.catHead,td.catBottom {
	height: 29px;
	border-width: 0px 0px 0px 0px;
}
th.thHead,th.thSides,th.thTop,th.thLeft,th.thRight,th.thBottom,th.thCornerL,th.thCornerR {
	font-weight: bold; border: {T_TD_COLOR2}; border-style: solid; height: 28px;
}
td.row3Right,td.spaceRow {
	background-color: {T_TR_COLOR3}; border: {T_TH_COLOR3}; border-style: solid;
}

th.thHead,td.catHead { font-size: {T_FONTSIZE3}px; border-width: 1px 1px 0px 1px; }
th.thSides,td.catSides,td.spaceRow	 { border-width: 0px 1px 0px 1px; }
th.thRight,td.catRight,td.row3Right	 { border-width: 0px 1px 0px 0px; }
th.thLeft,td.catLeft	  { border-width: 0px 0px 0px 1px; }
th.thBottom,td.catBottom  { border-width: 0px 1px 1px 1px; }
th.thTop	 { border-width: 1px 0px 0px 0px; }
th.thCornerL { border-width: 1px 0px 0px 1px; }
th.thCornerR { border-width: 1px 1px 0px 0px; }

/* The largest text used in the index page title and toptic title etc. */
.maintitle	{
	font-weight: bold; font-size: 22px; font-family: "{T_FONTFACE2}",{T_FONTFACE1};
	text-decoration: none; line-height : 120%; color : {T_BODY_TEXT};
}

/* General text */
.gen { font-size : {T_FONTSIZE3}px; }
.genmed { font-size : {T_FONTSIZE2}px; }
.gensmall { font-size : {T_FONTSIZE1}px; }
.gen,.genmed,.gensmall { color : {T_BODY_TEXT}; }
a.gen,a.genmed,a.gensmall { color: {T_BODY_LINK}; text-decoration: none; }
a.gen:hover,a.genmed:hover,a.gensmall:hover	{ color: {T_BODY_HLINK}; text-decoration: underline; }

/* The register, login, search etc links at the top of the page */
.mainmenu		{ font-size : {T_FONTSIZE2}px; color : {T_BODY_TEXT} }
a.mainmenu		{ text-decoration: none; color : {T_BODY_LINK};  }
a.mainmenu:hover{ text-decoration: underline; color : {T_BODY_HLINK}; }

/* Forum category titles */
.cattitle		{ font-weight: bold; font-size: {T_FONTSIZE3}px ; letter-spacing: 1px; color : {T_BODY_LINK}}
a.cattitle		{ text-decoration: none; color : {T_BODY_LINK}; }
a.cattitle:hover{ text-decoration: underline; }

/* Forum title: Text and link to the forums used in: index.php */
.forumlink		{ font-weight: bold; font-size: {T_FONTSIZE3}px; color : {T_BODY_LINK}; }
a.forumlink 	{ text-decoration: none; color : {T_BODY_LINK}; }
a.forumlink:hover{ text-decoration: underline; color : {T_BODY_HLINK}; }

/* Used for the navigation text, (Page 1,2,3 etc) and the navigation bar when in a forum */
.nav			{ font-weight: bold; font-size: {T_FONTSIZE2}px; color : {T_BODY_TEXT};}
a.nav			{ text-decoration: none; color : {T_BODY_LINK}; }
a.nav:hover		{ text-decoration: underline; }

/* titles for the topics: could specify viewed link colour too */
.topictitle,h1,h2	{ font-weight: bold; font-size: {T_FONTSIZE2}px; color : {T_BODY_TEXT}; }
a.topictitle:link   { text-decoration: none; color : {T_BODY_LINK}; }
a.topictitle:visited { text-decoration: none; color : {T_BODY_VLINK}; }
a.topictitle:hover	{ text-decoration: underline; color : {T_BODY_HLINK}; }

/* Name of poster in viewmsg.php and viewtopic.php and other places */
.name			{ font-size : {T_FONTSIZE2}px; color : {T_BODY_TEXT};}

/* Location, number of posts, post date etc */
.postdetails		{ font-size : {T_FONTSIZE1}px; color : {T_BODY_TEXT}; }

/* The content of the posts (body of text) */
.postbody { font-size : {T_FONTSIZE3}px; line-height: 18px}
a.postlink:link	{ text-decoration: none; color : {T_BODY_LINK} }
a.postlink:visited { text-decoration: none; color : {T_BODY_VLINK}; }
a.postlink:hover { text-decoration: underline; color : {T_BODY_HLINK}}

/* Quote & Code blocks */
.code { 
	font-family: {T_FONTFACE3}; font-size: {T_FONTSIZE2}px; color: {T_FONTCOLOR2};
	background-color: {T_TD_COLOR1}; border: {T_TR_COLOR3}; border-style: solid;
	border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px
}

.quote {
	font-family: {T_FONTFACE1}; font-size: {T_FONTSIZE2}px; color: {T_FONTCOLOR1}; line-height: 125%;
	background-color: {T_TD_COLOR1}; border: {T_TR_COLOR3}; border-style: solid;
	border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px
}

/* Copyright and bottom info */
.copyright		{ font-size: {T_FONTSIZE1}px; font-family: {T_FONTFACE1}; color: {T_FONTCOLOR1}; letter-spacing: -1px;}
a.copyright		{ color: {T_FONTCOLOR1}; text-decoration: none;}
a.copyright:hover { color: {T_BODY_TEXT}; text-decoration: underline;}

/* Form elements */
input,textarea, select {
	color : {T_BODY_TEXT};
	font: normal {T_FONTSIZE2}px {T_FONTFACE1};
	border-color : {T_BODY_TEXT};
}

/* The text input fields background colour */
input.post, textarea.post, select {
	background-color : {T_TD_COLOR2};
}

input { text-indent : 2px; }

/* The buttons used for bbCode styling in message post */
input.button {
	background-color : {T_TR_COLOR1};
	color : {T_BODY_TEXT};
	font-size: {T_FONTSIZE2}px; font-family: {T_FONTFACE1};
}

/* The main submit button option */
input.mainoption {
	background-color : {T_TD_COLOR1};
	font-weight : bold;
}

/* None-bold submit button */
input.liteoption {
	background-color : {T_TD_COLOR1};
	font-weight : normal;
}

/* This is the line in the posting page which shows the rollover
  help line. This is actually a text box, but if set to be the same
  colour as the background no one will know ;)
*/
.helpline { background-color: {T_TR_COLOR2}; border-style: none; }

/* Import the fancy styles for IE only (NS4.x doesn't use the @import function) */
@import url("templates/subSilver/formIE.css"); 
-->
</style>

gegen

Code: Alles auswählen

[s=9]<link rel="stylesheet" href="templates/subSilver/{T_HEAD_STYLESHEET}" type="text/css">

ersetzt.
(@ oxpus : Sorry, wegen dem großem Codeblock!)

Das spart zum einem Traffic und zum anderem werden von nun an die CSS definitionen in der templates/subSilver/subSilver.css getätigt, was den weiteren vorteil hat das du flexibler in der Gestaltung bist!

WIE es am ende aussehen soll, wissen wir noch nich, weil wir nich wissen wie weit wir es verändern können.

Der Gestaltung sind kaum Grenzen gesetzt!
Kannst du, oder einer deiner Kumpanen, HTML???
Die .tpl Dateien sind reine HTML-Dateien, in denen sich Platzhalter für die, vom PHP-Script gelieferten Daten befinden! Somit lässt sich schonmal alles verwirklichen was mit HTML machbar ist.

Beitrag von **skittles** » Fr 28.Jan, 2005 14:02

Also grafisch gesehen kann ich schon helfen!
Nur sollte mal auf alle Fälle geklärt werden wie es aussehen sollte, einmal abgesehen davon dass es hunderte fertige Skins gibt!!!!

wegen portal gibt es mir eh nur zwei bekannte Versionen die zu gebrauchen sind!
Einmal das Portal wie es hier ersichtlich ist, und das MX Portal
http://noisevault.com/index.php?page=2& ... d87585da25
nur als Beispiel!

Ich denke da sollte man mal anfangen!
Aber ohne genauere Hinweise, wie das fertige Produkt aussehen soll kann man einfach keine Tipps geben!

Sorry!

Beitrag von **volker58** » Fr 28.Jan, 2005 14:07

hm, also ich würde erstmal nicht mit einer alten 2.0.10 anfangen

installiere erstmal die neuste 2.0.11 und installiere das

sonst wird dein forum von würmern zerfressen

Beitrag von **AmigaLink** » Fr 28.Jan, 2005 15:27

Einmal das Portal wie es hier ersichtlich ist, und das MX Portal

Das IM-Portal ist auch noch zu empfehlen. Damit kann man sich viele zusätzliche kleine Mods (wie z.B. Impressum oder Blank_Page) sparen, da man zusätzliche Seiten übers ACP erstellen und gestalten kann.

Beitrag von **Susan** » Fr 28.Jan, 2005 15:44

Ich könnte auch beim grafischen helfen. Aber wie skittles schon geschrieben hat, ohne Vorstellung wie es aussehen soll ist es schwer ......

Der Gestaltung selbst ist keine Grenze gesetzt .. besonder wenn man CSS und HTML verbindet

gruß
Susan

PS: IM-Portal ist etwas schwierig, aber genial - ich bin da leider kläglich gescheitert ^7

Beitrag von **oxpus** » Fr 28.Jan, 2005 18:03

@Archon
Du siehst, hier bist Du in besten Händen

Beitrag von **skittles** » Fr 28.Jan, 2005 20:47

Hast du Dreamweaver?
Erstelle dort doch mal ne Skizze oder so!
Das is ein WYSIWYG Webeditor, der einem vieles erleichert!
Wenn du Hilfe brauchst ich helfe dir wirklich gerne, da die Grafik da schon eher mein Gebiet ist (im Gegensatz zu phpBB)

Beitrag von **Archon** » Fr 28.Jan, 2005 21:47

Also, wie gesagt, Grafiken sind kein problem.

Und, türlich nehmen wir da die Neuste Version.

Dann werd ich mal ne Skizze besorgen, das muss aber bis Montag Warten. Da ich nicht für das Design ansich zuständig bin. ^^

Beitrag von **skittles** » Sa 29.Jan, 2005 11:42

Template Monster
Templates

schau doch mal da ob dir was gefällt!

Beitrag von **Archon** » Mo 31.Jan, 2005 15:28

Also OK. Wir brauchen einfach eine Liste mit den Kommandos, welches was machen tut.

Hätte man mir auch mal vorher sagen können, anstadt tutorial.

Beitrag von **oxpus** » Mo 31.Jan, 2005 16:52

Wieviele Seiten Text möchtest Du drucken? 100-500 oder noch mehr?

Beitrag von **AmigaLink** » Mo 31.Jan, 2005 20:22

Beitrag von **Archon** » Mo 31.Jan, 2005 21:54

[quote="oxpus - Mo 31.Jan, 2005 16:52";p="22100"]Wieviele Seiten Text möchtest Du drucken? 100-500 oder noch mehr?[/quote]

Also zur not holz ich auch Regenwälder ab.

Also wenns geht, die wichtigsten Kommandos.

Türlich nich alle.

Beitrag von **oxpus** » Di 01.Feb, 2005 01:13

Okay, ein besserer Tip:
Schau Dir mal die Seite http://selfhtml.teamone.de an und lerne die auswendig. Dann ist das Erstellen von eigenen Themes für ein phpBB kein Problem mehr

Nein Scherz!
Aber auf dieser Seite erhälst Du alle Informationen aller HTML-Befehle, die Du brauchst. Eine Übersicht über die "wichtigsten" wird es aber nie geben, denn das kommt ja immer auf den aktuellen Anwendungsfall drauf an.

Beitrag von **Archon** » Di 01.Feb, 2005 08:34

Wenn ich auf der seite klarkommen würde hätt ich die ausgedruckt. Ich blick die nich. Ich hab da schon öfters mal versucht mir da Hilfe zu holen.

Beitrag von **skittles** » Do 03.Feb, 2005 10:25

Archon!
Eines würde ich dir auf alle Fälle empfehlen!
IM Portal!
Das ist wirklich genial! da kannst die Boxen verschieben wie du willst, neue Boxen erstellen und alles im ACP
ausserdem kannst du es einstellen ob du immer eine linke Spalte haben willst, oder nicht!
http://aktuell.de.selfhtml.org/extras/download.shtml
wegen dem Sefl HTML

Beitrag von **AmigaLink** » Do 03.Feb, 2005 11:43

@ skittles
Und wiedereinmal werde ich neugierug auf dein Board!
Rückst du mal nen link raus, oder betreibst du selber garkeins?

Beitrag von **oxpus** » Do 03.Feb, 2005 12:35

Ja, skittles. So langsam wollen wir mal was

... und