Jump to content

Header Navigation anpassen

   (0 reviews)

Description

Einträge umarrangieren und neue Links hinzufügen

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_enabledis_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

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. Solltet ihr Fragen dazu haben, benutzt bitte den Supportthread, nicht die Review-Funktion.



Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
×
×
  • Create New...

Important Information

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