Jump to content
Suche in
  • Mehr Optionen...
Suchtreffer enthalten ...
Finde Suchtreffer ...
  • Header Navigation anpassen

       (0 Bewertungen)

    V0RT3X

    In Chevereto gibt es zwei Möglichkeiten eurer Navigation neue Links hinzuzufügen. Die einfachere ist über Dashboard -> Settings -> Pages. Dort könnt ihr mit Type = Link anstelle eigene Seiten anzulegen auch einfach auf externe verlinken (nicht vergessen Link target attribute auf _blank zu setzen, wenn ihr das Ziel in einem neuen Tab öffnen wollt). Diese Links werden dann im "About" Dropdown angezeigt und können über die Page-Settings in der Reihenfolge sortiert werden.

    Wenn ihr allerdings einen Link direkt in der Navbar platzieren wollt, ist das ein bisschen umständlicher. Dafür müssen die Theme-Dateien manuell editiert werden. Da diese Files bei jedem Update überschrieben werden, bearbeitet ihr deshalb nicht die mitgelieferten, sondern legt euch eigene an.

    Öffnet dafür euren FTP-Client (z.B. Filezilla) und ladet aus dem Verzeichnis /deinedomain.com/app/themes/Peafowl/ die Datei header.php herunter. Diese wird nachdem ihr sie bearbeitet habt in das Verzeichnis overrides hochgeladen, das sich ebenfalls im Ordner des "Peafowl"-Themes befindet. Wenn darin eine Datei gleichen Namens liegt, wird vom System automatisch diese verwendet und nicht die Originale. Ihr solltet nach einem Update allerdings überprüfen, ob sich in der neuen Version der Datei etwas geändert hat und eure eigene entsprechend anpassen. Das ist mit Tools wie Diffchecker allerdings schnell erledigt.

    Im ersten Beispiel fügen wir einen simplen externen Link hinzu, in diesem Fall ist es eine Telegram-Gruppe. Der Code den ihr dafür einfügen müsst ist:

    <li id="top-bar-telegram" data-nav="telegram" class="top-btn-el phone-hide">
    	<a href="http://t.me/groupname"><span class="top-btn-text"><span class="icon icon-bubbles4"></span><span class="btn-text phone-hide phablet-hide">Telegram</span></span></a>
    </li>

    Anstelle von Telegram könnt ihr natürlich jeden anderen Link unter href eintragen. Auch hier kann ein _blank angehängt werden, um das Ziel in einem neuen Tab zu öffnen. Das Icon wird unter span class definiert, in diesem Fall ist es icon-bubbles4. Eine Übersicht verfügbarer Icons findet ihr HIER. Der Name des Buttons, also schlicht und einfach "Telegram" ist als Text hinterlegt. Eine Sprachvariable legen wir in diesem Fall nicht an, da das den Rahmen dieses Tutorials sprengen würde.

    Je nachdem ob ihr den Button auf der linken oder rechten Seite der Navigation haben wollt, sind dies die Einstiegspunkte, wo ihr euren Code einfügen müsst.

    <ul class="top-bar-left float-left">
    <ul class="top-bar-right float-right keep-visible">

    Wenn ihr euren Button nicht direkt am Anfang der jeweiligen Navigations-Seite haben wollt, schaut euch den Code ein bisschen genauer an und sucht nach anderen Einstiegspunkten, wie zum Beispiel is_search_enabled, is_show_notifications oder was auch immer. 

    Für den folgenden Screenshot habe ich einen Link zu den neuesten Alben hinzugefügt, um die Besucher schneller direkt dort hinführen zu können und ausserdem das Explore-Icon ausgetauscht, da es so einfach besser aussieht. Zusätzlich habe ich die Suchfunktion in die rechte Naviseite verschoben, aus dem ganz einfachen Grund, weil es so gut wie alle Webseiten dort haben und die User es so gewohnt sind.

    newalbums.png.1e340c0d1fecf01c0b2dc62467a1dde5.png

    Der Code dafür sieht folgendermassen aus:

    <li id="top-bar-newalbums" data-nav="newalbums" class="top-btn-el phone-hide">
    	<a href="/explore/recent/?list=albums&sort=date_desc&page=1"><span class="top-btn-text"><span class="icon icon-lightning"></span><span class="btn-text phone-hide phablet-hide">New Albums</span></span></a>
    </li>

    Ich hoffe dieses kleine Tutorial hat euch gefallen, ich habe es bewusst sehr Anfängerfreundlich gehalten.



    Rückmeldungen von Benutzern

    Erstelle ein Benutzerkonto oder melde dich an, um eine Bewertung abzugeben

    Du musst ein Benutzerkonto haben, um eine Bewertung verfassen zu können

    Benutzerkonto erstellen

    Neues Benutzerkonto für unsere Community erstellen. Es ist einfach!

    Neues Benutzerkonto erstellen

    Anmelden

    Du hast bereits ein Benutzerkonto? Melde dich hier an.

    Jetzt anmelden

    Es gibt keine anzuzeigenden Bewertungen


×
×
  • Neu erstellen...

Important information

This website uses cookies and shit. Deal with it or GTFO!