Seite 1 von 2
Tutorial zu PHPbb
Verfasst: Do 27.Jan, 2005 16:47
von Archon
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.
Verfasst: Do 27.Jan, 2005 18:10
von Susan
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
Verfasst: Do 27.Jan, 2005 19:33
von oxpus
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.
Verfasst: Do 27.Jan, 2005 20:00
von Susan
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
Oder hab ich das falsch verstanden ?
Verfasst: Fr 28.Jan, 2005 08:39
von Archon
Ja Forum ansich is ja nich das Prob. Abereben das Umgestallten.
Muss nu los zur schule meld mich heut mittag nochmal.
Verfasst: Fr 28.Jan, 2005 08:56
von Susan
oh, ich möchte auch noch zur Schlue gehen

Verfasst: Fr 28.Jan, 2005 12:42
von Archon
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.
Verfasst: Fr 28.Jan, 2005 13:38
von AmigaLink
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.

Verfasst: Fr 28.Jan, 2005 14:02
von skittles
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!
Verfasst: Fr 28.Jan, 2005 14:07
von volker58
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

Verfasst: Fr 28.Jan, 2005 15:27
von AmigaLink
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.

Verfasst: Fr 28.Jan, 2005 15:44
von Susan
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
Verfasst: Fr 28.Jan, 2005 18:03
von oxpus
@Archon
Du siehst, hier bist Du in besten Händen

Verfasst: Fr 28.Jan, 2005 20:47
von skittles
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)
Verfasst: Fr 28.Jan, 2005 21:47
von Archon
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. ^^
Verfasst: Sa 29.Jan, 2005 11:42
von skittles
Template Monster
Templates
schau doch mal da ob dir was gefällt!
Verfasst: Mo 31.Jan, 2005 15:28
von Archon
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.
Verfasst: Mo 31.Jan, 2005 16:52
von oxpus
Wieviele Seiten Text möchtest Du drucken? 100-500 oder noch mehr?
Verfasst: Mo 31.Jan, 2005 20:22
von AmigaLink
Verfasst: Mo 31.Jan, 2005 21:54
von Archon
[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.
Verfasst: Di 01.Feb, 2005 01:13
von oxpus
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.
Verfasst: Di 01.Feb, 2005 08:34
von Archon
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.
Verfasst: Do 03.Feb, 2005 10:25
von skittles
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
Verfasst: Do 03.Feb, 2005 11:43
von AmigaLink
@ skittles
Und wiedereinmal werde ich neugierug auf dein Board!
Rückst du mal nen link raus, oder betreibst du selber garkeins?
Verfasst: Do 03.Feb, 2005 12:35
von oxpus
Ja, skittles. So langsam wollen wir mal was
... und
