Tutorial Website-Installation + Design

[Tion]

Ich habe ein Website-Design entworfen, dass ich der GW-Community und im speziellen der Wartower-Community zur Verfügung stellen möchte. Es ist aus dem alten Website-Design entstanden, was ich für meine Gilde entworfen habe. Zu GW2 habe ich jedoch ein neues für uns vorbereitet, daher wird das jetzige bzw. die Version 2.0 :P davon für euch frei

Sehen könnt ihr es schonmal unter folgendem Link: Klick

Derzeit existiert das Design für das CMS "Webspell"(was das ist erklär ich gleich) jedoch würde ich es bei entsprechender Nachfrage auch für andere CMS exportieren.

Download-Link Webspell: Klick

Da die meisten nicht wissen, was ein CMS (oder ausgeschrieben Content-Managment-System) ist, kurz die Erklärung von Wikipedia:

"Ein Content-Management-System (CMS, deutsch „Inhaltsverwaltungssystem“) ist eine Software zur gemeinschaftlichen Erstellung, Bearbeitung und Organisation von Inhalten (Content) zu meist Webseiten, aber auch anderen Medienformen. Diese können aus Text- und Multimedia-Dokumenten bestehen. Ein Autor kann ein solches System in den meisten Fällen ohne Programmier- oder HTML-Kenntnisse bedienen."

So da wir nun alle wissen was das ist , erkläre ich, wie wir das ganze installieren:

1. Schritt:

Das Uploaden des CMS

Wir beginnen mit dem Uploaden der Daten. Up-was? Wohin? Was willst du von mir?
Natürlich brauchen wir erstmal einen Server. Es gibt diverse Free-Hoster (als Anbieter, die Webspace umsonst vergeben, dort hat man jedoch in der Regel Werbung), oder aber man hat bezahlten Webspace.

Free-Hoster:
- http://www.ohost.de
- http://www.funpic.de

Bei mehr hilft google Das sind noch die Hoster, an die ich mich erinner, da ich selbst seit Jahren für meinen Webspace zahle (Wenn ihr andere Hoster nutzt, denkt daran, zu überprüfen, ob MySQL-Datenbanken unterstützt werden).

Wenn ihr in dem Web-Interface vom Server seid, dann könnt ihr auch direkt den MySQL-Server sowie den FTP-Zugang einrichten.

Wenn man sich dann registriert hat, bzw. seinen eigenen Webspace nutzt, dann muss man die Daten nur noch auf den Webspace hochladen.

Ich mach das mit FileZilla, aber da gibt es diverse kleine Progrämmchen die das können. Dort muss man die Server-Adresse sowie einen Benutzernamen und Passwort angeben. Diese Daten findet ihr in der Übersicht von eurem Server. Bei FileZilla kann man noch optional einen Port angeben, wenn man das nicht macht, findet er den Port selbstständig.


Wenn man nun mit dem Server verbunden ist, dann einfach alles hochladen.

2. Schritt:

Die Installation von Webspell

Die Installation von dem CMS ist eigentlich recht einfach. dazu müsst ihr folgende Domain aufrufen:
Wenn ihr Webspell in das Haupt-Verzeichnis kopiert habt:
http://die-adresse-zu-eurem-server.de/install/

Wenn ihr Webspell in einen Unter-Verzeichnis kopiert habt:
http://die-adresse-zu-eurem-server.d...chnis/install/

Dann öffnet sich eine Installations-Routine.
Step1: Sprache auswählen (sollte klar sein)
Step2: Lizenz akzeptieren (Immer schön alles Durchlesen )
Step3: Die URL angeben. Dort tragt ihr eure URL ein, also : http://die-adresse-zu-eurem-server.de/ respektive http://die-adresse-zu-eurem-server.d...r-verzeichnis/
Step4: Dort wird nur überprüft, ob alle Rechte korrekt gesetzt sind. Sollte es irgendwo heißen, dass die CHMOD nicht gesetzt wurden, dann geht ihr via FileZilla wieder auf euren Server und macht einen Rechts-Klick auf die entsprechenden Dateien. Dann öffnet sich eine kleine Auswahlliste. Dort wählt ihr "Dateiberechtigungen..." aus. Dann öffnet sich ein kleines Fenster. Dort könnt ihr 9 Haken verteilen. Damit alles gemacht werden kann, muss man überall einen Haken rein machen, dann hat man nen CHMOD von 777. Dann sollte die Installation funktionieren.
Step5: Nun kann man auswählen, ob man eine Neuinstallation haben möchte, oder ein Update. Bei den meisten wird es sich um eine Neu-Installation handeln.
Step6: Nun wirds nochmal spannend Man muss seine Zugangsdaten zu dem MySQL-Server angeben. Die findet ihr im Web-Interface, wo ihr sie vorhin angelegt habt.
Darüber hinaus muss man dort noch den Account vom Super-Admin erstellen.

Dann noch einmal auf weiter klicken und schon hat man Webspell installiert. War doch einfach oder? Und trotzdem war das schon das schwerste .

3. Schritt

Installation von Plugins

Da ich zwei Plugins nutze, die ich nicht selber geschrieben habe (man muss das Rad ja nicht immer neu erfinden ) werde ich diese nicht hier hochladen, sondern nur den Link zudem Download einfügen. Natürlich erkläre ich euch, wie ihr das dann installiert.

Das erste Plugin, was ihr installiert: bbcode2.9
Dieses Plugin findet ihr unter: Klick
Dieses Plugin benötigt ihr aus zwei Gründen:
1. Hat man eine größere Auswahl an Möglichkeiten, wie man seinen Inhalt zb. im Forum formatieren kann und 2. benötigt eines meiner Plugins (der Video-Crawler) dieses Plugin.

Installiert ist es eigentlich ganz einfach. Man wählt die-Esport-Version aus und läd da alles hoch. Also
die Ordner inkl. Inhalt :P :
- admin
- images
- js
- src
- templates

Das wars schon.

Kommen wir zum zweiten Plugin: 2One Forum Mod V2
Downloadlink: Klick

Installation läuft genauso wie bei dem ersten Plugin:
- images
- languages
- templates
- forum.php
- forum_topic.php
hochladen. In der Readme steht noch, dass man was an die _sytlesheet anfügen muss. Das könnt ihr tun, nur bringt es nichts, da die eh nochmal komplett überschrieben wird :P.

Achtung Bug!!!!
Derzeit ist es noch so, dass wenn man den Forum-Mod installiert hat und noch keinen Topic in einem Forum erstellt hat, zieht es die rechte Seite unter das Forum. Sobald man einen Topic erstellt hat, tritt das Problem nicht mehr auf. Ich bin derzeit auf der Suche, wo der schließende-div-tag hin muss. Falls es jemand weiss, PM an mich Achja, solltet ihr auf die Idee kommen, im Forum vom Anbieter zu gucken, die einzige Lösung, die dort bisher dafür existiert, funktioniert nicht immer und des weiteren stammt die dort auch von mir :P

Kommen wir zum Social-Media-Plugin sowie dem Video-Crawler.
Die beiden Plugins sind von mir geschrieben und bewirken nicht sonderlich viel. Mit dem Social-Media-Plugin kann man sich mit Facebook &Co. verbinden. Ich habe da jetzt noch keine Like-Funktion eingebaut, aber es gilt wie immer, wenn das stark gewünscht wird, kann ich das noch machen.
Installiert wird es, indem man folgenden Link aufruft:
http://die-adresse-zu-eurem-server.d...all_social.php respektive http://die-adresse-zu-eurem-server.d...all_social.php
Danach geht man hin und öffnet mit einem Editor in dem Ordner /admin/ die Datei admincenter.php und fügt hinter die Zeile 130 folgenden Code ein:

<li><a href="admincenter.php?site=social">Social-Media Einstellungen</a></li> 

Nun muss man nur noch konfigurieren.

Der Video-Crawler ist ein Plugin, welche das zuletzt gepostete Video aus dem Forum ausliest und auf der Startseite anzeigt. Das habe ich gemacht, da bei mir in der Gilde sehr gerne Videos gepostet werden und ich es nett fand, dass man das auch direkt auf der Startseite hat

Beide Plugins sind in dem Design enthalten und werden als Paket hochgeladen.

4. Schritt

Installation Design

So kommen wir zu dem letzten Punkt. Das Design (inkl. der zwei oben genannten Plugins).
Dazu kopiert ihr alles aus dem Paket, welches ich hier im Threat mit angehängt habe in das Verzeichnis wo eure Webspell-Installation liegt. Also: http://die-adresse-zu-eurem-server.de/ respektive http://die-adresse-zu-eurem-server.d...r-verzeichnis/

Alles überschreiben und fertig. Das Design inkl. der Plugins ist installiert (nur noch wie oben beschrieben die install_social.php aufrufen und nach der Installation vom Server Löschen ).

Das wars. Zumindest was die Installation angeht :P kommen wir zum einrichten

5. Schritt

Einstellungen

Kommen wir zu den Einstellungen, das ist nicht viel, aber wichtig
Dazu rufen wir das Admin-Interface auf (Einloggen, dann habt ihr dort Admincenter neben eurem Avatar stehen) und klicken dann auf Einstellungen. Dort können wir dann einiger Hintergrund-Einstellungen vornehmen. Ein paar sind wichtig:
1. Unter Neuigkeiten: Letzte Neuigkeiten auf 5 setzen
2. Unter Forum: Letzte Themen auf 5 setzen
3. Unter Neuigkeiten: Neuigkeiten auf 3 oder 4 setzen. (Mehr finde ich unschön, aber das kann jeder selber entscheiden)

Das waren auch schon die Einstellungen die getroffen werden mussten Klickt euch am besten ein wenig durch das Admincenter um damit vertraut zu werden.

Ich hoffe mal, dass ich nichts vergessen oder übersehen habe, wenn doch, sagt Bescheid.
Über ein wenig Feedback würde ich mich schon freuen und sollten irgendwelche Probleme auftreten, dann einfach hier in den Threat oder ne PM an mich. Dann setzen wir uns zusammen und lösen das Problem!

Was die Copyrights angeht: Denkt dran die Copyrights von GW auf der Seite drauf zu lassen!
Ansonsten ich erhebe keine Ansprüche, dass irgendwo mein Name steht :P Ich seh ja, was von mir ist Das reicht mir.

Ich hab noch zwei PSD-Files bereit gestellt, die damit man News-Kategorien selber erstellen kann sowie den kleinen Charr ein wenig editieren kann. Klick
Wenn ihr sonst noch was braucht, sagt Bescheid.

//Changelog:
13.06.2012: Mir ist ein Fehler im Video-Crawler aufgefallen. Der wurde gefixt. Darüber hinaus hat der Gilde-Button in der Navigation falsch verlinkt. ebenfalls gefixt.

[Miss Sam Hunter]

Für ein "kostenloses" Template echt sehr schön geworden.

Tutorial ist auch gut geschrieben, dass jeder Neuling es verstehen kann.


Thumbs up

MfG

[Tion]

Gerade ist noch ein kleiner Fehler aufgetaucht:

Bei dem Forum Mod gibt es einen kleine Bug und zwar versetzt sich das Layout eines Beitrages. Das behebt ihr indem ihr die Datei forum_topic_content.html öffnet und in Zeile 21 den Wert von 83% auf 80% abändert. Dann speichern und hochladen.

[Deathbreaker]

gibt es eine einfache möglichkeit rechts aus der navigation die "events" wegzumachen und dafür nen teamspeak 3 viewer hinzuhauen ?

und was ich noch schreiben wollte , der Gilde Button/Link ind der NAvigation ist falsch verlinkt

[Tion]

Natürlich gibts ne einfache Möglichkeit index.php zeile 91

<php include('sc_upcoming.php'); ?> 

entfernen bzw. das sc_upcoming durch einen tsviewer ersetzen (dazu muss man sich entweder selber einen schreiben oder sich einen fertigen suchen und anpassen).

Danke mit der Gilde-Button wird gefixt.

[knogo]

Hallo,

ich habe soeben dein Design installiert.
Vielen Dank dafür, ich war schon sehr lange auf der Suche nach einem schicken Design, nun bin ich fündig geworden.
Danke

[bolek]

Tion wo kann man unten "Become a Fan" die Youtube links usw. bearbeiten

[knogo]

Hi,

ich beantworte die Frage mal schnell ;-)

....../admin/admincenter.php?site=social


......= deine Seite

mfg knogo

[Tion]

Danke für das Lob
Freut mich, dass es euch gefällt.

@bolek:
Ich habe oben im 3. Schritt erklärt, wie du das im Adminbereich einbindest

[bolek]

jo das war mein fail mit dem admincenter ... hatte ein addon installiert was die admincenter.php ersetzt hat und das social wa da nicht drinne ... ^^ klappt nu wieder danke

[knogo]

Hallo,

wo kann ich denn die Breite von News und Forum einstellen, möchte gern 50-100 px mehr.

danke
mfg knogo

www.affenreich.de

[Setup]

Genial, vielen Dank

Habe jetzt erstmal den Hostbanner oben auf die index.php weiterleiten lassen onklick, damit man immer "home" zurückkehren kann... und habe der mysql tabelle natürlich Guild Wars 2 Hinzugefügt, damit ich Teams eben auch für Gw2 aufstellen kann

€: Eine Frage hätte ich: Wer und worüber wird benachrichtigt wenn sich jemand über den Reiter Gilde bewirbt? habe schon 2 Testbewerbungen geschrieben und nirgendwo scheint was "bescheidzusagen".

[knogo]

Hi,

habe es auch gerade getestet, kommt nix an. Ist wohl ein Bug
Da ich aber das stantard joinus fürn popo finde und es für Gilden so ...nja ist habe ich mir das drauf gemacht

http://addons-webspell.org/index.php...files&file=300

Ordner inhalt in dein Hauptverzeichnis

dann www.deineseit.de/bewerbung_install.php aufrufen

dann bewerbung_install.php löschen, liegt im Hauptverzeichnis

dannach die navigation.php bearbeiten, ist auch im Hauptverzeichnis

$navigation .= '<li><a href="index.php?site=joinus">Bewerbung</a></li>';

durch

$navigation .= '<li><a href="index.php?site=bewerbung">Bewerbung</a></li>';

ersetzen

fertig

du kannst noch die .../templates/bewerbung_details.html bearbeiten, felder hinzu oder weg nehmen

Habe mal eine Testbewerbung bei mir gemacht und habe auch gleich eine pm erhalten


ps: wenn du wissen willst wie das Ding aussieht www.affenreich.de

[Setup]

Zitat:

---

ps: wenn du wissen willst wie das Ding aussieht www.affenreich.de

---

Genial, vielen Dank Direkt mal eingebaut

€ Der Kontaktreiter macht ebenfalls Nichts :P Gibt es da vielleicht eine Lösung?


Grüße

[knogo]

Hi,

mir ist gerade aufgefallen das es nicht ganz reicht die bewerbun_detail.html zu ändern sondern auch die bewerbung.html

musst du mal ein wenig probieren, bin im coden eher ein Bob und lerne es duchrch probieren