Custom Title and Icon Guide
#1

Custom Title and Icon Guide

This post details the effects one can use in custom titles and icons as well as transfer information.

General Title Guidelines

  • Titles should be requested in HTML format.
    • You can use an online HTML editor to check your code.
  • Max one line per title. Your title can be as many words/characters as you'd like -- but your CSS styling has to make it so that the title does not stretch the board. E.g., "supercalifragilisticexpialidocious" is acceptable as a title, as long as your title's style makes it so that word does not stretch the board or break onto two lines.
  • Links are prohibited in custom titles (and similarly, custom icons)
  • Can't be edited/changed except where a change token is purchased
  • Can't be transferred from active characters except where a change token is purchased
  • Can be transferred from inactive characters (not edited)
  • Title and icon ORDER may be changed if the person is requesting another change to their title area

General Icon Guidelines

  • Icons need to be 27x27 pixels or smaller, including black+white outlines. Black + white outlines are highly preferred, but other alternatives (e.g., drop-shadow) are acceptable on case-by-case basis.
  • Transfer rules same as with titles: free transferring only from inactive/dead; transfer from active requires token; order shuffles permitted when adding new icons.
  • Custom icons can never be edited.

Allowed CSS Properties*

* Some titles may be restricted in the number of effects (e.g., some contest prizes specify "two CSS effects" or similar)
** Some titles may be limited in the number of colors (e.g., some contest prizes specify "two color fade" whereas others are "three color fades" etc.)


Examples


Color Fade: fiery skies
Code:
<span style="color:#6C171A">f</span><span style="color:#75291B">i</span><span style="color:#7E3B1B">e</span><span style="color:#884D1C">r</span><span style="color:#915F1C">y</span><span style="color:#9A721D"></span> <span style="color:#A3841E">s</span><span style="color:#AC961E">k</span><span style="color:#B6A81F">i</span><span style="color:#BFBA1F">e</span><span style="color:#C8CC20">s</span>
Multiple Colors: Fiery Skies
Code:
<span style="color:#6C171A">Fiery</span> <span style="color:#C8CC20">Skies</span>
+font-style: Fiery Skies
Code:
<span style="font-style:italic"><span style="color:#6C171A">Fiery</span> <span style="color:#C8CC20">Skies</span></span>
+font-variant: Fiery Skies
Code:
<span style="font-style:italic; font-variant:small-caps"><span style="color:#6C171A">Fiery</span> <span style="color:#C8CC20">Skies</span></span>
+font-weight: Fiery Skies
Code:
<span style="font-style:italic; font-variant:small-caps; font-weight:bold"><span style="color:#6C171A">Fiery</span> <span style="color:#C8CC20">Skies</span></span>
+font-size: Fiery Skies
Code:
<span style="font-style:italic; font-variant:small-caps; font-weight:bold; font-size:16px"><span style="color:#6C171A">Fiery</span> <span style="color:#C8CC20">Skies</span></span>
+font-family: Fiery Skies
Code:
<span style="font-style:italic; font-variant:small-caps; font-weight:bold; font-size:16px; font-family:arial, helvetica, serif"><span style="color:#6C171A">Fiery</span> <span style="color:#C8CC20">Skies</span></span>
+letter-spacing: Fiery Skies
Code:
<span style="font-style:italic; font-variant:small-caps; font-weight:bold; font-size:16px; font-family:arial, helvetica, serif; letter-spacing:1px"><span style="color:#6C171A">Fiery</span> <span style="color:#C8CC20">Skies</span></span>
+word-spacing: Fiery Skies
Code:
<span style="font-style:italic; font-variant:small-caps; font-weight:bold; font-size:16px; font-family:arial, helvetica, serif; letter-spacing:1px; word-spacing:3px"><span style="color:#6C171A">Fiery</span> <span style="color:#C8CC20">Skies</span></span>
+text-shadow: Fiery Skies
Code:
<span style="font-style:italic; font-variant:small-caps; font-weight:bold; font-size:16px; font-family:arial, helvetica, serif; letter-spacing:1px; word-spacing:3px; text-shadow:#2D2D2D 1px 1px 2px"><span style="color:#6C171A">Fiery</span> <span style="color:#C8CC20">Skies</span></span>
+text-transform:* Fiery Skies
Code:
<span style="font-style:italic; font-variant:small-caps; font-weight:bold; font-size:16px; font-family:arial, helvetica, serif; letter-spacing:1px; word-spacing:3px; text-shadow:#2D2D2D 1px 1px 2px; text-transform:uppercase"><span style="color:#6C171A">Fiery</span> <span style="color:#C8CC20">Skies</span></span>
*negates font-variant:small-caps

text-decoration: Fiery Skies
Code:
<span style="font-style:italic; font-variant:small-caps; font-weight:bold; font-size:16px; font-family:arial, helvetica, serif; letter-spacing:1px; word-spacing:3px; text-shadow:#2D2D2D 1px 1px 2px; text-transform:uppercase; text-decoration:underline"><span style="color:#6C171A">Fiery</span> <span style="color:#C8CC20">Skies</span></span>



Forum Jump: