Help:Coloring text: Difference between revisions

← Older edit

Proteopedia Page Contributors and Editors (what is this?)Proteopedia Page Contributors and Editors (what is this?)

Eric Martz, Jaime Prilusky

@@ Line 41: / Line 41: @@
 <pre>'''{{Font color|#00A0A0|Cyan}}'''</pre>
 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 colors work for both dark and light colors. Use &lt;span class="text-purple"> like this &lt;/span> that displayw <span class="text-purple">like this</span>, or &lt;span class="bg-orange text-white"> like this &lt;/span> that displays <span class="bg-orange text-white"> 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 '''&lt;b>&lt;span class="text-purple">like this&lt;/span>&lt;/b>''' that displays <b><span class="text-purple">like this</span></b>, or '''&lt;span class="bg-yellowgreen">like this&lt;/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 a text, or '''bg-''' for 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.
+<table><tr><td>
+Alphabetical order
 * <span class="bg-black"> &nbsp; &nbsp; &nbsp; &nbsp; </span> &nbsp; black
 * <span class="bg-blue"> &nbsp; &nbsp; &nbsp; &nbsp; </span> &nbsp; blue
@@ Line 68: / Line 75: @@
 * <span class="bg-yellowgreen"> &nbsp; &nbsp; &nbsp; &nbsp; </span> &nbsp; yellowgreen
 * <span class="bg-white"> &nbsp; &nbsp; &nbsp; &nbsp; </span> &nbsp; white
+</td><td>
+&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
+</td><td style="border-left:1px solid gray;">
+&nbsp;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
@@ Line 77: / Line 111: @@
 <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>.
+<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: &lt;span style="color:red;font-weight:bold;">Red&lt;/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 &lt;span style="color:#8000ff;font-weight:bold;">Purple&lt;/span> which looks like this: <span style="color:#8000ff;font-weight:bold;">'''Purple'''</span>.