randomtology | CR CODE

This code's base was

cawaii's Ace Attorney code and then heavily modified through my own experimentation.

Live preview is here over at

wilder.

TOP TABLE

Feel free to change the symbols, colors, or meanings however you'd like! It's not even required to have to make the rest of the code work! This is a very basic table code.

<raw-code><center><span style="font: 11px helvetica, arial, sans-serif; color: #000000;"><table width="400px"><tbody><tr><td valign="top"><span title="Trusted" style="font-size: medium; color: #CC0000;">☼</span> Trusted<br/>
<span title="Love" style="font-size: medium; color: #FF0000;">☼</span> Love<br/>
<span title="Crush" style="font-size: medium; color: #FF6600;">☼</span> Crush<br/>
<span title="Chosen" style="font-size: medium; color: #FF9900;">☼</span> Chosen<br/>
<span title="Friend" style="font-size: medium; color: #FFCC00;">☼</span> Friend<br/>
<span title="Respected" style="font-size: medium; color: #FFFF00;">☼</span> Respected<br/>
<span title="Like" style="font-size: medium; color: #CCCC00;">☼</span>  Like</span><br/></td><td valign="top"><span style="font: 11px helvetica, arial, sans-serif; color: #000000;"><span title="Acquaintance" style="font-size: medium; color: #99CC00">☼</span> Acquaintance<br/>
<span title="Interesting" style="font-size: medium; color: #00CC00;">☼</span> Interesting<br/>
<span title="Observing" style="font-size: medium; color: #006600;">☼</span> Observing<br/>
<span title="Attractive" style="font-size: medium; color: #3366FF;">☼</span> Attractive<br/>
<span title="Complicated" style="font-size: medium; color: #0000FF;">☼</span> Complicated<br/>
<span title="Mostly Harmless" style="font-size: medium; color: #00CCFF;">☼</span> Mostly Harmless<br/>
<span title="Useful" style="font-size: medium; color: #000080;">☼</span> Useful<br/></span></td><td valign="top"><span style="font: 11px helvetica, arial, sans-serif; color: #000000;"><span title="Distrust" style="font-size: medium; color: #CC99FF;">☼</span> Distrust<br/>
<span title="Dislike" style="font-size: medium; color: #800080;">☼</span> Dislike<br/>
<span title="Dangerous" style="font-size: medium; color: #6633FF;">☼</span> Dangerous<br/>
<span title="Pawn" style="font-size: medium; color: #ff00ff;">☼</span> Pawn<br/>
<span title="Enemy" style="font-size: medium; color: #C0C0C0;">☼</span> Enemy<br/>
<span title="Hated" style="font-size: medium; color: #666666;">☼</span> Hated<br/>
<span title="Murderous" style="font-size: medium; color: ;">☼</span> Murderous<br/></span></td></tr></tbody></table></raw-code>

CHART
- In order to make the clicky icons work, on the CHARACTER area, put in a character's name in the "LINK1" spot (or any other thing that's easy to refer to). Then put the EXACT same thing in the corresponding icon area where it asks again for LINK1. DO NOT REMOVE THE '#'. OTHERWISE IT WILL NOT WORK.
- The text area is set to make an auto scrollbar if you go over the limit. I'm not sure it's perfect looking since I was still fiddling with that, but hey it's something!
- If you want to add more characters or icons, just copy and paste the CHARACTER or the ICON areas after the earlier ones. Icons however, should have a break line added after every 4th one. Or 3rd one. or whatever your preference is.
- Feel free to modify this at will!

<raw-code><table>

<tr><td style="vertical-align: top;">
<div style="height: 350px; display: inline-block; padding: 4px; overflow-y: hidden;">

<a name="LINK1">
<div style="height: 96px; border-top: 4px solid #FFFFFF; margin-bottom: 8px; display: block;">
 <img src="USERPIC HERE" style="width: 92px; border-radius: 4px; border: 2px solid #ffffff; margin-right: 4px; float: left;">

<div style="width: 280px; text-align: justify; float: left;">
  <div style="background: #CHARACTER COLOR; border-radius: 4px 4px 0px 0px; padding: 4px; text-align: center;"><span style="font: 18px helvetica, arial, sans-serif; color: #TEXT COLOR;">CHARACTER NAME</span></div>
  <div style="padding: 4px;"><span style="font: 11px helvetica, arial, sans-serif; color: #000000;"><i>CANON TITLE</i>
  <br/>USERNAME HERE
  <br/>SYMBOLS</span></div>
 </div>
</div>

<div style="width: 380px; height: 254px; font: 12px helvetica, arial, sans-serif; color: #000000; text-align: justify; overflow: auto;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget nisi eget leo lobortis ullamcorper non nec urna. Sed eleifend lorem in viverra pellentesque. Aliquam dapibus mi metus. Aliquam varius sit amet lectus non facilisis.</div>
</a>

</div>
</td>

<td>

  <div style="padding: 12px; text-align: left;">

  <a href="#LINK1"><img src="http://www.dreamwidth.org/userpic/6925017/1162973" style="width: 50px; height: 50px; border-radius: 3px; margin: 0px 4px 4px 0px; display: inline;"></a>


  <a href="#LINK1"><img src="http://www.dreamwidth.org/userpic/6925017/1162973" style="width: 50px; height: 50px; border-radius: 3px; margin: 0px 4px 4px 0px; display: inline;"></a>


  <a href="#LINK1"><img src="http://www.dreamwidth.org/userpic/6925017/1162973" style="width: 50px; height: 50px; border-radius: 3px; margin: 0px 4px 4px 0px; display: inline;"></a>


  <a href="#LINK1"><img src="http://www.dreamwidth.org/userpic/6925017/1162973" style="width: 50px; height: 50px; border-radius: 3px; margin: 0px 4px 4px 0px; display: inline;"></a>
<br/>

  <a href="#LINK1"><img src="http://www.dreamwidth.org/userpic/6925017/1162973" style="width: 50px; height: 50px; border-radius: 3px; margin: 0px 4px 4px 0px; display: inline;"></a>


  <a href="#LINK1"><img src="http://www.dreamwidth.org/userpic/6925017/1162973" style="width: 50px; height: 50px; border-radius: 3px; margin: 0px 4px 4px 0px; display: inline;"></a>


  <a href="#LINK1"><img src="http://www.dreamwidth.org/userpic/6925017/1162973" style="width: 50px; height: 50px; border-radius: 3px; margin: 0px 4px 4px 0px; display: inline;"></a>


  <a href="#LINK1"><img src="http://www.dreamwidth.org/userpic/6925017/1162973" style="width: 50px; height: 50px; border-radius: 3px; margin: 0px 4px 4px 0px; display: inline;"></a>
<br/>

</div>

</div></td>
</tr>
</table>
</center></raw-code>