pixle_squared | Persona 4 - Themed CR Chart

PREVIEW

This CR Chart spans 850px in width and includes various versions depending on how the CR has been going much like the game (Normal, Reversed, Maxed & Broken)
INSTRUCTIONS
♠ Copy the code as much as needed
♠ MAKE SURE YOU EDIT IN HTML MODE AND CLICK DISABLE AUTO-FORMATTING!
♠ Get your Persona Card images from this album: RIGHT HERE. (Cards are made by

twilitfall! Please credit if you use them somewhere else)
♠ If you use the CR chart, I would like if you please keep the credit at the end. I coded it from scratch + got the cards for you to use so all I ask is credit. Thank you! ♥

TOP AREA (Copy just once for top)

CENTRAL AREA (NORMAL LINK) (Recopy for each character you add)

<table style="width: 850px; background-color: #fce92b; vertical-align: middle;  margin-bottom: -8px;">
  <tr>
    <td valign="top" style="width:100px;"> <center> <img src="!!_LINK_TO_A_DREAMWIDTH_ICON_INCLUDE_HTTP_TOO_!!" style="width:100px; height:100px;  -moz-border-radius: 10px; -webkit-border-radius: 10px; margin-top: 10px; margin-left: 10px; border: 5px solid #FFCC00; "><BR><img src="!!_GET_A_PERSONA_CARD_HERE_!!" width="63" height="90" style=" -moz-border-radius: 10px; -webkit-border-radius: 10px; margin-top: 10px; margin-left: 10px; border: 5px solid #FFCC00;"></td>
    <td rowspan="2" style="vertical-align:top; width:100%;">  <table style="width:100%; margin-top: 5px; background-color: #ff8611; height:40px;  vertical-align:top; -moz-border-radius:8px; -webkit-border-radius: 8px; -webkit-transform: rotate(1deg) ; -moz-transform: rotate(1deg); -o-transform: rotate(1deg); background-image:url('http://i.imgur.com/hMifB.png');"> <tr> <td><div style="font-family: Verdana, Geneva, sans-serif; color: #683c15; font-size: 20pt; text-align: left; font-weight:bold; letter-spacing: -1px; position:relative" >!!_CHARCTER'S_NAME_GOES_HERE_IN_SMALL_LETTERS_!!</div></td></tr></table>
      <table style="width:100%; margin-top: -6px; background-color: #4b3915; -moz-border-radius:8px; -webkit-border-radius: 8px; vertical-align:top; background-image:url('http://i.imgur.com/VF8cx.png')"> <tr> <td>  
    <p style="color: #fff; font-size: 17pt; font-family:Verdana, Geneva, sans-serif;  text-align: center; letter-spacing: -1px; line-height: 18px; margin-top: 10px;"><b>FORTUNE<br> <small><small>RANK: !!INSERT YOUR RANK HERE!! </B></small></small></p>
          <p style="color: #fff; text-align: justify; margin-left: 5px; margin-top: -20px; margin-right: 5px;">INSERT YOUR TEXT ABOUT THE CHARACTER HERE</P></td></tr></table>
    <td style="width:5px;"></td>
  </tr>
</table>

CENTRAL AREA (MAX LINK) (Recopy for each character you add)

<table style="width: 850px; background-color: #fce92b; vertical-align: middle;  margin-bottom: -8px;">
  <tr>
    <td valign="top" style="width:100px;"> <center> <img src="!!_LINK_TO_A_DREAMWIDTH_ICON_INCLUDE_HTTP_TOO_!!" style="width:100px; height:100px; border: 2px solid #fff; -moz-border-radius: 10px; -webkit-border-radius: 10px; margin-top: 10px; margin-left: 10px; box-shadow: 0px 0px 4px 3px #fff;"><BR><img src="!!_GET_A_PERSONA_CARD_HERE_!!" width="63" height="90" style="border: 2px solid #fff; -moz-border-radius: 10px; -webkit-border-radius: 10px; margin-top: 10px; margin-left: 10px; box-shadow: 0px 0px 4px 3px #fff;"></td>
    <td rowspan="2" style="vertical-align:top; width:100%;">  <table style="width:100%; margin-top: 5px; background-color: #ff8611; height:40px;  vertical-align:top; -moz-border-radius:8px; -webkit-border-radius: 8px; -webkit-transform: rotate(1deg) ; -moz-transform: rotate(1deg); -o-transform: rotate(1deg); background-image:url('http://i.imgur.com/hMifB.png');"> <tr> <td><div style="font-family: Verdana, Geneva, sans-serif; color: #683c15; font-size: 20pt; text-align: left; font-weight:bold; letter-spacing: -1px; position:relative" >!!_CHARCTER'S_NAME_GOES_HERE_IN_SMALL_LETTERS_!!</div></td></tr></table>
     
     <table style="width:100%; margin-top: -6px; background-color: #4b3915; -moz-border-radius:8px; -webkit-border-radius: 8px; vertical-align:top; background-image:url('http://i.imgur.com/VF8cx.png') "> <tr> <td>  
    <p style="color: #fff; font-size: 17pt; font-family:Verdana, Geneva, sans-serif;  text-align: center; letter-spacing: -1px; line-height: 18px; margin-top: 10px;"><b>FORTUNE<br> <small><small>RANK: MAX</B></small></small></p>
          <p style="color: #fff; text-align: justify; margin-left: 5px; margin-top: -20px; margin-right: 5px;">INSERT YOUR TEXT ABOUT THE CHARACTER HERE</P></td></tr></table>
    <td style="width:5px;"></td>
  </tr>
</table>

CENTRAL AREA (BROKEN LINK) (Recopy for each character you add)

<table style="width: 850px; background-color: #fce92b; vertical-align: middle;  margin-bottom: -8px;">
  <tr>
    <td valign="top" style="width:100px;"> <center> <img src="!!_LINK_TO_A_DREAMWIDTH_ICON_INCLUDE_HTTP_TOO_!!" style="width:100px; height:100px; border: 5px solid #FFCC00; -moz-border-radius: 10px; -webkit-border-radius: 10px; margin-top: 10px; margin-left: 10px; box-shadow: 0px 0px 10px 4px #ffb9cc; filter:alpha(opacity=80) !important; opacity:.8"><BR><img src="!!_GET_A_PERSONA_CARD_HERE_!!" width="63" height="90" style="border: 5px solid #FFCC00; -moz-border-radius: 10px; -webkit-border-radius: 10px; margin-top: 10px; margin-left: 10px; box-shadow: 0px 0px 10px 4px #ffb9cc;"></td>
    <td rowspan="2" style="vertical-align:top; width:100%;">  <table style="width:100%; margin-top: 5px; background-color: #ff8611; height:40px;  vertical-align:top; -moz-border-radius:8px; -webkit-border-radius: 8px; -webkit-transform: rotate(1deg) ; -moz-transform: rotate(1deg); -o-transform: rotate(1deg); margin-top: 10px; filter:alpha(opacity=70) !important; opacity:.7; background-image:url('http://i.imgur.com/hMifB.png');"> <tr> <td><div style="font-family: Verdana, Geneva, sans-serif; color: #683c15; font-size: 20pt; text-align: left; font-weight:bold; letter-spacing: -1px;" >!!_CHARCTER'S_NAME_GOES_HERE_IN_SMALL_LETTERS_!!</div></td></tr></table>
        
     <table style="width:100%; margin-top: -6px; background-color: #4b3915; -moz-border-radius:8px; -webkit-border-radius: 8px; vertical-align:top; filter:alpha(opacity=70) !important; opacity:.7; background-image:url('http://i.imgur.com/VF8cx.png');"> <tr> <td>  
    <p style="color: #fff; font-size: 17pt; font-family:Verdana, Geneva, sans-serif;  text-align: center; letter-spacing: -1px; line-height: 18px; margin-top: 10px;"><b>FORTUNE<br> <small><small>RANK: BROKEN</B></small></small></p>
          <p style="color: #fff; text-align: justify; margin-left: 5px; margin-top: -20px; margin-right: 5px;">INSERT YOUR TEXT ABOUT THE CHARACTER HERE</P></td></tr></table>
    <td style="width:5px;"></td>
  </tr>
</table>

CENTRAL AREA (REVERSED LINK) (Recopy for each character you add)

<table style="width: 850px; background-color: #fce92b; vertical-align: middle;  margin-bottom: -8px;">
  <tr>
    <td valign="top" style="width:100px;"> <center> <img src="!!_LINK_TO_A_DREAMWIDTH_ICON_INCLUDE_HTTP_TOO_!!" style="width:100px; height:100px; border: 2px solid #860026; -moz-border-radius: 10px; -webkit-border-radius: 10px; margin-top: 10px; margin-left: 10px; box-shadow: 0px 0px 4px 2px #ff0000;"><BR><img src="!!_GET_A_PERSONA_CARD_HERE_!!"width="63" height="90" style="border: 3px solid #d80000; -moz-border-radius: 10px; -webkit-border-radius: 10px; margin-top: 10px; margin-left: 10px; box-shadow: 0px 0px 3px 2px #ff0000;"></td>
    <td rowspan="2" style="vertical-align:top; width:100%;">  <table style="width:100%; margin-top: 5px; background-color: #ff8611; height:40px;  vertical-align:top; -moz-border-radius:8px; -webkit-border-radius: 8px; -webkit-transform: rotate(1deg) ; -moz-transform: rotate(1deg); -o-transform: rotate(1deg); margin-top: 10px; background-image:url('http://i.imgur.com/hMifB.png');"> <tr> <td><div style="font-family: Verdana, Geneva, sans-serif; color: #683c15; font-size: 20pt; text-align: left; font-weight:bold; letter-spacing: -1px; position:relative" >!!_CHARCTER'S_NAME_GOES_HERE_IN_SMALL_LETTERS_!!</div></td></tr></table>
    
     <table style="width:100%; margin-top: -6px; background-color: #4b3915; -moz-border-radius:8px; -webkit-border-radius: 8px; vertical-align:top; background-image:url('http://i.imgur.com/VF8cx.png');"> <tr> <td>  
    <p style="color: #fff; font-size: 17pt; font-family:Verdana, Geneva, sans-serif;  text-align: center; letter-spacing: -1px; line-height: 18px; margin-top: 10px;"><b>FORTUNE<br> <small><small>RANK: REVERSE</B></small></small></p>
          <p style="color: #fff; text-align: justify; margin-left: 5px; margin-top: -20px; margin-right: 5px;">INSERT YOUR TEXT ABOUT THE CHARACTER HERE</P></td></tr></table>
    <td style="width:5px;"></td>
  </tr>
</table>

BOTTOM AREA (Copy just once when you are done with the characters)

RESULTS (WITH ALL FOUR VERSIONS)

SOCIAL LINKS

Naoto Shirogane

FORTUNE
RANK: 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vehicula tempor dictum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque lorem neque, facilisis non posuere nec, porttitor vel nisl. Quisque neque massa, scelerisque eu pharetra quis, suscipit a lorem. Nam tincidunt, arcu molestie luctus condimentum, libero mi posuere mi, in scelerisque diam enim ac tellus. Vestibulum gravida cursus lacinia. Proin a est ut orci pharetra eleifend eu vel arcu. In mattis auctor imperdiet. Aliquam nec odio nunc. Praesent nec pulvinar est. Ut quis odio augue, vel cursus tortor. Morbi elementum dignissim interdum. Morbi at risus metus. In imperdiet ligula eu augue sodales accumsan. Morbi eget pharetra nisi. Morbi at ipsum a tortor rutrum tincidunt.

Naoto Shirogane

FORTUNE
RANK: MAX

Naoto Shirogane

FORTUNE
RANK: BROKEN

Naoto Shirogane

FORTUNE
RANK: REVERSE

Persona 4 inspired CR Codechart created by

pixle_squared. Icons made by

twilitfall

Persona 4 - Themed CR Chart | Fixed 850px

Post a comment in response: