Help:Coloring text: Difference between revisions

Line 18:

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

Another option is to use like this 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 Colors===

You can color using CSS spans: Red, which looks like this: Red. 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 Purple which looks like this: '''Purple'''.

===HTML Font Colors===

Coloring using HTML font tags is [https://www.w3schools.com/tags/tag_font.asp not recommended as it is technically not supported by HTML5]: '''Red''' which looks like this: '''Red'''. 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 '''Purple''' which looks like this: '''Purple'''.

===Coloring 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 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 [http://wiki.jmol.org/index.php/MediaWiki/ExtensionV4 Jmol Wiki].

==Font Awesome icons on pages ==

You may choose from a large gallery of free [https://fontawesome.com/icons?d=gallery&m=free Font Awesome] icons .

The icon on the heading above was inserted with <nowiki></nowiki>. 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. <nowiki></nowiki>

@@ Line 18: / Line 18: @@
 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===
+Another option is to use &lt;span class="bg-warning text-white"> like this &lt;/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: &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>.
+===HTML Font Colors===
+Coloring using HTML font tags is [https://www.w3schools.com/tags/tag_font.asp not recommended as it is technically not supported by HTML5]: &lt;font color="red">'''Red'''&lt;/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 &lt;font color="#8000ff">'''Purple'''&lt;/font> which looks like this: <font color="#8000ff">'''Purple'''</font>.
+===Coloring 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 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 [http://wiki.jmol.org/index.php/MediaWiki/ExtensionV4 Jmol Wiki].
+==Font Awesome icons on pages <span class="fas fa-child"></span>==
+You may choose from a large gallery of free [https://fontawesome.com/icons?d=gallery&m=free Font Awesome] icons .
+The icon on the heading above was inserted with <b><nowiki><span class="fas fa-child"></span></nowiki></b>.  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. <b><nowiki><span class="far fa-lightbulb" style="color:#FF6600"></span></nowiki></b> <span class="far fa-lightbulb" style="color:#FF6600"></span>

Help:Coloring text: Difference between revisions

Navigation menu

Page actions

Page actions

Personal tools

Navigation

Search

Tools