Ankündigung

Einklappen
Keine Ankündigung bisher.

1 Themesetting: Top: Meta-Navi mit Seitenicons

Einklappen
Dieses Thema ist geschlossen.
X
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • 1 Themesetting: Top: Meta-Navi mit Seitenicons

    Hallo an alle,
    es gibt auf meiner neuen Webseite einige Seiten, die Icons mit an Bord haben (www.kisum-kreativhaus.de). Diese werden in der Navigation, im Footer und in der Sitemap auch mit abgebildet.
    Mit dem Modul "1 Themesetting: Top: Meta-Navi" ist das aber nicht der Fall, dort werden nur die Seitentitel dargestellt. Ich habe versucht, mit zusätzlichen CSS-Klassen die Icons zu entlocken, aber dann werden kurioserweise sogar zwei Kästchen dargestellt, jedoch ohne definierte Icons (nur diese Quadrate mit Unicode).
    Wie und wo in den Templates oder Modulen der Top Meta-Navi kann ich die gesetzten Icons links ebenfalls daneben darstellen lassen?

  • #2
    Moin,

    Du könntest zum Beispiel dem Link die gewünschte ti Klasse geben (ti ti-email) und im CSS folgendes eingeben.
    Code:
    #top .top_metanavi a::before{
    padding-right: 5px;
    }
    Damit hättest Du das E-Mail Icon.
    Klicke auf die Grafik für eine vergrößerte Ansicht  Name: icon.jpg Ansichten: 0 Größe: 63,4 KB ID: 28056

    Du kannst Dir ja dann das gewünschte Icon raussuchen; etwas die Schrift noch formatieren und es sollte passen.
    Ist aber wahrscheinlich nicht die schönste Lösung.

    Grüße
    Zuletzt geändert von tschero; 07.10.2023, 19:48.
    https://www.webdesign24.biz

    Kommentar


    • #3
      Hallo tschero,

      das funktioniert ja nicht so wie gewollt. Also: die eigentliche "Basisseite", die hier im Top-Navi dargestellt wird, ist Anmeldung. Sie bekommt ein Font-Icon (fa-sign-in fa), und damit wird sie in der normalen Navigation oder im Footer auch dargestellt. Das Top-Navi bedient sich daraus nicht. Wenn man jetzt allerdings die Weiterleitungsseiten, die für den Zusammenbau des Top-Navi herhalten mit der gleichnamigen CSS-Klasse versieht, passiert es, dass auf einmal zwei der Icons wie gewünscht links daneben dargestellt werden. Nimmt man also entweder aus der regulären Seite oder aus der Weiterleitungsseite die CSS-Klasse wieder raus, passiert bei beiden Versuchen im Top-Navi gar nichts.
      Es bliebe also zu überlegen, warum das Modul "1 Themesetting: Top: Meta-Navi" sich nicht die gesetzten Font-Icons zieht wie sonst auch in der normalen Navigation. Es scheint mir, als müsste man dem Template mod_navigation_top.html5 noch die Font-Icon-Auslesung mit auf dem Weg geben. Syntax: Wenn die Ursprungsseite ein Font-Icon hat, dann stelle es doch im Top-Navi mit dar. So liest sich das originale Template aber noch recht leer:
      Code:
      <!-- indexer::stop -->
      <div class="<?= $this->class ?> top_metanavi block"<?= $this->cssID ?><?php if ($this->style): ?> style="<?= $this->style ?>"<?php endif; ?> itemscope itemtype="http://schema.org/SiteNavigationElement">
      
      <?php if ($this->headline): ?>
      <<?= $this->hl ?>><?= $this->headline ?></<?= $this->hl ?>>
      <?php endif; ?>
      
      <?= $this->items ?>
      
      </div>
      <!-- indexer::continue -->
      Zuletzt geändert von Jens Pielawa; 07.10.2023, 20:44.

      Kommentar


      • #4
        Hi,
        das Modul-Template "mod_" in Navigations-Modulen arbeitet nicht die Elemente ab, sondern gibt diese aufbereitet aus. $this->items.
        Die Ausgabe erfolgt über das nav_ Template! (Werksstandard keine Auswahl, daher nav_default vom Theme -> Icons werden abgearbeite (siehe Quelltext))

        In der Meta-Navi sind die Icons von Haus aus via CSS ausgeblendet. Die Browser-Console gibt Auskunft.

        Code:
        #top .top_metanavi li:hover ul {white-space: nowrap}
        #top .top_metanavi li i {display: inline-block; margin-right: 10px;}
        Aus auch immer und überall geht ist ein Icon direkt zu platzieren via {{icon::...}} Insertag. So kann das Icon z.B. direkt im Titel ausgegeben werden.
        http://www.premium-contao-themes.com

        Kommentar


        • #5
          Zitat von Tim Beitrag anzeigen
          In der Meta-Navi sind die Icons von Haus aus via CSS ausgeblendet. Die Browser-Console gibt Auskunft.
          Entschuldige Tim, aber ich sehe im CSS mit der Browser-Console offenbar diese Stelle nicht, inwiefern Seiten-Icons ausgeblendet werden. Betrifft das nun den <a> oder die <li>?
          Ich habe Deine beiden Zeilen in die customize.css gepackt und ich sehe noch immer keine Seiten-Icons.
          Vorschlag: Via Theme-Designer kann man ja ohnehin viele Sachen ein- oder ausblenden. Vielleicht spendiert Ihr dem Top-Navi eine ähnliche Funktion, á la "Seiten-Icons mit anzeigen lassen" zum An- oder Ausschalten. Wenn ein Icon beim Phone und bei der E-Mail im Top OK ist, so sollten doch Icons der Seiten im Top-Navi nicht unterdrückt werden.

          Kommentar


          • #6
            Das Hinzufügen eines Icons erfolgt über die Einstellungen den Seite > Font-Icon einfügen

            (Falls Änderungen an den Navigations-Modul Einstellungen getroffen wurden, bitte prüfen das weiterhin die richtigen Templates ausgewählt sind. Es sollte hier das nav_default Templates des Themes gewählt sein bzw. keine Auswahl.)

            Nach Anpassung des CSS sind die Icons sichtbar geschaltet.
            (wir übernehmen das CSS von oben in den Werkszustand)

            Klicke auf die Grafik für eine vergrößerte Ansicht

Name: screenshot_1256.jpg
Ansichten: 84
Größe: 2,8 KB
ID: 28097
            Zuletzt geändert von Tim; 11.10.2023, 08:19.
            http://www.premium-contao-themes.com

            Kommentar


            • #7
              Dann gehen wir das doch mal Schritt für Schritt durch:
              Zitat von Tim Beitrag anzeigen
              Das Hinzufügen eines Icons erfolgt über die Einstellungen den Seite > Font-Icon einfügen
              Das ist mir bekannt, beide darzustellenden originalen Seiten haben ein Icon, "fa-sign-in fa" und "fa-lock fa".
              Herausgestellt sei, dass die Icons im Top-Navi NICHT angezeigt werden, wenn NUR die originalen Seiten ein Font-Icon haben. Die Weiterleitungsseiten, die mittels "Meta-Navi-Header" in der Seitenstruktur zur Schaffung des Top-Navi herangezogen werden, hatten es zunächst NICHT.
              Erst wenn ich diesen Weiterleitungen das gleichlautende Font-Icon MIT einstelle (was ja doppelt gemoppelt ist), wird ein Icon im Top-Navi dargestellt.
              Es stellt sich also heraus, dass man der Weiterleitungsseite ein entsprechendes Font-Icon einstellen muss. Kurioserweise kann das auch ein ganz andere sein als auf der originalen Seite, denn nur das wird für die Top-Navi genommen.
              Zuletzt geändert von Jens Pielawa; 11.10.2023, 13:15.

              Kommentar


              • #8
                Ich weiss grad nicht genau wann die "header meta navi" zum Einsatz kommt (muss ich mal Thomas fragen) aber hier wären die gleichen CSS Ergänzungen zu machen:

                Code:
                .header .header_metanavi li:hover ul {white-space: nowrap;}
                .header .header_metanavi li i {display: inline-block; margin-right: 10px;}
                Ich denke damit sind alle Mysterien geklärt.
                http://www.premium-contao-themes.com

                Kommentar

                Lädt...
                X