Vorlage:TabMenu/Doku/TabFmtInfo/Hacks

aus Wikipedia, der freien Enzyklopädie
Zur Navigation springen Zur Suche springen

Dokumentation[Bearbeiten]
  Zweck und Überblick   Konzept und praktische Anwendung   Formatierung der Tabs   Technischer Hintergrund  
  Tabs oben   Tabs unten   Tabs oben und unten   Menüs verschachteln   Feineinstellungen   Hacks   Fehlersuche   Parameter  

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

[Quelltext 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:

  Tab1   Tab2   Tab3   Tab4   Tab5  

Ausgangsvorlage (ein Klick darauf führt zum Quellcode der Vorlage)

Tabrahmen-Hacks

[Quelltext bearbeiten]

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):

  Tab1   Tab2   Tab3   Tab4   Tab5  

Das ist ein Test.

Schiefes TabMenü

[Quelltext bearbeiten]

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:

  Tab1   Tab2   Tab3   Tab4   Tab5  

Das ist ein Test.

Siehe auch: Rotation




Maximale Breite des Menüs vorgeben

[Quelltext 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:

  Tab1   Tab2   Tab3   Tab4   Tab5  

Das ist ein Test.

  Tab1   Tab2   Tab3   Tab4   Tab5  

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.

Tabtitel-Hacks

[Quelltext bearbeiten]

Text mit Schatten

[Quelltext bearbeiten]

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):

  Tab1   Tab2   Tab3   Tab4   Tab5  

Das ist ein Test.

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):

  Tab1   Tab2   Tab3   Tab4   Tab5  

Das ist ein Test.

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):

  Tab1   Tab2   Tab3   Tab4   Tab5  

Das ist ein Test.

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ü:

  Tab1   Tab2   Tab3   Tab4   Tab5  

Das ist ein Test.

Textgröße anpassen

[Quelltext bearbeiten]

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):

  Tab1   Tab2   Tab3   Tab4   Tab5  

Das ist ein Test.

Im aktiven Tab unten einen Schatten erzeugen

[Quelltext 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:

  Tab1   Tab2   Tab3   Tab4   Tab5  

Das ist ein Test mit dieser Vorlage.

  Tab1   Tab2   Tab3   Tab4   Tab5  

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=FFFFFF }}

  Tab1   Tab2   Tab3   Tab4   Tab5  

Das ist ein Test mit dieser Vorlage.

  Tab1   Tab2   Tab3   Tab4   Tab5  

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

[Quelltext bearbeiten]
  Tab1   Tab2   Tab3   Tab4   Tab5  


Innerhalb der Vorlage erzeugen zwei Leerzeilen unter dem letzten Tab die große Tabhöhe. (ein Klick darauf führt zum Quellcode der Beispielvorlage)>

Siehe auch:

Zentriertes Menü umgeben von Text

[Quelltext 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
  Tab1   Tab2  

Das ist ein Test.

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

  Tabs oben   Tabs unten   Tabs oben und unten   Menüs verschachteln   Feineinstellungen   Hacks   Fehlersuche   Parameter  
  Zweck und Überblick   Konzept und praktische Anwendung   Formatierung der Tabs   Technischer Hintergrund