Vorlage:Farbe: Unterschied zwischen den Versionen

Version vom 2. November 2018, 13:23 Uhr

Die Vorlage Farbe gibt dir eine Farbe aus dem ZUM-Farbschema zurück. Bitte verwende wenn möglich Farben mit Bedeutung, da sie leichter zu pflegen sind.

Es gibt sowohl Farbnamen mit Bedeutung als auch das vollständige Farbschema. Die Vorlage verwendet bis zu 2 Parameter. Der erste Parameter ist der Farbname, der zweite kann verwendet werden um hellere oder dunklere Töne zu erhalten.

Farben mit Bedeutung sollten, wenn möglich, nicht mit Helligkeitsangaben modifiziert werden.

Farbnamen mit Bedeutung: Hervorhebung1, Frage, Lernpfad, Hervorhebung2, Merksatz, Üben, Arbeitsmethode, Unterrichtsidee, Experimentieren, Arbeitsmethode, Unterrichtsidee, Experimentieren, Meinung, Lösung, Download, Kurzinfo, Zitat
Farbnamen aus dem Farbschema: primär, sekundär-1, sekundär-2, komplementär, orange, grün, grau
Helligkeitsangaben: heller, hell, dunkel, dunkler

Beispiele

einfache Farbe mit Bedeutung

 {{Farbe|Merksatz}}

#C64285

einfache Farbe aus Schema mit Helligkeitsangabe

 {{Farbe|komplementär|heller}}

#A592D7

Verwendung über CSS-Klasse für Farbe mit Bedeutung

 <span class="zum-farbe-Merksatz">Text in Farbe ''Merksatz''</span>

Text in Farbe Merksatz

Verwendung über CSS-Klasse zum Icon Färben

 <span class="zum-farbe-Merksatz brainy hdg-school uk-icon-large"></span>

Farbtabellen

Farben mit Bedeutung

Hervorhebung1	#F1D850 `{{Farbe \|Hervorhebung1}}`	Frage	#F1D850 `{{Farbe \|Frage}}`
Lernpfad	#F1D850 `{{Farbe \|Lernpfad}}`	Hervorhebung2	#C64285 `{{Farbe \|Hervorhebung2}}`
Merksatz	#C64285 `{{Farbe \|Merksatz}}`	Üben	#338894 `{{Farbe \|Üben}}`
Arbeitsmethode	#5E43A5 `{{Farbe \|Arbeitsmethode}}`	Unterrichtsidee	#A8DF4A `{{Farbe \|Unterrichtsidee}}`
Experimentieren	#A8DF4A `{{Farbe \|Experimentieren}}`	Meinung	#DBDBDB `{{Farbe \|Meinung}}`
Lösung	#DBDBDB `{{Farbe \|Lösung}}`	Download	#DBDBDB `{{Farbe \|Download}}`
Kurzinfo	#DBDBDB `{{Farbe \|Kurzinfo}}`	Zitat	#a0a0a0 `{{Farbe \|Zitat}}`

Farbschema

primär	#FFF0A2 `{{Farbe \|primär \|heller}}`	#FFEA77 `{{Farbe \|primär \|hell}}`	#F1D850 `{{Farbe \|primär}}`	#DEC229 `{{Farbe \|primär \|dunkel}}`	#AF9612 `{{Farbe \|primär \|dunkler}}`
sekundär-1	#E994BF `{{Farbe \|sekundär-1 \|heller}}`	#D965A0 `{{Farbe \|sekundär-1 \|hell}}`	#C64285 `{{Farbe \|sekundär-1}}`	#B6226D `{{Farbe \|sekundär-1 \|dunkel}}`	#900F50 `{{Farbe \|sekundär-1 \|dunkler}}`
sekundär-2	#85C5CF `{{Farbe \|sekundär-2 \|heller}}`	#52A1AD `{{Farbe \|sekundär-2 \|hell}}`	#338894 `{{Farbe \|sekundär-2}}`	#1B7A88 `{{Farbe \|sekundär-2 \|dunkel}}`	#0D5F6B `{{Farbe \|sekundär-2 \|dunkler}}`
komplementär	#A592D7 `{{Farbe \|komplementär \|heller}}`	#7B63BC `{{Farbe \|komplementär \|hell}}`	#5E43A5 `{{Farbe \|komplementär}}`	#482998 `{{Farbe \|komplementär \|dunkel}}`	#331878 `{{Farbe \|komplementär \|dunkler}}`
orange	#FFCEA2 `{{Farbe \|orange \|heller}}`	#FFB877 `{{Farbe \|orange \|hell}}`	#F19D50 `{{Farbe \|orange}}`	#DD7F28 `{{Farbe \|orange \|dunkel}}`	#AE5D12 `{{Farbe \|orange \|dunkler}}`
grün	#D4F69C `{{Farbe \|grün \|heller}}`	#C0EF6F `{{Farbe \|grün \|hell}}`	#A8DF4A `{{Farbe \|grün}}`	#8FCD25 `{{Farbe \|grün \|dunkel}}`	#6CA111 `{{Farbe \|grün \|dunkler}}`
links	#0077dd `{{Farbe \|links \|heller}}`	#0077dd `{{Farbe \|links \|hell}}`	#0077dd `{{Farbe \|links}}`	#005599 `{{Farbe \|links \|dunkel}}`	#005599 `{{Farbe \|links \|dunkler}}`
grau	#F1F1F1 `{{Farbe \|grau \|heller}}`	#ececec `{{Farbe \|grau \|hell}}`	#DBDBDB `{{Farbe \|grau}}`	#C8C8C8 `{{Farbe \|grau \|dunkel}}`	#a0a0a0 `{{Farbe \|grau \|dunkler}}`

CSS Code for Common.css

/* Bedeutungsfarben */
.zum-farbe-Hervorhebung1   { color:#F1D850; }
.zum-farbe-Frage           { color:#F1D850; }
.zum-farbe-Lernpfad        { color:#F1D850; }
.zum-farbe-Hervorhebung2   { color:#C64285; }
.zum-farbe-Merksatz        { color:#C64285; }
.zum-farbe-Ueben           { color:#338894; }
.zum-farbe-Arbeitsmethode  { color:#5E43A5; }
.zum-farbe-Unterrichtsidee { color:#A8DF4A; }
.zum-farbe-Experimentieren { color:#A8DF4A; }
.zum-farbe-Arbeitsmethode  { color:#5E43A5; }
.zum-farbe-Unterrichtsidee { color:#A8DF4A; }
.zum-farbe-Experimentieren { color:#A8DF4A; }
.zum-farbe-Meinung         { color:#DBDBDB; }
.zum-farbe-Loesung         { color:#DBDBDB; }
.zum-farbe-Download        { color:#DBDBDB; }
.zum-farbe-Kurzinfo        { color:#DBDBDB; }
.zum-farbe-Zitat           { color:#a0a0a0; }

.zum-hintergrund-Hervorhebung1   { background-color:#F1D850; }
.zum-hintergrund-Frage           { background-color:#F1D850; }
.zum-hintergrund-Lernpfad        { background-color:#F1D850; }
.zum-hintergrund-Hervorhebung2   { background-color:#C64285; }
.zum-hintergrund-Merksatz        { background-color:#C64285; }
.zum-hintergrund-Ueben           { background-color:#338894; }
.zum-hintergrund-Arbeitsmethode  { background-color:#5E43A5; }
.zum-hintergrund-Unterrichtsidee { background-color:#A8DF4A; }
.zum-hintergrund-Experimentieren { background-color:#A8DF4A; }
.zum-hintergrund-Arbeitsmethode  { background-color:#5E43A5; }
.zum-hintergrund-Unterrichtsidee { background-color:#A8DF4A; }
.zum-hintergrund-Experimentieren { background-color:#A8DF4A; }
.zum-hintergrund-Meinung         { background-color:#DBDBDB; }
.zum-hintergrund-Loesung         { background-color:#DBDBDB; }
.zum-hintergrund-Download        { background-color:#DBDBDB; }
.zum-hintergrund-Kurzinfo        { background-color:#DBDBDB; }
.zum-hintergrund-Zitat           { background-color:#a0a0a0; }  


/* komplettes Farbschema */
.zum-farbe-primaer                           { color: #F1D850; }
.zum-farbe-primaer.zum-farbe-heller          { color: #FFF0A2; }
.zum-farbe-primaer.zum-farbe-hell            { color: #FFEA77; }
.zum-farbe-primaer.zum-farbe-dunkel          { color: #DEC229; }
.zum-farbe-primaer.zum-farbe-dunkler         { color: #AF9612; }
.zum-farbe-sekundaer-1                       { color: #F1D850; }
.zum-farbe-sekundaer-1.zum-farbe-heller      { color: #FFF0A2; }
.zum-farbe-sekundaer-1.zum-farbe-hell        { color: #FFEA77; }
.zum-farbe-sekundaer-1.zum-farbe-dunkel      { color: #DEC229; }
.zum-farbe-sekundaer-1.zum-farbe-dunkler     { color: #AF9612; }
.zum-farbe-sekundaer-2                       { color: #F1D850; }
.zum-farbe-sekundaer-2.zum-farbe-heller      { color: #FFF0A2; }
.zum-farbe-sekundaer-2.zum-farbe-hell        { color: #FFEA77; }
.zum-farbe-sekundaer-2.zum-farbe-dunkel      { color: #DEC229; }
.zum-farbe-sekundaer-2.zum-farbe-dunkler     { color: #AF9612; }
.zum-farbe-komplementaer-1                   { color: #F1D850; }
.zum-farbe-komplementaer-1.zum-farbe-heller  { color: #FFF0A2; }
.zum-farbe-komplementaer-1.zum-farbe-hell    { color: #FFEA77; }
.zum-farbe-komplementaer-1.zum-farbe-dunkel  { color: #DEC229; }
.zum-farbe-komplementaer-1.zum-farbe-dunkler { color: #AF9612; }
.zum-farbe-orange-1                          { color: #F19D50; }
.zum-farbe-orange-1.zum-farbe-heller         { color: #FFCEA2; }
.zum-farbe-orange-1.zum-farbe-hell           { color: #FFB877; }
.zum-farbe-orange-1.zum-farbe-dunkel         { color: #DD7F28; }
.zum-farbe-orange-1.zum-farbe-dunkler        { color: #AE5D12; }
.zum-farbe-gruen                             { color: #F1D850; }
.zum-farbe-gruen.zum-farbe-heller            { color: #FFF0A2; }
.zum-farbe-gruen.zum-farbe-hell              { color: #FFEA77; }
.zum-farbe-gruen.zum-farbe-dunkel            { color: #DEC229; }
.zum-farbe-gruen.zum-farbe-dunkler           { color: #AF9612; }
.zum-farbe-grau                              { color: #DBDBDB; }
.zum-farbe-grau.zum-farbe-heller             { color: #F1F1F1; }
.zum-farbe-grau.zum-farbe-hell               { color: #ececec; }
.zum-farbe-grau.zum-farbe-dunkel             { color: #C8C8C8; }
.zum-farbe-grau.zum-farbe-dunkler            { color: #a0a0a0; }

.zum-hintergrund-primaer                           { background-color: #F1D850; }
.zum-hintergrund-primaer.zum-farbe-heller          { background-color: #FFF0A2; }
.zum-hintergrund-primaer.zum-farbe-hell            { background-color: #FFEA77; }
.zum-hintergrund-primaer.zum-farbe-dunkel          { background-color: #DEC229; }
.zum-hintergrund-primaer.zum-farbe-dunkler         { background-color: #AF9612; }
.zum-hintergrund-sekundaer-1                       { background-color: #F1D850; }
.zum-hintergrund-sekundaer-1.zum-farbe-heller      { background-color: #FFF0A2; }
.zum-hintergrund-sekundaer-1.zum-farbe-hell        { background-color: #FFEA77; }
.zum-hintergrund-sekundaer-1.zum-farbe-dunkel      { background-color: #DEC229; }
.zum-hintergrund-sekundaer-1.zum-farbe-dunkler     { background-color: #AF9612; }
.zum-hintergrund-sekundaer-2                       { background-color: #F1D850; }
.zum-hintergrund-sekundaer-2.zum-farbe-heller      { background-color: #FFF0A2; }
.zum-hintergrund-sekundaer-2.zum-farbe-hell        { background-color: #FFEA77; }
.zum-hintergrund-sekundaer-2.zum-farbe-dunkel      { background-color: #DEC229; }
.zum-hintergrund-sekundaer-2.zum-farbe-dunkler     { background-color: #AF9612; }
.zum-hintergrund-komplementaer-1                   { background-color: #F1D850; }
.zum-hintergrund-komplementaer-1.zum-farbe-heller  { background-color: #FFF0A2; }
.zum-hintergrund-komplementaer-1.zum-farbe-hell    { background-color: #FFEA77; }
.zum-hintergrund-komplementaer-1.zum-farbe-dunkel  { background-color: #DEC229; }
.zum-hintergrund-komplementaer-1.zum-farbe-dunkler { background-color: #AF9612; }
.zum-hintergrund-orange-1                          { background-color: #F19D50; }
.zum-hintergrund-orange-1.zum-farbe-heller         { background-color: #FFCEA2; }
.zum-hintergrund-orange-1.zum-farbe-hell           { background-color: #FFB877; }
.zum-hintergrund-orange-1.zum-farbe-dunkel         { background-color: #DD7F28; }
.zum-hintergrund-orange-1.zum-farbe-dunkler        { background-color: #AE5D12; }
.zum-hintergrund-gruen                             { background-color: #F1D850; }
.zum-hintergrund-gruen.zum-farbe-heller            { background-color: #FFF0A2; }
.zum-hintergrund-gruen.zum-farbe-hell              { background-color: #FFEA77; }
.zum-hintergrund-gruen.zum-farbe-dunkel            { background-color: #DEC229; }
.zum-hintergrund-gruen.zum-farbe-dunkler           { background-color: #AF9612; }
.zum-hintergrund-grau                              { background-color: #DBDBDB; }
.zum-hintergrund-grau.zum-farbe-heller             { background-color: #F1F1F1; }
.zum-hintergrund-grau.zum-farbe-hell               { background-color: #ececec; }
.zum-hintergrund-grau.zum-farbe-dunkel             { background-color: #C8C8C8; }
.zum-hintergrund-grau.zum-farbe-dunkler            { background-color: #a0a0a0; }

/* overrides 
 * uses mediawiki parent selector to establish override
 */
.mediawiki .box.hervorhebung1   { border-left-color:#F1D850; }
.mediawiki .box.frage           { border-left-color:#F1D850; }
.mediawiki .box.lernpfad        { border-left-color:#F1D850; }
.mediawiki .box.hervorhebung2   { border-left-color:#C64285; }
.mediawiki .box.merksatz        { border-left-color:#C64285; }
.mediawiki .box.ueben           { border-left-color:#338894; }
.mediawiki .box.arbeitsmethode  { border-left-color:#5E43A5; }
.mediawiki .box.unterrichtsidee { border-left-color:#A8DF4A; }
.mediawiki .box.experimentieren { border-left-color:#A8DF4A; }
.mediawiki .box.arbeitsmethode  { border-left-color:#5E43A5; }
.mediawiki .box.unterrichtsidee { border-left-color:#A8DF4A; }
.mediawiki .box.experimentieren { border-left-color:#A8DF4A; }
.mediawiki .box.meinung         { border-left-color:#DBDBDB; }
.mediawiki .box.loesung         { border-left-color:#DBDBDB; }
.mediawiki .box.download        { border-left-color:#DBDBDB; }
.mediawiki .box.kurzinfo        { border-left-color:#DBDBDB; }
.mediawiki .box.zitat           { border-left-color:#a0a0a0; }

@@ Zeile 282: / Zeile 282: @@
    * uses mediawiki parent selector to establish override
    */
-  mediawiki .box.hervorhebung1   { border-left-color:{{Farbe|Hervorhebung1   }}; }
+  .mediawiki .box.hervorhebung1   { border-left-color:{{Farbe|Hervorhebung1   }}; }
-  mediawiki .box.frage           { border-left-color:{{Farbe|Frage           }}; }
+  .mediawiki .box.frage           { border-left-color:{{Farbe|Frage           }}; }
-  mediawiki .box.lernpfad        { border-left-color:{{Farbe|Lernpfad        }}; }
+  .mediawiki .box.lernpfad        { border-left-color:{{Farbe|Lernpfad        }}; }
-  mediawiki .box.hervorhebung2   { border-left-color:{{Farbe|Hervorhebung2   }}; }
+  .mediawiki .box.hervorhebung2   { border-left-color:{{Farbe|Hervorhebung2   }}; }
-  mediawiki .box.merksatz        { border-left-color:{{Farbe|Merksatz        }}; }
+  .mediawiki .box.merksatz        { border-left-color:{{Farbe|Merksatz        }}; }
-  mediawiki .box.ueben           { border-left-color:{{Farbe|Üben            }}; }
+  .mediawiki .box.ueben           { border-left-color:{{Farbe|Üben            }}; }
-  mediawiki .box.arbeitsmethode  { border-left-color:{{Farbe|Arbeitsmethode  }}; }
+  .mediawiki .box.arbeitsmethode  { border-left-color:{{Farbe|Arbeitsmethode  }}; }
-  mediawiki .box.unterrichtsidee { border-left-color:{{Farbe|Unterrichtsidee }}; }
+  .mediawiki .box.unterrichtsidee { border-left-color:{{Farbe|Unterrichtsidee }}; }
-  mediawiki .box.experimentieren { border-left-color:{{Farbe|Experimentieren }}; }
+  .mediawiki .box.experimentieren { border-left-color:{{Farbe|Experimentieren }}; }
-  mediawiki .box.arbeitsmethode  { border-left-color:{{Farbe|Arbeitsmethode  }}; }
+  .mediawiki .box.arbeitsmethode  { border-left-color:{{Farbe|Arbeitsmethode  }}; }
-  mediawiki .box.unterrichtsidee { border-left-color:{{Farbe|Unterrichtsidee }}; }
+  .mediawiki .box.unterrichtsidee { border-left-color:{{Farbe|Unterrichtsidee }}; }
-  mediawiki .box.experimentieren { border-left-color:{{Farbe|Experimentieren }}; }
+  .mediawiki .box.experimentieren { border-left-color:{{Farbe|Experimentieren }}; }
-  mediawiki .box.meinung         { border-left-color:{{Farbe|Meinung         }}; }
+  .mediawiki .box.meinung         { border-left-color:{{Farbe|Meinung         }}; }
-  mediawiki .box.loesung         { border-left-color:{{Farbe|Lösung          }}; }
+  .mediawiki .box.loesung         { border-left-color:{{Farbe|Lösung          }}; }
-  mediawiki .box.download        { border-left-color:{{Farbe|Download        }}; }
+  .mediawiki .box.download        { border-left-color:{{Farbe|Download        }}; }
-  mediawiki .box.kurzinfo        { border-left-color:{{Farbe|Kurzinfo        }}; }
+  .mediawiki .box.kurzinfo        { border-left-color:{{Farbe|Kurzinfo        }}; }
-  mediawiki .box.zitat           { border-left-color:{{Farbe|Zitat           }}; }
+  .mediawiki .box.zitat           { border-left-color:{{Farbe|Zitat           }}; }
 </noinclude>

primär	#FFF0A2 `{{Farbe \|primär \|heller}}`	#FFEA77 `{{Farbe \|primär \|hell}}`	#F1D850 `{{Farbe \|primär}}`	#DEC229 `{{Farbe \|primär \|dunkel}}`	#AF9612 `{{Farbe \|primär \|dunkler}}`
sekundär-1	#E994BF `{{Farbe \|sekundär-1 \|heller}}`	#D965A0 `{{Farbe \|sekundär-1 \|hell}}`	#C64285 `{{Farbe \|sekundär-1}}`	#B6226D `{{Farbe \|sekundär-1 \|dunkel}}`	#900F50 `{{Farbe \|sekundär-1 \|dunkler}}`
sekundär-2	#85C5CF `{{Farbe \|sekundär-2 \|heller}}`	#52A1AD `{{Farbe \|sekundär-2 \|hell}}`	#338894 `{{Farbe \|sekundär-2}}`	#1B7A88 `{{Farbe \|sekundär-2 \|dunkel}}`	#0D5F6B `{{Farbe \|sekundär-2 \|dunkler}}`
komplementär	#A592D7 `{{Farbe \|komplementär \|heller}}`	#7B63BC `{{Farbe \|komplementär \|hell}}`	#5E43A5 `{{Farbe \|komplementär}}`	#482998 `{{Farbe \|komplementär \|dunkel}}`	#331878 `{{Farbe \|komplementär \|dunkler}}`
orange	#FFCEA2 `{{Farbe \|orange \|heller}}`	#FFB877 `{{Farbe \|orange \|hell}}`	#F19D50 `{{Farbe \|orange}}`	#DD7F28 `{{Farbe \|orange \|dunkel}}`	#AE5D12 `{{Farbe \|orange \|dunkler}}`
grün	#D4F69C `{{Farbe \|grün \|heller}}`	#C0EF6F `{{Farbe \|grün \|hell}}`	#A8DF4A `{{Farbe \|grün}}`	#8FCD25 `{{Farbe \|grün \|dunkel}}`	#6CA111 `{{Farbe \|grün \|dunkler}}`
links	#0077dd `{{Farbe \|links \|heller}}`	#0077dd `{{Farbe \|links \|hell}}`	#0077dd `{{Farbe \|links}}`	#005599 `{{Farbe \|links \|dunkel}}`	#005599 `{{Farbe \|links \|dunkler}}`
grau	#F1F1F1 `{{Farbe \|grau \|heller}}`	#ececec `{{Farbe \|grau \|hell}}`	#DBDBDB `{{Farbe \|grau}}`	#C8C8C8 `{{Farbe \|grau \|dunkel}}`	#a0a0a0 `{{Farbe \|grau \|dunkler}}`

Suche

Vorlage:Farbe: Unterschied zwischen den Versionen

Version vom 2. November 2018, 13:23 Uhr

Inhaltsverzeichnis

Beispiele

Farbtabellen

Farben mit Bedeutung

Farbschema

CSS Code for Common.css

Navigation

Fächer

Hilfen

⧼advertisement⧽

Suche

Vorlage:Farbe: Unterschied zwischen den Versionen

Version vom 2. November 2018, 13:23 Uhr

Beispiele

Farbtabellen

Farben mit Bedeutung

Farbschema

CSS Code for Common.css

Navigation

⧼advertisement⧽

⧼timis-pagehighlighted⧽

⧼timis-pagenamespaces⧽

⧼timis-pagetranslate⧽

Seitenwerkzeuge

Seitenwerkzeuge