Gelöst Modi Art template: image in tap header

[muelleco]

Ich habe versucht ein Image im Tab header anzuzeigen anstelle eines Textes (siehe www.weinundfein.info). Dazu habe ich einfach unter links bei meinem entsprechenden Tab den Image HTML code in das Titelfeld geschrieben. Soweit funktioniert es ja, doch es ist eine ziemösung lich hässliche Lösung, zudem erscheint der content Text in bold was er eigentlich nicht sein sollte. Weiss jemand eine bessere Lösung wie man das machen kann?

 

[modi-art]

AW: Modi Art template: image in tap header

Weiss jemand eine bessere Lösung wie man das machen kann?

Hi,
Hintergrundgrafiken per CSS ist meiner Meinung nach der beste Lösungsansatz. Wie das geht hatte ich hier schon einmal gepostet: http://forum.jtl-software.de/templa...-navi-text-grafiken-als-links.html#post132185

dann kannst du dir entsprechende CSS-Regeln bauen, mit denen du die Reiter individuell stylen kannst
z.B.

#header #maincat a.cssKlasseDesReiters { background: url(meinReiterBild.png); width: 200px; height: 30px; }
#header #maincat a.cssKlasseDesReiters span { display: none; }

 

[muelleco]

AW: Modi Art template: image in tap header

hmm aber wenn ich das css für die headers anpasse, erhalten ja alle tabs ein Bild. Ich möchte jedoch nur für ein header ein Hintergrundbild. Wie kann ich das steuern?

 

[modi-art]

AW: Modi Art template: image in tap header

Hi,

hmm aber wenn ich das css für die headers anpasse, erhalten ja alle tabs ein Bild. Ich möchte jedoch nur für ein header ein Hintergrundbild. Wie kann ich das steuern?

Meine Anleitung und das Beispiel oben beziehen sich darauf, wie man genau einen bestimmten Tab-Reiter im header styled.
Header-Hintergrundbild ist ein anderes Thema, dazu gibt es hier eine Anleitung:
DevCodeSnippets ? Modi-Art-WAI Template

 

[muelleco]

AW: Modi Art template: image in tap header

Salü
Hat noch nicht ganz geklappt ...
habe nun wie beschrieben das
/httpdocs/ shop/templates/modi-art-wai/tpl_inc/header.tpl angepasst. Doch wo muss ich jetzt die css styles hinzufügen? Besten Dank für deine Hilfe.

 

[modi-art]

AW: Modi Art template: image in tap header

Hi,

Doch wo muss ich jetzt die css styles hinzufügen?

das kommt idealerweise in die custom.css, hier stehen ein paar Tipps:
DevBestPractices ? Modi-Art-WAI Template

Gruß David

 

[muelleco]

AW: Modi Art template: image in tap header

hmm sorry bin wahrscheinlich einwenig Begriffsstutzig
Habe nun das css zeugs ins custom gepackt. Doch irgendwo muss ich doch jetzt noch angeben das dieser speziefischer Reiter nun die klasse cssKlasseDesReiters hat??
Danke für deine Geduld

 

[modi-art]

AW: Modi Art template: image in tap header

Doch irgendwo muss ich doch jetzt noch angeben das dieser speziefischer Reiter nun die klasse cssKlasseDesReiters hat??

Was sagt denn Firebug, wenn du damit das <a>-Tag des Reiters markierst? Der Klassenname, der dort steht, muss anstelle "cssKlasseDesReiters" eingetragen werden.

Wenn du mit Firebug noch nicht viel erfahrung hast, solltest du das unbedingt nachholen. Das Tool ist meiner Meinung nach unverzichtbar wenn man selbst am Template rumschrauben will Tutorials und Hilfe zu Firebug findest du per Google-Suche haufenweise im Netz...

 

[muelleco]

AW: Modi Art template: image in tap header

Super Vielen Dank Firebug ist ja echt super.

Dennoch kriege ich das unschöne Verhalten meines Reiters nicht weg ... Schneidbox ... siehst du vielleicht gerade wo der Hund begraben ist?

 

[modi-art]

AW: Modi Art template: image in tap header

Super Vielen Dank Firebug ist ja echt super.

Dennoch kriege ich das unschöne Verhalten meines Reiters nicht weg ... Schneidbox ... siehst du vielleicht gerade wo der Hund begraben ist?

der background ist anscheinend noch falsch positioniert... kriegt man so in den griff (beispiel):
ersetze

background: url(meinReiterBild.png);

durch:

background: transparent url(meinReiterBild.png) left top no-repeat !important;

gruß und viel erfolg

 

[muelleco]

AW: Modi Art template: image in tap header

Super hat alles geklappt. Echt tolle Unterstützung die ihr da bietet.