Ankündigung

Einklappen
Keine Ankündigung bisher.

Navbar-Icons - Icons in der Haupt-Navigation

Einklappen
X
Einklappen
Momentan aktive Benutzer in diesem Thema: 1 (0 Benutzer und 1 Gäste)
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

    Navbar-Icons - Icons in der Haupt-Navigation

    Um Icons in der Navigation einzufügen benutze ich jQuery und Icons von Font Awesome.
    Der Vorteil dieser Variante ist, dass das Speichern der Navigation im Sitebuilder funktioniert und nicht durch veränderte Phrasen zu Fehlern führt.
    Die Icons werden ganz einfach über einen code vor das Navigations-Element gesetzt.

    Navbar-Icons

    Im folgenden eine Erläuterung, wie Ihr in eurem Forum auch Icons in der Menüleiste einbinden könnt:

    Schritt 1:
    Ihr sucht euch für jedes Navigations-Element ein passendes Icon aus der Liste bei Font Awesome.

    Schritt 2:
    Findet heraus welche Klasse der Link der Navigation hat.
    Beispiel Link "Foren":

    HTML-Code:
    <li class="current section-item">
    <a href="https://vbulletin-forum.de/" class="h-left navbar_home">Foren</a>
    HTML-Code:
    class="h-left navbar_home"
    Hier im vBulletin-Forum ist das für das obige Beispiel dann:
    navbar_home
    Schritt 3:
    Ein Template erstellen in dem das jQuery eingefügt und das durch einen hook in den Footer eingebunden werden kann.

    www.Beispiel.url/admincp/template.php?do=modify&
    Rechts in der für das gewünschte Style unter "Aktion auswählen..." -> "Neues Template erstellen"
    Inhalt:
    HTML-Code:
    <script>
    $( '.navbar_home' ).prepend( '<i class="fa fa-home" aria-hidden="true"></i>&nbsp;' );
    </script>
    Schritt 4:
    Das Template dem Hook footer_before_body_end zuweisen.

    Für jedes Icon muss diese Zeile einfach kopiert, die Klasse geändert und das passende Icon hinzugefügt.

    HTML-Code:
    <script>
    $( '.navbar_home' ).prepend( '<i class="fa fa-home" aria-hidden="true"></i>&nbsp;' );
    $( '.navbar_blogs' ).prepend( '<i class="fa fa-book" aria-hidden="true"></i>&nbsp;' );
    </script>
    Wenn alles richtig angelegt wurde, sieht der Link später wie folgt aus:
    HTML-Code:
    <li class="current section-item">
                                <a href="https://vbulletin-forum.de/" class="h-left navbar_home"><i class="fa fa-home" aria-hidden="true"></i>&nbsp;Foren</a>
    Wobei dieser Teil eingefügt wurde:
    HTML-Code:
    <i class="fa fa-home" aria-hidden="true"></i>&nbsp;
    It`s nice to be important but it`s more important to be nice!

    #2

    Kann dieses Handbuch auf Englisch erstellt werden?

    Kommentar


      Themenstarter
      #3
      Mir fehlt leider die Zeit alle Beiträge ins englisch zu Übersetzen.
      Du kannst aber die gesamte Webseite mit google Chrome übersetzen.

      Einfach die Webseite in Chrome öffnen, rechte Maustaste drücken und "in **** übersetzten" klicken.
      Dann kannst Du eine Sprache auswählen. Falls Du Fragen hast, kannst Du diese natürlich auch gerne stellen. In Englisch am besten hier English-Area

      Unfortunately, I'm missing the time to translate all posts into English.
      But you can translate the entire website using google chrome.

      Simply open the website in Chrome, press the right mouse button and click "Translate to ****".
      Then you can choose a language. If you have any questions, you can also ask them.
      Klicke auf die Grafik für eine vergrößerte Ansicht

Name: google_chome_translate.jpg
Ansichten: 1
Größe: 134,5 KB
ID: 922
      It`s nice to be important but it`s more important to be nice!

      Kommentar


        #4

        Verta es kann dich nicht filmen lassen

        Kommentar


        • delicjous
          delicjous kommentierte
          Kommentar bearbeiten
          Because I don't get it (german words but not german language :-)) I (get it) translated it in a new channel by using a web-translater.
          https://vbulletin-forum.de/forum/eng...ain-navigation
          This was and is a forum especially for german persons, but all people are welcome here. to avoid mixed content of different languages it would be nice if you use the English-Area-channels. If you have a question to any modification or add-on, just link to it. That would be quite nice. If you need any other channels within the English-Area, just ask ;-) ...Thank you for your understanding.
      Lädt...
      X