Help:Coloring text
From Proteopedia
There are several ways you can color text in Proteopedia pages. Not all methods work in all contexts.
Contents |
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.
Color Scheme Templates
Standard chemical element or macromolecular color schemes can be inserted with templates. This is much simpler than constructing each one by hand as needed. See Help:Color Keys. But this method does not work in captions for molecular scenes (green links).
Examples: C H O N P S Se Fe
| Amino Terminus | Carboxy Terminus |
Methods for these and other color schemes will be found at Help:Color Keys.
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.) This method does not work in captions for molecular scenes (green links).
To get green text or another more exotic text color, use the Template:Font_color, entering the color and the desired text, as follows:
{{Font color|green|green text}} or another {{Font color|#a569bd|more exotic}}
Colored text is more visible when bold. Surround the above codes with three single quotes, as follows:
'''{{Font color|#00A0A0|Cyan}}'''
which displays as Cyan.
Highlighting
A special template highlights text in yellow.
{{Yelspan|highlighted}}
displays as highlighted.
Class Color Spans
Class colors work for both dark and light colors. Use <b><span class="text-purple">like this</span></b> that displays like this, or <span class="bg-yellowgreen">like this</span> that displays like this. 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.
|
Alphabetical order
|
|
Spectral order
|
Another set of classes is primary , secondary , success , info , warning , danger , light , dark and white.
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: Red. In addition to color names, you can use Red-Green-Blue (RGB) hexadecimal codes following "#", for example <span style="color:#8000ff;font-weight:bold;">Purple</span> which looks like this: Purple.
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: Yellow. 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
NOT Recommended (here for historical reference). Coloring using HTML font tags is NOT recommended as it is technically not supported by HTML5: <font color="red">Red</font>
