Help:Coloring text

From Proteopedia

There are several ways you can color text in Proteopedia pages. Not all methods work in all contexts.

Where To Use Each Coloring Method

• Page Text can be colored by any of the first four methods below (as demonstrated below for each).
• Captions for molecular scenes (green links):
  • PDB file based scenes can be colored with
    • Span classes
  • PNGJ file based scened can be colored with
    • Span classes
    • NOT Wikitext templates: NOT {{Font color|red|red text}}</nowiki) and NOT standard color scheme templates. Important: to '''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: {{Template:ColorKey_Element_C}} {{Template:ColorKey_Element_H}} {{Template:ColorKey_Element_O}} {{Template:ColorKey_Element_N}} {{Template:ColorKey_Element_P}} {{Template:ColorKey_Element_S}} {{Template:ColorKey_Element_Se}} {{Template:ColorKey_Element_Fe}} {{Template:ColorKey_Amino2CarboxyRainbow}} Methods for these and other color schemes will be found at [[Help:Color Keys]]. ==Wikitext 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 {{Font color|green|green text}} or another {{Font color|#a569bd|more exotic}} text color, use the Template:Font_color, entering the color and the desired text, as follows: <pre>{{Font color|green|green text}} or another {{Font color|#a569bd|more exotic}}</pre> Colored text is more visible when bold. Surround the above codes with three single quotes, as follows: <pre>'''{{Font color|#00A0A0|Cyan}}'''</pre> which displays as '''{{Font color|#00A0A0|Cyan}}'''. ==Class Colors== Class colors work for both dark and light colors. Use <span class="bg-warning text-white"> like this </span> that looks <span class="bg-warning text-white"> like this</span>. This method works in all contexts but is limited to the pre-set color below. Available classes are <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>. You will use each class combined with <b>text-</b> to color a text, or <b>bg-</b> for the background. Another set of class colors available in Proteopedia: <b> <span class="text-red">text-red</span>, <span class="text-orange">text-orange </span></b> / <span class="bg-orange" style="padding-left:7px;padding-right:7px;">bg-orange</span>, <b><span class="text-brown">text-brown</span></b>, <b><span class="text-chocolate">text-chocolate</span></b>, <span class="bg-yellow" style="padding-left:7px;padding-right:7px;">bg-yellow</span>, <span class="bg-yellowgreen" style="padding-left:7px;padding-right:7px;">bg-yellowgreen</span>, <b><span class="text-green">text-green</span></b>, <b><span class="text-cyan">text-cyan</span></b>, <b><span class="text-blue">text-blue</span></b>, <b><span class="text-magenta">text-magenta</span></b>, <b><span class="text-violet">text-violet</span></b> / <span class="bg-violet" style="padding-left:7px;padding-right:7px;">bg-violet</span>, <b><span class="text-gray">text-gray</span></b>, <span class="bg-black text-white" style="padding-left:7px;padding-right:7px;">bg-black text-white</span>. Temporary test colors, proposed to be added classes: <span style="background-color:#ffb0b0;padding-left:7px;padding-right:7px;">pink</span>, <span style="color:#808000;font-weight:bold;">olive</span>, <span style="background-color:#dfff00;padding-left:7px;padding-right:7px;">yellowgreen</span>, <span style="background-color:#00ff00;padding-left:7px;padding-right:7px;">lightgreen</span>, <span style="background-color:#90ffff;padding-left:7px;padding-right:7px;">lightcyan</span>, <span style="color:#00a0a0;font-weight:bold;">cyan</span>, <span style="background-color:#c0d0ff;padding-left:7px;padding-right:7px;">lightblue</span>, <span style="color:#8000ff;font-weight:bold;">purple</span>, <span style="background-color:#ffc0ff;padding-left:7px;padding-right:7px;">NEWviolet/lightmagenta</span>, <span style="background-color:#e8e8e8;padding-left:7px;padding-right:7px;">lightgray</span>. ==Span Style Colors== 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>. Span style colors also work for light colors, using a colored background with black text: <span style="background-color:yellow;padding-left:7px;padding-right:7px;">Yellow</span>. The "padding" makes the color extend slightly beyond the text, which looks better: <span style="background-color:yellow;padding-left:7px;padding-right:7px;">Yellow</span>. ==HTML Font Colors== '''NOT Recommended''' (here for historical reference). Coloring using HTML font tags is [https://www.w3schools.com/tags/tag_font.asp '''NOT recommended''' as it is technically not supported by HTML5]: <font color="red">'''Red'''</font> which looks like this: <font color="red">'''Red'''</font>. 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 <font color="#8000ff">'''Purple'''</font> which looks like this: <font color="#8000ff">'''Purple'''</font>.