Help:Coloring text: Difference between revisions
Eric Martz (talk | contribs) |
Eric Martz (talk | contribs) |
||
| (33 intermediate revisions by 2 users not shown) | |||
| Line 2: | Line 2: | ||
==Where To Use Each Coloring Method== | ==Where To Use Each Coloring Method== | ||
===Page Text=== | |||
'''Page Text''' can be colored by any of the four TEMPLATE or SPAN methods below (as demonstrated below for each). TEMPLATE methods are generally recommended. However, for light colors that show better as background for text than the text itself, SPAN methods are better. | |||
===Caption Text=== | |||
'''Caption Text''' for molecular scenes (green links) can be colored '''ONLY by ''CLASS'' COLOR SPANS'''. Neither style color spans nor templates of either kind work in captions. | |||
Important: For '''Boldface''' colored text in captions, use '''<b>bold</b>'''. Wiki markup, three single quotes, does not work in captions. | Important: For '''Boldface''' colored text in captions, use '''<b>bold</b>'''. Wiki markup, three single quotes, does not work in captions. | ||
| Line 28: | Line 31: | ||
==Single Font Color Templates== | ==Single Font Color Templates== | ||
This method is recommended for darker colors. (For light colors, color the background of black text as shown with other methods below.) To get {{Font color|green|green text}} or another {{Font color|#a569bd|more exotic}} text color, use the Template:Font_color, entering the color and the desired text, as follows: | This method is recommended for darker colors. (For light colors, color the background of black text as shown with other methods below.) This method '''does not work''' in captions for molecular scenes (green links). | ||
To get {{Font color|green|green text}} or another {{Font color|#a569bd|more exotic}} text color, use the Template:Font_color, entering the color and the desired text, as follows: | |||
<pre>{{Font color|green|green text}} or another {{Font color|#a569bd|more exotic}}</pre> | <pre>{{Font color|green|green text}} or another {{Font color|#a569bd|more exotic}}</pre> | ||
| Line 36: | Line 41: | ||
<pre>'''{{Font color|#00A0A0|Cyan}}'''</pre> | <pre>'''{{Font color|#00A0A0|Cyan}}'''</pre> | ||
which displays as '''{{Font color|#00A0A0|Cyan}}'''. | which displays as '''{{Font color|#00A0A0|Cyan}}'''. | ||
===Highlighting=== | |||
A special template highlights text in yellow. | |||
<pre>{{Yelspan|highlighted}}</pre> | |||
displays as {{Yelspan|highlighted}}. | |||
==Class Color Spans== | ==Class Color Spans== | ||
Class colors work for both dark and light colors. Use <span class=" | Class colors work for both dark and light colors. Use '''<b><span class="text-purple">like this</span></b>''' that displays <b><span class="text-purple">like this</span></b>, or '''<span class="bg-yellowgreen">like this</span>''' that displays <span class="bg-yellowgreen">like this</span>. This method works in all contexts but is limited to the pre-set colors below. | ||
Here is the main set of class colors available in Proteopedia. You will use each class combined with '''text-''' to color text, or '''bg-''' to color the background. | |||
<table><tr><td> | |||
Alphabetical order | |||
* <span class="bg-black"> </span> black | |||
* <span class="bg-blue"> </span> blue | |||
* <span class="bg-brown"> </span> brown | |||
* <span class="bg-cyan"> </span> cyan | |||
* <span class="bg-gray"> </span> gray | |||
* <span class="bg-green"> </span> green | |||
* <span class="bg-lightblue"> </span> lightblue | |||
* <span class="bg-lightcyan"> </span> lightcyan | |||
* <span class="bg-lightgray"> </span> lightgray | |||
* <span class="bg-lightgreen"> </span> lightgreen | |||
* <span class="bg-lightmagenta"> </span> lightmagenta | |||
* <span class="bg-magenta"> </span> magenta | |||
* <span class="bg-olive"> </span> olive | |||
* <span class="bg-orange"> </span> orange | |||
* <span class="bg-pink"> </span> pink | |||
* <span class="bg-purple"> </span> purple | |||
* <span class="bg-red"> </span> red | |||
* <span class="bg-violet"> </span> violet | |||
* <span class="bg-yellow"> </span> yellow | |||
* <span class="bg-yellowgreen"> </span> yellowgreen | |||
* <span class="bg-white"> </span> white | |||
</td><td> | |||
| |||
</td><td style="border-left:1px solid gray;"> | |||
Spectral order | |||
* <span class="bg-pink">bg-pink</span> | |||
* <span class="text-red">'''text-red'''</span> | |||
* <span class="text-brown">'''text-brown'''</span> | |||
* <span class="text-orange">'''text-orange'''</span> <span class="bg-orange">bg-orange</span> | |||
* <span class="bg-yellow">bg-yellow</span> | |||
* <span class="bg-yellowgreen">bg-yellowgreen</span> | |||
* <span class="text-olive">'''text-olive'''</span> | |||
* <span class="bg-lightgreen">bg-lightgreen</span> | |||
* <span class="text-green">'''text-green</span> | |||
* <span class="bg-lightcyan">bg-lightcyan</span> | |||
* <span class="text-cyan">'''text-cyan'''</span> | |||
* <span class="bg-lightblue">bg-lightblue</span> | |||
* <span class="text-blue">'''text-blue'''</span> | |||
* <span class="text-purple">'''text-purple'''</span> | |||
* <span class="bg-lightmagenta">bg-lightmagenta</span> | |||
* <span class="text-magenta">'''text-magenta'''</span> | |||
* <span class="bg-violet">bg-violet</span> | |||
* <span class="bg-white">bg-white</span> | |||
* <span class="bg-lightgray">bg-lightgray</span> | |||
* <span class="text-gray">'''text-gray'''</span> | |||
* <span class="text-black">text-black</span> <span class="bg-black text-white">bg-black text-white</span> | |||
</td></tr></table> | |||
Another set of classes is | |||
<span class="bg-primary text-white"> primary </span>, | <span class="bg-primary text-white"> primary </span>, | ||
<span class="bg-secondary text-white"> secondary </span>, | <span class="bg-secondary text-white"> secondary </span>, | ||
| Line 48: | Line 111: | ||
<span class="bg-danger text-white"> danger </span>, | <span class="bg-danger text-white"> danger </span>, | ||
<span class="bg-light text-dark"> light </span>, | <span class="bg-light text-dark"> light </span>, | ||
<span class="bg-dark text-white"> dark </span> | <span class="bg-dark text-white"> dark </span> | ||
and | and | ||
<span class="bg-white text-dark"> white </span> | <span class="bg-white text-dark">white</span>. | ||
==Style Color Spans== | |||
This method works for page text, but '''does not work''' in captions for molecular scenes (green links). | |||
You can color using CSS spans: <span style="color:red;font-weight:bold;">Red</span>, which looks like this: <span style="color:red;font-weight:bold;">Red</span>. In addition to color names, you can use Red-Green-Blue [https://www.rapidtables.com/web/color/RGB_Color.html (RGB) hexadecimal codes] following "#", for example <span style="color:#8000ff;font-weight:bold;">Purple</span> which looks like this: <span style="color:#8000ff;font-weight:bold;">'''Purple'''</span>. | You can color using CSS spans: <span style="color:red;font-weight:bold;">Red</span>, which looks like this: <span style="color:red;font-weight:bold;">Red</span>. In addition to color names, you can use Red-Green-Blue [https://www.rapidtables.com/web/color/RGB_Color.html (RGB) hexadecimal codes] following "#", for example <span style="color:#8000ff;font-weight:bold;">Purple</span> which looks like this: <span style="color:#8000ff;font-weight:bold;">'''Purple'''</span>. | ||
Span style colors also work for light colors, using a colored background with black text: <span style="background-color:yellow;padding-left: | Span style colors also work for light colors, using a colored background with black text: <span style="background-color:yellow;padding-left:0.3em;padding-right:0.3em;">Yellow</span>. The "padding" makes the color extend slightly beyond the text, which looks better: <span style="background-color:yellow;padding-left:0.3em;padding-right:0.3em;">Yellow</span>. Padding given in 'em' units is relative to the font-size of the element; 0.3em means to leave a padding equal to 0.3 times the size of the current font. | ||
==HTML Font Colors== | ==HTML Font Colors== | ||
'''NOT Recommended''' (here for historical reference). Coloring using HTML font tags is [https://www.w3schools.com/tags/tag_font.asp '''NOT recommended''' as it is technically not supported by HTML5]: <span style="color:gray;"><font color="red">'''Red'''</font></span> | '''NOT Recommended''' (here for historical reference). Coloring using HTML font tags is [https://www.w3schools.com/tags/tag_font.asp '''NOT recommended''' as it is technically not supported by HTML5]: <span style="color:gray;"><font color="red">'''Red'''</font></span> | ||
<!-- which looks like this: <font color="red">'''Red'''</font>. In addition to color names, you can use Red-Green-Blue [https://www.rapidtables.com/web/color/RGB_Color.html (RGB) hexadecimal codes] following "#", for example <font color="#8000ff">'''Purple'''</font> which looks like this: <font color="#8000ff">'''Purple'''</font>.--> | <!-- which looks like this: <font color="red">'''Red'''</font>. In addition to color names, you can use Red-Green-Blue [https://www.rapidtables.com/web/color/RGB_Color.html (RGB) hexadecimal codes] following "#", for example <font color="#8000ff">'''Purple'''</font> which looks like this: <font color="#8000ff">'''Purple'''</font>.--> | ||