Seitennavigation zu Beiträge CSS ändern / eintragen

Rene8070 · 21. Juni 2019

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

 ZurÃ¼ck </a>

</li>

<li class="next">

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

Weiter </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.

JohannesK · 21. Juni 2019

Ganz ehrlich wir helfen dir ja alle gerne aber bei so komplexen CSS Sachen gib uns bitte einen Link zur Seite. Ich will mir das ja nicht nachbauen bei mir.

Rene8070 · 21. Juni 2019

Die original CSS Datei hat fast 8.000 Zeilen. Danke Joomla.

Hier der Link:

https://bayernmatrix.eu/index.…her-geglaubten-rallyesieg

anka · 21. Juni 2019

Hast du dir mal den Quellcode deiner Webseite angeschaut? Da liegt einiges im Argen... Wie bindest du denn deine eigenen CSS-Anweisungen in der index.php des Template ein?

Rene8070 · 21. Juni 2019

Dieses Template ist noch nicht ganz fertig. Daher das CSS in der index.php.

anka · 21. Juni 2019

Aber doch nicht so, wie du es machst .

Schau dir mal diese Anleitung an

https://www.html-seminar.de/st…ets_in_html_einbinden.htm

Rene8070 · 21. Juni 2019

Ist noch nicht fertig. Bitte beim Thema bleiben.

anka · 21. Juni 2019

Mehr beim Thema bleiben geht nicht. Deine CSS-Anweisungen greifen nicht, weil sie falsch eingebunden sind. Schau dir doch die Variante 2 auf der verlinkten Webseite.

Rene8070 · 21. Juni 2019

So ähnlich habe ich das bereits.

Rene8070 · 21. Juni 2019

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

 ZurÃ¼ck </a>

</li>

<li class="next">

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

Weiter </a>

</li>

</ul>

Hier dann den Tooltip komplett herausnehmen und Gut ist.

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

firstlady · 21. Juni 2019

Pagenav ist ein Plugin. Das kanst du enfach im Backend deaktivieren.

Aber wenn du dir einen Gefallen tun willst: akzeptiere alles, was anka sagt. Mehr CSS Know How geht nicht.

Rene8070 · 21. Juni 2019

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:

PHP

<?php
/**
* @package     Joomla.Plugin
* @subpackage  Content.pagenavigation
*
* @copyright   Copyright (C) 2005 - 2019 Open Source Matters, Inc. All rights reserved.
* @license     GNU General Public License version 2 or later; see LICENSE.txt
*/

defined('_JEXEC') or die;

JHtml::_('bootstrap.tooltip');

$lang = JFactory::getLanguage();

?>
<ul class="pager pagenav">
<?php if ($row->prev) :
$direction = $lang->isRtl() ? 'right' : 'left'; ?>
<li class="previous">
<a class="hasTooltip" title="<?php echo htmlspecialchars($rows[$location-1]->title); ?>" aria-label="<?php echo JText::sprintf('JPREVIOUS_TITLE', htmlspecialchars($rows[$location-1]->title)); ?>" href="<?php echo $row->prev; ?>" rel="prev">
<?php echo '<span class="icon-chevron-' . $direction . '" aria-hidden="true"></span> <span aria-hidden="true">' . $row->prev_label . '</span>'; ?>
</a>
</li>
<?php endif; ?>
<?php if ($row->next) :
$direction = $lang->isRtl() ? 'left' : 'right'; ?>
<li class="next">
<a class="hasTooltip" title="<?php echo htmlspecialchars($rows[$location+1]->title); ?>" aria-label="<?php echo JText::sprintf('JNEXT_TITLE', htmlspecialchars($rows[$location+1]->title)); ?>" href="<?php echo $row->next; ?>" rel="next">
<?php echo '<span aria-hidden="true">' . $row->next_label . '</span> <span class="icon-chevron-' . $direction . '" aria-hidden="true"></span>'; ?>
</a>
</li>
<?php endif; ?>
</ul>

Alles anzeigen

Nachher:

PHP

<?php
/**
* @package     Joomla.Plugin
* @subpackage  Content.pagenavigation
*
* @copyright   Copyright (C) 2005 - 2019 Open Source Matters, Inc. All rights reserved.
* @license     GNU General Public License version 2 or later; see LICENSE.txt
*/

defined('_JEXEC') or die;

JHtml::_('bootstrap.tooltip');

$lang = JFactory::getLanguage();

?>
<ul class="pager pagenav">
<?php if ($row->prev) :
$direction = $lang->isRtl() ? 'right' : 'left'; ?>
<li class="previous">
<a class="hasTooltip" href="<?php echo $row->prev; ?>" rel="prev">
<?php echo '<span class="icon-chevron-' . $direction . '" aria-hidden="true"></span> <span aria-hidden="true">' . $row->prev_label . '</span>'; ?>
</a>
</li>
<?php endif; ?>
<?php if ($row->next) :
$direction = $lang->isRtl() ? 'left' : 'right'; ?>
<li class="next">
<a class="hasTooltip" href="<?php echo $row->next; ?>" rel="next">
<?php echo '<span aria-hidden="true">' . $row->next_label . '</span> <span class="icon-chevron-' . $direction . '" aria-hidden="true"></span>'; ?>
</a>
</li>
<?php endif; ?>
</ul>

Alles anzeigen

Sieger66 · 21. Juni 2019

Zitat von Rene8070

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

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

firstlady · 21. Juni 2019

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)

Indigo66 · 22. Juni 2019

OT: Hatte gerade Zeit und habe den Code aus #12 von Rene8070 aufgehübscht.