Help:Coloring text: Difference between revisions
Eric Martz (talk | contribs) |
Eric Martz (talk | contribs) |
||
| (12 intermediate revisions by the same user not shown) | |||
| Line 41: | 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 <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. | 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. | 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. | ||
| Line 71: | Line 76: | ||
* <span class="bg-white"> </span> white | * <span class="bg-white"> </span> white | ||
</td><td> | </td><td> | ||
Spectral order | | ||
* <span class=" | </td><td style="border-left:1px solid gray;"> | ||
* <span class="text- | 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-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="text-cyan">'''text-cyan'''</span> | ||
* <span class="bg-lightblue">bg-lightblue</span> | * <span class="bg-lightblue">bg-lightblue</span> | ||
* <span class=" | * <span class="text-blue">'''text-blue'''</span> | ||
* <span class=" | * <span class="text-purple">'''text-purple'''</span> | ||
* <span class="bg-lightmagenta">bg-lightmagenta</span> | * <span class="bg-lightmagenta">bg-lightmagenta</span> | ||
* <span class="text-magenta">'''text-magenta'''</span> | * <span class="text-magenta">'''text-magenta'''</span> | ||
* <span class=" | * <span class="bg-violet">bg-violet</span> | ||
* <span class=" | * <span class="bg-white">bg-white</span> | ||
* <span class="bg- | * <span class="bg-lightgray">bg-lightgray</span> | ||
* <span class=" | * <span class="text-gray">'''text-gray'''</span> | ||
* <span class=" | * <span class="text-black">text-black</span> <span class="bg-black text-white">bg-black text-white</span> | ||
</td></tr></table> | </td></tr></table> | ||
| Line 109: | Line 116: | ||
==Style Color Spans== | ==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>. | ||