JSN Cube Anpassungshandbuch

32
Joomla! Template JSN Cube Anpassungshandbuch (für JSN Cube 1.x) www.facebook.com/joomlashine www.twitter.com/joomlashine www.youtube.com/joomlashine Diese Dokumentation ist unter Creative Commons Attribution-Non-Commercial-Share Alike 3.0 Unported Licence freigegeben. Es ist erlaubt für den freien Gebrauch auszudrucken und zu benutzen. Copyright © 2008 - 2012 http://www.joomlashine.com

description

Erfahren Sie, wie Sie JSN Cube anpassen können - ein Joomla Template für Mode. Hier ist die Demo: http://demo.joomlashine.com/joomla-templates/jsn_cube 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

Transcript of JSN Cube Anpassungshandbuch

Page 1: JSN Cube Anpassungshandbuch

Joomla! Template JSN Cube

Anpassungshandbuch (für JSN Cube 1.x)

www.facebook.com/joomlashine

www.twitter.com/joomlashine

www.youtube.com/joomlashine

Diese Dokumentation ist unter Creative Commons Attribution-Non-Commercial-Share Alike 3.0 Unported

Licence freigegeben. Es ist erlaubt für den freien Gebrauch auszudrucken und zu benutzen.

Copyright © 2008 - 2012 http://www.joomlashine.com

Page 2: JSN Cube Anpassungshandbuch

Joomla! Template JSN Cube Anpassungshandbuch ©

2

Inhaltsverzeichnis

Joomla! Template JSN Cube Anpassungshandbuch ....................................................................................1 Inhaltsverzeichnis ................................................................................................................................................................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 ...............................................................................................................................................................................16 Menü ......................................................................................................................................................................................19 Promo-Bereich ....................................................................................................................................................................23 Module...................................................................................................................................................................................24 Inhaltsbereich......................................................................................................................................................................28 Sekundäre Promotion .......................................................................................................................................................30 Fußzeile.................................................................................................................................................................................31 Was kommt als Nächstes? ..............................................................................................................................................32

Page 3: JSN Cube Anpassungshandbuch

Joomla! Template JSN Cube Anpassungshandbuch ©

3

Einführung

Vielen Dank für Ihr Interesse am JSN Cube 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 Anleitung

in der folgenden Reihenfolge systematisch abzuhandeln:

1. JSN Cube Schnellstart Video – ein kurzes Video-Tutorial, welches Ihnen auf dem schnellsten Wege einen

wichtigen Überblick über das JSN Cube Template verschafft. Klicken Sie hier, um zum Video-Tutorial zu

gelangen.

2. JSN Cube Konfigurationshandbuch – Hier erfahren Sie ausführliche Informationen über alle Templates

und wie Sie diese in Ihre eigene Webseite einbauen können.

3. JSN Cube 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!

Page 4: JSN Cube Anpassungshandbuch

Joomla! Template JSN Cube Anpassungshandbuch ©

4

Bevor es losgeht…

Möchten wir Sie darauf hinweisen, dass dieses Handbuch nicht darauf abzielt, sämtliche Anpassungsmöglichkeiten

im 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-Grafikquelle

Um den Anpassungsprozess schneller und einfacher zu gestalten, haben wir eine Serie von Adobe Fireworks

Grafikquelldateien (.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-Tools

FireBug

Als Erweiterung für den Firefox-Browser ist FireBug für die Template-Anpassung unabkömmlich und ziemlich

hilfreich 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 die

Anwendung 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/

XRAY

XRAY ist ein Bookmarklet - optimiert für Internet Explorer 6+, Webkit und auf Mozilla-basierte

Browser(einschließlich Safari, Firefox, Camino oder Mozilla). Wenden Sie XRAY an, um das Box-Modell für

beliebige Elemente auf jeder Webseite anzeigen zu lassen.

Probieren Sie XRAY doch aus: http://www.westciv.com/xray/.

PngOptimizer

Da das PNG-Grafikformat in unseren Templates eine große Rolle spielt, lohnt es sich den Blick auf ein äußerst

nützliches Tool names PngOptmizer zu richten. Technisch gesehen bereinigt es PNG-Dateien von unwichtigen

Attributen, 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.

Page 5: JSN Cube Anpassungshandbuch

Joomla! Template JSN Cube Anpassungshandbuch ©

5

CSS-Dateien

Das 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.

Page 6: JSN Cube Anpassungshandbuch

Joomla! Template JSN Cube Anpassungshandbuch ©

6

“template.css” - Überblick

Wie vorhin bereits genannt, beinhaltet die template.css-Datei alle Template-Ausführungen und ist somit auch die

größte CSS-Datei. Für die einfache Abrufung und Bearbeitung haben wir in mehreren Bereichen einen Code

eingerichtet, 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

o Generelles Stile, Textstile, Überschriftenstile, Linkstile, Listenstile, Bildstile

LAYOUT

o Generelles Layout, Gesamtseite, Kopfzeilenbereich, Menübereich, Oberinhaltsbereich,

Unterinhaltsbereich, Fußzeilenbereich

TYPOGRAPHY

o Generelle Typografie, Inhaltsspalten, Textstile, Linkstile, Tabellenstile, Listenstile, Bildstile

MENU

o Hauptmenü, Baummenü, Div-Menü, seitliches Menü, Obermenü

MOBILE TOOLS

SITE TOOLS

o Präsentation der Einstellungen, Schriftgrößen-Schalter, Seitenbreiten-Schalter, Farbschema-Schalter

FONT STYLES

o Spezialschriftart, CSS3-Schlagschatteneffekt

MODULE STYLES

o Modulboxen, Modul-Icons

JOOMLA! DEFAULT EXTENSIONS

o General, Com_content, Com_contact, Com_poll, Com_search, Com_user, System messages,

Mod_breadcrumb, Mod_login, Mod_poll, Mod_search, Mod_newsflash

MISC

o Generelle Icon-Zuweisung

Page 7: JSN Cube Anpassungshandbuch

Joomla! Template JSN Cube Anpassungshandbuch ©

7

Bearbeitung von Webseitenelementen

Meistens verhält es sich so, dass Sie auf der Webseite das CSS-Attribut einiger Elemente ändern möchten. Dies

lässt sich ganz einfach mit der Anwendung von FireBug herrichten.

Laden Sie sich die Firefox-Erweiterung hier kostenlos herunter.

Schritt 1: FireBug-Aktivierung

Nach der Installation von FireBug werden Sie auf der Browseroberfläche den FireBug-Icon erkennen. Klicken Sie

auf diesen Icon, um FireBug zu aktivieren.

Schriftt 2: Elementuntersuchung

Page 8: JSN Cube Anpassungshandbuch

Joomla! Template JSN Cube Anpassungshandbuch ©

8

Betätigen Sie das Inspektions-Icon und klicken mit Ihrem Mauszeiger auf ein gewünschtes Element zur

Bearbeitung des CSS-Attributs.

Schritt 3: CSS-Bearbeitung

Haben Sie bereits ein Element untersucht, erscheinen alle entsprechenden Attribute im rechten Bereich. Hier

können Sie direkt CSS-Attribute bearbeiten und sehen, wie Ihre Veränderungen auf der Seite angewendet werden.

Page 9: JSN Cube Anpassungshandbuch

Joomla! Template JSN Cube Anpassungshandbuch ©

9

Schritt 4: Sicherung der CSS-Datei

Wenn Sie mit Ihren Veränderungen zufrieden sind, ist es selbstverständlich, dass Sie diese in Ihrer CSS-Datei

abspeichern.

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.

Page 10: JSN Cube Anpassungshandbuch

Joomla! Template JSN Cube Anpassungshandbuch ©

10

Konfiguration der Webseitenüberschrift

Um 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. Öffnen Sie Parameters (System) und ändern Sie den Seitentitel.

Page 11: JSN Cube Anpassungshandbuch

Joomla! Template JSN Cube Anpassungshandbuch ©

11

Multilinguale Unterstützung

Das Joomla!-Template hat einen sehr leistungskräftigen Sprachmechanismus, welches Ihnen eine Anwendung auf

mehreren Sprachen erlaubt. Im Template wird der gesamte Text des Backend und Frontend zu separaten

Sprachdateien geleitet, wodurch eine Übersetzung in jede beliebige Sprache möglich ist. Derzeit unterstützen

unsere 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_Cube_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_Cube_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.

Page 12: JSN Cube Anpassungshandbuch

Joomla! Template JSN Cube Anpassungshandbuch ©

12

UniIcons

Standardmäßig ist JSN Cube ist mit 20 sorgfältig ausgewählten Icons bereitgestellt, die für vielerlei Zwecke

eingesetzt werden können – die sogenannten UniIcons. Sie können aber auch Ihre eigenen Icons verwenden. Wenn

Sie das Icon-Menü anpassen möchten, gibt es 2 folgende Situationen:

Ersetzen eines vorhandenen Icon in der Sprite-Image-Datei

Wenn Sie der Meinung sind, dass Ihnen ein aktuelles Icon nicht gefällt und Sie dieses durch ein besseres Icon mit

gleichem 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-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 Icon

angezeigt werden.

Hinzufügen eines neuen Icon zur Sprite-Image-Datei

Natürlich können Sie der Sprite-Image-Datei auch ein vollkommen neues Icon hinzufügen. Beispiel: Sie möchten

ein 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: 16 x 16 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 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. Laden Sie die neue Datei

auf Ihren Server hoch, um die alte Datei zu überschreiben.

Stage 2: Modifikation des Template-Codes für eine neue Sprite-Image-Datei

1. Öffnen Sie die Datei template.css im Ordner css

Page 13: JSN Cube Anpassungshandbuch

Joomla! Template JSN Cube Anpassungshandbuch ©

13

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 anordnen

Standardmäßig werden alle Module in der top-Position auf einer horizontalen Ebene angeordnet angezeigt. Für die

vertikale 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.

Page 14: JSN Cube Anpassungshandbuch

Joomla! Template JSN Cube Anpassungshandbuch ©

14

Generelles Layout

Haupthintergrund-Anpassung

JSN Cube ist mit 2 Farben für den Seitenhintergrund ausgestattet, die Sie bei Bedarf anpassen können.

1. Öffnen Sie die CSS-Datei entsprechend des zu nutzenden Parameters Farbschema. Verwenden Sie

beispielsweise die Farbe Blau, dann müssen Sie die CSS-Datei template_blue.css öffnen.

2. In der CSS-Auswahl #jsn-master ändern Sie background-color: #XXXXXX, wobei der Hex-Code

XXXXXX die gewünschte Farbe angibt.

3. Falls Sie dem Kopfzeilenbereich zusätzlich einige Hintergrundbilder beifügen möchten, dann können Sie

dies tun, indem Sie dem Hintergrundbild des Kopfzeilenbereiches 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.

Aktualisieren den Browser-Cache, um das Ergebnis zu sehen.

Page 15: JSN Cube Anpassungshandbuch

Joomla! Template JSN Cube Anpassungshandbuch ©

15

Gesamte Seite linksbündig ausrichten

Standardmäßig ist JSN Cube auf eine zentrierte Ausrichtung abgestimmt. Um diese Seite linksbündig auszurichten,

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.

Typografie-Anpassung

Standardmäßig verfügt JSN Cube ü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 die

Funktionsweise 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.

Page 16: JSN Cube Anpassungshandbuch

Joomla! Template JSN Cube Anpassungshandbuch ©

16

Kopfzeile

Kopfzeilenhintergrund-Anpassung

JSN Cube stellt Ihnen 2 Bilder für den Kopfzeilenbereichshintergrund zur Verfügung, doch wenn Sie Ihr eigenes

Hintergrundbild verwenden möchten, dann müssen Sie dafür Folgendes tun:

Schritt 1: Vorbereitung des Hintergrundbildes

1. Öffnen Sie die Datei jsn-Cube-design.png im Grafikquellen-Paket.

2. Bereits geöffnet, können Sie 6 Bereiche auf der Farbseite erkennen; jeder dieser Bereiche enthält alle

notwendigen Grafikquelldateien für die eigene Modifizierung.

Haben Sie die oben genannten Schritte erledigt, dann können Sie das entsprechende Teilstück exportieren.

Als Beispiel haben wir bereits schon das Teilstück bg-header.png in jedem Farbordner angewendet.

Verwenden Sie beispielsweise die Farbe Blau, dann finden Sie das dazugehörige Teilstück im

images\colors\blue-Ordner.

Page 17: JSN Cube Anpassungshandbuch

Joomla! Template JSN Cube Anpassungshandbuch ©

17

Schritt 2: Anwendung des neuerstellten Hintergrundbildes

Wenn 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_Cube_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 die Datei template.css im Ordner css, und ändern Sie background in der CSS-Auswahl #jsn-

header, um Ihr neues Hintergrundbild und Ihre neue Hintergrundfarbe anzuwenden.

3. Öffnen Sie die CSS-Datei entsprechend des zu nutzenden Parameters Farbschema. Verwenden Sie

beispielsweise die Farbe Blau, dann müssen Sie die CSS-Datei template_blue.css öffnen.

4. Wenn Ihre neue Hintergrundbilddatei eine andere Bezeichnung hat, müssen Sie natürlich den

Standardnamen auf den neuen Namen ändern.

5. 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 sehen.

Page 18: JSN Cube Anpassungshandbuch

Joomla! Template JSN Cube Anpassungshandbuch ©

18

Flash-Logo-Implementation

Standardmäßig erlaubt Ihnen JSN Cube die Anwendung Ihrer eigenen Logo-Bilddatei durch das Einstellen

entsprechender Template-Parameter. Manchmal jedoch kann es sein, dass Sie eine Flash-Datei als Logo verwenden

wollen.

Die folgenden Schritte werden Ihnen dies anhand der Flash-Datei For logo.swf mit den Dimensionen 250 x 75

pixels 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 (or any other you like)

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="75" 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="75" name="logo" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />

</object>

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.

Page 19: JSN Cube Anpassungshandbuch

Joomla! Template JSN Cube Anpassungshandbuch ©

19

Bemerkung: Die Anwendung von Flash-Logos hat keinen Einfluss auf Parameter für Logo-Anpassungen.

Menü

Hauptmenü

Für die Farbänderung im Hintergrund der Hauptmenüleiste müssen Sie Folgendes tun:

1. Öffnen Sie die Datei template.css im Ordner css.

2. Modifizieren Sie in der CSS-Auswahl #jsn-menu 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übereiche

Auch können Sie die Farbe der Untermenübereiche ändern. Dafür müssen Sie folgende Schritte beachten:

1. Öffnen Sie die CSS-Datei entsprechend des zu nutzenden Parameters Farbschema. Verwenden Sie

beispielsweise die Farbe Blau, dann müssen Sie die CSS-Datei template_blue.css öffnen.

2. Richten Sie in der CSS-Auswahl div.jsn-modulecontainer ul.menu-mainmenu ul das Attribut

background-color auf Ihre gewünschte Farbe aus oder ersetzten es durch das Attribut background, um die

Hintergrundfarbe sowie das Hintergrundbild zu ändern. Dies ist die Ausführung für die Hintergrundfarbe

von Untermenübereichen.

Page 20: JSN Cube Anpassungshandbuch

Joomla! Template JSN Cube Anpassungshandbuch ©

20

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.

Speichern Sie die CSS-Datei und laden Sie die neue Datei auf den Server hoch, um die alte Datei zu überschreiben.

Page 21: JSN Cube Anpassungshandbuch

Joomla! Template JSN Cube Anpassungshandbuch ©

21

Menüleiste im Promo-Bereich nach unten verschieben

Standardmäßig befindet sich die Menüleiste oberhalb des Promo-Bereiches. Sie können die Menüleiste aber auch

nach 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:

Page 22: JSN Cube Anpassungshandbuch

Joomla! Template JSN Cube Anpassungshandbuch ©

22

Speichern Sie die index.php-Datei und laden Sie diese auf den Server hoch, um die alte Datei zu überschreiben.

Page 23: JSN Cube Anpassungshandbuch

Joomla! Template JSN Cube Anpassungshandbuch ©

23

Promo-Bereich

Sie 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.

Speichern Sie die CSS-Datei und laden Sie die neue Datei auf den Server hoch, um die alte Datei zu überschreiben.

Page 24: JSN Cube Anpassungshandbuch

Joomla! Template JSN Cube Anpassungshandbuch ©

24

Module

Boxmodule

Standardmäßig bieten Ihnen JSN Cube 6 Boxmodule an, wobei Sie über viel mehr verfügen können. Dafür müssen

Sie Folgendes tun:

Schritt 1: Vorbereitung des Hintergrundbildes

Dieser Schritt setzt voraus, dass auf Ihrem Computer Adobe Fireworks oder Photoshop installiert und Sie die für

die Anwendung nötigen Grundkenntnisse beherrschen. Für die Erstellung eines Boxmodules in einer bestimmten

Farbe (Beispiel: Violett) müssen Sie zuerst Ihr Hintergrundbild vorbereiten:

1. Öffnen Sie die Datei jsn-cube-design.png im Grafikquellen-Paket.

2. Bereits geöffnet, können Sie 6 Bereiche auf der Farbseite erkennen; jeder dieser Bereiche enthält alle

notwendigen Grafikquelldateien für die eigene Modifizierung.

3. Wenn Sie bereits die oben genannten Schritte erledigt haben, dann speichern Sie Ihr Hintergrundbild unter

einem entsprechenden Namen, z.B. bg-box-style-purple.png.

Jetzt sind Ihre Bilder bereit und Sie können weiter zu Schritt 2 gehen.

Page 25: JSN Cube Anpassungshandbuch

Joomla! Template JSN Cube Anpassungshandbuch ©

25

Schritt 2: Anwendung des neuerstellten Hintergrundbildes

Wenn 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 images/module-styles des Template-Ordners.

Der Dateipfad müsste wie folgt aussehen:

joomla_root_folder/templates/jsn_Cube_XXX/images/module-styles, wobei XXX für die jeweilige

Template-Edition steht.

2. Verwenden Sie beispielsweise die Farbe Blau, dann müssen Sie die CSS-Datei template_blue.css öffnen.

Hier finden Sie die folgenden Erklärungen und erstellen Sie eine Kopie von ihnen (Suchen Sie nach der

Zeichenfolge richbox-1, um sie zu finden)

div.richbox-1 .jsn-moduletitle,

div.lightbox-1 .jsn-moduletitle {

background: url(../images/colors/blue/bg-box-style-light.png) left bottom no-repeat;

}

div.richbox-1 .jsn-moduletitle .jsn-moduletitle_inner1,

div.lightbox-1 .jsn-moduletitle .jsn-moduletitle_inner1 {

background: url(../images/colors/blue/bg-box-style-light.png) right bottom no-repeat;

}

div.richbox-1 .jsn-moduletitle .jsn-moduletitle_inner2 {

background-color: #1898C9;

}

div.richbox-1 .jsn-modulecontent {

border-top-color: #56C2EB;

background-color: #23B0E5;

}

Und ändern wie nachstehend gezeigt:

div.richbox-purple .jsn-moduletitle {

background: url(../images/colors/blue/bg-box-style-purple.png) left bottom no-repeat;

}

div.richbox-purple .jsn-moduletitle .jsn-moduletitle_inner1 {

background: url(../images/colors/blue/bg-box-style-purple.png) right bottom no-repeat;

Page 26: JSN Cube Anpassungshandbuch

Joomla! Template JSN Cube Anpassungshandbuch ©

26

}

div.richbox-purple .jsn-moduletitle .jsn-moduletitle_inner2 {

background-color: #XXXXXX;

}

div.richbox-purple .jsn-modulecontent {

border-top-color: #XXXXXX;

background-color: #XXXXXX;

}

3. Speichern Sie die CSS-Datei und laden Sie die neue Datei auf den Server hoch, um die alte Datei zu

überschreiben.

Nun können Sie Ihr Modul in der violetten Boxmodul-Ausführung anzeigen lassen, indem Sie den Parameter

Modulklassensuffix auf richbox-purple setzen.

Page 27: JSN Cube Anpassungshandbuch

Joomla! Template JSN Cube Anpassungshandbuch ©

27

Icon-Modul-Kopfzeile

Standardmäßig ist JSN Cube PRO mit 20 UniIcons für die Anwendung an Modulüberschriften ausgestattet. Für

Anwendung mit eigenen Icons, gehen Sie bitte zum Abschnitt UniIcons in diesem Handbuch.

Page 28: JSN Cube Anpassungshandbuch

Joomla! Template JSN Cube Anpassungshandbuch ©

28

Inhaltsbereich

Icon-Link-Anpassung

Standardmäßig verfügt JSN Cube PRO über 34 voreingestellte Icons für die Anwendung von Links. Für die

Anwendung mit eigenen Icons gibt es 2 Situationen:

Ersetzen eines vorhandenen Icon in der Sprite-Image-Datei

Wenn Sie der Meinung sind, dass Ihnen ein aktuelles Icon nicht gefällt und Sie dieses durch ein besseres Icon mit

gleichem 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-Datei

Natürlich können Sie der Sprite-Image-Datei auch ein vollkommen neues Icon hinzufügen. Beispiel: Sie möchten

ein 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.

Page 29: JSN Cube Anpassungshandbuch

Joomla! Template JSN Cube Anpassungshandbuch ©

29

Schritt 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>

Page 30: JSN Cube Anpassungshandbuch

Joomla! Template JSN Cube Anpassungshandbuch ©

30

Sekundäre Promotion

Sie 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-bottom die gewünschten Attribute. Sie können auch

die Grafikquelldatei content-bottom.png verwenden.

3. Speichern Sie die CSS-Datei und laden Sie die neue Datei auf den Server hoch, um die alte Datei zu

überschreiben.

Page 31: JSN Cube Anpassungshandbuch

Joomla! Template JSN Cube Anpassungshandbuch ©

31

Fußzeile

Fußzeilenbereich-Anpassung

Standardmäßig besitzt der Fußzeilenbereich einen weißen Hintergrund, doch auch dieser last sich folgendermaßen

anpassen:

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öhe

Die Höhe der Fußzeile wird durch den Inhalt bestimmt, d.h. wenn Sie beispielsweise die Fußzeile größer machen

möchten, dann müssen Sie mehr an Inhalten hinzufügen. Natürlich können Sie auch eine bestimmte Fußzeilenhöhe

festlegen, indem Sie das Attribut height in der CSS-Auswahl #jsn-footer einrichten.

Page 32: JSN Cube Anpassungshandbuch

Joomla! Template JSN Cube Anpassungshandbuch ©

32

Was 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. Bei

der Entwicklung dieses besonderen Templates haben wir uns ein festes Ziel gesetzt - dass Sie aus diesem Produkt

den größtmöglichen Nutzen ziehen können.

Wir wünschen Ihnen für Ihren weiteren Verlauf viel Erfolg!

Feedback

Natü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 Lieblingstemplate

Updates

Zu Ihrem Interesse aktualisieren wir ständig unser Template-Repertoire – vergessen Sie also bitte nicht unsere

Joomlashine-Template-Seite zu besuchen.

Folgen Sie uns auf Twitter http://www.twitter.com/Joomlashine für weitere Updates.

www.facebook.com/joomlashine

www.twitter.com/joomlashine

www.youtube.com/joomlashine