Tab-Navi: Text-Grafiken als Links

[mooooo]

Hallo,

ich habe folgendes Problem: Ich verwende das Modi-Art-WAI-Template, hätte aber gerne in der Tab-Navigation im Header anstatt der HTML-Links entsprechende Text-Grafiken.

Kann mir da jemand helfen?

 

[modi-art]

AW: Tab-Navi: Text-Grafiken als Links

Hi,

Ich verwende das Modi-Art-WAI-Template, hätte aber gerne in der Tab-Navigation im Header anstatt der HTML-Links entsprechende Text-Grafiken.

Kann mir da jemand helfen?

Das haben wir bei radlreifen.de mal umgesetzt (Modi-Art-WAI Template).
Den CSS-Part kannst du dort mit Firebug einsehen und nachbauen.

Als Vorraussetzung dafür müssen die Reiter oben alle per CSS-Selektor ansprechbar sein. Das ist im Modi-Art-WAI Template bereits vorbereitet:
Man kann in der WaWi für Kategorien je ein Attribut "css_klasse" (als Attributname) mit einem eindeutigem Wert vergeben. Dieser Attribut-Wert wird im Template als CSS-Klassenname für den Reiter-Link verwendet.

Beispiel: Kategorie "Haushalt und Garten" gibst du das Kategoriattribut css_klasse: haushaltgarten.

CSS-Teil (z.B. in die custom.css schreiben):

#header #maincat a { height: 50px; padding: 0; } /* feste Höhe wg Hintergrundbildern */
#header #maincat a span { display: none; } /* Text ausblenden */
#header #maincat a.haushaltgarten { background-image: url(../images/header_buttons/header_menue_haushaltgarten.jpg); width: 200px; } /* Reiter Haushalt und Garten */

Gruß David

 

[mooooo]

AW: Tab-Navi: Text-Grafiken als Links

Hallo,

danke für die schnelle Antwort.
Das Prinzip habe ich soweit verstanden, mir ist einzig und alleine nur noch nicht klar, wie bzw. wo genau ich den Kategorien das jeweilige Attribut zuweisen kann bzw. wie funktioniert das bei dem Link zur Startseite? Die Tab-Navigation oben wird ja durch die Informationen, die man im Admin-Bereich unter dem Menüpunkt "Links" > "Linkgruppe: Kopf" eingibt, generiert.

 

[modi-art]

AW: Tab-Navi: Text-Grafiken als Links

Hi,

Das Prinzip habe ich soweit verstanden, mir ist einzig und alleine nur noch nicht klar, wie bzw. wo genau ich den Kategorien das jeweilige Attribut zuweisen kann bzw. wie funktioniert das bei dem Link zur Startseite? Die Tab-Navigation oben wird ja durch die Informationen, die man im Admin-Bereich unter dem Menüpunkt "Links" > "Linkgruppe: Kopf" eingibt, generiert.

Sorry, meine Anleitung oben bezieht sich auf die Nutzung von Shop-Kategorien im Header-Menü (kann man im Modi-Art-WAI Template in der settings.conf einstellen). Weiss auch nicht warum ich das im Kopf hatte

Für die Links aus der Linkgruppe "Kopf" musst du eine kleine Code-Änderung in der tpl_inc/header.tpl vornehmen, damit die Reiter-Links per CSS-Selektor ansprechbar gemacht werden:
Suche in der header.tpl nach dem Block

{foreach name=kopflinks from=$smarty.session.Linkgruppen->Kopf->Links item=Link}
...
{/foreach}

In der längsten Zeile in diesem Code-Block steht mittendrin:

<a href="{$Link->URL}"{if $localizedLinkTitle} title="{$localizedLinkTitle}"{/if}>

Diesen Teil ersetzen durch

<a href="{$Link->URL}" class="{getSimpleString text=$localizedLinkTitle}"{if $localizedLinkTitle} title="{$localizedLinkTitle}"{/if}>

Ab dann wird das class-Attributs mit dem kleingeschriebenen, zusammengeschriebenen Linknamen befüllt (am besten mit Firebug in den Code reinschauen)...

Gruß und viel Erfolg
David