This old version of Proteopedia is provided for student assignments while the new version is undergoing repairs. Content and edits done in this old version of Proteopedia after March 1, 2026 will eventually be lost when it is retired in about June of 2026.


Apply for new accounts at the new Proteopedia. Your logins will work in both the old and new versions.


Help:Coloring text

From Proteopedia

Revision as of 22:32, 25 December 2020 by Eric Martz (Talk | contribs)
Jump to: navigation, search

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>.

Proteopedia Page Contributors and Editors (what is this?)

Eric Martz, Jaime Prilusky

Personal tools