[OOC] Character Status Code @ crosschecks

[burnmydread]

Because I cannot stop myself and have a great need to make stylized pages for nearly everything, I made a CROSSCHECK specific version of my Persona 3-Style Status Sheet. You can see the live preview below! A few things to keep in mind...

• I've left developer comments throughout the code in <!-- Brackets --> to denote what section of the code is referring to, as well as small suggestions and instructions. You can remove these if you want, but they won't affect the formatting.
  
• Spaces in the header are important! Please leave them there.
  
• Update the character picture in the spot that says ***CHARACTERPIC***. I've tried to denote abilities and ranks that will need to be customized with a leading and following *** to make them easier to spot.
  
• The character picture should not be wider than 359px and not taller than 521px. A few pixels won't make a huge difference, but I wouldn't recommend going for like 400x600. I also recommend finding a picture of your character that already is transparent so it's easier to create the shadow. This is part of the picture itself, so an imaging editing program will be needed. If you don't have access to one, I will be happy to help. The shadow behind the character should be offset to the upper left and be in the #f7f7f7 color.
  
• The font colors are as follows: #df3f3f, #262626, background is #f7f7f7 (too light to write in the actual color), #b5b5b5, #797979
  
• The maximum height for the description area is set and any text that is too long will be lost into the aether. (It will be cut rather than trail out of the div.) I recommend keeping it down to about two paragraphs!
  
• The custom ranking/ability stat is meant to be silly. If you need help coming up with one and finding appropriate characters for them, feel free to ask. See Minato's for an example.

As always, please let me know if you have any questions!

STATUS

魔力	magic ▬▬▬▬▬ Getting Better	♟ Rank RANK 1 specialization Ability 1, Ability 2 inherent Default Ability
体力	strength ▬▬▬▬▬ Dismal
何力	custom ability ▬▬▬▬▬ Amazing

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

( get your own here! )

Comments

THE CODE!

[burnmydread]

<center><div width="700px;"> <div style="background-color: #f7f7f7; background-image: url(http://i.imgur.com/UI1nbAy.png),url(http://i.imgur.com/QM3ZOSN.png); background-position: top left, bottom left; background-repeat: no-repeat, no-repeat; background-size: 750px 243px, 600px 400px; width: 750px; height: 570px; box-shadow: 5px 5px 5px #ccc; border: solid 1px #262626; padding: 0px; text-align: left; vertical-align: top; position: relative: z-index: 1; margin-bottom: 30px;"> <div style="background: #df3f3f; width: 750px; height: 38px; position: relative; z-index: 50; top: -36px; left: 0px; text-align: center; font: bolder 54px arial black, arial, sans-serif; color: #262626; letter-spacing: 0.01em; font-style: italic; vertical-align: top; border-bottom: solid 6px #262626; text-shadow: none; line-height: 36px;">STATUS</div> <div style="padding: 0px; height: 521px; width: 750px; overflow-y: visible; overflow: hidden; position: relative; z-index: 100; top: -66px; left: -10px; float: left; background-image: url(***CHARACTERPIC***); background-position: bottom right; background-repeat: no-repeat;"> <!-- END HEADER--> <raw-code><div style="position: relative; z-index: 0; top: -55px; left: 10px; width: 460px; font: 12px arial; color: #fff; padding: 10px; text-align: left;"> <table cellpadding="0" cellspacing="0" style="position: relative; left: 15px;"> <tr> <!--MAGIC: This is where you rank your current magic stat!--> <td style="vertical-align: top; font-size: 48px; font-weight: bold; height: 40px; padding: 0px; line-height: 28pt;"> <span style="color: #b5b5b5;">魔</span><span style="color: #797979;">力</span> </td> <td style="vertical-align: top;"><span style="font-variant: small-caps; color: #b5b5b5; font-weight: bold; letter-spacing: 0.02em; font-size: 13pt; line-height: 2pt;">magic</span><br/> <span style="letter-spacing: 2pt; font-size: 12pt; line-height: 0pt;"><span style="color: #df3f3f;">▬▬</span><span style="color: #797979;">▬▬▬</span></span><br/> <!-- Move the boxes between the two spans to either make your stat higher or lower. --> <span style="letter-spacing: 1pt; font-weight: bold; line-height: 2pt;">***Getting Better***</span> <!-- Get creative with what you're naming your level. --> </td> <!--END MAGIC--> <td rowspan="5" style="vertical-align: middle; padding-left: 20px;"> <!--RANK: This is your in-game rank.--> <span style="color: #797979; font-size: 50pt; line-height: 0pt;">♟</span> <span style="color: #b5b5b5; font: 36pt georgia; line-height: 0pt;">***RANK***</span><br/> <span style="font-size: 12pt; font-weight: bold; line-height: 6pt; padding-left: 106px; letter-spacing: 2pt;">RANK 1</span><br/><br/> <div style="padding-left: 50px;"><span style="font-variant: small-caps; color: #b5b5b5; font-weight: bold; letter-spacing: 0.02em; font-size: 13pt; line-height: 2pt;">specialization</span><br/> <span style="letter-spacing: 1pt; font-weight: bold; line-height: 2pt;">***Ability 1, Ability 2***</span><br/><br/> <span style="font-variant: small-caps; color: #b5b5b5; font-weight: bold; letter-spacing: 0.02em; font-size: 13pt; line-height: 2pt;">inherent</span><br/> <span style="letter-spacing: 1pt; font-weight: bold; line-height: 2pt;">***Default Ability***</span> <!--END RANK--> </div> </td> </tr> <tr> <td style="padding-bottom: 10px;"></td> </tr> <tr> <!--STRENGTH: This is where you rank your current strength stat!--> <td style="vertical-align: top; font-size: 48px; font-weight: bold; height: 40px; padding: 0px; line-height: 28pt;"> <span style="color: #b5b5b5;">体</span><span style="color: #797979;">力</span> </td> <td style="vertical-align: top;"><span style="font-variant: small-caps; color: #b5b5b5; font-weight: bold; letter-spacing: 0.02em; font-size: 13pt; line-height: 2pt;">strength</span><br/> <span style="letter-spacing: 2pt; font-size: 12pt; line-height: 0pt;"><span style="color: #df3f3f;">▬</span><span style="color: #797979;">▬▬▬▬</span></span><br/> <!-- Move the boxes between the two spns to either make your stat higher or lower. --> <span style="letter-spacing: 1pt; font-weight: bold; line-height: 2pt;">****Dismal***</span> <!-- Get creative with what you're naming your level. --> </td> <!--END STRENGTH--> </tr> <tr> <td style="padding-bottom: 10px;"></td> </tr> <tr> <!--OTHER: This is your random ability!--> <td style="vertical-align: top; font-size: 48px; font-weight: bold; height: 40px; padding: 0px; line-height: 28pt;"> <span style="color: #b5b5b5;">何</span><span style="color: #797979;">力</span> </td> <td style="vertical-align: top;"><span style="font-variant: small-caps; color: #b5b5b5; font-weight: bold; letter-spacing: 0.02em; font-size: 13pt; line-height: 2pt;">***custom ability***</span><br/> <span style="letter-spacing: 2pt; font-size: 12pt; line-height: 0pt;"><span style="color: #df3f3f;">▬▬▬▬▬</span></span><br/> <!-- Move the boxes between the two spans to either make your stat higher or lower. --> <span style="letter-spacing: 1pt; font-weight: bold; line-height: 2pt;">***Amazing***</span> <!-- Get creative with what you're naming your level. --> </td> <!--END OTHER--> </tr> </table> <div style="width: 370px; max-height: 242px; overflow: hidden; background: #f7f7f7; border-top: solid 5px #df3f3f; border-bottom: solid 5px #df3f3f; font-family: arial, sans-serif; color: #262626; line-height: 10pt; padding: 15px; position: relative; left: 10px; top: 30px; text-align: justify;"> <!--DESCRIPTION: Fill this out to your heart's content!--> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <Br/><br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <!--END DESCRIPTION--> <center> </div></div> </raw-code> <!--FOOTER--> </div></div></div> <center><span style="color: #aaa; letter-spacing: 2px; font-size: 8pt;">( get your own <a href="http://burnmydread.dreamwidth.org/7504.html" style="color: #999; font-weight: bold; text-decoration: none;">here</a>! )</span></center>

HELP ME!

[burnmydread]

If you need help making a character profile image, just leave a comment here! Preferably if you've found a few images that you'd like to use. Transparent BG is best!

OR if you need help picking characters for your special ability, ask here as well!

[hiryugaeshi]

Is it possible to work with this? I'm poking around for more Kojirou images but this is the cleanest I've found.

[burnmydread]

I'll see what I can do!

[burnmydread]

Alright, I think this should work! http://i.imgur.com/J67c1yL.png

I did tweak the positioning a bit so if that looks good to you, please use this code for the header:

<center><div width="700px;"> <div style="background-color: #f7f7f7; background-image: url(http://i.imgur.com/UI1nbAy.png),url(http://i.imgur.com/QM3ZOSN.png); background-position: top left, bottom left; background-repeat: no-repeat, no-repeat; background-size: 750px 243px, 600px 400px; width: 750px; height: 570px; box-shadow: 5px 5px 5px #ccc; border: solid 1px #262626; padding: 0px; text-align: left; vertical-align: top; position: relative: z-index: 1; margin-bottom: 30px;"> <div style="background: #df3f3f; width: 750px; height: 38px; position: relative; z-index: 50; top: -36px; left: 0px; text-align: center; font: bolder 54px arial black, arial, sans-serif; color: #262626; letter-spacing: 0.01em; font-style: italic; vertical-align: top; border-bottom: solid 6px #262626; text-shadow: none; line-height: 36px;">STATUS</div> <div style="padding: 0px; height: 521px; width: 750px; overflow-y: visible; overflow: hidden; position: relative; z-index: 100; top: -67px; left: 0px; float: left; background-image: url(http://i.imgur.com/J67c1yL.png); background-position: bottom right; background-repeat: no-repeat;"> <!-- END HEADER-->

[hiryugaeshi]

Thank you very muchly!

[burnmydread]

You are quite welcome!

Re: HELP ME!

[drawmecute]

I think I've made this as a viable profile image.

I'm a bit unsure as to what characters to use for Lola's third stat (waffling between 'fashion,' 'jumping,' and 'booty.' That last line is 76% joke).

[burnmydread]

Aaah, Lola, so cute! Let me see what I can do...

FASHION

流儀 - Style; Fashion
服力 - lit. "clothes" + "power"

JUMPING

飛躍 - leaping (activity), leap (in logic), "Make strides"
踊力 - lit. "jump, dance, leap, skip" + "power"
趯力 - lit. "jump" + "power"


BOOTY

尻力 - lit. "butt" + "power"
良尻 - lit. "good, pleasing" + "butt"

[drawmecute]

I went with pleasing butt because, let's be real, Lola's priorities swing exactly that way.

And then because my journal style and this code refused to play nice... I cheated and turned this into an image (which means editing it will be a trial, but I am fine with that).

This coding just continues to confirm that I should play more P3 because I am sure Social Links and Degrassi would go well together, but what is free time. Thank you for the moon language.

[burnmydread]

Those are good priorities to have, tbh.

You are quite welcome! I'm glad you wanted to use it. AND YOU SHOULD for a fun, depressing ending.