Shaper_helixultimate - Links bzw "Buttons" besser hervorheben?

    Hallo,


    bin noch blutiger Joomla-Anfänger, der nun schnell und aus dem Nichts eine Homepage für eine sehr kleine Tierschutzorganisation erstellen soll =O

    Nach längerem Suchen habe ich mich für das Helix3 Framework (Shaper_helixultimate) entschieden, weil man dort auf so viele Dinge Einfluß nehmen kann :)

    Scheinbar aber leider nicht auf alles, was ich verändern möchte. Oder ich habe nur noch nicht die Stelle gefunden.

    Von der Overrides habe ich bisher lieber die Finger weg gelassen, bin kein WebDesigner und kenne mich mit CSS etc mal überhaupt nicht aus.


    Ich habe ein Seite als Kategorie-Blog angelegt, die das Framework selbstständig erstellt. Die Artikel sind mit einem "readmore" Flag versehen, wodurch der Artikel verkürzt angezeigt und am Ende des Textes ein Link zum Text eingeblendet wird.

    Leider ist der Link sehr schlecht erkennbar und hält sich nicht an die Link-Einstellungsvorgaben im Helix-controlpanel :cursing:

    Wie kann ich Links auf dieser Seite deutlicher hervorheben? Am liebsten wäre mir so eine Art "Knopf", wie er am Seitenende zum Weiterblättern eingesetzt wird.

    Beispiel-Seite


    Auf den Beitragsseiten gibt es am Ende eine Weiter/Zurücknopf, dessen Gestaltung ich gerne auch verändern würde, da auch dieses Element fast nicht auffällt. Wo kann ich darauf Einfluß nehmen.


    Wäre toll, wenn Ihr mich auch die richtigen Stellen schubsen könntet, bin durchaus lernwillig thinking

    sorry, wenn ich mich unklar ausgedrückt habe

    ja, die Beispiel-Seite ist die Homepage, die ich gerade baue und wo ich mein Problem habe.

    Am Ende jeder Hunde-Kurzübersicht steht komplett unauffällig "Weiterlesen <Hundename>"
    Bei Testpersonen hat das fast niemand wahrgenommen, viele habe Gott sei Dank "intuitiv" auf das Hundebild geklickt, was dann auch zum eigentlichen Artikel führt.

    ich würde aber gerne diesen Text "weiterlesen..." entweder deutlicher hervorheben oder in einen Art Knopf umwandeln, wie es am Seitenende zum Weiterblättern auf die nächsten Seiten gemacht ist (ohne mein Zutun).


    Das zweite Problem mit den unauffälligen "Weiter/Zurück" Schaltflächen ist dann auf den Hundeseiten oder der Startseite zu besichtigen.

    Indigo66, sorry aber da bin ich anderer Meinung. Da es ein Bootstrap Layout ist, kann die Klasse btn btn-primary verwendet werden. Dann hat man schöne Buttons, welche dem Template Design entsprechen. Wie macht man das?


    templates\helix3_ultimate\html\layouts\joomla\content\readmore.php dort bei class= einfach btn btn-primary hinzufügen. Voila ein wunderschöner Button! Es würde aber hilfreich sein, wenn du uns deine Seite sendest (Helix3), weil eigentlich sollte das bei den Helix3 Templates schon implementiert sein...


    Sollte bei dem helix3_ultimate kein readmore.php vorhanden sein, dann einfach von /layouts/joomla/content/readmore.php rüberkopieren.

    Erst einmal vielen herzlichen Dank für Eure Tips und Unterstützung :thumbup:


    Spontan hätte ich den Weg von mr412 zuerst genommen, weil da der voll qualifizierte Pfad aufgeführt ist ;)

    Aber das Helix-Framework bietet noch eine 3. Weg, der Einfachste für DAUs

    In seinen Settings gibt es eine Box "custom CSS" für kleinere Änderungen, dort habe ich die Lösung von Indigo66 eingetragen und wirkt :)

    Mit der Änderung für "weiter/zurück" bin ich schon zufrieden, bei dem "Weiterlesen" noch nicht so ganz. Der "Knopf" ist jetzt deutlich erkennbar, aber ist doch bloß ein weißer Kasten um einen Link. Bei "weiter/zurück" ist die ganz Box maussensitiv und ich kann überall in der Box klicken, um zu Blättern (quasi ein vollständiger Knopf)

    Wie bekommt man dies bei dem "Weiterlesen" auch hin?

    Oder wäre dies dann doch die Lösung von mr412 gewesen? Führe ich die Änderung dann in den Overlays durch?


    Zitat

    Es würde aber hilfreich sein, wenn du uns deine Seite sendest (Helix3), weil eigentlich sollte das bei den Helix3 Templates schon implementiert sein...

    mr412, was meinst Du damit? Ganz oben habe ich den Link auf die echte Seite gesetzt gehabt:

    https://www.karlsruhe-tierschu….php/hunde-in-deutschland


    Oder meinst Du etwas anderes?


    Ach, ich bin noch so unwissend in dem System 8|

    sorry, habe ich mich anscheinend wieder mal unklar ausgedrückt.

    Nicht die Farbe ist das Problem, sondern der "fehlende mouse-over" Effekt, kenne leider den korrekten Begriff nicht :(

    Auch hier in der Foren-Software reagiert die "Antworten" oder "Vorschau" Fläche, sobald der Cursor in das Feld gelangt. Die ganze Fläche nimmt eine etwas andere Farbe an.

    Es ist egal, wo ich dann hin klicke, die komplette Fläche reagiert auf den Mausklick.


    Die momentan Anpassung auf meiner Seite hat scheinbar "nur einen Rahmen" um den Link gezeichnet, es bleibt aber ein Link und der Link wird nur ausgeführt, wenn ich auf den String "Weiterlesen: ...." klicke

    Der Erkennungseffekt ist durch die Modifikation klar besser geworden, aber die Fläche entspricht in der Funktion noch nicht den "Knöpfen".


    ich kann es im Moment leider nicht besser beschreiben

    Die Lösung von Indigo hat ja super geklappt und ist ausreichend für dein Projekt. Trotzdem will ich dich nochmal auf die Bootstrap "Funktionalität" für deine Zukunft mitgeben. Das Template hat alle Funktionen in der untenstehenden Dokumentation, welches bei Helix nicht Dokumentiert wird.


    Buttons

    https://getbootstrap.com/docs/4.0/components/buttons/


    Tables

    https://getbootstrap.com/docs/4.0/content/tables/

    es gibt noch vieles mehr, auch wie man Bilder schön und responsive hinzufügen kann. Ich empfehle dir das kurz anzuschauen. Du kannst dir enormen Designaufwand sparen, wenn du die fertigen Klassen verwendest.

    mr412 Danke für die Hinweise, die ich mir zur Gemüte führen werde, mal sehen, ob ich es auch verstehe.


    meine vollste Zufriedenheit hat heute leider einen Dämpfer bekommen, der "Knopf" funktioniert nicht richtig, eben doch nur eine farbige Fläche und kein Button

    Zwar verfärbt er sich beim mouse-over, aber es bleibt ein Link, der nur funktioniert, wenn auf den Text geklickt wird.

    Scheinbar habe ich gestern immer ein Teil des Textes getroffen und war deshalb happy,

    Heute habe ich mehrfach daneben geklickt und bemerkt, daß die Fläche neben dem Text eben nur sich verfärbt, aber nicht als Link interpretiert wird.

    mr412 haben nun den Ansatz von Dir umgesetzt und einen der Buttons eingefügt

    Das ist eigentlich genau, was ich wollte.

    habe nur etwas Probleme gehabt, wie ich es wo ändere

    Nun in den Templates-Overrides hinzugefügt, funktioniert, ich hoffe es war auch der richtige Platz

    naja, ganz happy bin ich heute nicht mehr

    Denn auch die schöne Optik ist wohl kein "Button", denn die Weiterleitung reagiert nur, wenn man den Text erwischt. Am Rand verfärbt sich nur der Button, leitet aber nicht weiter thinking

    Der Text bleibt nach wie vor ein Link, könnte es an dem Codeschnipsel liegen (aus dem Template-Override)

    PHP
    <div class="readmore btn btn-outline-success">	<?php if (!$params->get('access-view')) : ?>		<a href="<?php echo $displayData['link']; ?>" itemprop="url" aria-label="<?php echo Text::_('COM_CONTENT_REGISTER_TO_READ_MORE'); ?>			<?php echo htmlspecialchars($item->title, ENT_QUOTES, 'UTF-8'); ?>">			<?php echo Text::_('COM_CONTENT_REGISTER_TO_READ_MORE'); ?>		</a>

    Da steht ja deutlich: itemprop="url"

    klingt doch nach der von mir beschriebenen Funktionsweise.

    kann man da etwas anderes setzen, damit der ganze Bereich des Buttons dann als Link interpretiert wird? D.h. egal wo ich dann in dem Button drücke (auch im Randbereich) wird man dann zur verlinkten Seite weitergeleitet?