Widget:ColoredLinks: Unterschied zwischen den Versionen

Aus Stupidedia, der sinnfreien Enzyklopädie!
Wechseln zu: Navigation, Suche
K (Neu: "<style type="text/css">#bodyContent <!--{$selector|regex_replace:'/[^#\.0-9a-zA-Z_-]/':''|default:''}--> a { color: <!--{$color|regex_replace:'/[^#0-9a-zA-Z!]/':''}-->; }</style>")
 
(Markierung: Widget installiert)
 
(21 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
<style type="text/css">#bodyContent <!--{$selector|regex_replace:'/[^#\.0-9a-zA-Z_-]/':''|default:''}--> a { color: <!--{$color|regex_replace:'/[^#0-9a-zA-Z!]/':''}-->; }</style>
+
<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.
 +
 
 +
== 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.
 +
 
 +
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.
 +
 
 +
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