Joomla! 1.7 BASIS Template Autor: Roland Meier Erstelldatum: 15. September 2011 16:27:45 Änderungsdatum: 20. September 2011 18:42:06 Version: 1.0 Lizenzbestimmungen Dieses Dokument unterliegt einer Creative Commons Lizenz. Die Lizenzbedingungen finden Sie unter: http://creativecommons.org/licenses/by-nc/2.0/de/legalcode Sie dürfen den Inhalt dieses Dokumentes vervielfältigen, verbreiten, bearbeiten und öffentlich aufführen, wenn Sie den Namen des Autors sowie das Logo nennen und nicht kommerziell verwenden. Seite 1/11
Inhaltsverzeichnis 1 Installation & Konfiguration...3 1.1 Anforderungen...3 1.2 Installation...3 1.3 Aktivieren des Templates...4 2 Einrichtung...5 2.1 Anlegen der Startseite...5 2.2 Erstellen eines Menüs...5 2.3 Zuweisen von Modulen zu den Modulpositionen...7 2.3.1 Erstellen des Footers...7 2.3.2 Erstellen des Menüs...8 2.3.3 Erstellen der beiden Header Module...9 2.3.4 Füllen des Slider Bereichs...11 3 Weitere Informationen...11 Seite 2/11
1 Installation & Konfiguration 1.1 Anforderungen 1.2 lauffähiger Computer mit Betriebssystem (Linux, Mac, Windows) Browser (Firefox, Internet Explorer, etc.) installiertes Joomla! 1.7 Administrator Zugang Installation Bitte folgen Sie diesen Schritten um das Template zu installieren: Geben Sie beim Anmeldebildschirm Ihren Benutzernamen und Passwort ein, um sich anzumelden. Den Administrator Bereich erreichen Sie unter: http://www.ihre SEITE.TLD/administrator Öffnen Sie das Erweiterungs Manager indem Sie über ERWEITERUNGEN ERWEITERUNGEN DURCHSUCHEN und anschließend die ZIP Datei Ihres Templates auswählen. Öffnen Sie den Erweiterungs Manager Klicken Sie auf DURCHSUCHEN Wählen Sie Ihre ZIP Datei zum Installieren Bestätigen Sie die ausgewählte Datei Seite 3/11
Klicken Sie anschließend auf HOCHLADEN & INSTALLIEREN um das Template in Ihrem Joomla! zu installieren. Installieren Sie die Erweiterung Bei erfolgreicher Installation erhalten Sie eine entsprechende Meldung. Das Template wurde erfolgreich installiert 1.3 Aktivieren des Templates Klicken Sie erneut auf ERWEITERUNGEN TEMPLATES um zur Übersicht der installierten Templates zu gelangen. Öffnen Sie die Template Übersichtsliste Die beiden gelben Sternchen in der Spalte Standard zeigen Ihnen an, welche Templates im Moment für das Backend und das Frontend aktiv sind. Wählen Sie Ihr soeben neu installiertes Template in der Übersichtsliste aus, indem Sie den entsprechenden Haken setzen. Klicken Sie zuletzt auf STANDARD und überprüfen Sie den Erfolg der Aktivierung, anhand der gelben Sternchen. Klicken Sie hier, um das ausgewählte Template zu aktivieren Wählen Sie Ihr neues Template aus Aktive Templates Seite 4/11
2 Einrichtung 2.1 Anlegen der Startseite Navigieren Sie über INHALT HAUPTBEITRÄGE zu den Beiträgen der Startseite und legen hier einen NEUEN BEITRAG an, indem Sie auf NEU klicken. Gehen Sie zu den Hauptbeiträgen Tragen Sie einen Titel für den Beitrag ein Im folgenden Fenster können Sie wie folgt einen neuen Beitrag anlegen: Setzen Sie den Haupteintrag auf JA Geben Sie einen beliebigen Text ein 2.2 geben Sie dem Beitrag einen Titel achten Sie außerdem darauf, dass eine Kategorie ausgewählt ist setzen Sie das Feld HAUPTEINTRAG auf JA schreiben Sie einen beliebigen Text als Beitragsinhalt speichern Sie den neuen Beitrag Speichern und Schließen des Beitrags Erstellen eines Menüs Öffnen Sie das bereits vorhandene Hauptmenü Hier sehen Sie bereits einen vorhandenen Eintrag der Home Seite. Legen Sie über den Button NEU vier neue Einträge an: Unser Team Kontakt Impressum Anfahrt Seite 5/11
Klicken Sie beim neuen Menüeintrag auf den Button AUSWÄHLEN und verwenden unter den Systemlinks die EXTERNE URL. ACHTUNG! Diesen Schritt mache ich ausschließlich für dieses Handbuch zur Demonstration zum Anlegen von Menüeinträgen. In der späteren richtigen Homepage verwenden Sie bitte entsprechenden Beitrag bzw. Link. Klicken Sie auf AUSWÄHLEN wählen Sie die EXTERNE URL Zurück beim Menüeintrag vergeben Sie noch einen Menütitel sowie einen Link. Hier habe ich lediglich ein RAUTEZEICHEN # eingegeben, um den Link auf die eigentliche Seite zu leiten und keinen Fehler zu erzeugen. Speichern Sie abschließend Ihren Menüeintrag. Geben Sie einen Menütitel ein Geben Sie einen gültigen Link ein VERFAHREN SIE MIT DEN EINTRÄGEN KONTAKT, IMPRESSUM UND ANFAHRT GENAUSO! Sie haben nun einen ersten Beitrag für die Startseite erstellt, sowie ein eigenes Menü erstellt. Wir können nun mit der Zuweisung der Module zu den Modulpositionen beginnen. Seite 6/11
2.3 Zuweisen von Modulen zu den Modulpositionen 2.3.1 Erstellen des Footers Gehen Sie diesmal über ERWEITERUNGEN MODULE in die Liste Ihrer verwendeten Module. Legen Sie hier ein neues Modul an, indem Sie auf NEU klicken und wählen Sie das Modul: EIGENE INHALTE (LEERES MODUL) Öffnen Sie die Modulübersicht Wählen Sie den Modultyp EIGENE INHALTE Im folgenden Fenster können Sie wie folgt ein neues Modul anlegen: geben Sie dem Modul einen Titel achten Sie darauf, dass der Status auf FREIGEGEBEN steht schreiben Sie einen beliebigen Text als Inhalt klicken Sie anschließend auf POSITION WÄHLEN Filtern das Auswahlfeld Art wählen mit TEMPLATE und Template auswählen mit dem Namen des Templates wählen Sie in der Liste den FOOTER aus, um das Modul dieser Position zuzuordnen SPEICHERN Sie das Modul tragen Sie dem Modul einen Titel ein klicken Sie anschließen auf POSITION WÄHLEN Art wählen in TEMPLATE ändern Template auswählen in Name des Templates ändern Vergeben Sie einen beliebigen Text Die Footer Position auswählen Seite 7/11
2.3.2 Erstellen des Menüs Ähnlich kann auch das Menü Modul erstellt werden. Legen Sie dazu wieder ein NEUES Modul an und wählen beim Modultyp anschließend den Punkt MENÜ. Wählen Sie Menü geben Sie dem Modul einen Titel achten Sie darauf, dass der Status auf FREIGEGEBEN steht Wählen Sie rechts das Menü aus, das angezeigt werden soll Weisen Sie zudem dem Modul noch zu, auf welchen Seiten es angezeigt werden soll Geben Sie dem Modul einen Titel Wählen Sie die Template Position aus Wählen Sie das Menü aus, welches angezeigt werden soll Das Modul soll in diesem Fall auf ALLEN SEITEN sichtbar sein Das Menü wird bereits per CSS horizontal passend zur Navigationsebene angezeigt! Seite 8/11
2.3.3 Erstellen der beiden Header Module Als Beispiel wollen wir einen Linken Header als Logo, sowie einen rechten Header als Suchfeld verwenden. Erstellen Sie wie im Footer ein weiteres Modul des Typs: EIGENE INHALTE (LEERES MODUL) Wählen Sie den Modultyp EIGENE INHALTE Das Modulfenster kennen Sie bereits vom Header: geben Sie dem Modul einen Titel achten Sie darauf, dass der Status auf FREIGEGEBEN steht schreiben Sie einen beliebigen Text oder fügen Sie ein Bild ein als Inhalt SPEICHERN Sie das Modul tragen Sie dem Modul einen Titel ein wählen Sie erneut die Modulposition füllen Sie den Inhalt mit Text oder Bildern ACHTUNG! In diesem Beispiel habe ich das Thumbnail Bild <img src="templates/namedestemplates/template_thumbnail.png" border="0" width="100" /> verwendet. Um es sauber in den Header einzupassen, habe ich das Bild auf eine Breite von 100 reduziert. Seite 9/11
Für das Suchmodul erstellen Sie erneut ein neues Modul und wählen als Typ: SUCHEN. Wählen Sie den Modultyp SUCHEN Auch hier vergeben Sie dem Modul einen Titel und ordnen es einer Modulposition zu. tragen Sie dem Modul einen Titel ein Speichern Sie anschließend das Suchen Modul. wählen Sie erneut die Modulposition 2.3.4 Füllen des Slider Bereichs Die Modulposition CONTENTSLIDER ist für einen Beitrags und/oder Bildslider gedacht. Da es davon einige zusätzliche Erweiterungen gibt, die unterschiedlich konfiguriert werden, gehe ich hier nicht näher darauf ein und fülle den Bereich lediglich mit dem Logo des Basistemplates. Dazu lege ich wie beim linken Header das selbe Modul an, trage hier jedoch die entsprechende Modulposition des Sliders ein und belasse das Bild auf 100%. Seite 10/11
3 Weitere Informationen Haben Sie alle Schritte übernommen sollten Sie folgendes Bild im Frontend als Belohnung erhalten. Wie in meinem Blog unter: http://webdesign facts.de/joomla cms/templates/27 eigene joomla templates erstellen geschrieben, sind alle Bereiche per CSS mit einem gestrichelten, farbigen Rahmen umzogen, um die Beispiele besser zu veranschaulichen. Ich habe hier auch bewusst die Modultitel eingeschaltet belassen. Über einen netten Kommentar in meinem Blog würde ich mich natürlich sehr freuen. Für weitere Fragen und Anregungen könnt ihr mir gerne eine Nachricht schreiben. info@medialekt.de Seite 11/11