Help:Coloring text: Difference between revisions
Eric Martz (talk | contribs) |
Eric Martz (talk | contribs) |
||
| (23 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 <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-black"> </span> black | ||
* <span class="bg-blue"> </span> blue | * <span class="bg-blue"> </span> blue | ||
| Line 81: | Line 75: | ||
* <span class="bg-yellowgreen"> </span> yellowgreen | * <span class="bg-yellowgreen"> </span> yellowgreen | ||
* <span class="bg-white"> </span> white | * <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-secondary text-white"> secondary </span>, | |||
<span class="bg-success text-white"> success </span>, | |||
<span class="bg-info text-white"> info </span>, | |||
<span class="bg-warning text-white"> warning </span>, | |||
<span class="bg-danger text-white"> danger </span>, | |||
<span class="bg-light text-dark"> light </span>, | |||
<span class="bg-dark text-white"> dark </span> | |||
and | |||
<span class="bg-white text-dark">white</span>. | |||
==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>. | ||