|
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
Bearbeiten
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
Parameter=Wert
gibst Du
Parameter=Wert; <Dein CSS-Code>
an, wobei das ; 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 ; 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:
Werden in der Ausgangsvorlage alle Vorkommen der Parameter...
PaFont = Arial | ActFont = Arial
...angepaßt zu...
PaFont = Arial; border-radius: 0px | ActFont = Arial; border-radius: 0px
...so hat dies folgenden Einfluss auf das TabMenü (alle Tabs eckig):
Wird in der Ausgangsvorlage der Parameter...
Margin = {{{Margin|5px}}}
...angepaßt zu...
Margin = {{{Margin|5px}}}; transform: skew(-10deg,-10deg)
...so hat dies folgenden Einfluss auf das Erscheinungsbild des TabMenüs:
Maximale Breite des Menüs vorgeben
Bearbeiten
Werden in der Ausgangsvorlage die Parameter...
Margin = {{{Margin|5px}}} | FrameWidth = {{{FrameWidth|100%}}}
...angepaßt zu...
Margin = {{{Margin|5px}}}; max-width: 50% | FrameWidth = {{{FrameWidth|0}}}
...so hat dies folgenden Einfluss auf das Erscheinungsbild des TabMenüs:
|
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.
|
|
Werden in der Ausgangsvorlage alle Vorkommen der Parameter...
PaFont = Arial
...angepaßt zu...
PaFont = Arial; text-shadow: 2px 2px 4px #000000
...so hat dies folgenden Einfluss auf das TabMenü (alle passiven Tab-Titel mit Schatten):
Werden in der Ausgangsvorlage alle Vorkommen der Parameter...
ActFont = Arial
...angepaßt zu...
ActFont = Arial; text-shadow: 2px 2px 4px #000000
...so hat dies folgenden Einfluss auf das TabMenü (alle aktiven Tab-Titel mit Schatten):
Wird auf der Seite, die die Ausgangsvorlage einbindet, der Parameter...
BgColor = FFFFFF
...angepaßt zu...
BgColor=FFFFFF; text-shadow: 2px 2px 4px #000000
...so hat dies folgenden Einfluss auf das TabMenü (aktiver Tab-Titel + Inhalt mit Schatten):
Wird auf der Seite, die die Ausgangsvorlage einbindet, der Parameter...
BgColor = FFFFFF
...angepaßt zu...
BgColor=FFFFFF; color: white; text-shadow: 2px 2px 4px #000000
...so hat dies folgenden Einfluss auf das TabMenü:
Werden in der Ausgangsvorlage alle Vorkommen der Parameter...
PaFont = Arial
...angepaßt zu...
PaFont = Arial; font-size: 300%
...so hat dies folgenden Einfluss auf das TabMenü (alle passiven Tab-Titel in 300% ihrer Standardgröße; ändere ActFont in gleicher Weise für den aktiven Tab):
Im aktiven Tab unten einen Schatten erzeugen
Bearbeiten
Bindet man ein TabMenü in folgender Weise ein...
<!-- BEGIN TABS --> {{Benutzer:DeinBenutzername/MyTabMenu | Position=Top | Tab2=Active | BgColor=FFFFFF }}
Das ist ein Test mit dieser Vorlage.
<!-- END OF TABS -->{{Benutzer:DeinBenutzername/MyTabMenu | Position=Bottom | Tab2=Active | BgColor=FFFFFF }}
...so ist das Problem im unteren Tab2 deutlich zu sehen:
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:
<!-- BEGIN TABS --> {{Benutzer:DeinBenutzername/MyTabMenu | Position=Top | Tab2=Active | BgColor=FFFFFF }}
Das ist ein Test mit dieser Vorlage.
<!-- END OF TABS -->{{Benutzer:DeinBenutzername/MyTabMenu | Position=Bottom | Tab2=Active | BgColor=transparent }}
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.
Doppelte Tabhöhe durch zwei Leerzeilen
Bearbeiten
Siehe auch:
Zentriertes Menü umgeben von Text
Bearbeiten
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...
'''Text darüber:''' Text Text Text...
{| align="left" width="35%"
| '''Text links:''' Text Text Text...
|}
{| align="right" width="35%"
|'''Text rechts:''' Text Text Text...
|}
<!-- BEGIN TABS --> {{Benutzer:MaxMustermann/MyTabMenu | Position=Top | Tab2=Active | BgColor=FFFFFF | Shadow=On | FrameWidth=25% | FrameAlign=center | Margin=0px | Padding=0px }}
Das ist ein Test.
<!-- END OF TABS -->{{TabMenu | Mode=EndTabMenu }}
'''Text darunter:''' Text Text Text...
...sodass sich das Menü wie folgt zentriert darstellen läßt, umgeben von Text:
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
| 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
|
| 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
|
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
| 