Layout Metro Responsive Menu

    Hallo,

    ich würde gerne die Menu Icons beim Layout Metro Responsive ändern. Das sollte ja grundsätzlich kein problem sein nehme ich an. Dafür muss ich ja in der CSS datei einfach den Pfad der Icons ändern oder?
    Wo finde ich die CSS Datei genau, damit ich diese anpassen kann?

    Grüsse

    Hallo,

    danke für die Info. Ich habe die Anleitung befolgt, doch finde ich nicht die CSS Datei, welche die Hauptmenügrafik (also der Kreis, der den Pfeil beim Metro Responsive) enthält. Weiss jemand wo sich diese Datei befindet, die das Icon steuert?

    Ah doch es scheint als hätte ich es gefunden:

    Code
    <li>
<a class="plus selected" href="#"></a>
<ul class="submenu" style="display: block; height: 350px;">
<li class="first">
<a href="company.html"></a>
</li>

    Wie kann ich nun im CSS das href="#" bearbeiten damit das Icon erscheint, das ich gerne hätte? Laut anleitung müsste ja.button oder ähnliches sein aber hier ist es normales html kein css soviel ich weiss?

    Ich habe es probiert zu ersetzten mit einem Icon meiner wahl und habe es im CSS eingegeben - leider ohne Erfolg. Hat jemand einen Rat?

    Hallo,

    Sie können hier folgendermaßen vorgehen:

    • Ihr Icon importieren Sie über "Website | Erweitert | Bilder" in Zeta Producer.
    • In der Bilderverwaltung "Website | Erweitert | Bilder" markieren Sie Ihr Icon und klicken im Menü "Werkzeuge" auf "Objekt-ID kopieren"
    • In den Einstellungen "Website | Einstellungen" unter CSS fügen Sie dann folgendes ein

      CSS
      <style>
#navigation ul li a {
	background-image: url(oid://image/icon) !important;
	background-position: left !important;
}
</style>
    • In der Zeile "background-image" muss in der Klammer die unter Punkt 2 kopierete Objekt-ID eingesetzt werden.
      Also "oid://image/icon" durch Ihre Objekt-ID ersetzen.
    • Website neu erstellen

    Ihr Icon sollte nun erscheinen.

    Freundliche Grüße
    Steffen T. (Zeta Producer-Support)

    Super danke werde ich sofort ausprobieren!

    Nur noch eine kleine Frage: das layout modern responsive hat im mnenü noch ein zweites icon mit einem kreis und einem plus für die untermenü übersicht. Wie kann ich dies ändern? Funktioniert dies genau gleich, wie oben beschriebn?

    Ich habe gesehen, dass es insgesamt 3 verschiedene Icons hat. Eines mit einem kreis und einem plus, mit einem minus und mit einem pfeil

    Ja, da müssen Sie halt die dazugehörige CSS-Klasse mit den Browser-Developer-Tools herausfinden. So wie auf folgender Seite im Beispiel beschrieben: http://docs.zeta-producer.com/eigenes-css-einfuegen.html

    Im Layout ist das die Klasse "plus"

    CSS
    <style>
#navigation ul li a {
	background-image: url(oid://image/icon) !important;
	background-position: left !important;
}
#navigation ul li a.plus {
	background-image: url(oid://image/plus-icon) !important;
	background-position: left !important;
}
</style>

    Freundliche Grüße
    Steffen T. (Zeta Producer-Support)

    Hat geklappt danke.

    Ich habe dieses developer tool benutzt, da ich gerne diesen hover effekt wie bei dem standart metro responsive design verwenden würde, dass das icon weiss wird, wenn man drüber fährt. Leider habe ich diesbezüglich nichts gefunden, also gehe ich davon aus, dass dies nicht möglich ist.

    Ist meine Annahme richtig oder gibt es da ein Trick?


    Edit: ich habe über CSS Befehle (margin und padding) probiert die icons näher an die schrift zu machen da es einen grossen abstand zwischen schrift und icon hat - leider scheint dies aber nicht zu funktionieren. Habt ihr hier ebenfalls einen trick?

    Einmal editiert, zuletzt von ladaerw (10. April 2015 um 19:38)

    Hallo,

    wir vom offiziellen Support können nur begrenzt generellen HTML-/CSS-Support geben, da dies schnell den Rahmen sprengt. Da sind Sie also leider auch auf die Mithilfe anderer Nutzer angewiesen.

    Freundliche Grüße
    Stefan S. (Zeta Producer-Support)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden