Rocksolid Themes TPL Anpassung über css

[jha]

üblicher Weise kann ein Textlink in der Hauptnavigation mittels CSS durch einen Icon ersetzt werden.

das sollte über die custom.css funktionieren

.main-navigation > ul > li.nav-sitemap > a,
.main-navigation > ul > li.nav-sitemap > span {
text-indent: -99em;
overflow: hidden;
line-height: 0;
}
.main-navigation > ul > li.nav-sitemap > a:after,
.main-navigation > ul > li.nav-sitemap > span:after {
font: 1.4em/1 "RockSolid Icons";
content: "\e0cb";
text-indent: 0;
display: block;
}

leider geht es mit TPL-Satz TAO 1.5.6 unter Contao 4.6.0 nicht. In dieser Konstellation wird zwar der Icon angezeit, aber der Schriftzug bleib bestehen. Das schaut natürlich blöd aus.

Hat jemand eine Idee wie sich das beheben lässt? Wie ich nur den Icon ohne Schriftzug anzeigen kann.

[tab]

Ersetze mal im CSS das "span" durch ein "strong".

[jha]

Also ein strong ist da nirgendwo zu finden. Ich habe das span trotzdem durch strong ersetzt, aber es hat halt nichts bewirkt.

[tab]

Bist du sicher, dass das geänderte CSS auch ausgeliefert und verwendet wird und nicht die ganze Seite oder das CSS aus dem Cache kommt? Es ist nun mal in Contao 4 so, dass für den aktiven Menüpunkt statt dem früheren (bis 3.5) <span> jetzt ein <strong> verwendet wird.

[tab]

Habe mir gerade mal die Demo angeschaut. Da hat die Hauptnavigation in der Tat weder ein span noch ein strong, sondern auch der aktive Menüpunkt hat einen Link (<a>). Im Prinzip musst du nur über die Entwicklerwerkzeuge des Browsers nachschauen wie das HTML aussieht und daran dann dein CSS anpassen. Eventuell ist auch deine angegebene Klasse main-navigation falsch, in der Demo heisst die Klasse main-nav.

[jha]

Das geänderte CSS wird ausgeliefert und wie schon beschrieben wird das Icon ja auch angezeigt. Nur die Schrift werde ich nicht los und im HTML ist kein strong zu finden. Den Cache habe ich mehrfach geleert (Browser und Präsentation).

Hier mal das HTML zum Thema:

<li class="nav-shop sibling last">
<a href="shop.html" title="SHOP" class="nav-shop sibling last" itemprop="url"><span itemprop="name">SHOP</span>
</a>
</li>

ich habe natürlich auch im CSS das nav-sitemap in nav-shop umbenannt.

[tab]

Und wo ist das Element mit der Klasse main-navigation?
Gibt es vielleicht einen Link zu der Seite?

[jha]

Einen Link kann ich leider noch nicht öffentlich anbieten.

Der HMTL-Code der Hauptnavigation:

<nav class="mod_rocksolid_mega_menu main-navigation block" id="main-navigation" itemscope itemtype="http://schema.org/SiteNavigationElement">
<a href="#skipNavigation78" class="invisible">Navigation überspringen</a>
<ul class="level_1">
<li class="sibling">
<a href="produkte-industrie.html" title="INDUSTRIE" class="submenu sibling first -mega" aria-haspopup="true" itemprop="url"><span itemprop="name">INDUSTRIE</span>
</a>
</li>
<li class="sibling">
<a href="automotive.html" title="AUTOMOTIVE" class="sibling" itemprop="url"><span itemprop="name">AUTOMOTIVE</span>
</a>
</li>
<li class="sibling">
<a href="branchen.html" title="BRANCHEN" class="sibling" itemprop="url"><span itemprop="name">BRANCHEN</span>
</a>
</li>
<li class="sibling">
<a href="unternehmen.html" title="UNTERNEHMEN" class="sibling" itemprop="url"><span itemprop="name">UNTERNEHMEN</span>
</a>
</li>
<li class="sibling">
<a href="news.html" title="NEWS" class="sibling" itemprop="url"><span itemprop="name">NEWS</span>
</a>
</li>
<li class="nav-shop sibling last">
<a href="shop.html" title="SHOP" class="nav-shop sibling last" itemprop="url"><span itemprop="name">SHOP</span>
</a>
</li>
</ul>
<a id="skipNavigation78" class="invisible">&nbsp;</a>
</nav>

[jha]

Inzwischen hat Rocksolid Themes dankenswerter Weise reagiert und die Lösung will ich anderen nicht vorenthalten:

Wie schon weiter oben im Thread habe ich keinen Hauptmenuepunkt "Sitemap", sondern meiner heißt "Shop"

.main-navigation > ul > li.nav-shop > a,
.main-navigation > ul > li.nav-shop > span,
.main-navigation > ul > li.nav-shop > strong {
    text-indent: -99em;
    overflow: hidden;
    line-height: 0;
    padding-top: 1.5em;
}
.main-navigation > ul > li.nav-shop > a:after,
.main-navigation > ul > li.nav-shop > span:after,
.main-navigation > ul > li.nav-shop > strong:after {
    font: 1.4em/1 "RockSolid Icons";
    content: "\e039";
    text-indent: 0;
    display: block;
    position: static;
    background: none;
    height: auto;
}
.main-navigation > ul > li.nav-shop > a:before,
.main-navigation > ul > li.nav-shop > span:before,
.main-navigation > ul > li.nav-shop > strong:before {
    content: none;
}

Damit funktioniert es!