Widget:ColoredLinks: Unterschied zwischen den Versionen

Aus Stupidedia, der sinnfreien Enzyklopädie!
Wechseln zu: Navigation, Suche
K (Jo)
K
Zeile 8: Zeile 8:
 
Ein dritter Parameter <tt><nowiki>pseudoclass</nowiki></tt> muss mit einem Doppelpunkt beginnen und kann zur Notierung sogenannter Pseudoklassen genutzt werden. Bspw. sorgt <tt><nowiki>{{#widget:ColoredLinks|color=bla|pseudoclass=:hover}}</nowiki></tt> dafür, dass nur Links, über die man gerade mit der Maus fährt, eingefärbt werden.
 
Ein dritter Parameter <tt><nowiki>pseudoclass</nowiki></tt> muss mit einem Doppelpunkt beginnen und kann zur Notierung sogenannter Pseudoklassen genutzt werden. Bspw. sorgt <tt><nowiki>{{#widget:ColoredLinks|color=bla|pseudoclass=:hover}}</nowiki></tt> dafür, dass nur Links, über die man gerade mit der Maus fährt, eingefärbt werden.
  
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.
+
Die Links werden grundsätzlich nur im #mw-content-text, also in dem bearbeitbaren Seiteninhalt eingefärbt, das Interface bleibt unverändert.
 
</noinclude>
 
</noinclude>
 
<syntaxhighlight lang="css">
 
<syntaxhighlight lang="css">
 
<style type="text/css">
 
<style type="text/css">
#bodyContent <!--{$selector|regex_replace:'/[^#\.0-9a-zA-Z_:-]/':''|default:''}--> a<!--{$pseudoclass|regex_replace:'/(^[^:].+|[^a-zA-Z:])/':''}-->,
+
#mw-content-text <!--{$selector|regex_replace:'/[^#\.0-9a-zA-Z_:- ]/':''|default:''}--> a<!--{$pseudoclass|regex_replace:'/(^[^:].+|[^a-zA-Z:])/':''}-->,
#bodyContent <!--{$selector|regex_replace:'/[^#\.0-9a-zA-Z_:-]/':''|default:''}--> a.external<!--{$pseudoclass|regex_replace:'/(^[^:].+|[^a-zA-Z:])/':''}--> {
+
#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!]/':''}-->;
 
         color: <!--{$color|regex_replace:'/[^#0-9a-zA-Z!]/':''}-->;
 
}
 
}
 
</style>
 
</style>
 
</syntaxhighlight>
 
</syntaxhighlight>

Version vom 11. Juni 2013, 11:09 Uhr

Hiermit kann man alle Links auf einer Seite einfärben. Code: {{#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.

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

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