Widget:ColoredLinks: Unterschied zwischen den Versionen

Aus Stupidedia, der sinnfreien Enzyklopädie!
Wechseln zu: Navigation, Suche
K
(Markierung: Widget installiert)
 
(20 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
<noinclude>
+
<noinclude>Hiermit kann man alle Links auf einer Seite einfärben. Benutzt werden darf dieses Ding auf allen Seiten inkl. Artikeln, falls es an der Stelle Sinn macht.
Hiermit kann man alle Links auf einer Seite einfärben. Code: <tt><nowiki>{{#widget:ColoredLinks|color=bla}}</nowiki></tt><br />
 
Anstelle von bla kann man einen Farbnamen oder einen Farbwert eingeben, siehe auch die [[Hilfe:Farbtabelle|Farbtabelle]]. Hängt man dahinter <tt><nowiki>!important</nowiki></tt> an, gilt der Befehl auch für externe Links.
 
  
Es gibt noch einen zweiten Parameter namens selector. Damit kann man ein oder mehrere Elemente innerhalb des Seiteninhalt anhand ihrer ID, ihrer Klasse oder ihres Tagnamens eingrenzen. Beispiel: <tt><nowiki>{{#widget:ColoredLinks|color=bla|selector=#blubb}}</nowiki></tt><br />
+
== Anwendung ==
 +
<code><nowiki>{{#widget:ColoredLinks|color=bla}}</nowiki></code><br />
 +
Anstelle von bla kann man einen Farbnamen oder einen Farbwert eingeben, siehe auch die [[Stupidedia:Farbtabelle|Farbtabelle]].
 +
 
 +
Es gibt noch einen zweiten Parameter namens <code><nowiki>selector</nowiki></code>. Damit kann man ein oder mehrere Elemente innerhalb des Seiteninhalt anhand ihrer ID, ihrer Klasse oder ihres Tagnamens eingrenzen. Beispiel: <code><nowiki>{{#widget:ColoredLinks|color=bla|selector=#blubb}}</nowiki></code><br />
 
Damit werden nur Links eingefärbt, die sich innerhalb eines Elements mit der ID blubb befinden.
 
Damit werden nur Links eingefärbt, die sich innerhalb eines Elements mit der ID blubb befinden.
  
Die Links werden grundsätzlich nur im #bodyContent, also in dem großen Bereich neben der Sidebar, unter der Sitenotice und über dem Footer eingefärbt, das Interface bleibt unverändert.
+
Ein dritter Parameter <code><nowiki>pseudoclass</nowiki></code> muss mit einem Doppelpunkt beginnen und kann zur Notierung sogenannter Pseudoklassen genutzt werden. Bspw. sorgt <code><nowiki>{{#widget:ColoredLinks|color=bla|pseudoclass=:hover}}</nowiki></code> dafür, dass nur Links, über die man gerade mit der Maus fährt, eingefärbt werden.
</noinclude>
+
 
<includeonly><style type="text/css">#bodyContent <!--{$selector|regex_replace:'/[^#\.0-9a-zA-Z_-]/':''|default:''}--> a { color: <!--{$color|regex_replace:'/[^#0-9a-zA-Z!]/':''}-->; }</style></includeonly>
+
Für flexiblere Einfärbungen kann das [[Widget:CSS]] verwendet werden.
 +
 
 +
Die Links werden grundsätzlich nur im #mw-content-text, also in dem bearbeitbaren Seiteninhalt eingefärbt, das Interface bleibt unverändert.
 +
 
 +
== Code ==
 +
</noinclude><syntaxhighlight lang="css">
 +
<style type="text/css">
 +
div#mw-content-text <!--{$selector|regex_replace:'/[^#\.0-9a-zA-Z_:\- ]/':''|default:''}--> a<!--{$pseudoclass|regex_replace:'/(^[^:].+|[^a-zA-Z:])/':''}-->,
 +
div#mw-content-text <!--{$selector|regex_replace:'/[^#\.0-9a-zA-Z_:\- ]/':''|default:''}--> a.external<!--{$pseudoclass|regex_replace:'/(^[^:].+|[^a-zA-Z:])/':''}--> {
 +
    color: <!--{$color|regex_replace:'/[^#0-9a-zA-Z!]/':''}-->;
 +
}
 +
</style>
 +
</syntaxhighlight>

Aktuelle Version vom 20. März 2014, 00:41 Uhr

Hiermit kann man alle Links auf einer Seite einfärben. Benutzt werden darf dieses Ding auf allen Seiten inkl. Artikeln, falls es an der Stelle Sinn macht.

Anwendung

{{#widget:ColoredLinks|color=bla}}
Anstelle von bla kann man einen Farbnamen oder einen Farbwert eingeben, siehe auch die Farbtabelle.

Es gibt noch einen zweiten Parameter namens selector. Damit kann man ein oder mehrere Elemente innerhalb des Seiteninhalt anhand ihrer ID, ihrer Klasse oder ihres Tagnamens eingrenzen. Beispiel: {{#widget:ColoredLinks|color=bla|selector=#blubb}}
Damit werden nur Links eingefärbt, die sich innerhalb eines Elements mit der ID blubb befinden.

Ein dritter Parameter pseudoclass muss mit einem Doppelpunkt beginnen und kann zur Notierung sogenannter Pseudoklassen genutzt werden. Bspw. sorgt {{#widget:ColoredLinks|color=bla|pseudoclass=:hover}} dafür, dass nur Links, über die man gerade mit der Maus fährt, eingefärbt werden.

Für flexiblere Einfärbungen kann das Widget:CSS verwendet werden.

Die Links werden grundsätzlich nur im #mw-content-text, also in dem bearbeitbaren Seiteninhalt eingefärbt, das Interface bleibt unverändert.

Code

<style type="text/css">
div#mw-content-text <!--{$selector|regex_replace:'/[^#\.0-9a-zA-Z_:\- ]/':''|default:''}--> a<!--{$pseudoclass|regex_replace:'/(^[^:].+|[^a-zA-Z:])/':''}-->,
div#mw-content-text <!--{$selector|regex_replace:'/[^#\.0-9a-zA-Z_:\- ]/':''|default:''}--> a.external<!--{$pseudoclass|regex_replace:'/(^[^:].+|[^a-zA-Z:])/':''}--> {
    color: <!--{$color|regex_replace:'/[^#0-9a-zA-Z!]/':''}-->;
}
</style>

Linktipps: Faditiva und 3DPresso