21 October 2012, 12:53 AM
Custom Title and Icon Guide
This post details the effects one can use in custom titles and icons as well as transfer information.
** 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.)
Color Fade: fiery skies
Multiple Colors: Fiery Skies
+font-style: Fiery Skies
+font-variant: Fiery Skies
+font-weight: Fiery Skies
+font-size: Fiery Skies
+font-family: Fiery Skies
+letter-spacing: Fiery Skies
+word-spacing: Fiery Skies
+text-shadow: Fiery Skies
+text-transform:* Fiery Skies
*negates font-variant:small-caps
text-decoration: Fiery Skies
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*
- Generated color fades: Downloadable Program or Browser-Based**
- color**
- font-style
- font-variant
- font-weight
- font-size: Maximum size is 25px
- font-family: web safe fonts preferred, common fonts accepted; Google fonts and other @import fonts barred
- letter-spacing
- word-spacing
- text-shadow
- text-transform
- text-decoration: EXCLUDING "blink"
** 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>
Code:
<span style="color:#6C171A">Fiery</span> <span style="color:#C8CC20">Skies</span>
Code:
<span style="font-style:italic"><span style="color:#6C171A">Fiery</span> <span style="color:#C8CC20">Skies</span></span>
Code:
<span style="font-style:italic; font-variant:small-caps"><span style="color:#6C171A">Fiery</span> <span style="color:#C8CC20">Skies</span></span>
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>
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>
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>
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>
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>
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>
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>
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>