XF1.x Wie man Bilder zur Navigation hinzufügt

[Alluidh]

Autor: Brogan
Link zum Original: How to add images to the navigation bar
Übersetzte Version: 1.0.0
Übersetzte Version vom: 01.12.2010
Übersetzer: Alluidh
Zuletzt aktualisiert: 20.12.2010

Der Support erfolgt ausschließlich im Thema des Originalautors. Solltet ihr Probleme mit der Formulierung von Fehlermeldungen oder Fragen haben, dann versuchen wir euch gerne dabei zu unterstützen oder übersetzte Fehlermeldungen, Fragen oder ähnliche Dinge an den Autor weiterzugeben.

Eine Erlaubnis zur Veröffentlichung der lokalisierten Fassung auf dieser Seite liegt dem Team von xenDach vor. Das Recht an dieser Erweiterung verbleibt im vollen Umfang bei dem Autor.

Viel Spaß mit der Erweiterung

Beschreibung:
Diese kleine Anleitung erklärt, wie man bis zu 3 Bilder an verschiedenen Positionen in die Leiste der Navigation hinzufügt. Hierzu werden einzig Einträge in die extra.css eingefügt und die passenden Bilder auf euren Webspace übertragen.

Um die Bilder auch in das richtige Verzeichnis zu legen, überprüfen wir den Pfad zu den Bildern. Dieser ist zu finden unter Administrator Kontrollzentrum-> Erscheinungsbild-> Styles-> Default Style-> Style-Eigenschaftsgruppen-> Style-Eigenschaften: Allgemein-> Einstellungen: Pfad zu den Bildern



Achtet bitte darauf, dass die Bilder die Navigationsleiste überdecken. Wenn eure gewählten Bilder zu groß sind, dann können sie die Funktion der Navigation beeinflussen. Empfohlen werden Bilder bis zu einer maximalen Größe von 30% der Navigationsleiste.

Die angehängten Grafiken wurden von Shelley zur Verfügung gestellt und sie gestattet die Nutzung dieser Grafiken auf anderen Seiten.

Um ein Bild an der linken Seite der Navigation einzufügen, erweitere die extra.css um folgende Zeilen:

#navigation .helper {
background: transparent url('@imagePath/shelley_snow_l.png') no-repeat;
display: block;
height: 25px;
left: -5px;
position: absolute;
top: -16px;
width: 250px;
}

Das Ergebnis:

Um ein Bild an der linken und der rechten Seite der Navigation einzufügen, erweitere die extra.css um folgende Zeilen:

#navigation .helper {
display: block;
height: 25px;
left: -5px;
padding: 0px 5px;
position: absolute;
top: -16px;
width: 100%;
}

/* IE8 */
background: url('@imagePath/shelley_snow_l.png') no-repeat;

/* Chrome & FF */
background: url('@imagePath/shelley_snow_l.png') no-repeat 0% 0%, url('@imagePath/shelley_snow_r.png') no-repeat 100% 0%;

/* IE6, IE7 */
_background: url('@imagePath/shelley_snow_l.png') no-repeat;
}

Das Ergebnis:

Um ein Bild an der linken und der rechten Seite sowie in der Mitte der Navigation einzufügen, erweitere die extra.css um folgende Zeilen:

#navigation .helper {
display: block;
height: 25px;
left: -5px;
padding: 0px 5px;
position: absolute;
top: -16px;
width: 100%;

/* IE8 */
background: url('@imagePath/shelley_snow_l.png') no-repeat;

/* Chrome & FF */
background: url('@imagePath/shelley_snow_l.png') no-repeat 0% 0%, url('@imagePath/shelley_snow_c.png') no-repeat 50% 0%, url('@imagePath/shelley_snow_c.png') no-repeat 100% 0%;

/* IE6, IE7 */
_background: url('@imagePath/shelley_snow_l.png') no-repeat;
}

Das Ergebnis:
Anmerkung:
Die Klasse "helper" ist seit der Version Beta 4 ein fester Bestandteil des "navigation"-Template. Bei allen Versionen vor Beta 4 muss die folgende Änderung am Template vorgenommen werden:

Template navigation
Suche (am Ende des Templates)

</div>
        </nav>
    </div>
</div>

und ersetze es mit

</div>
<span class="helper"></span>
        </nav>
    </div>
</div>

An dieser Stelle möchte ich noch erwähnen, dass ich schon keine Lust mehr auf (realen) Schnee habe