Seitennavigation zu Beiträge CSS ändern / eintragen

  • Ich habe ein CSS mit dem ein Tooltip zum Zurück/Weiter Button als CSS eingetragen wird.


    Ich vewende:


    a[data-tooltip]:before {

    position: absolute;

    left: 0;

    top: -40px;

    background-color: #ff0000;

    color: #ffffff;

    height: 30px;

    line-height: 30px;

    border-radius: 5px;

    padding: 0 15px;

    content: attr(data-tooltip);

    white-space: nowrap;

    display: none;

    }


    a[data-tooltip] {

    position: relative;

    }


    a[data-tooltip]:after {

    position: absolute;

    left: 15px;

    top: -10px;

    border-top: 7px solid #ff0000;

    border-left: 7px solid transparent;

    border-right: 7px solid transparent;

    content: "";

    display: none;

    }


    a[data-tooltip]:hover:after, a[data-tooltip]:hover:before {

    display: block;

    }


    Um das mit dem hier aufrufen:


    <a href="http://www.t3n.de/" data-tooltip="ABCD 01">ABCD 01</a>


    Das funktioniert auch soweit.


    Wenn ich dann dies für die Seitennavigation in den Beiträgen verwenden will, kommt es zu einem Problem.


    Ich verwende das:


    a[data-original-title]:before {

    position: absolute;

    left: 0;

    top: -40px;

    background-color: #ff0000;

    color: #ffffff;

    height: 30px;

    line-height: 30px;

    border-radius: 5px;

    padding: 0 15px;

    content: attr(data-original-title);

    white-space: nowrap;

    display: none;

    }


    a[data-original-title] {

    position: relative;

    }


    a[data-original-title]:after {

    position: absolute;

    left: 15px;

    top: -10px;

    border-top: 7px solid #ff0000;

    border-left: 7px solid transparent;

    border-right: 7px solid transparent;

    content: "";

    display: none;

    }


    a[data-original-title]:hover:after, a[data-original-title]:hover:before {

    display: block;

    }


    Um es mit dem hier aufzurufen:


    <ul class="pager pagenav">

    <li class="previous">

    <a class="hasTooltip" title="" aria-label="ABCD ZURÜCK" href="./zurück" rel="prev" data-original-title="ABCD ZURÜCK">

    <span class="icon-chevron-left" aria-hidden="true"></span> <span aria-hidden="true">Zurück</span> </a>

    </li>

    <li class="next">

    <a class="hasTooltip" title="" aria-label="ABCD WEITER" href="/weiter" rel="next" data-original-title="ABCD WEITER">

    <span aria-hidden="true">Weiter</span> <span class="icon-chevron-right" aria-hidden="true"></span> </a>

    </li>

    </ul>


    Als einzelne Testdatei funktioniert das auch.


    Jedoch füge ich das in meinem Template ein so kommt es dazu, dass der Tooltip nicht mit der CSS Formatierung erscheint.



    Wo ist hier mein Fehler?


    Das Original CSS Verwende ich nicht. Es sollte eigentlich nicht zu Komplikationen kommen.

  • Ein anderer Ansatz wäre die Datei zu finden, in der dann folgendes zu finden ist bzw. wo folgendes dann erzeugt wird:


    <ul class="pager pagenav">

    <li class="previous">

    <a class="hasTooltip" title="" aria-label="ABCD ZURÜCK" href="./zurück" rel="prev" data-original-title="ABCD ZURÜCK">

    <span class="icon-chevron-left" aria-hidden="true"></span> <span aria-hidden="true">Zurück</span> </a>

    </li>

    <li class="next">

    <a class="hasTooltip" title="" aria-label="ABCD WEITER" href="/weiter" rel="next" data-original-title="ABCD WEITER">

    <span aria-hidden="true">Weiter</span> <span class="icon-chevron-right" aria-hidden="true"></span> </a>

    </li>

    </ul>


    Hier dann den Tooltip komplett herausnehmen und Gut ist.


    Aber bei Joomla ist so etwas das große Geheimnis.

  • Ich habe das jetzt anders geändert. Ich habe im Ordner plugins/content/pagenavigation/tmpl die Datei default.php dahingehend geändert, dass eben gar kein Tooltip mehr angezeigt wird.


    Vorher:



    Nachher:

  • Ist noch nicht fertig.


    Dann räum am besten zuerst mal das durcheinader auf. Sonst sieht jeder je nach Webbrowser usw. eine andere Website als du aufgrund der Nebenwirkungen deiner Anfängerfehler.


    Ich sehe bei dir im Seitenquelltext z.B. auch 8x

    <head>


    Zitat

    Das head-Element ist das erste innerhalb des html-Elements und darf nur einmal im Dokument vorkommen. Der Head muss genau ein title-Element enthalten. Empfehlenswert ist auch, die verwendete Zeichenkodierung als erstes Element innerhalb des Kopfs anzugeben.


    aus:

    https://wiki.selfhtml.org/wiki/Head


    Das "Templategerüst" ist ja wohl von dort:

    http://joomla-templates.de/pfade-und-urls


    und nachfolgendes aber nicht von dir eingebaut:


    PHP
    1. <link type="text/css" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" rel="stylesheet" >


    Aber du kannst natürlich auch gerne alles so lassen wie es ist und deine winzigen^^ Probleme selbst lösen.

    Zu den Nebenwirkungen fragen Sie bitte Ihren Arzt oder Apotheker.

  • Zitat

    Ich habe das jetzt anders geändert. Ich habe im Ordner plugins/content/pagenavigation/tmpl die Datei default.php dahingehend geändert, dass eben gar kein Tooltip mehr angezeigt wird.

    Das ist dir hoffentlich bewusst, dass das ein core-hack ist und beim nächsten Joomla-Update überschrieben werden könnte (muss nicht, aber kann).

    Korrektes Vorgehen ist: Im Backend - Template Styles - Overrides. Ein Override dieses Plugins anlegen und dort die Änderungen durchführen.

    Noch eine Bitte: Verwende Spoiler, wenn du langen code postest (s. Forenregeln)