Help:Coloring text: Difference between revisions
Eric Martz (talk | contribs) |
Eric Martz (talk | contribs) |
||
| (5 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 73: | Line 78: | ||
| | ||
</td><td style="border-left:1px solid gray;"> | </td><td style="border-left:1px solid gray;"> | ||
Spectral order | Spectral order | ||
* <span class="bg-pink">bg-pink</span> | * <span class="bg-pink">bg-pink</span> | ||
* <span class="text-red">'''text-red'''</span> | * <span class="text-red">'''text-red'''</span> | ||
| Line 94: | Line 99: | ||
* <span class="bg-lightgray">bg-lightgray</span> | * <span class="bg-lightgray">bg-lightgray</span> | ||
* <span class="text-gray">'''text-gray'''</span> | * <span class="text-gray">'''text-gray'''</span> | ||
* <span class="text-black">text-black</span> | * <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 111: | 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>. | ||