Wie kann ich die Buttons der Seitennavigation neu positionieren

    Auf meiner neuen Website nutze ich das Standard Protostar-Template.

    Ich möchte die Buttons für die Seitennavigation, die normaler Weise ja unter einem geöffneten Blog-Beitrag platziert sind, mittels

    Code
    position: sticky 
top: 50%
z-index: 100000
color: rgba(xx,xx,xx,0.5)

    über den geöffneten Beitrag legen und die Beschriftung / Grafik darin austauschen gegen die bei Bildergalerien oft üblichen schmalen Pfeile (damit nur wenig Text überdeckt wird).


    Mit den dafür zuständigen Klassen "pager" und "pagenav" habe ich bereits experimentiert, hatte aber bisher keinen Erfolg.

    Wie kann ich meinen Wunsch verwirklichen?

    Das verstehe ich, aber Protostar ist Standard und so denke ich, dass es auch ohne Angabe der URL möglich ist, etwas dazu zu sagen.

    Meine in Entwicklung befindliche Site enthält Textentwürfe, die noch nicht "veröffentlichungsreif" sind. Daher bin ich damit zurückhaltend.

    OK aber hier ist ein Link, der direkt zu einem geöffneten Beitrag führt:

    Musterwebseite

    Soll es grundsätzlich keine Icons mehr geben? Sonst bitte wieder einkommentieren erst mal, was du da in der template.css ab Zeile 6376 auskommentiert hast. Denn ohne das funktioniert IcoMoon gar nicht mehr.



    Ist sicher noch nicht optimal - und ich denke man sollte die Darstellung jeweils auf Mobile/Desktop anpassen - aber vielleicht kannst du damit ja etwas anfangen.




    Oh ich vergaß: Ich möchte in der Mitte zwischen den beiden Seitennavigationsbuttons einen dritten Button einfügen, mit dem der angezeigte Beitrag geschlossen wird und man zum BlogLayout der Kategorie zurück springen kann.


    Da weiß ich nun überhaupt nicht, wie und wo ich das einfügen kann und vermute, dass das in irgend einer PHP-Datei möglich ist, in der evtl. auch die Seitennavigation definiert ist.

    Da haben sich unsere Beiträge gekreuzt.

    Und betr. IcoMoon... da ist was falsch gelaufen. Natürlich möchte ich diesen Font drin haben. Keine Ahnung, wieso der nicht mehr geladen wird, weil ich an den Pfadangaben in der template.css nix geändert habe.


    Herzlichen Dank für deine wirklich hilfreiche Antwort! Ja, damit kann ich jetzt weiter kommen. Und mobile werde ich das natürlich noch alles sorgfältig testen / optimieren.


    Den dritten Button (zurück) würde ich natürlich nur einfügen, wenn ich die von dir realisierte Navigation mit sticky bottom: 20px an das untere Ende des Beitrags verschiebe.

    Reichen denn nicht die Breadcrumbs/Navigationsleiste oben (um zur Übersicht zu gelangen)?



    Wenn du unbedingt diesen dritten Button (am unteren Rand dann alles..) haben willst, kannst du den in einem Template Override einfügen.

    Hier ist im Beispiel genau die richtige Datei genannt:
    https://docs.joomla.org/J3.x:L…a#Plugin_Override_example


    Die plugins/content/pagenavigation/tmpl/default.php kopierst du also nach

    templates/clemens-protostar/html/plg_content_pagenavigation/default.php

    Mir geht es zurzeit um optimale Usability. Da hatte ich schon einen (zu langen) Post abgelassen, auf den niemand geantwortet hatte. War wohl zu abschreckend. :)


    Die von dir empfohlenen Änderungen habe ich gerade eingefügt und auch IcoMoon wieder aktiviert. Das hatte wohl ein Programmierer so auskommentiert, der mir das Modal-Gewraffel programmiert hat, sodass endlich Video und Audio und Text auf allen Geräten zuverlässig und in weitgehend gleicher Form dargestellt werden.


    Herzlichen Dank für deine wertvollen Tipps! Das hat ja auf Anhieb funktioniert und hat mir viel Zeit gespart!

    Die Modifikation zum dritten Button muss ich wohl in Ruhe ausprobieren.


    Gerade im Hochformat auf dem Smartphone scrollt der Besucher einen Beitrag lange nach unten. Will er das Lesen vorher abbrechen, wie kann er dann definieren, wohin er als nächstes will? Für den Breadcrumb müsste er erst wieder ganz an den Anfang des Beitrags scrollen damit Breadcrumbs sichtbar werden.

    Würde ich Breadcrumbs auf Sticky positionieren, bekomme ich Probleme mit der Positionierung des Signets, das in einem Modul liegt und dort platziert wurde. Zudem verdirbt Breadcrumbs auf "sticky" die optische Gesamtwirkung.


    Es blieb dem Betrachter natürlich noch die Option, über das MobileMenü zur Kategorie zurück zu springen. Aber da beginnen dann persönliche Vorlieben der Besucher.

    Wenn er denn mitten im Beitrag ist und sieht weiter unten die von mir hier im Thread gewünschten drei Möglichkeiten "voriger beitrag - zurück - nächster Beitrag", wird er das vermutlich intuitiver und bequemer in der Bedienung finden, als die vorgenannten Möglichkeiten.


    Es gibt bei dieser Website übrigens nur das MobileMenü und kein übliches mehr. Zudem lege ich Wert auf Aufmerksamkeitsfokussierung: Wenn der Besucher schon einen Beitrag ausgewählt / geöffnet hat zum Lesen, dann respektiere ich dessen Entscheidung, indem ich ihm nicht weitere optische Elemente zur Ablenkung anbiete. So wird z.B. eine evtl. vorhandene rechte Spalte (ab einer Screenwidth von ca. 760px) nach Öffnen des Beitrags voll ausgeblendet sodass der Beitrag die gesamte Fläche einnimmt.

    Ich drücke einfach den Zurück Button auf dem Handy oder an der Maus, um zu Übersichten zurück zu gelangen.


    Wenn 1x nicht reicht, dann halt mehrmals (falls die Beitragsnavigation genutzt wurde)..


    Das klappt immer und reicht mir.


    Eigentlich unnötige Buttons, die womöglich auch noch (weil mittig) Seiteninhalte überdecken, empfinde ich eher als störend.

    Tja, das mache ich auch so. Ich hab aber schon gehört, dass es je nach Browser und Smartphone die "zurück"-Taste nicht mehr gibt. Ich besitze nur ein altes Galaxy S5. Und was auf dem iPhone dargestellt wird, weiß ich eh nicht.

    Da ich noch experimentiere mit der UX, kann es auch sein, dass ich den dritten Button nicht verwirkliche. Ich sehe ja gerade, wie das aktuell bereits Erreichte wirkt:


    Da ich die rechte Spalte, die nur im BlogLayout sichtbar ist, auf "sticky" positioniert habe, kann die scheinbare Bewegung der vielen Beiträge beim Scrollen plus der Bewegung der rechten Spalte irritierend wirken.


    Zudem überlege ich gerade, ob es sinnvoll ist, auch das Signet und die Breadcrumbs gemeinsam ebenfalls mit "sticky" zu positionieren, obwohl das dann wieder viel Platz wegnimmt. Es gibt aber optisch einen Halt und festen Punkt gegenüber allem, was sich da bewegt beim Scrollen.

    Signet und Breadcrumb sind aber als Module platziert und das Signet variiert in der Höhe, abhängig von Screenwidth. Wie ich dann beides "sticky" bekomme, weiß ich nicht, wäre aber auch evtl. in einem extra Thread besser aufgehoben.