JSN Tendo Anpassungshandbuch
Upcoming SlideShare
Loading in...5
×
 

JSN Tendo Anpassungshandbuch

on

  • 2,158 views

Erfahren Sie, wie Sie JSN Tendo anpassen können - ein Joomla-Template für Fotogalerie-Webseiten. Hier ist die Demo: http://demo.joomlashine.com/joomla-templates/jsn-tendo.html ...

Erfahren Sie, wie Sie JSN Tendo anpassen können - ein Joomla-Template für Fotogalerie-Webseiten. Hier ist die Demo: http://demo.joomlashine.com/joomla-templates/jsn-tendo.html

Um an der Spitze von Joomla Tutorials von JoomlaShine zu bleiben:
- Klicken Sie auf den “Gefällt mir” Button auf FB: http://www.facebook.com/joomlashine
- Folgen Sie uns auf Twitter: http://twitter.com/joomlashine

Statistics

Views

Total Views
2,158
Views on SlideShare
2,158
Embed Views
0

Actions

Likes
0
Downloads
5
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

JSN Tendo Anpassungshandbuch JSN Tendo Anpassungshandbuch Document Transcript

  • Joomla! Template JSN Tendo Anpassungshandbuch (für JSN Tendo 1.x) Dieses Werk bzw. Inhalt steht unter einer Creative Commons Namensnennung-Nicht-kommerziell-Weitergabeunter gleichen Bedingungen 3.0 Unported Lizenz. Es ist Ihnen gestattet, das Werk vervielfältigen, verbreiten und öffentlich zugänglich machen sowie Abwandlungen bzw. Bearbeitungen des Inhaltes anfertigen. Copyright © 2008 - 2012 http://www.joomlashine.com
  • Joomla! template JSN Tendo Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineTable of ContentsJoomla! Template JSN Tendo Anpassungshandbuch.................................................................................. 1 Table of Contents .................................................................................................................................................................2 Einführung .............................................................................................................................................................................3 Bevor es losgeht…...............................................................................................................................................................4 CSS-Dateien...........................................................................................................................................................................5 Bearbeitung von Webseitenelementen ..........................................................................................................................7 Konfiguration der Webseitenüberschrift .....................................................................................................................10 Multilinguale Unterstützung ............................................................................................................................................11 UniIcons................................................................................................................................................................................12 Generelles Layout ..............................................................................................................................................................14 Kopfzeile...............................................................................................................................................................................17 Menü ......................................................................................................................................................................................19 Promo-Bereich ....................................................................................................................................................................23 Module...................................................................................................................................................................................24 Inhaltsbereich......................................................................................................................................................................27 Fußzeile.................................................................................................................................................................................29 Was kommt als Nächstes? ..............................................................................................................................................30 2
  • Joomla! template JSN Tendo Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineEinführungVielen Dank für Ihr Interesse am JSN Tendo Template. Wir begrüßen Ihre Entscheidung und hoffen natürlich,dass unser Produkt Sie in Sachen Website und Business bereichern wird.Damit Sie möglichst schnell und effizient den Umgang mit Templates erlernen, empfehlen wir Ihnen die Anleitungin der folgenden Reihenfolge systematisch abzuhandeln: 1. JSN Tendo Schnellstart Video – ein kurzes Video-Tutorial, welches Ihnen auf dem schnellsten Wege einen wichtigen Überblick über das JSN Tendo Template verschafft. Klicken Sie hier, um zum Video- Tutorial zu gelangen. 2. JSN Tendo Konfigurationshandbuch – Hier erfahren Sie ausführliche Informationen über alle Templates und wie Sie diese in Ihre eigene Webseite einbauen können. 3. JSN Tendo Anpassungshandbuch– Hier erfahren Sie, wie Sie die verschiedenen Templates Ihren Bedürfnissen anpassen können.Sie können auch jederzeit alle Dokumente ausdrucken, um ein komfortables Lesen zu gewährleisten.Los geht’s! 3
  • Joomla! template JSN Tendo Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineBevor es losgeht…Möchten wir Sie darauf hinweisen, dass dieses Handbuch nicht darauf abzielt, sämtliche Anpassungsmöglichkeitenim Template abzudecken. Vielmehr werden wir nur die am häufigsten gestellten Fragen rund um Template-Anpassung beleuchten und hoffen, dass wir Sie mit unseren Lösungsansätzen zufriedenstellen können.Template-GrafikquelleUm den Anpassungsprozess schneller und einfacher zu gestalten, haben wir eine Serie von Adobe FireworksGrafikquelldateien (.png) für Ihren Gebrauch erstellt. Nach dem Produkterwerb stehen Ihnen alle Dateien als zip-Datei im Kundenbereich als Download zur Verfügung.Must-Have-ToolsFireBugAls Erweiterung für den Firefox-Browser ist FireBug für die Template-Anpassung unabkömmlich und ziemlichhilfreich für das Verständnis der Template-Struktur, da es in der Lage ist, Ihnen auf Ihrer Webseite jedes HTML-Element anzuzeigen (html-Tags, JavaScript-Code, CSS-Code, usw.). Wir empfehlen Ihnen daher wärmstens dieAnwendung von Firefox in Verbindung mit der Erweiterung FireBug für Ihre Template-Anpassung.Sie können sich FireBug auf der offiziellen Webseite kostenlos herunterladen: http://www.getfirebug.com/XRAYXRAY ist ein Bookmarklet - optimiert für Internet Explorer 6+, Webkit und auf Mozilla-basierteBrowser(einschließlich Safari, Firefox, Camino oder Mozilla). Wenden Sie XRAY an, um das Box-Modell fürbeliebige Elemente auf jeder Webseite anzeigen zu lassen.Probieren Sie XRAY doch aus: http://www.westciv.com/xray/.PngOptimizerDa das PNG-Grafikformat in unseren Templates eine große Rolle spielt, lohnt es sich den Blick auf ein äußerstnützliches Tool names PngOptmizer zu richten. Technisch gesehen bereinigt es PNG-Dateien von unwichtigenAttributen, die für das Web nicht essentiell sind, und mindert somit wesentlich die Dateigröße.PngOptmizer steht Ihnen auf http://psydk.org/PngOptimizer.php kostenlos als Download zur Verfügung. 4
  • Joomla! template JSN Tendo Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineCSS-DateienDas Template umfasst mehrere CSS-Dateien:  template.css – enthält sämtliche Template-Ausführungen. Mit dieser Gesamtdatei wird Ihnen die Arbeit mit CSS wesentlich einfach fallen. Zudem wird die Menge an Serveranfragen reduziert. template_rtl.css – enthält spezifische Ausführungen für das RTL-Layout. Diese Datei wird nur geladen, wenn der RTL-Modus aktiviert wird.  template_mobile.css – enthält spezifische Ausführungen für das mobile Layout. Diese Datei wird nur geladen, wenn das mobile Layout aktiviert wird.  template_{color}.css – enthält spezifische Ausführungen für bestimmte Farbvariationen. Es kann jeweils nur eine Farbdatei auf einmal geladen werden.  template_ fixie7.css – enthält spezifische Ausführungen für Internet Explorer 7. Diese Datei wird nur geladen, wenn der Benutzer IE7 zum Anzeigen der Webseite verwendet.  jsn_iconlinks.css – enthält spezifische Ausführungen für die Icon-Link-Funktion. Diese Datei wird nur geladen, wenn der Template-Parameter Aktiviere Auto Icon Links auf Yes eingestellt ist.  print.css – enthält spezifische Ausführungen für die Druckleistung. 5
  • Joomla! template JSN Tendo Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashine“template.css” - ÜberblickWie vorhin bereits genannt, beinhaltet die template.css-Datei alle Template-Ausführungen und ist somit auch diegrößte CSS-Datei. Für die einfache Abrufung und Bearbeitung haben wir in mehreren Bereichen einen Codeeingerichtet, d.h. Sie können mittels Textsuche ganz bequem zum gewünschten Bereich gelangen.Hier ein Überblick zu den verschiedenen Bereichen mit ihren jeweiligen Unterbereichen:DEFAULT HTML Generelles Stile, Textstile, Überschriftenstile, Linkstile, Listenstile, BildstileLAYOUT Generelles Layout, Gesamtseite, Kopfzeilenbereich, Menübereich, Oberinhaltsbereich, Unterinhaltsbereich, FußzeilenbereichTYPOGRAPHY Generelle Typografie, Inhaltsspalten, Textstile, Linkstile, Tabellenstile, Listenstile, BildstileMENU Hauptmenü, Baummenü, Div-Menü, seitliches Menü, ObermenüMOBILE TOOLSSITE TOOLS Präsentation der Einstellungen, Schriftgrößen-Schalter, Seitenbreiten-Schalter, Farbschema-SchalterFONT STYLES Spezialschriftart, CSS3-SchlagschatteneffektMODULE STYLES Modulboxen, Modul-IconsJOOMLA! DEFAULT EXTENSIONS General, Com_content, Com_contact, Com_poll, Com_search, Com_user, System messages, Mod_breadcrumb, Mod_login, Mod_poll, Mod_search, Mod_newsflashMISC Generelle Icon-Zuweisung 6
  • Joomla! template JSN Tendo Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineBearbeitung von WebseitenelementenMeistens verhält es sich so, dass Sie auf der Webseite das CSS-Attribut einiger Elemente ändern möchten. Dieslässt sich ganz einfach mit der Anwendung von FireBug herrichten.Laden Sie sich die Firefox-Erweiterung hier kostenlos herunter.Schritt 1: FireBug-AktivierungNach der Installation von FireBug werden Sie auf der Browseroberfläche den FireBug-Icon erkennen. Klicken Sieauf diesen Icon, um FireBug zu aktivieren. 7
  • Joomla! template JSN Tendo Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineSchriftt 2: ElementuntersuchungBetätigen Sie das Inspektions-Icon und klicken mit Ihrem Mauszeiger auf ein gewünschtes Element zurBearbeitung des CSS-Attributs.Schritt 3: CSS-BearbeitungHaben Sie bereits ein Element untersucht, erscheinen alle entsprechenden Attribute im rechten Bereich. Hierkönnen Sie direkt CSS-Attribute bearbeiten und sehen, wie Ihre Veränderungen auf der Seite angewendet werden. 8
  • Joomla! template JSN Tendo Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineSchritt 4: Sicherung der CSS-DateiWenn Sie mit Ihren Veränderungen zufrieden sind, ist es selbstverständlich, dass Sie diese in Ihrer CSS-Dateiabspeichern. 1. Kopieren Sie den gesamten CSS-Bereichsnamen. 2. Öffnen Sie die CSS-Datei und benutzen für die Aufrufung die Textsuche. 3. Geben Sie neue CSS-Attribute ein und speichern Ihre Veränderungen. 9
  • Joomla! template JSN Tendo Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineKonfiguration der WebseitenüberschriftUm die Webseitenüberschrift umzuändern, befolgen Sie folgende Schritte: 1. Gehen Sie in den Joomla!-Administrationsbreich zu Menüs -> Main Menu 2. Wählen Sie den Menüeintrag Home aus. 3. Ändern Sie den Seitentitel. 10
  • Joomla! template JSN Tendo Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineMultilinguale UnterstützungDas Joomla!-Template hat einen sehr leistungskräftigen Sprachmechanismus, welches Ihnen eine Anwendung aufmehreren Sprachen erlaubt. Im Template wird der gesamte Text des Backend und Frontend zu separatenSprachdateien geleitet, wodurch eine Übersetzung in jede beliebige Sprache möglich ist. Derzeit unterstützenunsere Templates 12 Primärsprachen, wobei weitere in Zukunft hinzukommen werden.Was Sie tun müssen: 1. Erstellen Sie eine Kopie der aktuellen englischen Sprachdatei file en-GB.tpl_jsn_tendo_XXX.ini, wobei XXX für die jeweilige Template-Edition steht. Benennen Sie diese Ihrer gewünschten Sprache entsprechend, z.B. de-DE.tpl_jsn_tendo_XXX.ini. Bedenken Sie bitte dabei, dass 2 Sprachdateien mit demselben Namen existieren: a. Die Datei im Template-Ordner /admin ist die Sprachdatei des Backend; b. Die Datei im Haupt-Template-Ordner ist die Sprachdatei des Frontend. 2. Öffnen Sie die neuerstellten Dateien und beginnen mit der Textübersetzung. 3. Öffnen Sie die Datei templateDetails.xml und fügen eine XML-Deklaration über Ihre neue Sprachdatei hinzu. 4. Erstellen Sie ein Template-Paket und führen eine erneute Installation aus. Dieser Schritt ist deswegen erforderlich, weil die Joomla!-Installation alle Template-Sprachdateien von dort aus in ihre jeweiligen Ordner kopiert. Die Backend- und Frontend-Sprachdateien werden wie folgt in separaten Ordnern abgelegt: a. {joomla_root_folder}/administrator/language/{language_folder} b. {joomla_root_folder}/language/{language_folder} Falls Sie das ständige Umpacken und die damit verbundene Neuinstallation des Template vermeiden möchten, dann können Sie manuell Ihre Sprachdatei in entsprechende Ordner kopieren, diese dort bearbeiten, um sie schließlich im Template einzubinden. 5. Stellen Sie Ihre eigene Sprache als Standardsprache in Joomla! ein und Sie werden alle Texte in Ihrer heimischen Ausdrucksform wie in der Template-Sprachdatei angezeigt bekommen. 11
  • Joomla! template JSN Tendo Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineUniIconsStandardmäßig ist JSN Tendo ist mit 20 sorgfältig ausgewählten Icons bereitgestellt, die für vielerlei Zweckeeingesetzt werden können – die sogenannten UniIcons. Sie können aber auch Ihre eigenen Icons verwenden. WennSie das Icon-Menü anpassen möchten, gibt es 2 folgende Situationen:Ersetzen eines vorhandenen Icon in der Sprite-Image-DateiWenn Sie der Meinung sind, dass Ihnen ein aktuelles Icon nicht gefällt und Sie dieses durch ein besseres Icon mitgleichem Sinngehalt ersetzen möchten (z.B. Icon-Name), dann müssen Sie dabei folgende Schritte beachten: 1. Erstellen Sie Ihr eigenes Icon (Format: 24 x 24 cm) und speichern es in einer separaten (temporären) Datei. 2. Öffnen Sie die Sprite-Image-Datei icons-uni.png im Ordner images/icons mit einem Grafik-Editor, wie z.B. Fireworks oder Photoshop. 3. Ziehen Sie Ihre neuerstellte Icon-Datei zur Sprite-Image-Datei im Grafik-Editor und platzieren es auf das Icon, welches Sie für die Anpassung ausgewählt haben. 4. Speichern Sie die Sprite-Image-Datei und löschen Sie ggf. die temporäre Icon-Datei. Vergessen Sie nicht die Datei mit PngOptimizer zu komprimieren. 5. Laden Sie die neue Datei auf Ihren Server hoch, um die alte Datei zu überschreiben.Löschen Sie den Browser-Cache und aktualisieren Sie Ihre Webseite; es müsste nun Ihr verbessertes Iconangezeigt werden.Hinzufügen eines neuen Icon zur Sprite-Image-DateiNatürlich können Sie der Sprite-Image-Datei auch ein vollkommen neues Icon hinzufügen. Beispiel: Sie möchtenein Icon mit dem Symbol $ und dem Namen cash hinzufügen.Schritt 1: Hinzufügen eines neuen Icon zur Sprite-Image-Datei 1. Erstellen Sie Ihr eigenes Icon (Format: 24 x 24 cm) und speichern es in einer separaten (temporären) Datei; Dateinahme frei wählbar. 2. Öffnen Sie die Sprite-Image-Datei icons-uni.png im Ordner images/icons mit einem Grafik-Editor, wie z.B. Fireworks oder Photoshop; Canvas-Größe auf 94px oder mehr erweitern. 3. Ziehen Sie Ihre neuerstellte cash Icon-Datei zur Sprite-Image-Datei im Grafik-Editor und platzieren es am Ende der Datei: Abstand 70px vom untersten Icon in der Sprite-Image-Datei. Speichern Sie die Sprite-Image-Datei und löschen Sie ggf. die temporäre Icon-Datei. Laden Sie die neue Datei auf Ihren Server hoch, um die alte Datei zu überschreiben. 12
  • Joomla! template JSN Tendo Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineStage 2: Modifikation des Template-Codes für eine neue Sprite-Image-Datei 1. Öffnen Sie die Datei template.css im Ordner css 2. Suchen Sie den Abschnitt GENERAL ICON ASSIGNMENT mithilfe der Textsuche. 3. Fügen Sie den folgenden Code hinzu: .link-icon.icon-cash, .menu-iconmenu .icon-cash a span, .list-icon.icon-cash li .jsn-listbullet, .icon-cash h3.jsn-moduletitle span.jsn-moduleicon { background: url(../images/icons/icons-uni.png) no-repeat 0 -1720px; } cash ist hier der Name Ihres neuen Icons und -1720px die Position in der Sprite-Image-Datei. 4. Speichern Sie die CSS-Datei und laden Sie die neue Datei auf den Server hoch, um die originale Datei zu überschreiben.Nun können Sie Ihr neues Icon mit dem Namen cash verwenden.Alle Module in der Position “top” vertical anordnenStandardmäßig werden alle Module in der top-Position auf einer horizontalen Ebene angeordnet angezeigt. Für dievertikale Anordnung müssen Sie Folgendes tun: 1. Öffnen Sie die Datei template.css im Ordner css. 2. Fügen sie der CSS-Auswahl #jsn-pos-top div.jsn-modulecontainer das Attribut clear: right hinzu. Das Ergebnis müsste folgendermaßen aussehen: #jsn-pos-top div.jsn-modulecontainer { float: right; clear: right; }Speichern Sie die CSS-Datei und laden Sie die neue Datei auf den Server hoch, um die originale Datei zuüberschreiben. 13
  • Joomla! template JSN Tendo Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineGenerelles LayoutHaupthintergrund-AnpassungJSN Tendo ist mit 6 Farbmöglichkeiten für den Seitenhintergrund ausgestattet, doch wenn Sie eine anderespezifische Farbe implementieren möchten, dann müssen Sie folgende Anweisungen berücksichtigen:Schritt 1: Vorbereitung des HintergrundbildesDieser Schritt setzt voraus, dass auf Ihrem Computer Adobe Fireworks oder Photoshop installiert und Sie die fürdie Anwendung nötigen Grundkenntnisse beherrschen. 1. Öffnen Sie die Datei jsn-tendo-design.png im Grafikquellen-Paket. 2. JSN Tendo 6 Farbvariationen an, die nicht nur den Haupthintergrund abdecken, sondern auch das Dropdown-Menü, Links, Tabellenköpfe usw. 14
  • Joomla! template JSN Tendo Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineSchritt 2: Anwendung des neuerstellten HintergrundbildesWenn das Hintergrundbild schon fertig ist, ist es nun an der Zeit dieses auf Ihr Template anwenden zu lassen: 1. Kopieren Sie Ihr neues Hintergrundbild in den Unterordner YYY des Template-Ordners. Der Dateipfad müsste wie folgt aussehen: joomla_root_folder/templates/jsn_Tendo_XXX/images/colors/YYY, wobei XXX für die jeweilige Template-Edition steht und YYY die gewünschte Template-Farbe für das neue Hintergrundbild ist. 2. Öffnen Sie template.css im Ordner css, und ändern Sie background in der CSS-Auswahl #jsn-master, um Ihr neues Hintergrundbild anzuwenden. 3. Öffnen Sie die CSS-Datei entsprechend des zu nutzenden Parameters Farbschema. Verwenden Sie beispielsweise die Farbe Rot, dann müssen Sie die CSS-Datei template_red.css öffnen. 4. Ändern Sie background-image in der CSS-Auswahl #jsn-master_inner, um das Haupthintergrundbild in der top-center-Position zu ersetzen. 5. Wenn Ihr neues Hintergrundbild eine andere Bezeichnung hat, müssen Sie natürlich den Standardnamen auf den neuen Namen ändern. 6. Speichern Sie die CSS-Datei und laden Sie die neue Datei auf den Server hoch, um die alte Datei zu überschreiben.Löschen Sie Browser-Cache und aktualisieren Sie Ihre Webseite, um das Ergebnis zu sehenGesamte Seite linksbündig ausrichtenStandardmäßig ist JSN Tendo auf eine zentrierte Ausrichtung abgestimmt. Um diese Seite linksbündigauszurichten, müssen Sie Folgendes beachten: 1. Öffnen Sie die Datei template.css im Ordner css. 2. Entfernen Sie bei der CSS-Auswahl #jsn-page das Attribut margin: 0 auto. 3. Speichern Sie die CSS-Datei und laden Sie die neue Datei auf den Server hoch, um die originale Datei zu überschreiben.Ihre gesamte Seite ist nun linksbündig ausgerichtet. 15
  • Joomla! template JSN Tendo Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineTypografie-AnpassungStandardmäßig verfügt JSN Tendo über 3 Textstile sowie 3 Schriftgrößen, jede mit ihren eigenen Einstellungen.Am Beispiel einer geschäftlichen Webseite werden wir die Standardeinstellungen anpassen, damit Sie dieFunktionsweise vollständig nachvollziehen können: 1. Öffnen Sie die Datei jsn_config.php im Ordner includes. 2. Die PHP-Variable $jsn_textstyles_config ist eine Definitionsanordnung der Schriftart/-größe für alle Textstile.  font-a definiert die Schriftartfamilie des Inhaltstextes.  font-b definiert die Schriftartfamilie des Modulüberschriften, Artikelüberschriften und Hauptmenübereich  font-s definiert die Schriftartfamilie des Spezialschriftart  font-sw definiert den Schriftstil und die Schriftstärke der Spezialschriftart.  font-small definiert die Schriftgröße (klein)  font-medium definiert die Schriftgröße (mittel)  font-big definiert die Schriftgröße (groß) 3. Speichern Sie die bearbeitete PHP-Datei und laden Sie die neue Datei auf den Server hoch, um die originale Datei zu überschreiben.Aktualisieren den Browser-Cache, um das Ergebnis zu sehen. 16
  • Joomla! template JSN Tendo Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineKopfzeileFlash-Logo-ImplementationStandardmäßig erlaubt Ihnen JSN Tendo die Anwendung Ihrer eigenen Logo-Bilddatei durch das Einstellenentsprechender Template-Parameter. Manchmal jedoch kann es sein, dass Sie eine Flash-Datei als Logo verwendenwollen.Die folgenden Schritte werden Ihnen dies anhand der Flash-Datei For logo.swf mit den Dimensionen 250 x 106pixels im Ordner joomla_root_folder/images veranschaulichen: 1. Gehen Sie inder Joomla!-Administartion zu Erweiterungen -> Module. 2. Klicken Sie auf Neu und wählen Eigene Inhalte (Leeres Modul) aus. 3. Stellen Sie in der Modul-Konfiguration die Parameter wie folgt ein:  Titel: Flash Logo  Titel anzeigen: Verbergen  Aktiviert: Ja  Position: logo  Menüs: alle  HTML-Code: <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash. cab#version=8,0,0,0" width="250" height="106" id="logo" align="middle"> <param name="allowScriptAccess" value="sameDomain" /> <param name="movie" value="images/logo.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /><embed src=" images/logo.swf" quality="high" bgcolor="#ffffff" width="250" height="106" name="logo" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object> 17
  • Joomla! template JSN Tendo Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashine Bemerkung: Sie müssen den Code direkt im HTML-Code-Bereich eingeben und nicht im WYSIWYG- Editor. 4. Klicken auf Speichern und aktualisieren Ihre Webseite zur Überprüfung. Ihr Flash-Logo müsste nun das vorherige Logo ersetzt haben.Bemerkung: Die Anwendung von Flash-Logos hat keinen Einfluss auf Parameter für Logo-Anpassungen. 18
  • Joomla! template JSN Tendo Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineMenüHauptmenüFür die Farbänderung im Hintergrund der Hauptmenüleiste müssen Sie Folgendes tun: 1. Öffnen Sie die CSS-Datei entsprechend des zu nutzenden Parameters Farbschema. Verwenden Sie beispielsweise die Farbe Rot, dann müssen Sie die CSS-Datei template_red.css öffnen. 2. Modifizieren Sie in der CSS-Auswahl #jsn-menu_inner die gewünschten Attribute. 3. Speichern Sie die CSS-Datei und laden Sie die neue Datei auf den Server hoch, um die alte Datei zu überschreiben.UntermenübereicheAuch können Sie die Farbe der Untermenübereiche ändern. Dafür müssen Sie folgende Schritte beachten: 19
  • Joomla! template JSN Tendo Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashine1. Öffnen Sie die CSS-Datei entsprechend des zu nutzenden Parameters Farbschema. Verwenden Sie beispielsweise die Farbe Rot, dann müssen Sie die CSS-Datei template_red.css öffnen.2. Es gibt zwei Fälle, wo Sie Ihren Untermenübereichshintergrund anpassen möchten:  Main Menu Position Transparenz ist deaktiviert: Richten Sie in der CSS-Auswahl div.jsn- modulecontainer ul.menu-mainmenu ul das Attribut background ein, um die Hintergrundfarbe sowie das Hintergrundbild zu ändern oder ersetzen es durch das Attribut background-color, falls Sie nur die Hintergrundfarbe ändern möchten.  Main Menu Position Transparenz ist aktiviert: Richten Sie in der CSS-Auswahl body.jsn- mmtransparency div.jsn-modulecontainer ul.menu-mainmenu ul das Attribut background ein, um die Hintergrundfarbe sowie das Hintergrundbild zu ändern oder ersetzen es durch das Attribut background-color, falls Sie nur die Hintergrundfarbe ändern möchten.3. Ändern Sie in der CSS-Auswahl div.jsn-modulecontainer ul.menu-mainmenu ul li a den Hex-Code der Ober- und Unterbereiche. Dies ist die Ausführung für Untermenübereiche im regulären Zustand.4. Ändern Sie in jeder CSS-Auswahl, die mit div.jsn-modulecontainer ul.menu-mainmenu ul li:hover > a beginnt, den Hex-Code der Hintergrundfarbe und Unterbereiche. Dies ist die Ausführung für das Untermenü im Mauszeiger-Zustand.5. Speichern Sie die CSS-Datei und laden Sie die neue Datei auf den Server hoch, um die alte Datei zu überschreiben. 20
  • Joomla! template JSN Tendo Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineMenüleiste im Promo-Bereich nach unten verschiebenStandardmäßig befindet sich die Menüleiste oberhalb des Promo-Bereiches. Sie können die Menüleiste aber auchnach unten verschieben – dazu müssen Sie Folgendes tun: 1. Öffnen Sie die Datei index.php. 2. Schneiden Sie den hier angezeigten Code-Abschnitt von hier:bis hierhin aus: 3. Fügen Sie Ihre Auswahl in folgende Stelle ein: 21
  • Joomla! template JSN Tendo Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashine4. Speichern Sie die index.php-Datei und laden Sie diese auf den Server hoch, um die alte Datei zu überschreiben. 22
  • Joomla! template JSN Tendo Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashinePromo-BereichSie können neben der Hintergrundfarbe, den Bilder und der Textfarbe viele weitere Parameter im Promo-Bereichändern. Befolgen Sie dafür diese Anweisungen: 1. Öffnen Sie die Datei template.css im Ordner css. 2. Modifizieren Sie in der CSS-Auswahl #jsn-content-top die gewünschten Attribute. 3. Mit der CSS-Auswahl #jsn-content-top h3.jsn-moduletitle können Sie das CSS-Attribut sämtlicher Elemente ändern. 4. Speichern Sie die CSS-Datei und laden Sie die neue Datei auf den Server hoch, um die alte Datei zu überschreiben. 23
  • Joomla! template JSN Tendo Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineModuleBoxmoduleStandardmäßig bieten Ihnen JSN Tendo 6 Boxmodule an, wobei Sie über viel mehr verfügen können. Dafürmüssen Sie Folgendes tun:Schritt 1: Definierung des Stils für die ModulüberschriftDas Erste, was Sie sich Sie sich überlegen müssen, ist das genaue Aussehen der Modulüberschrift: 1. Der folgende Code dient der Definierung für die Modulüberschrift im Modulstil richbox-1 oder lightbox-1. Kopieren Sie den Code nach template.css, benennen diesen um und passen ihn je nach Bedarf an: div.richbox-1 h3.jsn-moduletitle, div.lightbox-1 h3.jsn-moduletitle { border-color: #595959; color: #DEDEDE; } 2. Für die Definierung der Modulüberschrift im Modulstil richbox-2 oder lightbox-2 (diese Ausführungen variieren je nach Template-Farben) öffnen Sie die aktuelle Template-Farbe z.B. template_red.css und nehmen eine Anpassung vor (s. Schritt 1.1): div.richbox-2 h3.jsn-moduletitle, div.lightbox-2 h3.jsn-moduletitle { border-color: #AF2323; color: #AF2323; } 24
  • Joomla! template JSN Tendo Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineSchritt 2: Anwenden der neuen HintergrundfarbeWenn Sie die Modulüberschrift bereit ist, dann wird es Zeit Ihren eigenen Modulhintergrund anzuwenden: 1. Der folgende Code dient der Definierung für den Hintergrund im Modulstil richbox. Kopieren Sie den Code nach template.css, benennen diesen um und passen ihn je nach Bedarf an: div[class*="richbox-"] div.jsn-modulecontent { background-color: #252525; padding: 6px 12px; } Beispiel: div.richbox-3 div.jsn-modulecontent { background-color: #6C1E1F; padding: 10px; } 2. Für die Definierung des Hintergrundes im Modulstil solid-2 öffnen Sie die CSS-Datei der aktuellen Template-Farbe z.B. template_red.css und nehmen eine Anpassung vor (s. Schritt 2.1): div.solid-2 div.jsn-modulecontainer_inner { background-color: #6C1E1F; border: 1px solid #9F2D30; } 3. Speichern Sie die CSS-Datei und laden Sie die neue Datei auf den Server hoch, um die alte Datei zu überschreiben.Sie können nun Ihre Module in der violetten Boxmodulausführung anzeigen, indem Sie den ParameterModulklassensuffix auf richbox-3 einstellen. 25
  • Joomla! template JSN Tendo Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineIcon-Modul-KopfzeileStandardmäßig ist JSN Tendo PRO mit 20 UniIcons für die Anwendung an Modulüberschriften ausgestattet. FürAnwendung mit eigenen Icons, gehen Sie bitte zum Abschnitt UniIcons in diesem Handbuch. 26
  • Joomla! template JSN Tendo Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineInhaltsbereichIcon-Link-AnpassungStandardmäßig verfügt JSN Tendo PRO über 34 voreingestellte Icons für die Anwendung von Links. Für dieAnwendung mit eigenen Icons gibt es 2 Situationen:Ersetzen eines vorhandenen Icon in der Sprite-Image-DateiWenn Sie der Meinung sind, dass Ihnen ein aktuelles Icon nicht gefällt und Sie dieses durch ein besseres Icon mitgleichem Sinngehalt ersetzen möchten (z.B. Icon-Name), dann müssen Sie dabei folgende Schritte beachten: 1. Erstellen Sie Ihr eigenes Icon (Format: 16 x 16 cm) und speichern es in einer separaten (temporären) Datei. 2. Öffnen Sie die Sprite-Image-Datei icons-ext.png im Ordner images/icons mit einem Grafik-Editor, wie z.B. Fireworks oder Photoshop. 3. Ziehen Sie Ihre neuerstellte Icon-Datei zur Sprite-Image-Datei im Grafik-Editor und platzieren es auf das Icon, welches Sie für die Anpassung ausgewählt haben 4. Speichern Sie die Sprite-Image-Datei und löschen Sie ggf. die temporäre Icon-Datei. Vergessen Sie nicht die Datei mit PngOptimizer zu komprimieren. 5. Laden Sie die neue Datei auf den Server hoch, um die alte Datei zu überschreiben.Sie müssten nun Ihr verbessertes Icon sehen können.Hinzufügen eines neuen Icons zur Sprite-image-DateiNatürlich können Sie der Sprite-Image-Datei auch ein vollkommen neues Icon hinzufügen. Beispiel: Sie möchtenein Icon mit dem Symbol $ auf www.cash.com verlinken bzw. auf jeden Link mit class=” link-icon-ext icon-ext-cash” anhängen. There are 2 stages involved:Schritt 1: Hinzufügen eines neuen Icon zur Sprite-Image-Datei 1. Erstellen Sie Ihr eigenes Icon (Format: 16 x 16 cm) und speichern es in einer separaten (temporären) Datei. 2. Öffnen Sie die Sprite-Image-Datei icons-ext.png im Ordner images/icons mit einem Grafik-Editor, wie z.B. Fireworks oder Photoshop; Canvas-Größe auf 86px oder mehr erweitern. 3. Ziehen Sie Ihre neuerstellte cash Icon-Datei zur Sprite-Image-Datei im Grafik-Editor und platzieren es am Ende der Datei: Abstand 70px vom untersten Icon in der Sprite-Image-Datei.Speichern Sie die Sprite-Image-Datei und löschen Sie ggf. die temporäre Icon-Datei. 27
  • Joomla! template JSN Tendo Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineSchritt 2: Modifikation des Template-Codes für eine neue Sprite-Image-Datei 1. Öffnen Sie die Datei jsn_iconlinks.css im Ordner css fügen folgenden Code am Dateiende an: a[href*="www.cash.com"] { padding-right: 20px; padding-bottom: 1px; background: url(../images/icons/icons-ext.png) no-repeat right -2064px; } body.jsn-direction-rtl a[href*="www.cash.com"] { padding-right: 0; padding-left: 20px; background-position: left -2064px; } 2. Öffnen Sie die Datei template.css im Ordner css und fügen Sie dem erweiterten Link (suchen Sie nach EXTENDED LINK) und fügen folgenden Code hinzu: .link-icon-ext.icon-ext-cash { background: url(../images/icons/icons-ext.png) no-repeat right -2064px; } 3. Öffnen Sie die Datei template_rtl.css im Ordner css und fügen Sie dem erweiterten Link (suchen Sie nach EXTENDED LINK) und fügen folgenden Code hinzu: body.jsn-direction-rtl .icon-ext-cash { background-position: left -2064px; } 4. Speichern Sie beide CSS-Dateien und laden Sie diese auf den Server hoch, um die originale Datei zu überschreiben: 5. Nun können Sie Ihr neues Icon in Ihren Inhalt wie folgt anwenden: a. <a href="http://www.cash.com">Cash Website</a> b. <a href="# class="link-icon-ext icon-ext-cash">Cash link</a> 28
  • Joomla! template JSN Tendo Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineFußzeileFußzeilenbereich-AnpassungStandardmäßig besitzt der Fußzeilenbereich einen weißen Hintergrund, doch auch dieser last sich folgendermaßenanpassen: 1. Öffnen Sie die Datei template.css im Ordner css. 2. Fügen Sie der CSS-Auswahl #jsn-footer das Attribut background-color: #XXXXXX hinzu, wobei der Hex-Code XXXXXX die gewünschte Farbe angibt. 3. Falls Sie dem Fußzeilenbereich zusätzlich einige Hintergrundbilder beifügen möchten, dann können Sie dies tun, indem Sie dem Hintergrundbild des Fußzeilenbereiches das Attribut background-image mit der URL hinzufügen. 4. Speichern Sie die CSS-Datei und laden Sie die neue Datei auf den Server hoch, um die alte Datei zu überschreiben.FußzeilenhöheDie Höhe der Fußzeile wird durch den Inhalt bestimmt, d.h. wenn Sie beispielsweise die Fußzeile größer machenmöchten, dann müssen Sie mehr an Inhalten hinzufügen. Natürlich können Sie auch eine bestimmte Fußzeilenhöhefestlegen, indem Sie das Attribut height in der CSS-Auswahl #jsn-footer einrichten. 29
  • Joomla! template JSN Tendo Configuration Manual © Follow us on Twitter http://www.twitter.com/joomlashine Find us on Facebook http://www.facebook.com/joomlashineWas kommt als Nächstes?Sie haben gerade den letzten und schwierigsten Teil des Dokumentationspaketes gelesen und natürlich hoffen wir,dass es Ihnen gefallen hat. Von diesem Zeitpunkt an, verfügen Sie nun über eine Menge Template-Kenntnisse. Beider Entwicklung dieses besonderen Templates haben wir uns ein festes Ziel gesetzt - dass Sie aus diesem Produktden größtmöglichen Nutzen ziehen können.Wir wünschen Ihnen für Ihren weiteren Verlauf viel Erfolg!FeedbackNatürlich begrüßen wir jegliche Art von Rückmeldung:Senden Sie uns einen Fehlerbericht und wir werden schnellstmöglich der Sache auf den Grund gehen.Schreiben Sie uns ein Empfehlungsschreiben, welches auf der "Kundenempfehlung"-Seite veröffentlich wird.Twittern Sie über Ihr LieblingstemplateUpdatesZu Ihrem Interesse aktualisieren wir ständig unser Template-Repertoire – vergessen Sie also bitte nicht unsereJoomlashine-Template-Seite zu besuchen.Folgen Sie uns auf Twitter http://www.twitter.com/joomlashineFolgen Sie uns auf Facebook: http://www.facebook.com/joomlashine 30