Joomla 1.5.x Template von A-Z
05:31
Wie wird ein Joomla Templates erstellt? Wo fange ich an? Wie bekomme ich es Ohne Tabellen hin? Wo sind die 
Teilbeschreibungen gibt es mittlerweile genug, und das auf Hunderten Seiten.
In diesem Tutorial werde ich versuchen, euch das komplette HOW TO DO zu beschreiben. Die größten Änderungen zum 1.0.x zu zeigen und wie Ihr diese einfügt. Wie Ihr euch denken könnt wird das Ganze etwas Länger, darum werde ich das Gesamte Tutorial und mehrere Teile unterteilen. Ich beschreibe das Ganze so, wie ich es machen würde, b.z.w. in welchen Schritten ich vorgehen würde.
Wobei ich Hier zugeben muss “Jeder macht es anders”. Ich komme so am besten zurecht. Solltet Ihr die einzelnen Schritte anders durchführen, Lest das Tutorial in der Reihenfolge die Ihr bevorzugt.
Die Schritte werden wie folgt sein:
- Teil 1. Die Installation von Joomla
- Teil 2. Der Grund Gedanke
- Teil 3. Die Aufteilung
- Teil 4. Die Grafische Umsetzung
- Teil 5. Das umsetzten in einen Code
- Teil 6. Übernahme in der CSS
- Teil 7. Positionieren der Module im Code
Wie schon gesagt Ihr müsst diese Reihenfolge nicht einhalten, so mache ich es, wenn Ihr die Reihenfolge anders macht, haltet euch an eurer.
Was brauche Ich für Diese Tutorial:
Als erstes mal etwas Zeit und Geduld (wenn Ihr noch nie ein Template gemacht habt), schön währe es wenn Ihr dann noch die passenden Programme zur Hand habt. Für die Installation bracht Ihr kein Programm aber einen Serverplatz. Für den Grundgedanken und die Aufteilung ein Blattpapier und einen Bleistift. Für Grafische Umsetzung natürlich ein Programm mit dem Ihr Webseiten Layouts erstellen könnt, ich nutzt dafür Photoshop CS 3, solltet Ihr das nicht haben geht auch Fireworks oder Gimp.
Um den Code zu schreiben benötigt Ihr ein Programm wie z.b. Dreamweaver (ist in manchen Kreisen zwar verhöhnt, Funktioniert aber Wunderbar). Ihr könnt aber auch das WordPad, GoLive, WebBuilder oder TopStyle nutzen, was Ihr eben da habt oder womit Ihr es sonst macht.
Den Browser setzte ich einfach mal voraus.
Wie Ihr nun schon im Vorwort erkennen könnt wird das ganze etwas ausführlicher. Bitte habt Geduld den das schreiben des Tutorials macht sich auch nicht von alleine. Abonniert einfach meinen RSS dann seit Ihr steht’s auf dem Laufenden wenn der Nächste Teil online ist.
So !, nun ist genug der Worte los geht´s :
Die Installation von Joomla..
..1.5.x ist Prinzipiell eines der Leichtesten Übungen des Gesamten Templates bau. 
Die benötigten Dateien bekommt Ihr (wo auch sonst) bei Joomla. Achtet aber darauf das Ihr immer die Aktuellste Version vom Server Ladet zur Zeit ist dies die Version 1.5.9 aber ACHTUNG: Diese Version ist auf Englisch. Eine Deutsche Version bekommt Ihr Hier bei joomlaos.de
Welches der beiden Versionen schlussendlich nehmt bleibt euch überlassen, das Temlplate Prinzip ist gleich und funktioniert sowohl in der Englischen Version als auch in der Deutschen Version.
Wenn Ihr das Paket heruntergeladen habt, müsst Ihr dies auf eurem Server installieren. Hört sich schwieriger an als es ist. Dafür End packe ich das .zip File auf meinem Rechner in einen Ordner. Diesen öffne ich dann und sehe einige Ordner und Dateien. Diese Dateien und Ordner sind wie folgt benannt.
administrator, cache, compunents, images, includes, installation, language, libraries, logs, media, modules, plugims, templates,tmp ,xmlrpc
CHANGELOG.php, configuration.php-dist, COPYRIGHT.php, CREDITS.php, htaccess.txt, index.php, index2.php, INSTALL.php, LICENSE.php, LICENSES.php, robots.txt
Alle Dateien vorhanden? Wenn Ja, dann könnt Ihr alle Daten in eurem Ordner auf euren Web-Space laden. Ich nutze für solche Geschichten Gerne den FileZilla da dieses Programm gut und einfach zu bedienen und dazu noch Kostenlos ist. Der Upload der Dateien sollte eigentlich schnell gehen.
Nachdem Ihr den Server nun mit Material gefüttert habt. Kann es losgehen mit der Installation.
Schritt 1: Anlegen der Datenbank. Das ist von Server zu Server verschieden, solltet Ihr es nicht können oder Angst haben das selbst einzurichten, wendet euch an euren Provider des Vertrauens. Für Ihn sollte es kein Problem sein ein DB einzurichten.
Wenn Ihr nun die alle Zugangsdaten 3 an der Zahl (Datenbankname, Datenbank User, Datenbank Passwort) habt kann es endlich losgehen.
Wenn Ihr nun die URL ansteuert auf dem eurer Joomla Installiert werden soll dürftet Ihr gleich im Installations Verzeichniss landen. Sollte dies nicht der fall sein gebt diesen Pfad Manuell an [ http://eureURL.de/installation/index.php ]
Ihr solltet nun diese Seite in eurem Browser sehen
Hier müsst Ihr eigentlich nur auf “Weiter” Klicken. Es sei den Ihr möchtet die Installation in einer anderen Sprache, außer auf Deutsch. Solltet Ihr eine andere Sprache wollen, müsst Ihr diese im Feld Sprachauswahl einstellen und dann auf weiter klicken.
Wenn Ihr eure Auswahl getroffen habt und weiter angeklickt habt, seit Ihr in der Installations Prüfung. Diese dient zur Kontrolle ob Joomla auf eurem Server lauffähig ist.
Euch wird auffallen (in manchen Fällen) das die “Configuration.php” Datei nicht beschreibbar ist. Das sollte behoben werden. Öffnet dafür euer FTP Programm und ändert die Datei Attribute auf 777 (Nach der Installation wieder ändern auf 444). Im Bild könnt Ihr einmal vorher und nachher sehen. Um nach einer Änderung der Datei Attribute zu sehen ob die Einstellung Korrekt ist, könnt Ihr im oberen Bereich den Button “Prüfung weiderholen” nutzen.
Sollten noch weitere Meldungen auf “nein” stehen, stehlt die Anforderungen auf eurem Server so ein das diese auf: ja b.z.w. auf Grün stehen. Wenn Ihr keinen zugriff auf die entsprechenden Einstellungen habt, müsst Ihr eurem Provider die Problematik erklären und er soll dies einstellen.
Sollte alles Korrekt eingestellt sein klickt auf “weiter” um die unter Punkt Drei aufgeführte “Lizenz” zu lesen. Wenn Ihr euch diese durchgelesen habt könnt Ihr auf weiter Klicken, wo es dann endlich Interessant wird.
Im Schritt 4 befindet Ihr euch in der Konfiguration der Datenbank. (Die Zugangsdaten habt Ihr euch bereits geholt) Im Oberen Feld ist die entsprechende Datenbank (MySQL) ausgewählt und bedarf meistens keiner Änderung. Im Feld Servername wird zu 99% “localhost” eingegeben.
Unter Benutzername (DB-USER) wird der Benutzer der Datenbank eingegeben. Passwort erklärt sich von selbst, natürlich das Passwort der Datenbank. Als Letztes wird der Name (DB-NAME) der Datenbank verlangt. Sollte schon eine Installation auf eurer Datenbank vorhanden sein, könnt Ihr diese mit den Erweiterten Einstellungen, entweder Löschen oder Sichern. Wenn Ihr den Tabellenpräfix ändern möchtet könnt Ihr das auch in den erweiterten Einstellungen abändern. Klickt wenn Ihr eure eingaben gemacht habt auf “weiter” um in die FTP Einstellungen zu gelangen.
Hier könnt Ihr einen FTP-Zugriff auf eure Seite einrichten. Dafür benötigt Ihr eure FTP Zugangsdaten. Ich richte normalerwiese nicht ein, da ich über mein FTP-Programm auf die Seite zugreife.
Als nächstes befinden wir uns schon fast im Abschluss der Installation. Im Schritt 6 werden wir die Joomla Seite “Konfigurieren”. Das heißt wir geben nun einen Seiten Titel an z.b. Meine erste Joomla Seite oder Meine Seite. 
Um die Seite auch anständig nutzen zu können, müsst Ihr natürlich auch eure E-Mail Adresse und ein Passwort angeben. Die Mail Adresse dient zum versenden der System Mails. Sie wird als Haupt Mailadresse im gesamten Joomla System eingerichtet.
Das Passwort das angegeben wird ist euer Administrations Passwort. Wählt diese also mit bedacht aus. Wer noch nie mit dem Joomla System gearbeitet hat sollte die Beispieldaten laden. Das könnte beim ersten Administrieren der Seite von Vorteil sein. Da Ihr sonst nicht wiest wo was, oder wie es dort hinkommt. Der Punkt Lade Migrationsscript dient der Migration von älteren Joomla Seiten die auf der Version 1.0.xx Laufen. Den benötigt Ihr nicht wenn Ihr das erste mal mit Joomla arbeitet. Klickt wenn die Einstellungen gemacht wurden auf weiter.
Im nächsten Schritt sind wir nur noch einen Schritt von der Joomla Seite entfernt. Wir brauchen dafür nochmal unser FTP Programm. Dort müssen wir nun nur noch das Installation Verzeichniss wie in der Rot geschriebenen Meldung Löschen. Also gehen wir in das Root Verzeichniss in dem das Joomla installiert ist und löschen das Verzeichniss mit dem Namen “installation”. Wenn Ihr nicht sicher es einfach zu löschen, gibt es die Alternative es umzubenennen, dies reicht schon um eure Seite sichtbar werden zu lassen. Klickt nun ober auf einen der Beiden Buttons. Auf dem Admin Button landet Ihr gleich im Adminlogin (wo Auch sonst).
Auf den andern Button geklickt und Ta ta. Eine Joomla Seite.
Nun haben wir den Grundstein für ein Template geschaffen und können uns im nächsten Tutorial Gedanken über unsere Bald fertigen Seite machen.
SO Long…. be Continue
Würfel mit Verlauf mit Illustrator
Als erstes erstellen wir uns eine neu Arbeitsfläsche.
Im nächsten Schritt erstellen wir mit dem Rechteckwerkzeug und gedrückter STRG Taste ein Quadrat in der Größe 200 x 200 Pixel.
Als nächstes
werden wir dem Quadrat seine Form geben, Tiefe und Höhe. Dazu nutzen wir das 3D Tool des Illustrators. Dieses Tool findet Ihr unter Extras> 3D >Extrudieren und Abgeflachte Kante
Dort die folgenden Werte angeben: x-Achsen Drehung 70 Grad, y-Achsen Drehung -30 Grad und die z-Achsen Drehung auf 10 Grad. Nun die Perspektiven Einstellung die Meist vernachlässigt wird. Diese stellen wir auf 105 Grad ein.
Nicht zu vergessen das wir auch die Tiefe der Extrusion einstellen , da wir einen Würfel haben möchten wird dieser wert genau so eingestellt wie wir das Quadrat gemacht haben also 200pt.
Nun haben wir bereits einen schönen Würfel.
Er sollte aber noch verlauf bekommen.
Damit wir die Flächen des Würfels bearbeiten können sollten wir das Aussehen Umwandeln.
Dafür auf Objekt Aussehen umwandeln nun haben wir die einzelnen Flächen des Würfels .
Da nur die Sichtbaren Flächen mit Verlauf versehen werden sollen nutzen wir nun das Direktauswahl- Werkzeug .
Mit diesem Klicken wir nun auf eine Fläche, in diesem Fall auf die Rechte, des Würfels.
Nun mit einem Klick auf den Verlauf den entsprechenden Farb-Verlauf auf die Fläche bringen. Hier ist der Winkel auf 0-Grad gestellt.
Beim Linken Feld sollte der Verlauf genau entgegen gesetzt laufen also stellen wir dort den Winkel auf ca. 180 Grad ein.
Die obere Fläche nun mit einer Farbe füllen.
Dann sind wir schon fast durch, wenn es euch besser gefällt könnt Ihr den einzelnen Flächen noch eine Kontur verpassen.
Kann muss aber nicht. Und schon seht Ihr euren Würfel mit Verlauf.
zum Download
Glossy Folder Icon Tutorial
In diesem Tutorial
wird beschrieben und gezeigt, wie Ihr in ca.3 Minuten, ein Glossy Folder Icon, mit Illustrator erstellen könnt. Die fertige Datei könnt Ihr am Ende des Tutorial Downloaden.
Erstellt als erstes die Arbeitsfläche, in diesem Fall 300 x 300 Pixel groß. Erstellt eine Ebene und benennt diese „Front“. Nun nehmen wir das Abgerundetes-Rechteck-Werkzeug und ziehen ein Rechteck ca. 200 x 150 Pixel.
Nachdem der Anfang gemacht ist nehmt das Rechteck-Werkzeug und Zieht über die Ebene mit dem Abgerundetem-Rechteck ein 200 x 50 großes Rechteck.
Da unser Folder nur oben Rund sein soll verbinden Wir nun die Zwei über aderliegenden Ebenen mit dem Pathfinder. Dafür markiert beide Rechtecke und verbindet dies mit gedrückter „alt“ Taste und dem Klick im Pathfinder auf „Dem Formbereich zufügen“. Wie Ihr jetzt sehen könnt, habt Ihr ein Rechteck das oben Rund und unten Eckige Kanten hat.
Als nächstes bringen wir ein wenig perspektive in Unseren Folder. Dafür werden wir den Zusammengefügten Pfad etwas Verbiegen. Dafür den Pfad anklicken, rechte Maustaste und Transformieren > Verbiegen, auswählen. Hier sollte der Biegungswinkel auf -20 und die Achse auf Horizontal eingestellt werden.
Das gesamte Konstrukt drehen wir nun noch um -20 Grad, dafür wieder rechtsklick auf den Pfad Transformieren > Drehen.
Der nächste Schritt ist der Rücken des Folder. Diesen erstellen wir mit einer Kopie der Front Ebene, Legt dafür eine neue Ebene an verschiebt diese unter die „Front-Ebene“ und benennt diese „Rücken“. Dann Kopieren wir den Pfad der in der Ebene „Front“ Liegt.
„TIP: Verschlisst gleich nach dem Kopieren die Ebene Front“
Legen diesen in die Rücken Ebene. Dann verbiegen wir Ihn um 20 Grad, die Achse muss hier auf „Winkel -15 Grad“ stehen.
Dann verschieben wir die unteren Eckpunkte des Pfades, der in der Ebene Rücken liegt, bis der Pfad, mit den unteren Eckpunkten genau mit der Obenliegenden Ebenen überein stimmt.
„TIP: Wenn beide Ebenen mit den Unteren Ecken zusammen passen, verschlisst die Ebene Rücken.“
Langsam nimmt unser Folder Formen an. Nehmt nun der Front etwas die Deckkraft. Hier ist sie auf 70% angelegt. Nun geben wir der Folder noch etwas mehr Farbe. Ein verlauf ist hier am besten geeignet. Öffnet dafür die Ebene „Front“. Klickt den Pfad an und wählt euren Verlauf aus.
Als nächstes geben wir dem Folder noch etwas Glanz. Um diesen zu erstellen nehm Ihr das „Zeichenstift-Werkzeug“ und zeichnet in der Ebene Front eine weiße Welle. Hier könnt Ihr ruhig übers Ziel hinaus Schissen.
Es ist nun in der Ebene ein neuer Pfad vorhanden. Dann Kopiert Ihr wiederrum, den Pfad, der die Front des Folders darstellt. Klickt nun die Welle die Ihr im Schritt zuvor gezeichnet habt an und geht ins Fenster „Transparents“ Mit; Umschalten, STRG, F10. Dort wird neben eurer angezeigten Ebene in Leere Feld doppelt geklickt. Nun Fügt Ihr den zuvor Kopierten Pfad wieder ein. Hiermit habt Ihr die Welle Maskiert.
Es dürfte jetzt nun noch die Welle mit der Front des Folders sichtbar sein.
Im Grunde ist der Folder hiermit schon fertig. Ihr könnt aber noch etwas Papier in der Ordner legen, dafür ist er auch vorgesehen.
Dafür legt Ihr eine neue Ebene an benennt die „Papier“ und verschiebt dies zwischen die Ebenen Rücken und Front. Dann werden zwei Rechtecke mit leichtem Verlauf erstellt.
Wenn Ihr die noch ein wenig verbiegt, sieht es aus, als läge Papier im Folder.
Und Fertig ist das Icon.
Viel Spaß beim basteln oder beim Download
Neues Aus der Grafikwelt
Willkommen bei Zulu Modding die Webagentur in Meerbusch
Wir sind erfreut, dass Sie uns besuchen
Wir bieten Ihnen kompetente Beratung sowie Lösungen und Services im Grafik-Bereich. Profitieren Sie von unseren langjährigen Erfahrungen mit professionellen Grafik-Lösungen. Qualität, Professionalität und Service stehen für uns im Vordergrund. Wir stehen Ihnen dabei von der Beratung, über die Einführung bzw. Programmierung von Wegbasierten Tools bis hin zur Wartung als kompetenter Ansprechpartner zur Verfügung.
Individuelle Internetseitenerstellung
Optimierte CMS Programmierungen
Hohe Qualität und geringe Ladezeiten Ihrer Internetpräsenz
Internetservice mit Domainanmeldung, Serververwaltung, etc.
Erstellung von Werbebanner animiert oder Statisch
Erstellung von Visitenkarten, Flyern und Speisekarten
Meine Blog-Liste
-
EUGH-Urteil – Jetzt ist Schluss mit lustig. - Und wieder mal so ein EUGH-Urteil das, gefühlt an 70 – 80 % der Webseiten Betreiber, vorbeigegangen ist. Mittlerweile über einen Monat ist das Urteil des E...vor 6 Jahren
-
Hallo Welt! - Willkommen zur deutschen Version von WordPress. Dies ist der erste Beitrag. Du kannst ihn bearbeiten oder löschen. Und dann starte mit dem Schreiben! Der...vor 8 Jahren
-
