Quelltext der Seite Vorlage:TabMenu/Doku/TabFmtInfo/Hacks

{{Dokumentation/ruler}}

<div style="background:transparent; padding: 0 0.5em; border:solid 1px #AAAAAA;">

{{Überschriftensimulation|3|Text=Dokumentation<span class="mw-editsection plainlinks">&#x5b;[{{fullurl:{{SUBJECTPAGENAME}}|action=edit}} {{int:Editsection}}]&#x5d;</span>}}

<!-- BEGIN TABS -->   {{TabMenu/Doku/TMT/Main01       | Position=Top | TabFormat=Active | BgColor=F5F5F5 }}
<!-- BEGIN SubTABS -->{{TabMenu/Doku/TMT/MainTabFmt01 | Position=Top | TabHacks=Active  | BgColor=FFFFEC }}

Das Wort [[Hack]] hat mehrere Bedeutungen und kann für eine Funktionserweiterung oder Problemlösung stehen oder dafür, dass das Ziel auf eine ungewöhnliche Weise erreicht wird; oft im Kontext einer Zweckentfremdung. Im Quellcode eines Computerprogramms signalisiert das Wort, dass die Programmierer sich bewusst waren, dass die gefundene Lösung für ein Problem noch nicht ausgereift bzw. vom Standpunkt der Softwaretechnik her unbefriedigend ist.

Daran angelehnt behandelt dieses Kapitel Lösungen, die in der Vorlage nicht direkt implementiert sind, die jedoch beispielsweise durch trickreiche Ausnutzung der Parameter dennoch genutzt werden können oder die durch andere Mechanismen jenseits der Vorlage umgesetzt werden. Meistens sind diese Lösungen nicht elegant, aber sie funktionieren.

== (CSS-)Code Injection ==
Hierbei geht es darum, durch trickreiche Ausnutzung der Parameter beliebigen CSS-Code im TabMenü einzuschleusen, um die bestehenden Funktionalitäten nach Deinen eigenen Vorstellungen zu erweitern. Die Herausforderung besteht darin, den Code an der richtigen Stelle einzufügen. Darüber lassen sich dann alle Eigenschaften, die CSS bietet, auf das TabMenü (oder auf Teile des Menüs) anwenden.

Das zugrunde liegende Prinzip ist einfach. Statt
:<code>Parameter=Wert</code>
gibst Du
:<code>Parameter=Wert<span style="background:#FFF68F; font-size:larger;">''';'''</span> <span style="background:#FFF68F;"><Dein CSS-Code></span></code>
an, wobei das <code>;</code> nach dem Wert die ursprüngliche Anweisung abschließt, gefolgt von Deinem eigenen Code. Deine letzte Code-Anweisung hinter diesem Parameter sollte kein abschließendes <code>;</code> enthalten, da sonst innerhalb des TabMenüs ein unsauberer (aber dennoch funktionstüchtiger) Code erzeugt wird.

Die hier gezeigten Code-Injection-Hacks basieren auf der Anpassung der Parameter des folgenden TabMenüs:
{{Anker|CSSAusgangsvorlage}} <!-- BEGIN TABS -->{{TabMenu/Doku/TMT/FormatL01 | BgColor=FFFFFF | Shadow=On }}
[[Vorlage:TabMenu/Doku/TMT/FormatL01|Ausgangsvorlage]] (ein Klick darauf führt zum Quellcode der Vorlage)
<!-- END OF TABS -->{{TabMenu | Mode=EndTabMenu }}

=== Tabrahmen-Hacks ===
==== Eckige Tabs ====
Werden [[#CSSAusgangsvorlage|in der Ausgangsvorlage]] alle Vorkommen der Parameter...
:<code>PaFont = Arial | ActFont = Arial</code>
...angepaßt zu...
:<code>PaFont = Arial<span style="background:#FFF68F;">'''; border-radius: 0px'''</span> | ActFont = Arial<span style="background:#FFF68F;">'''; border-radius: 0px'''</span></code>
...so hat dies folgenden Einfluss auf das TabMenü (alle Tabs eckig):
<!-- BEGIN TABS -->{{TabMenu/Doku/TMT/FormatL01 | BgColor=FFFFFF | ActFont=Arial; border-radius: 0px | PaFont=Arial; border-radius: 0px | Tab2=Active | Shadow=On }}
Das ist ein Test.
<!-- END OF TABS -->{{TabMenu | Mode=EndTabMenu }}</div>

==== Schiefes TabMenü ====
Wird [[#CSSAusgangsvorlage|in der Ausgangsvorlage]] der Parameter...
:<code>Margin = <nowiki>{{{Margin|5px}}}</nowiki></code>
...angepaßt zu...
:<code>Margin = <nowiki>{{{Margin|5px}}}</nowiki><span style="background:#FFF68F;">'''; transform: skew(-10deg,-10deg)'''</span></code>
...so hat dies folgenden Einfluss auf das Erscheinungsbild des TabMenüs:
<!-- BEGIN TABS -->{{TabMenu/Doku/TMT/FormatL01 | BgColor=FFFFFF | Margin=5px; transform: skew(-10deg,-10deg) | Move=0px,-30px | FrameWidth=96% | Tab2=Active | Shadow=On }}
Das ist ein Test.
<!-- END OF TABS -->{{TabMenu | Mode=EndTabMenu }}</div>
{| align="right" width="15%"
| Siehe auch: [[Vorlage:TabMenu/Doku/TabFmtInfo/FineTuning#Schatten und Rotation|Rotation]]
|}
<br><br><br>

==== Maximale Breite des Menüs vorgeben ====
Werden [[#CSSAusgangsvorlage|in der Ausgangsvorlage]] die Parameter...
:<code>Margin = <nowiki>{{{Margin|5px}}}</nowiki> | FrameWidth = <nowiki>{{{FrameWidth|100%}}}</nowiki></code>
...angepaßt zu...
:<code>Margin = <nowiki>{{{Margin|5px}}}</nowiki><span style="background:#FFF68F;">'''; max-width: 50%'''</span> | FrameWidth = <nowiki>{{{FrameWidth|</nowiki><span style="background:#FFF68F;">'''0'''</span><nowiki>}}}</nowiki></code>
...so hat dies folgenden Einfluss auf das Erscheinungsbild des TabMenüs:
<!-- BEGIN TABS -->{{TabMenu/Doku/TMT/FormatL01 | BgColor=FFFFFF | Margin=5px; min-width: 150px; max-width: 50% | FrameWidth=0 | Tab2=Active | Shadow=On }}
Das ist ein Test.
<!-- END OF TABS -->{{TabMenu | Mode=EndTabMenu }}</div>
<!-- BEGIN TABS -->{{TabMenu/Doku/TMT/FormatL01 | BgColor=FFFFFF | Margin=5px; max-width: 50% | FrameWidth=0 | Tab2=Active | Shadow=On }}
Das ist ein Test. Das ist ein Test. Das ist ein Test. Das ist ein Test. Das ist ein Test. Das ist ein Test. Das ist ein Test. Das ist ein Test. Das ist ein Test.
<!-- END OF TABS -->{{TabMenu | Mode=EndTabMenu }}</div>

=== Tabtitel-Hacks ===
==== Text mit Schatten ====
Werden [[#CSSAusgangsvorlage|in der Ausgangsvorlage]] alle Vorkommen der Parameter...
:<code>PaFont = Arial</code>
...angepaßt zu...
:<code>PaFont = Arial<span style="background:#FFF68F;">'''; text-shadow: 2px 2px 4px #000000'''</span></code>
...so hat dies folgenden Einfluss auf das TabMenü (alle passiven Tab-Titel mit Schatten):
<!-- BEGIN TABS -->{{TabMenu/Doku/TMT/FormatL01 | BgColor=FFFFFF | PaFont=Arial; text-shadow: 2px 2px 4px #000000 | Tab2=Active | Shadow=On }}
Das ist ein Test.
<!-- END OF TABS -->{{TabMenu | Mode=EndTabMenu }}</div>

Werden [[#CSSAusgangsvorlage|in der Ausgangsvorlage]] alle Vorkommen der Parameter...
:<code>ActFont = Arial</code>
...angepaßt zu...
:<code>ActFont = Arial<span style="background:#FFF68F;">'''; text-shadow: 2px 2px 4px #000000'''</span></code>
...so hat dies folgenden Einfluss auf das TabMenü (alle aktiven Tab-Titel mit Schatten):
<!-- BEGIN TABS -->{{TabMenu/Doku/TMT/FormatL01 | BgColor=FFFFFF | ActFont=Arial; text-shadow: 2px 2px 4px #000000 | Tab2=Active | Shadow=On }}
Das ist ein Test.
<!-- END OF TABS -->{{TabMenu | Mode=EndTabMenu }}</div>

Wird auf der Seite, die [[#CSSAusgangsvorlage|die Ausgangsvorlage]] einbindet, der Parameter...
:<code>BgColor = FFFFFF</code>
...angepaßt zu...
:<code>BgColor=FFFFFF<span style="background:#FFF68F;">'''; text-shadow: 2px 2px 4px #000000'''</span></code>
...so hat dies folgenden Einfluss auf das TabMenü (aktiver Tab-Titel + Inhalt mit Schatten):
<!-- BEGIN TABS -->{{TabMenu/Doku/TMT/FormatL01 | BgColor=FFFFFF; text-shadow: 2px 2px 4px #000000 | Tab2=Active | Shadow=On }}
Das ist ein Test.
<!-- END OF TABS -->{{TabMenu | Mode=EndTabMenu }}</div>

Wird auf der Seite, die [[#CSSAusgangsvorlage|die Ausgangsvorlage]] einbindet, der Parameter...
:<code>BgColor = FFFFFF</code>
...angepaßt zu...
:<code>BgColor=FFFFFF<span style="background:#FFF68F;">'''; color: white; text-shadow: 2px 2px 4px #000000'''</span></code>
...so hat dies folgenden Einfluss auf das TabMenü:
<!-- BEGIN TABS -->{{TabMenu/Doku/TMT/FormatL01 | BgColor=FFFFFF; color: white; text-shadow: 2px 2px 4px #000000 | Tab2=Active | Shadow=On }}
Das ist ein Test.
<!-- END OF TABS -->{{TabMenu | Mode=EndTabMenu }}</div>

==== Textgröße anpassen ====
Werden [[#CSSAusgangsvorlage|in der Ausgangsvorlage]] alle Vorkommen der Parameter...
:<code>PaFont = Arial</code>
...angepaßt zu...
:<code>PaFont = Arial<span style="background:#FFF68F;">'''; font-size: 300%'''</span></code>
...so hat dies folgenden Einfluss auf das TabMenü (alle passiven Tab-Titel in 300% ihrer Standardgröße; ändere <code>ActFont</code> in gleicher Weise für den aktiven Tab):
<!-- BEGIN TABS -->{{TabMenu/Doku/TMT/FormatL01 | BgColor=FFFFFF | PaFont=Arial; font-size: 300% | Tab2=Active | Shadow=On | TabHeight=42 }}
Das ist ein Test.
<!-- END OF TABS -->{{TabMenu | Mode=EndTabMenu }}

== Im aktiven Tab unten einen Schatten erzeugen ==
<div style="background-color:#F5F5F5; padding: 0 1em ; border:solid 1px #000000;">
Bindet man ein TabMenü in folgender Weise ein...
<div style="font-family:Courier New; font-size:0.93em; background-color:#EEEED1; padding: 0 1em; border:solid 1px #000000; margin:10px">
<nowiki><!-- BEGIN TABS --> {{Benutzer:</nowiki>''DeinBenutzername''/'''MyTabMenu''' | Position='''Top''' | ''Tab2''=Active | BgColor=[[Hilfe:Farbtabelle#Sechsstellige Farbcodes|FFFFFF]] <nowiki>}}</nowiki>

Das ist ein Test mit [[Vorlage:TabMenu/Doku/TMT/FormatL01|dieser Vorlage]].

<nowiki><!-- END OF TABS -->{{Benutzer:</nowiki>''DeinBenutzername''/'''MyTabMenu''' | Position='''Bottom''' | ''Tab2''<nowiki>=Active | BgColor=FFFFFF }}</nowiki>
</div></div>
...so ist das Problem im unteren Tab2 deutlich zu sehen:
<!-- BEGIN TABS --> {{TabMenu/Doku/TMT/FormatL01 | Position=Top | Tab2=Active | BgColor=FFFFFF }}
Das ist ein Test mit [[Vorlage:TabMenu/Doku/TMT/FormatL01|dieser Vorlage]].
<!-- END OF TABS -->{{TabMenu/Doku/TMT/FormatL01 | Position=Bottom | Tab2=Active | BgColor=FFFFFF }}
Der untere Tab2 erhält keinen Schatten wie der obere Tab2, der durch den Schatten plastisch abgerundet wirkt. Technisch liegt das daran, dass der untere Tab2 den Schatten übermalt. Es gibt keine Möglichkeit, diesen Effekt rückgängig zu machen oder ihn beispielsweise durch Ebenen-Zeichnung zu umgehen (z-index); zumindest waren die bisherigen Versuche erfolglos.

Wie es dennoch geht, zeigt dieser Hack:
<div style="font-family:Courier New; font-size:0.93em; background:#EEEED1; padding: 0 1em; border:solid 1px #000000; margin:10px">
<nowiki><!-- BEGIN TABS --> {{Benutzer:</nowiki>''DeinBenutzername''/'''MyTabMenu''' | Position='''Top''' | ''Tab2''=Active | BgColor=[[Hilfe:Farbtabelle#Sechsstellige Farbcodes|FFFFFF]] <nowiki>}}</nowiki>

Das ist ein Test mit [[Vorlage:TabMenu/Doku/TMT/FormatL01|dieser Vorlage]].

<nowiki><!-- END OF TABS -->{{Benutzer:</nowiki>''DeinBenutzername''/'''MyTabMenu''' | Position='''Bottom''' | ''Tab2''<nowiki>=Active | </nowiki><span style="background:#FFF68F;">BgColor='''transparent'''</span><nowiki> }}</nowiki>
</div></div>
<!-- BEGIN TABS --> {{TabMenu/Doku/TMT/FormatL01 | Position=Top | Tab2=Active | BgColor=FFFFFF }}
Das ist ein Test mit [[Vorlage:TabMenu/Doku/TMT/FormatL01|dieser Vorlage]].
<!-- END OF TABS -->{{TabMenu/Doku/TMT/FormatL01 | Position=Bottom | Tab2=Active | BgColor=transparet }}
Der untere Tab überzeichnet den Schatten nun nicht mehr, weshalb er sichtbar bleibt. Dieser Hack löst das Problem jedoch nicht grundlegend; er funktioniert nur bei einem entsprechend geeignetem hellen Hintergrund.
</div>

== Doppelte Tabhöhe durch zwei Leerzeilen ==
<!-- BEGIN TABS -->{{TabMenu/Doku/TMT/FormatB01D2 | Tab2=Active | BgColor=FFFFFF | Shadow=On }}
[[Vorlage:TabMenu/Doku/TMT/FormatB01D|Innerhalb der Vorlage erzeugen zwei Leerzeilen unter dem letzten Tab die große Tabhöhe.]] (ein Klick darauf führt zum Quellcode der Beispielvorlage)>
<!-- END OF TABS -->{{TabMenu | Mode=EndTabMenu }}</div>

Siehe auch:
* „[[Vorlage:TabMenu/Doku/TabFmtInfo/Troubleshooting#Einen Zeilenumbruch im Tab-Namen vermeiden (ungewollt hohe Tabs wieder klein machen)|Einen Zeilenumbruch im Tab-Namen vermeiden (ungewollt hohe Tabs wieder klein machen)]]“
* „[[Vorlage:TabMenu/Doku/TabFmtInfo#Tabhöhe|Tabhöhe]]“

== Zentriertes Menü umgeben von Text ==
Die folgende Ausgabe wird mit Standard-(HTML-)Mitteln erzeugt, die nicht in der Vorlage selbst implementiert sind. Hier geht es darum, Textblöcke separat zu definieren, die über, vor, hinter und unter dem Menü stehen sollen...

<div style="font-family:Courier New; font-size:0.93em; background-color:#EEEED1; padding: 0em 1em 0em 1em; border:solid 1px #000000; margin:20px;">
<nowiki>'''Text darüber:''' Text Text Text...</nowiki>
<br><nowiki>{| align="left" width="35%"</nowiki>
<br><nowiki>| '''Text links:''' Text Text Text...</nowiki>
<br><nowiki>|}</nowiki>
<br><nowiki>{| align="right" width="35%"</nowiki>
<br><nowiki>|'''Text rechts:''' Text Text Text...</nowiki>
<br><nowiki>|}</nowiki>
<br><nowiki><!-- BEGIN TABS --> {{Benutzer:MaxMustermann/MyTabMenu | Position=Top | Tab2=Active | </nowiki>BgColor=[[Hilfe:Farbtabelle#Sechsstellige Farbcodes|FFFFFF]]<nowiki> | Shadow=On | FrameWidth=25% | FrameAlign=center | Margin=0px | Padding=0px }}</nowiki>
<br>Das ist ein Test.
<br><nowiki><!-- END OF TABS -->{{TabMenu | Mode=EndTabMenu }}</nowiki>
<br><nowiki>'''Text darunter:''' Text Text Text...</nowiki>
</div>

...sodass sich das Menü wie folgt zentriert darstellen läßt, umgeben von Text:

<div style="font-family:Courier New; font-size:0.93em; background:#EEEED1; border:solid 1px #000000; box-shadow: 0 0 16px #808080; margin:20px;">
'''Text darüber:''' Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
{| align="left" width="35%"
| '''Text links:''' Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
|}
{| align="right" width="35%"
|'''Text rechts:''' Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
|}
<!-- BEGIN TABS -->{{Vorlage:TabMenu/Doku/TMT/Top01 | Tab2=Active | BgColor=FFFFFF | Shadow=On | FrameWidth=25% | FrameAlign=center | Margin=0px | Padding=0px | TabHeight=0 }}
Das ist ein Test.
<!-- END OF TABS -->{{TabMenu | Mode=EndTabMenu }}</div>
'''Text darunter:''' Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
</div>
<!-- END OF SubTABS -->{{TabMenu/Doku/TMT/MainTabFmt01 | Position=Bottom | TabHacks=Active  | BgColor=FFFFEC | Shadow=Off }}
<!-- END OF TABS    -->{{TabMenu/Doku/TMT/Main01       | Position=Bottom | TabFormat=Active | BgColor=transparent }}
<br/></div>

{{Dokumentation/ruler}}