Help:Coloring text

There are several ways you can color text in Proteopedia pages.

Color Scheme TemplatesColor Scheme Templates

Standard chemical element or macromolecular color schemes can be inserted with templates. See Help:Color Keys.

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.

Wikitext ColorsWikitext Colors

This method is recommended for darker colors. (For light colors, color the background of black text as shown with other methods below.) 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.

Class ColorsClass Colors

Another option is to use <span class="bg-warning text-white"> like this </span> that looks like this. This method works in all contexts but is limited to the pre-set color below.

Available classes are primary , secondary , success , info , warning , danger , light , dark and white . You will use each class combined with text- to color a text, or bg- for the background.

Another set of class colors available in Proteopedia: text-red, text-orange / bg-orange, text-brown, text-chocolate, bg-yellow, bg-yellowgreen, text-green, text-cyan, text-blue, text-magenta, text-violet / bg-violet, text-gray, bg-black text-white.

Temporary test colors, proposed to be added classes: pink, olive, yellowgreen, lightgreen, lightcyan, cyan, lightblue, purple, NEWviolet/lightmagenta, lightgray.

Span Style ColorsSpan Style Colors

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.

HTML Font ColorsHTML Font Colors

Coloring using HTML font tags is not recommended as it is technically not supported by HTML5: <font color="red">Red</font> which looks like this: Red. In addition to color names, you can use Red-Green-Blue (RGB) hexadecimal codes following "#", for example <font color="#8000ff">Purple</font> which looks like this: Purple.

Coloring Text in Scene CaptionsColoring Text in Scene Captions

• Page Text can be colored by any of the 3 methods above (as demonstrated above).
• Scene (green link) Captions:
  • PDB-file based scenes can be colored

Checkboxes, Buttons, Radio ButtonsCheckboxes, Buttons, Radio Buttons

These can be used to toggle something in JSmol on/off, or for more complicated purposes, including running any JSmol script. See working examples at Proteopedia:DIY:Templates, and more details in the Jmol Wiki.

Font Awesome icons on pages Font Awesome icons on pages

You may choose from a large gallery of free Font Awesome icons .

The icon on the heading above was inserted with <span class="fas fa-child"></span>. Replace 'child' with the name of the icon you want to display. For those icons available on 'regular' and 'solid' modes, use either 'far' or 'fas' in the class.

Adding a CSS style allows to set color, size, background, etc. <span class="far fa-lightbulb" style="color:#FF6600"></span>