SlideShare ist ein Scribd-Unternehmen logo
1 von 31
Downloaden Sie, um offline zu lesen
Joomla! Template JSN Dome
                         Anpassungshandbuch
                                             (für JSN Dome 2.x)




 Dieses Werk bzw. Inhalt steht unter einer Creative Commons Namensnennung-Nicht-kommerziell-Weitergabe
unter 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 Dome Anpassungshandbuch ©
                                       Folgen Sie uns auf Twitter http://www.twitter.com/joomlashine
                                     Folgen Sie uns auf Facebook http://www.facebook.com/joomlashine

Inhaltsverzeichnis
Joomla! Template JSN Dome 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...............................................................................................................................................................................17
  Menü ......................................................................................................................................................................................19
  Promo-Bereich ....................................................................................................................................................................23
  Module...................................................................................................................................................................................24
  Inhaltsbereich......................................................................................................................................................................27
  Sekundäre Promotion .......................................................................................................................................................29
  Fußzeile.................................................................................................................................................................................30
  Was kommt als Nächstes? ..............................................................................................................................................31




                                                                                             2
Joomla! template JSN Dome Anpassungshandbuch ©
                        Folgen Sie uns auf Twitter http://www.twitter.com/joomlashine
                      Folgen Sie uns auf Facebook http://www.facebook.com/joomlashine

Einführung




Vielen Dank für Ihr Interesse am JSN Dome 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 Dome Schnellstart Video – ein kurzes Video-Tutorial, welches Ihnen auf dem schnellsten Wege
      einen wichtigen Überblick über das JSN Dome Template verschafft. Klicken Sie hier, um zum Video-
      Tutorial zu gelangen.
   2. JSN Dome Konfigurationshandbuch – Hier erfahren Sie ausführliche Informationen über alle Templates
      und wie Sie diese in Ihre eigene Webseite einbauen können.
   3. JSN Dome 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 Dome Anpassungshandbuch ©
                         Folgen Sie uns auf Twitter http://www.twitter.com/joomlashine
                       Folgen Sie uns auf Facebook http://www.facebook.com/joomlashine
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.




                                                        4
Joomla! template JSN Dome Anpassungshandbuch ©
                        Folgen Sie uns auf Twitter http://www.twitter.com/joomlashine
                      Folgen Sie uns auf Facebook http://www.facebook.com/joomlashine
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 Ja eingestellt ist.

         print.css – enthält spezifische Ausführungen für die Druckleistung.




                                                       5
Joomla! template JSN Dome Anpassungshandbuch ©
                         Folgen Sie uns auf Twitter http://www.twitter.com/joomlashine
                       Folgen Sie uns auf Facebook http://www.facebook.com/joomlashine
“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 General Styles, Text Styles, Heading Styles, Link Styles, List Styles, Images Styles.

      LAYOUT
           o General Layout, Overall Page, Header Area, Menu Area, Content top Area, Content Area, Content
             Bottom area, Footer Area.

      TYPOGRAPHY
           o General Typography, Content Columns, Text Styles, Link Styles, Table Styles, List Styles, Images
             Styles.

      MENU
           o Main Menu, Tree Menu, Div Menu, Side Menu, Top Menu.

      MOBILE TOOLS

      SITE TOOLS
           o General Presentation, Text Sizer, Width Selector, Color Selector.

      FONT STYLES
           o Special Font Adjustments, CSS3 Drop Shadow Effect.

      MODULE STYLES
           o Module Boxes, Module 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 General icon assignment.




                                                        6
Joomla! template JSN Dome Anpassungshandbuch ©
                         Folgen Sie uns auf Twitter http://www.twitter.com/joomlashine
                       Folgen Sie uns auf Facebook http://www.facebook.com/joomlashine
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.




                                                        7
Joomla! template JSN Dome Anpassungshandbuch ©
                        Folgen Sie uns auf Twitter http://www.twitter.com/joomlashine
                      Folgen Sie uns auf Facebook http://www.facebook.com/joomlashine
Schriftt 2: Elementuntersuchung




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.




                                                      8
Joomla! template JSN Dome Anpassungshandbuch ©
                         Folgen Sie uns auf Twitter http://www.twitter.com/joomlashine
                       Folgen Sie uns auf Facebook http://www.facebook.com/joomlashine
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.




                                                        9
Joomla! template JSN Dome Anpassungshandbuch ©
                        Folgen Sie uns auf Twitter http://www.twitter.com/joomlashine
                      Folgen Sie uns auf Facebook http://www.facebook.com/joomlashine
Konfiguration der Webseitenüberschrift




Um die Webseitenüberschrift umzuändern, befolgen Sie folgende Schritte:
   1. Gehen Sie in den Joomla!-Administrationsbereich zu Menüs -> Main Menu
   2. Wählen Sie den Menüeintrag Home aus und drücken Sie auf Bearbeiten.
   3. Ändern Sie bei den Seitenanzeigenoptionen den Browser Seitentitel.




                                                     10
Joomla! template JSN Dome Anpassungshandbuch ©
                        Folgen Sie uns auf Twitter http://www.twitter.com/joomlashine
                      Folgen Sie uns auf Facebook http://www.facebook.com/joomlashine
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.
Was Sie tun müssen:
   1. Erstellen Sie eine Kopie der aktuellen englischen Sprachdatei file en-GB.tpl_jsn_dome_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_dome_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 Dome Anpassungshandbuch ©
                         Folgen Sie uns auf Twitter http://www.twitter.com/joomlashine
                       Folgen Sie uns auf Facebook http://www.facebook.com/joomlashine
UniIcons
Standardmäßig ist JSN Dome 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: 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 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: 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 Dome Anpassungshandbuch ©
                        Folgen Sie uns auf Twitter http://www.twitter.com/joomlashine
                      Folgen Sie uns auf Facebook http://www.facebook.com/joomlashine
Stage 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 -1880px;

       }

       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.




                                                       13
Joomla! template JSN Dome Anpassungshandbuch ©
                         Folgen Sie uns auf Twitter http://www.twitter.com/joomlashine
                       Folgen Sie uns auf Facebook http://www.facebook.com/joomlashine
Generelles Layout

Haupthintergrund-Anpassung




JSN Dome ist mit 6 Farbmöglichkeiten für den Seitenhintergrund ausgestattet, doch wenn Sie eine andere
spezifische Farbe implementieren möchten, dann müssen Sie folgende Anweisungen berücksichtigen:

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.
   1. Öffnen Sie die Datei master-bg.png im Grafikquellen-Paket.
   2. Bereits geöffnet, können Sie unten die Hintergrundbildebene und oben die 6 voreingestellten Farbebenen
      erkennen. Modifizieren Sie eine der Farbebenen, wenn Sie nur die Farbe ändern möchten. Für die
      komplette Änderung des Hintergrundbildes müssen Sie auch die Hintergrundbildebene modifizieren.
Haben Sie die oben genannten Schritte erledigt, dann können Sie nun das von uns bereits vorbereitende Teilstück
master-bg exportieren.




                                                       14
Joomla! template JSN Dome Anpassungshandbuch ©
                    Folgen Sie uns auf Twitter http://www.twitter.com/joomlashine
                  Folgen Sie uns auf Facebook http://www.facebook.com/joomlashine
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_dome_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 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.
   3. In der CSS-Auswahl #jsn-master ändern Sie background-color entsprechend des Farb-Codes des
      untersten Pixels vom neuen Hintergrundbild.
   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.

Gesamte Seite linksbündig ausrichten
Standardmäßig ist JSN Epic 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.




                                                        15
Joomla! template JSN Dome Anpassungshandbuch ©
                         Folgen Sie uns auf Twitter http://www.twitter.com/joomlashine
                       Folgen Sie uns auf Facebook http://www.facebook.com/joomlashine

Typografie-Anpassung
Standardmäßig verfügt JSN Dome ü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 definiert die 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 Dome Anpassungshandbuch ©
                        Folgen Sie uns auf Twitter http://www.twitter.com/joomlashine
                      Folgen Sie uns auf Facebook http://www.facebook.com/joomlashine
Kopfzeile




Kopfzeilenhintergrund-Anpassung
Standardmäßig besitzt der Kopfzeilenbereich 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-header das Attribut background-color: #XXXXXX hinzu, 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.




                                                      17
Joomla! template JSN Dome Anpassungshandbuch ©
                           Folgen Sie uns auf Twitter http://www.twitter.com/joomlashine
                         Folgen Sie uns auf Facebook http://www.facebook.com/joomlashine
Flash-Logo-Implementation
Standardmäßig erlaubt Ihnen JSN Epic 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

          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.
Bemerkung: Die Anwendung von Flash-Logos hat keinen Einfluss auf Parameter für Logo-Anpassungen.



                                                       18
Joomla! template JSN Dome Anpassungshandbuch ©
                        Folgen Sie uns auf Twitter http://www.twitter.com/joomlashine
                      Folgen Sie uns auf Facebook http://www.facebook.com/joomlashine
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.




                                                      19
Joomla! template JSN Dome Anpassungshandbuch ©
                        Folgen Sie uns auf Twitter http://www.twitter.com/joomlashine
                      Folgen Sie uns auf Facebook http://www.facebook.com/joomlashine
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 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. Find CSS group of selectors begin with div.jsn-modulecontainer ul.menu-mainmenu ul li:hover > a and
      set attribute background to change both background color and background image or replace it by attribute
      background-color to change background color only. This is styling for the submenu in the mouse over
      state.
   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 Dome Anpassungshandbuch ©
                            Folgen Sie uns auf Twitter http://www.twitter.com/joomlashine
                          Folgen Sie uns auf Facebook http://www.facebook.com/joomlashine
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:


                                                        21
Joomla! template JSN Dome Anpassungshandbuch ©
                     Folgen Sie uns auf Twitter http://www.twitter.com/joomlashine
                   Folgen Sie uns auf Facebook http://www.facebook.com/joomlashine




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




                                                   22
Joomla! template JSN Dome Anpassungshandbuch ©
                        Folgen Sie uns auf Twitter http://www.twitter.com/joomlashine
                      Folgen Sie uns auf Facebook http://www.facebook.com/joomlashine
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.
   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 Dome Anpassungshandbuch ©
                         Folgen Sie uns auf Twitter http://www.twitter.com/joomlashine
                       Folgen Sie uns auf Facebook http://www.facebook.com/joomlashine
Module

Boxmodule




Standardmäßig bieten Ihnen JSN Dome 8 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 module-box-bg.png im Grafikquellen-Paket.
   2. Bereits geöffnet, können Sie unten mehrere Hintergrundbildebenen und eine oben eine Farbebene erkennen.
      Once opened, you can see several background image layers at the bottom and a color layer on top.
      Modifizieren Sie die Farbebene, wenn Sie nur die Farbe ändern möchten. Für die komplette Anpassung des
      Hintergrundbildes müssen Sie auch die Hintergrundbildebene modifizieren.
   3. Nachdem Sie die oben genannten Schritte erledigt haben, speichern Sie Ihr Hintergrundbild unter einem
      entsprechenden Namen, z.B. richbox-4.png.




                                                       24
Joomla! template JSN Dome Anpassungshandbuch ©
                    Folgen Sie uns auf Twitter http://www.twitter.com/joomlashine
                  Folgen Sie uns auf Facebook http://www.facebook.com/joomlashine
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 nach einem entsprechenden Unterordner des Template-Ordners.
      Der Dateipfad müsste wie folgt aussehen:
      joomla_root_folder/templates/jsn_dome_XXX/imagescolors/YYY, wobei XXX für die jeweilige
      Template-Edition steht.
   2. Öffnen Sie die Datei template_red.css und suchen Sie in der CSS-Auswahl div.richbox-1 div.jsn-
      modulecontainer_inner nach RICH BOX 1.
   3. Kopieren Sie die folgende CSS-Auswahl:
       div.richbox-1 div.jsn-modulecontainer_inner > div {

             background: #D24A17 url(../images/colors/red/bg-module-richbox-1.png) left
       bottom repeat-x;

       }

       Und modifizieren diese wie folgt:
       div.richbox-4 div.jsn-modulecontainer_inner > div {

             background: #XXXXXX url(../images/colors/red/bg-module-richbox-4.png) left
       bottom repeat-x;

       }

   4. 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-4 setzen.




                                                        25
Joomla! template JSN Dome Anpassungshandbuch ©
                       Folgen Sie uns auf Twitter http://www.twitter.com/joomlashine
                     Folgen Sie uns auf Facebook http://www.facebook.com/joomlashine
Icon-Modul-Kopfzeile
Standardmäßig ist JSN Dome 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




                                                    26
Joomla! template JSN Dome Anpassungshandbuch ©
                         Folgen Sie uns auf Twitter http://www.twitter.com/joomlashine
                       Folgen Sie uns auf Facebook http://www.facebook.com/joomlashine
Inhaltsbereich

Icon-Link-Anpassung
Standardmäßig verfügt JSN Dome 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.




                                                        27
Joomla! template JSN Dome Anpassungshandbuch ©
                        Folgen Sie uns auf Twitter http://www.twitter.com/joomlashine
                      Folgen Sie uns auf Facebook http://www.facebook.com/joomlashine
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>




                                                     28
Joomla! template JSN Dome Anpassungshandbuch ©
                        Folgen Sie uns auf Twitter http://www.twitter.com/joomlashine
                      Folgen Sie uns auf Facebook http://www.facebook.com/joomlashine
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.
   3. Speichern Sie die CSS-Datei und laden Sie die neue Datei auf den Server hoch, um die alte Datei zu
      überschreiben.




                                                      29
Joomla! template JSN Dome Anpassungshandbuch ©
                        Folgen Sie uns auf Twitter http://www.twitter.com/joomlashine
                      Folgen Sie uns auf Facebook http://www.facebook.com/joomlashine
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.




                                                      30
Joomla! template JSN Dome Anpassungshandbuch ©
                         Folgen Sie uns auf Twitter http://www.twitter.com/joomlashine
                       Folgen Sie uns auf Facebook http://www.facebook.com/joomlashine
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
Folgen Sie uns auf Facebook: http://www.facebook.com/joomlashine




                                                        31

Weitere ähnliche Inhalte

Was ist angesagt?

JSN ImageShow Konfigurationshandbuch
JSN ImageShow KonfigurationshandbuchJSN ImageShow Konfigurationshandbuch
JSN ImageShow KonfigurationshandbuchJoomlaShine
 
JSN Cube Konfigurationshandbuch
JSN Cube KonfigurationshandbuchJSN Cube Konfigurationshandbuch
JSN Cube KonfigurationshandbuchJoomlaShine
 
JSN Dome Konfigurationshandbuch
JSN Dome KonfigurationshandbuchJSN Dome Konfigurationshandbuch
JSN Dome KonfigurationshandbuchJoomlaShine
 
Joomla 2.5 Leicht Gemacht | Kostenlos Buch
Joomla 2.5 Leicht Gemacht | Kostenlos BuchJoomla 2.5 Leicht Gemacht | Kostenlos Buch
Joomla 2.5 Leicht Gemacht | Kostenlos BuchJoomlaShine
 
Input o2thinkbig
Input o2thinkbigInput o2thinkbig
Input o2thinkbigaseubert
 
Website erstellen mit WordPress
Website erstellen mit WordPressWebsite erstellen mit WordPress
Website erstellen mit WordPressSkill Day
 
WordPress Tutorial
WordPress TutorialWordPress Tutorial
WordPress TutorialSkill Day
 
Grundlagen Wordpress Schulung SkillDay.de 2015
Grundlagen Wordpress Schulung SkillDay.de   2015Grundlagen Wordpress Schulung SkillDay.de   2015
Grundlagen Wordpress Schulung SkillDay.de 2015Skill Day
 
Mini Handbuch-Joomla1.7
Mini Handbuch-Joomla1.7Mini Handbuch-Joomla1.7
Mini Handbuch-Joomla1.7schulpraxis
 
15 DocPublisher - Anpassung Aussehen und Funktionen
15 DocPublisher - Anpassung Aussehen und Funktionen15 DocPublisher - Anpassung Aussehen und Funktionen
15 DocPublisher - Anpassung Aussehen und FunktionenNotes IT
 

Was ist angesagt? (10)

JSN ImageShow Konfigurationshandbuch
JSN ImageShow KonfigurationshandbuchJSN ImageShow Konfigurationshandbuch
JSN ImageShow Konfigurationshandbuch
 
JSN Cube Konfigurationshandbuch
JSN Cube KonfigurationshandbuchJSN Cube Konfigurationshandbuch
JSN Cube Konfigurationshandbuch
 
JSN Dome Konfigurationshandbuch
JSN Dome KonfigurationshandbuchJSN Dome Konfigurationshandbuch
JSN Dome Konfigurationshandbuch
 
Joomla 2.5 Leicht Gemacht | Kostenlos Buch
Joomla 2.5 Leicht Gemacht | Kostenlos BuchJoomla 2.5 Leicht Gemacht | Kostenlos Buch
Joomla 2.5 Leicht Gemacht | Kostenlos Buch
 
Input o2thinkbig
Input o2thinkbigInput o2thinkbig
Input o2thinkbig
 
Website erstellen mit WordPress
Website erstellen mit WordPressWebsite erstellen mit WordPress
Website erstellen mit WordPress
 
WordPress Tutorial
WordPress TutorialWordPress Tutorial
WordPress Tutorial
 
Grundlagen Wordpress Schulung SkillDay.de 2015
Grundlagen Wordpress Schulung SkillDay.de   2015Grundlagen Wordpress Schulung SkillDay.de   2015
Grundlagen Wordpress Schulung SkillDay.de 2015
 
Mini Handbuch-Joomla1.7
Mini Handbuch-Joomla1.7Mini Handbuch-Joomla1.7
Mini Handbuch-Joomla1.7
 
15 DocPublisher - Anpassung Aussehen und Funktionen
15 DocPublisher - Anpassung Aussehen und Funktionen15 DocPublisher - Anpassung Aussehen und Funktionen
15 DocPublisher - Anpassung Aussehen und Funktionen
 

Andere mochten auch

Digicomp Social Media Jumpstart
Digicomp Social Media Jumpstart Digicomp Social Media Jumpstart
Digicomp Social Media Jumpstart Ralph Hutter
 
Universidad tecnológica equinoccial
Universidad tecnológica equinoccialUniversidad tecnológica equinoccial
Universidad tecnológica equinoccialMishellQuelal
 
Programa del Congreso Estatal Manejo Forestal y Desarrollo Rural ante el Camb...
Programa del Congreso Estatal Manejo Forestal y Desarrollo Rural ante el Camb...Programa del Congreso Estatal Manejo Forestal y Desarrollo Rural ante el Camb...
Programa del Congreso Estatal Manejo Forestal y Desarrollo Rural ante el Camb...Gabriel Franco
 
Präsentation ALBA Group Januar 2015
Präsentation ALBA Group Januar 2015Präsentation ALBA Group Januar 2015
Präsentation ALBA Group Januar 2015Christian Wohlrabe
 
Verantwortung - Gerechtigkeit - Öffentlichkeit (Call for Papers, DGPuK2015)
Verantwortung - Gerechtigkeit - Öffentlichkeit (Call for Papers, DGPuK2015) Verantwortung - Gerechtigkeit - Öffentlichkeit (Call for Papers, DGPuK2015)
Verantwortung - Gerechtigkeit - Öffentlichkeit (Call for Papers, DGPuK2015) dgpuk2015
 
Bilder sagen mehr als 1000 Worte
Bilder sagen mehr als 1000 WorteBilder sagen mehr als 1000 Worte
Bilder sagen mehr als 1000 WorteThomas Mühl
 
Sesión 08
Sesión 08Sesión 08
Sesión 08evi24_13
 
Resolucion no.7 noviembre_9_de_2015_capacidad economica
Resolucion no.7 noviembre_9_de_2015_capacidad economicaResolucion no.7 noviembre_9_de_2015_capacidad economica
Resolucion no.7 noviembre_9_de_2015_capacidad economicajaime muñoz jaramillo
 
Mongolei - Rechtliche Rahmenbedingungen, Einfuhrbestimmungen, Zölle, Normen u...
Mongolei - Rechtliche Rahmenbedingungen, Einfuhrbestimmungen, Zölle, Normen u...Mongolei - Rechtliche Rahmenbedingungen, Einfuhrbestimmungen, Zölle, Normen u...
Mongolei - Rechtliche Rahmenbedingungen, Einfuhrbestimmungen, Zölle, Normen u...tuvshin111
 
internet_jessica
internet_jessicainternet_jessica
internet_jessicaevi24_13
 
apuntes
apuntesapuntes
apuntes291097
 

Andere mochten auch (20)

Digicomp Social Media Jumpstart
Digicomp Social Media Jumpstart Digicomp Social Media Jumpstart
Digicomp Social Media Jumpstart
 
Qué es rss
Qué es rssQué es rss
Qué es rss
 
P ancamil
P ancamilP ancamil
P ancamil
 
Analisis spot
Analisis spotAnalisis spot
Analisis spot
 
Analisis sitioweb
Analisis sitiowebAnalisis sitioweb
Analisis sitioweb
 
Universidad tecnológica equinoccial
Universidad tecnológica equinoccialUniversidad tecnológica equinoccial
Universidad tecnológica equinoccial
 
WVG_Presentación Final
WVG_Presentación FinalWVG_Presentación Final
WVG_Presentación Final
 
Programa del Congreso Estatal Manejo Forestal y Desarrollo Rural ante el Camb...
Programa del Congreso Estatal Manejo Forestal y Desarrollo Rural ante el Camb...Programa del Congreso Estatal Manejo Forestal y Desarrollo Rural ante el Camb...
Programa del Congreso Estatal Manejo Forestal y Desarrollo Rural ante el Camb...
 
Präsentation ALBA Group Januar 2015
Präsentation ALBA Group Januar 2015Präsentation ALBA Group Januar 2015
Präsentation ALBA Group Januar 2015
 
Cholula pueblo mágico
Cholula  pueblo  mágicoCholula  pueblo  mágico
Cholula pueblo mágico
 
Verantwortung - Gerechtigkeit - Öffentlichkeit (Call for Papers, DGPuK2015)
Verantwortung - Gerechtigkeit - Öffentlichkeit (Call for Papers, DGPuK2015) Verantwortung - Gerechtigkeit - Öffentlichkeit (Call for Papers, DGPuK2015)
Verantwortung - Gerechtigkeit - Öffentlichkeit (Call for Papers, DGPuK2015)
 
Rebels rest
Rebels restRebels rest
Rebels rest
 
Bilder sagen mehr als 1000 Worte
Bilder sagen mehr als 1000 WorteBilder sagen mehr als 1000 Worte
Bilder sagen mehr als 1000 Worte
 
Sesión 08
Sesión 08Sesión 08
Sesión 08
 
Resolucion no.7 noviembre_9_de_2015_capacidad economica
Resolucion no.7 noviembre_9_de_2015_capacidad economicaResolucion no.7 noviembre_9_de_2015_capacidad economica
Resolucion no.7 noviembre_9_de_2015_capacidad economica
 
Mongolei - Rechtliche Rahmenbedingungen, Einfuhrbestimmungen, Zölle, Normen u...
Mongolei - Rechtliche Rahmenbedingungen, Einfuhrbestimmungen, Zölle, Normen u...Mongolei - Rechtliche Rahmenbedingungen, Einfuhrbestimmungen, Zölle, Normen u...
Mongolei - Rechtliche Rahmenbedingungen, Einfuhrbestimmungen, Zölle, Normen u...
 
internet_jessica
internet_jessicainternet_jessica
internet_jessica
 
apuntes
apuntesapuntes
apuntes
 
Módulo 2 Búsqueda avanzada en Google
Módulo 2 Búsqueda avanzada en GoogleMódulo 2 Búsqueda avanzada en Google
Módulo 2 Búsqueda avanzada en Google
 
Imp
ImpImp
Imp
 

Ähnlich wie JSN Dome Anpassungshandbuch

WordPress vs. TYPO3
WordPress vs. TYPO3WordPress vs. TYPO3
WordPress vs. TYPO3webpard UG
 
APEX 5.1 Ui design crashkurs
APEX 5.1 Ui design crashkursAPEX 5.1 Ui design crashkurs
APEX 5.1 Ui design crashkursSteven Grzbielok
 
Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11Noël Bossart
 
Magento2 - Frontend under the hood
Magento2 - Frontend under the hoodMagento2 - Frontend under the hood
Magento2 - Frontend under the hoodMathias Elle
 
Joomla 2.5 made easy (Englisch)
Joomla 2.5 made easy (Englisch)Joomla 2.5 made easy (Englisch)
Joomla 2.5 made easy (Englisch)Thanh Nguyen
 
Web460 ppt-de-jul-wi-web-all-2020
Web460 ppt-de-jul-wi-web-all-2020Web460 ppt-de-jul-wi-web-all-2020
Web460 ppt-de-jul-wi-web-all-2020HansruediDbeli1
 
Systemvorstellung: dante cms im Überblick
Systemvorstellung: dante cms im ÜberblickSystemvorstellung: dante cms im Überblick
Systemvorstellung: dante cms im Überblicka3 systems GmbH
 
Make your IBM connections deployment your own - customize it
Make your IBM connections deployment your own - customize itMake your IBM connections deployment your own - customize it
Make your IBM connections deployment your own - customize itBelsoft
 
1und1 Do It Yourself Homepage - Neue Features im Überblick (01.09.2011)
1und1 Do It Yourself Homepage - Neue Features im Überblick (01.09.2011)1und1 Do It Yourself Homepage - Neue Features im Überblick (01.09.2011)
1und1 Do It Yourself Homepage - Neue Features im Überblick (01.09.2011)1&1 Internet AG, Karlsruhe, Germany
 
Die neuen Features der 1&1 Do-It-Yourself Homepage im Überblick
Die neuen Features der 1&1 Do-It-Yourself Homepage im ÜberblickDie neuen Features der 1&1 Do-It-Yourself Homepage im Überblick
Die neuen Features der 1&1 Do-It-Yourself Homepage im Überblick1&1
 
#perfmatters - Optimizing the Critical Rendering Path
#perfmatters - Optimizing the Critical Rendering Path#perfmatters - Optimizing the Critical Rendering Path
#perfmatters - Optimizing the Critical Rendering PathJohannes Weber
 
MS Teams Standard vs MS Teams Premium - Vergleich
MS Teams Standard vs MS Teams Premium - VergleichMS Teams Standard vs MS Teams Premium - Vergleich
MS Teams Standard vs MS Teams Premium - VergleichOmniBlue
 
Drupal & Wordpress
Drupal & WordpressDrupal & Wordpress
Drupal & WordpressAmazee Labs
 

Ähnlich wie JSN Dome Anpassungshandbuch (20)

WordPress vs. TYPO3
WordPress vs. TYPO3WordPress vs. TYPO3
WordPress vs. TYPO3
 
APEX 5.1 Ui design crashkurs
APEX 5.1 Ui design crashkursAPEX 5.1 Ui design crashkurs
APEX 5.1 Ui design crashkurs
 
Gutenberg Theme Entwicklung leicht gemacht
Gutenberg Theme Entwicklung leicht gemachtGutenberg Theme Entwicklung leicht gemacht
Gutenberg Theme Entwicklung leicht gemacht
 
Joomla
JoomlaJoomla
Joomla
 
Vorschau auf Drupal 8
Vorschau auf Drupal 8Vorschau auf Drupal 8
Vorschau auf Drupal 8
 
Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11
 
Magento2 - Frontend under the hood
Magento2 - Frontend under the hoodMagento2 - Frontend under the hood
Magento2 - Frontend under the hood
 
Joomla 2.5 made easy (Englisch)
Joomla 2.5 made easy (Englisch)Joomla 2.5 made easy (Englisch)
Joomla 2.5 made easy (Englisch)
 
Web460 ppt-de-jul-wi-web-all-2020
Web460 ppt-de-jul-wi-web-all-2020Web460 ppt-de-jul-wi-web-all-2020
Web460 ppt-de-jul-wi-web-all-2020
 
Contao und CSS
Contao und CSS Contao und CSS
Contao und CSS
 
Systemvorstellung: dante cms im Überblick
Systemvorstellung: dante cms im ÜberblickSystemvorstellung: dante cms im Überblick
Systemvorstellung: dante cms im Überblick
 
webXsite
webXsitewebXsite
webXsite
 
Joomla
JoomlaJoomla
Joomla
 
Responsive Images
Responsive ImagesResponsive Images
Responsive Images
 
Make your IBM connections deployment your own - customize it
Make your IBM connections deployment your own - customize itMake your IBM connections deployment your own - customize it
Make your IBM connections deployment your own - customize it
 
1und1 Do It Yourself Homepage - Neue Features im Überblick (01.09.2011)
1und1 Do It Yourself Homepage - Neue Features im Überblick (01.09.2011)1und1 Do It Yourself Homepage - Neue Features im Überblick (01.09.2011)
1und1 Do It Yourself Homepage - Neue Features im Überblick (01.09.2011)
 
Die neuen Features der 1&1 Do-It-Yourself Homepage im Überblick
Die neuen Features der 1&1 Do-It-Yourself Homepage im ÜberblickDie neuen Features der 1&1 Do-It-Yourself Homepage im Überblick
Die neuen Features der 1&1 Do-It-Yourself Homepage im Überblick
 
#perfmatters - Optimizing the Critical Rendering Path
#perfmatters - Optimizing the Critical Rendering Path#perfmatters - Optimizing the Critical Rendering Path
#perfmatters - Optimizing the Critical Rendering Path
 
MS Teams Standard vs MS Teams Premium - Vergleich
MS Teams Standard vs MS Teams Premium - VergleichMS Teams Standard vs MS Teams Premium - Vergleich
MS Teams Standard vs MS Teams Premium - Vergleich
 
Drupal & Wordpress
Drupal & WordpressDrupal & Wordpress
Drupal & Wordpress
 

Mehr von JoomlaShine

Joomla 3.6 - The revolution in Joomla User Experience
Joomla 3.6 - The revolution in Joomla User ExperienceJoomla 3.6 - The revolution in Joomla User Experience
Joomla 3.6 - The revolution in Joomla User ExperienceJoomlaShine
 
HAPPY JOOMLA 10TH BIRTHDAY INFOGRAPHIC
HAPPY JOOMLA 10TH BIRTHDAY INFOGRAPHIC HAPPY JOOMLA 10TH BIRTHDAY INFOGRAPHIC
HAPPY JOOMLA 10TH BIRTHDAY INFOGRAPHIC JoomlaShine
 
Joomla 3.4 Made Easy
Joomla 3.4 Made EasyJoomla 3.4 Made Easy
Joomla 3.4 Made EasyJoomlaShine
 
Build a Joomla website by Drag n Drop with JSN PageBuilder and JSN PowerAdmin
Build a Joomla website by Drag n Drop with JSN PageBuilder and JSN PowerAdmin Build a Joomla website by Drag n Drop with JSN PageBuilder and JSN PowerAdmin
Build a Joomla website by Drag n Drop with JSN PageBuilder and JSN PowerAdmin JoomlaShine
 
Infographic 6 steps to build a Joomla website
Infographic 6 steps to build a Joomla websiteInfographic 6 steps to build a Joomla website
Infographic 6 steps to build a Joomla websiteJoomlaShine
 
JSN Mobilize Webinar
JSN Mobilize WebinarJSN Mobilize Webinar
JSN Mobilize WebinarJoomlaShine
 
JSN Escape Configuration Manual
JSN Escape Configuration ManualJSN Escape Configuration Manual
JSN Escape Configuration ManualJoomlaShine
 
JSN Mico Customization Manual
JSN Mico Customization ManualJSN Mico Customization Manual
JSN Mico Customization ManualJoomlaShine
 
JSN Mico Configuration Manual
JSN Mico Configuration ManualJSN Mico Configuration Manual
JSN Mico Configuration ManualJoomlaShine
 
JSN Air Configuration Manual
JSN Air Configuration ManualJSN Air Configuration Manual
JSN Air Configuration ManualJoomlaShine
 
Joomla 3.0 Leicht Gemacht | Kostenlos Buch
Joomla 3.0 Leicht Gemacht | Kostenlos BuchJoomla 3.0 Leicht Gemacht | Kostenlos Buch
Joomla 3.0 Leicht Gemacht | Kostenlos BuchJoomlaShine
 
Joomla 3.0 Made Easy | Free E-book
Joomla 3.0 Made Easy | Free E-book Joomla 3.0 Made Easy | Free E-book
Joomla 3.0 Made Easy | Free E-book JoomlaShine
 
JSN Boot Configuration Manual
JSN Boot Configuration Manual JSN Boot Configuration Manual
JSN Boot Configuration Manual JoomlaShine
 
JSN Neon Customization Manual
JSN Neon Customization ManualJSN Neon Customization Manual
JSN Neon Customization ManualJoomlaShine
 
JSN UniForm Configuration Manual
JSN UniForm Configuration ManualJSN UniForm Configuration Manual
JSN UniForm Configuration ManualJoomlaShine
 
JSN Kido Configuration Manual
JSN Kido Configuration ManualJSN Kido Configuration Manual
JSN Kido Configuration ManualJoomlaShine
 
JSN Vintage Configuration Manual
JSN Vintage Configuration ManualJSN Vintage Configuration Manual
JSN Vintage Configuration ManualJoomlaShine
 
JSN Vintage Customization Manual
JSN Vintage Customization ManualJSN Vintage Customization Manual
JSN Vintage Customization ManualJoomlaShine
 
JSN Decor Customization Manual
JSN Decor Customization ManualJSN Decor Customization Manual
JSN Decor Customization ManualJoomlaShine
 
JSN Decor Configuration Manual
JSN Decor Configuration ManualJSN Decor Configuration Manual
JSN Decor Configuration ManualJoomlaShine
 

Mehr von JoomlaShine (20)

Joomla 3.6 - The revolution in Joomla User Experience
Joomla 3.6 - The revolution in Joomla User ExperienceJoomla 3.6 - The revolution in Joomla User Experience
Joomla 3.6 - The revolution in Joomla User Experience
 
HAPPY JOOMLA 10TH BIRTHDAY INFOGRAPHIC
HAPPY JOOMLA 10TH BIRTHDAY INFOGRAPHIC HAPPY JOOMLA 10TH BIRTHDAY INFOGRAPHIC
HAPPY JOOMLA 10TH BIRTHDAY INFOGRAPHIC
 
Joomla 3.4 Made Easy
Joomla 3.4 Made EasyJoomla 3.4 Made Easy
Joomla 3.4 Made Easy
 
Build a Joomla website by Drag n Drop with JSN PageBuilder and JSN PowerAdmin
Build a Joomla website by Drag n Drop with JSN PageBuilder and JSN PowerAdmin Build a Joomla website by Drag n Drop with JSN PageBuilder and JSN PowerAdmin
Build a Joomla website by Drag n Drop with JSN PageBuilder and JSN PowerAdmin
 
Infographic 6 steps to build a Joomla website
Infographic 6 steps to build a Joomla websiteInfographic 6 steps to build a Joomla website
Infographic 6 steps to build a Joomla website
 
JSN Mobilize Webinar
JSN Mobilize WebinarJSN Mobilize Webinar
JSN Mobilize Webinar
 
JSN Escape Configuration Manual
JSN Escape Configuration ManualJSN Escape Configuration Manual
JSN Escape Configuration Manual
 
JSN Mico Customization Manual
JSN Mico Customization ManualJSN Mico Customization Manual
JSN Mico Customization Manual
 
JSN Mico Configuration Manual
JSN Mico Configuration ManualJSN Mico Configuration Manual
JSN Mico Configuration Manual
 
JSN Air Configuration Manual
JSN Air Configuration ManualJSN Air Configuration Manual
JSN Air Configuration Manual
 
Joomla 3.0 Leicht Gemacht | Kostenlos Buch
Joomla 3.0 Leicht Gemacht | Kostenlos BuchJoomla 3.0 Leicht Gemacht | Kostenlos Buch
Joomla 3.0 Leicht Gemacht | Kostenlos Buch
 
Joomla 3.0 Made Easy | Free E-book
Joomla 3.0 Made Easy | Free E-book Joomla 3.0 Made Easy | Free E-book
Joomla 3.0 Made Easy | Free E-book
 
JSN Boot Configuration Manual
JSN Boot Configuration Manual JSN Boot Configuration Manual
JSN Boot Configuration Manual
 
JSN Neon Customization Manual
JSN Neon Customization ManualJSN Neon Customization Manual
JSN Neon Customization Manual
 
JSN UniForm Configuration Manual
JSN UniForm Configuration ManualJSN UniForm Configuration Manual
JSN UniForm Configuration Manual
 
JSN Kido Configuration Manual
JSN Kido Configuration ManualJSN Kido Configuration Manual
JSN Kido Configuration Manual
 
JSN Vintage Configuration Manual
JSN Vintage Configuration ManualJSN Vintage Configuration Manual
JSN Vintage Configuration Manual
 
JSN Vintage Customization Manual
JSN Vintage Customization ManualJSN Vintage Customization Manual
JSN Vintage Customization Manual
 
JSN Decor Customization Manual
JSN Decor Customization ManualJSN Decor Customization Manual
JSN Decor Customization Manual
 
JSN Decor Configuration Manual
JSN Decor Configuration ManualJSN Decor Configuration Manual
JSN Decor Configuration Manual
 

JSN Dome Anpassungshandbuch

  • 1. Joomla! Template JSN Dome Anpassungshandbuch (für JSN Dome 2.x) Dieses Werk bzw. Inhalt steht unter einer Creative Commons Namensnennung-Nicht-kommerziell-Weitergabe unter 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
  • 2. Joomla! template JSN Dome Anpassungshandbuch © Folgen Sie uns auf Twitter http://www.twitter.com/joomlashine Folgen Sie uns auf Facebook http://www.facebook.com/joomlashine Inhaltsverzeichnis Joomla! Template JSN Dome 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...............................................................................................................................................................................17 Menü ......................................................................................................................................................................................19 Promo-Bereich ....................................................................................................................................................................23 Module...................................................................................................................................................................................24 Inhaltsbereich......................................................................................................................................................................27 Sekundäre Promotion .......................................................................................................................................................29 Fußzeile.................................................................................................................................................................................30 Was kommt als Nächstes? ..............................................................................................................................................31 2
  • 3. Joomla! template JSN Dome Anpassungshandbuch © Folgen Sie uns auf Twitter http://www.twitter.com/joomlashine Folgen Sie uns auf Facebook http://www.facebook.com/joomlashine Einführung Vielen Dank für Ihr Interesse am JSN Dome 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 Dome Schnellstart Video – ein kurzes Video-Tutorial, welches Ihnen auf dem schnellsten Wege einen wichtigen Überblick über das JSN Dome Template verschafft. Klicken Sie hier, um zum Video- Tutorial zu gelangen. 2. JSN Dome Konfigurationshandbuch – Hier erfahren Sie ausführliche Informationen über alle Templates und wie Sie diese in Ihre eigene Webseite einbauen können. 3. JSN Dome 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
  • 4. Joomla! template JSN Dome Anpassungshandbuch © Folgen Sie uns auf Twitter http://www.twitter.com/joomlashine Folgen Sie uns auf Facebook http://www.facebook.com/joomlashine 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. 4
  • 5. Joomla! template JSN Dome Anpassungshandbuch © Folgen Sie uns auf Twitter http://www.twitter.com/joomlashine Folgen Sie uns auf Facebook http://www.facebook.com/joomlashine 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 Ja eingestellt ist.  print.css – enthält spezifische Ausführungen für die Druckleistung. 5
  • 6. Joomla! template JSN Dome Anpassungshandbuch © Folgen Sie uns auf Twitter http://www.twitter.com/joomlashine Folgen Sie uns auf Facebook http://www.facebook.com/joomlashine “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 General Styles, Text Styles, Heading Styles, Link Styles, List Styles, Images Styles.  LAYOUT o General Layout, Overall Page, Header Area, Menu Area, Content top Area, Content Area, Content Bottom area, Footer Area.  TYPOGRAPHY o General Typography, Content Columns, Text Styles, Link Styles, Table Styles, List Styles, Images Styles.  MENU o Main Menu, Tree Menu, Div Menu, Side Menu, Top Menu.  MOBILE TOOLS  SITE TOOLS o General Presentation, Text Sizer, Width Selector, Color Selector.  FONT STYLES o Special Font Adjustments, CSS3 Drop Shadow Effect.  MODULE STYLES o Module Boxes, Module 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 General icon assignment. 6
  • 7. Joomla! template JSN Dome Anpassungshandbuch © Folgen Sie uns auf Twitter http://www.twitter.com/joomlashine Folgen Sie uns auf Facebook http://www.facebook.com/joomlashine 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. 7
  • 8. Joomla! template JSN Dome Anpassungshandbuch © Folgen Sie uns auf Twitter http://www.twitter.com/joomlashine Folgen Sie uns auf Facebook http://www.facebook.com/joomlashine Schriftt 2: Elementuntersuchung 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. 8
  • 9. Joomla! template JSN Dome Anpassungshandbuch © Folgen Sie uns auf Twitter http://www.twitter.com/joomlashine Folgen Sie uns auf Facebook http://www.facebook.com/joomlashine 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. 9
  • 10. Joomla! template JSN Dome Anpassungshandbuch © Folgen Sie uns auf Twitter http://www.twitter.com/joomlashine Folgen Sie uns auf Facebook http://www.facebook.com/joomlashine Konfiguration der Webseitenüberschrift Um die Webseitenüberschrift umzuändern, befolgen Sie folgende Schritte: 1. Gehen Sie in den Joomla!-Administrationsbereich zu Menüs -> Main Menu 2. Wählen Sie den Menüeintrag Home aus und drücken Sie auf Bearbeiten. 3. Ändern Sie bei den Seitenanzeigenoptionen den Browser Seitentitel. 10
  • 11. Joomla! template JSN Dome Anpassungshandbuch © Folgen Sie uns auf Twitter http://www.twitter.com/joomlashine Folgen Sie uns auf Facebook http://www.facebook.com/joomlashine 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. Was Sie tun müssen: 1. Erstellen Sie eine Kopie der aktuellen englischen Sprachdatei file en-GB.tpl_jsn_dome_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_dome_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
  • 12. Joomla! template JSN Dome Anpassungshandbuch © Folgen Sie uns auf Twitter http://www.twitter.com/joomlashine Folgen Sie uns auf Facebook http://www.facebook.com/joomlashine UniIcons Standardmäßig ist JSN Dome 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: 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 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: 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
  • 13. Joomla! template JSN Dome Anpassungshandbuch © Folgen Sie uns auf Twitter http://www.twitter.com/joomlashine Folgen Sie uns auf Facebook http://www.facebook.com/joomlashine Stage 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 -1880px; } 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. 13
  • 14. Joomla! template JSN Dome Anpassungshandbuch © Folgen Sie uns auf Twitter http://www.twitter.com/joomlashine Folgen Sie uns auf Facebook http://www.facebook.com/joomlashine Generelles Layout Haupthintergrund-Anpassung JSN Dome ist mit 6 Farbmöglichkeiten für den Seitenhintergrund ausgestattet, doch wenn Sie eine andere spezifische Farbe implementieren möchten, dann müssen Sie folgende Anweisungen berücksichtigen: 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. 1. Öffnen Sie die Datei master-bg.png im Grafikquellen-Paket. 2. Bereits geöffnet, können Sie unten die Hintergrundbildebene und oben die 6 voreingestellten Farbebenen erkennen. Modifizieren Sie eine der Farbebenen, wenn Sie nur die Farbe ändern möchten. Für die komplette Änderung des Hintergrundbildes müssen Sie auch die Hintergrundbildebene modifizieren. Haben Sie die oben genannten Schritte erledigt, dann können Sie nun das von uns bereits vorbereitende Teilstück master-bg exportieren. 14
  • 15. Joomla! template JSN Dome Anpassungshandbuch © Folgen Sie uns auf Twitter http://www.twitter.com/joomlashine Folgen Sie uns auf Facebook http://www.facebook.com/joomlashine 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_dome_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 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. 3. In der CSS-Auswahl #jsn-master ändern Sie background-color entsprechend des Farb-Codes des untersten Pixels vom neuen Hintergrundbild. 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. Gesamte Seite linksbündig ausrichten Standardmäßig ist JSN Epic 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. 15
  • 16. Joomla! template JSN Dome Anpassungshandbuch © Folgen Sie uns auf Twitter http://www.twitter.com/joomlashine Folgen Sie uns auf Facebook http://www.facebook.com/joomlashine Typografie-Anpassung Standardmäßig verfügt JSN Dome ü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 definiert die 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
  • 17. Joomla! template JSN Dome Anpassungshandbuch © Folgen Sie uns auf Twitter http://www.twitter.com/joomlashine Folgen Sie uns auf Facebook http://www.facebook.com/joomlashine Kopfzeile Kopfzeilenhintergrund-Anpassung Standardmäßig besitzt der Kopfzeilenbereich 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-header das Attribut background-color: #XXXXXX hinzu, 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. 17
  • 18. Joomla! template JSN Dome Anpassungshandbuch © Folgen Sie uns auf Twitter http://www.twitter.com/joomlashine Folgen Sie uns auf Facebook http://www.facebook.com/joomlashine Flash-Logo-Implementation Standardmäßig erlaubt Ihnen JSN Epic 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  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. Bemerkung: Die Anwendung von Flash-Logos hat keinen Einfluss auf Parameter für Logo-Anpassungen. 18
  • 19. Joomla! template JSN Dome Anpassungshandbuch © Folgen Sie uns auf Twitter http://www.twitter.com/joomlashine Folgen Sie uns auf Facebook http://www.facebook.com/joomlashine 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. 19
  • 20. Joomla! template JSN Dome Anpassungshandbuch © Folgen Sie uns auf Twitter http://www.twitter.com/joomlashine Folgen Sie uns auf Facebook http://www.facebook.com/joomlashine 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 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. Find CSS group of selectors begin with div.jsn-modulecontainer ul.menu-mainmenu ul li:hover > a and set attribute background to change both background color and background image or replace it by attribute background-color to change background color only. This is styling for the submenu in the mouse over state. 5. Speichern Sie die CSS-Datei und laden Sie die neue Datei auf den Server hoch, um die alte Datei zu überschreiben. 20
  • 21. Joomla! template JSN Dome Anpassungshandbuch © Folgen Sie uns auf Twitter http://www.twitter.com/joomlashine Folgen Sie uns auf Facebook http://www.facebook.com/joomlashine 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: 21
  • 22. Joomla! template JSN Dome Anpassungshandbuch © Folgen Sie uns auf Twitter http://www.twitter.com/joomlashine Folgen Sie uns auf Facebook http://www.facebook.com/joomlashine 4. Speichern Sie die index.php-Datei und laden Sie diese auf den Server hoch, um die alte Datei zu überschreiben. 22
  • 23. Joomla! template JSN Dome Anpassungshandbuch © Folgen Sie uns auf Twitter http://www.twitter.com/joomlashine Folgen Sie uns auf Facebook http://www.facebook.com/joomlashine 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. 4. Speichern Sie die CSS-Datei und laden Sie die neue Datei auf den Server hoch, um die alte Datei zu überschreiben. 23
  • 24. Joomla! template JSN Dome Anpassungshandbuch © Folgen Sie uns auf Twitter http://www.twitter.com/joomlashine Folgen Sie uns auf Facebook http://www.facebook.com/joomlashine Module Boxmodule Standardmäßig bieten Ihnen JSN Dome 8 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 module-box-bg.png im Grafikquellen-Paket. 2. Bereits geöffnet, können Sie unten mehrere Hintergrundbildebenen und eine oben eine Farbebene erkennen. Once opened, you can see several background image layers at the bottom and a color layer on top. Modifizieren Sie die Farbebene, wenn Sie nur die Farbe ändern möchten. Für die komplette Anpassung des Hintergrundbildes müssen Sie auch die Hintergrundbildebene modifizieren. 3. Nachdem Sie die oben genannten Schritte erledigt haben, speichern Sie Ihr Hintergrundbild unter einem entsprechenden Namen, z.B. richbox-4.png. 24
  • 25. Joomla! template JSN Dome Anpassungshandbuch © Folgen Sie uns auf Twitter http://www.twitter.com/joomlashine Folgen Sie uns auf Facebook http://www.facebook.com/joomlashine 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 nach einem entsprechenden Unterordner des Template-Ordners. Der Dateipfad müsste wie folgt aussehen: joomla_root_folder/templates/jsn_dome_XXX/imagescolors/YYY, wobei XXX für die jeweilige Template-Edition steht. 2. Öffnen Sie die Datei template_red.css und suchen Sie in der CSS-Auswahl div.richbox-1 div.jsn- modulecontainer_inner nach RICH BOX 1. 3. Kopieren Sie die folgende CSS-Auswahl: div.richbox-1 div.jsn-modulecontainer_inner > div { background: #D24A17 url(../images/colors/red/bg-module-richbox-1.png) left bottom repeat-x; } Und modifizieren diese wie folgt: div.richbox-4 div.jsn-modulecontainer_inner > div { background: #XXXXXX url(../images/colors/red/bg-module-richbox-4.png) left bottom repeat-x; } 4. 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-4 setzen. 25
  • 26. Joomla! template JSN Dome Anpassungshandbuch © Folgen Sie uns auf Twitter http://www.twitter.com/joomlashine Folgen Sie uns auf Facebook http://www.facebook.com/joomlashine Icon-Modul-Kopfzeile Standardmäßig ist JSN Dome 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 26
  • 27. Joomla! template JSN Dome Anpassungshandbuch © Folgen Sie uns auf Twitter http://www.twitter.com/joomlashine Folgen Sie uns auf Facebook http://www.facebook.com/joomlashine Inhaltsbereich Icon-Link-Anpassung Standardmäßig verfügt JSN Dome 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. 27
  • 28. Joomla! template JSN Dome Anpassungshandbuch © Folgen Sie uns auf Twitter http://www.twitter.com/joomlashine Folgen Sie uns auf Facebook http://www.facebook.com/joomlashine 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> 28
  • 29. Joomla! template JSN Dome Anpassungshandbuch © Folgen Sie uns auf Twitter http://www.twitter.com/joomlashine Folgen Sie uns auf Facebook http://www.facebook.com/joomlashine 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. 3. Speichern Sie die CSS-Datei und laden Sie die neue Datei auf den Server hoch, um die alte Datei zu überschreiben. 29
  • 30. Joomla! template JSN Dome Anpassungshandbuch © Folgen Sie uns auf Twitter http://www.twitter.com/joomlashine Folgen Sie uns auf Facebook http://www.facebook.com/joomlashine 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. 30
  • 31. Joomla! template JSN Dome Anpassungshandbuch © Folgen Sie uns auf Twitter http://www.twitter.com/joomlashine Folgen Sie uns auf Facebook http://www.facebook.com/joomlashine 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 Folgen Sie uns auf Facebook: http://www.facebook.com/joomlashine 31