yuff | Phone CR Chart! (Trails of Cold Steel Inspired)

Howdy all! I'm in an RP that uses phones as their network device, so I decided to make some CR charts that fit the theme! Not only that, but the blue one is in the flavor of The Legend of Heroes: Trails of Cold Steel's menu, for any fans of the series!

CONTACTS NAME USERNAME MESSAGE SHORT BLURB. RANK STATUS	CONTACTS USERNAME MESSAGE NAME MCNAME SHORT BLURB GOES HERE. Rank Lv 4 STATUS ♫
Live Preview	Live Preview
YELLOW CODE: <raw-code> <div style="display: block; background: url(http://i.imgur.com/COMtHew.png); height: 652px; width: 350px; margin: auto;"> <!--START PHONE SCREEN--> <div style="display: inline-block; height: 493px; width: 286px; background: url(); margin-top: 85px; margin-left: 29px; overflow: hidden;"> <!--START INDEX--> <a name="HOME"></a> <div style="display: inline-block; height: 493px; width: 286px;"><div style="display: block; width: 266px; text-align: center; padding: 10px 0px 5px 0px; margin: 0px 10px 0px; 10px; border-bottom: 1px solid #0099ff;"><span style="font-size: 25px; font-family:helvetica; color:#0055ee; line-height:35px; letter-spacing:1px; text-transform: uppercase; text-shadow: #47738E 0px 1px 1px;">CONTACTS<br/></span></div> <div style="display: block; padding: 20px; width: 246px; height: 398px; overflow: auto;"> <center> <div style="margin-left: 2px;"> <!--START IMAGE LINK--> <a href="#CR-LINK"><img src="IMG-URL" style="height: 55px; width: 55px; border-radius: 10px; border: 1px solid #0055ee" alt="NAME"></a> <!--END IMAGE LINK--> </div></center></div></div> <!--END INDEX--> <!--START ENTRY--> <a name="CR-LINK"></a> <div style="display: inline-block; height: 493px; width: 286px; overflow: auto;"><div style="width: 286px; margin-top: 20px;"> <img src="IMG-URL" style="border-radius: 50px; border: 2px solid #0055ee; margin-left: 91px;" alt="NAME"></div> <div style="width: 276px; border-bottom: 1px solid #0099ff; margin: 5px; height: 40px; text-align: center;"><span style="font-size: 25px; font-family:helvetica; color:#0055ee; line-height:35px; letter-spacing:1px; text-transform: uppercase; text-shadow: #47738E 0px 1px 1px;">NAME<br/></span></div> <div style="width: 286px; height: 20px;"><div style="display: inline-block; margin-left: 10px;"> <span style="font-family: helvetica, arial, sans-serif; font-size:10px; color:#888; letter-spacing:1px; text-align:justify; line-height: 10px; text-transform: uppercase;"> <a href="http://USERNAME.dreamwidth.org/" style="text-decoration: none; color: #888;">USERNAME</a></span></div> <div style="display: inline-block; float: right; margin-right: 10px;"><span style="font-family: helvetica, arial, sans-serif; font-size:10px; color:#888; letter-spacing:1px; text-align:justify; line-height: 10px; text-transform: uppercase;"> <a href="INBOX-LINK" style="text-decoration: none; color: #888;">MESSAGE</a></span></div></div> <div style="width: 266px; height: 175px; margin: 10px; background: rgba(245, 245, 255, 0.6)"> <div style="text-align: left; padding: 5px; font-family: helvetica, arial, sans-serif; color:#888; font-size: 10px; letter-spacing: 0.5px;"> SHORT BLURB. </div></div> <div style="width: 266px; margin: 0px 10px 0px 10px; height: 90px; background: rgba(245, 245, 255, 0.6);"> <div style="text-align: center;"><span style="font-size: 20px; font-family:helvetica; color:#0055ee; line-height:35px; letter-spacing:1px; text-transform: uppercase; text-shadow: #47738E 0px 1px 1px;">RANK</span></div> <!--BARS START--> <div style="display: inline-block; height: 20px; width: 130px; border: 2px solid #47738E; margin-bottom: 3px; margin-top: 8px; background: #FFF;"><div style="height: 100%; width: PERCENT%; background: #HEX-COLOR;"></div></div> <div style="display: inline-block; float: right; width: 125px; height: 40px; text-align: center;"> <span style="font-size: 20px; font-family:helvetica; color: #HEX-COLOR; line-height:35px; letter-spacing:1px; text-transform: uppercase; text-shadow: #HEX-COLOR 0px 1px 1px; "> STATUS </span></div> <!--BARS END--> </div></div> <!--END ENTRY--> </div> <!--END PHONE SCREEN--> <!--START NAVIGATION--> <div style="height: 50px; width: 250px; margin-left: 50px; margin-top: 5px;"> <div id="MENU-BUTTON" style="display: inline-block;"> <a href="#HOME"><img src="http://i.imgur.com/HoFM2eL.png" alt="Menu Button"></a></div> <div id="HOME-BUTTON" style="display: inline-block; margin-left: 42px"> <a href="#HOME"><img src="http://i.imgur.com/AnouINm.png" alt="Home Button"></a></div> <div id="BACK-BUTTON" style="display: inline-block; float: right;"> <a href="#HOME"><img src="http://i.imgur.com/rHw5yxu.png" alt="Back Button"></a></div></div> <!--END NAVIGATION--> </div> <div style="display: block; clear: both; height: 10px; text-align: center; font-variant: small-caps; padding: 5px;">Code by <a href="http://yuff.dreamwidth.org">Yuff</a></div></raw-code>	BLUE CODE: <raw-code> <div style="display: block; background: url(https://i.imgur.com/CMAduDY.png); height: 652px; width: 350px; margin: auto;"> <!--START PHONE SCREEN--> <div style="display: inline-block; height: 493px; width: 286px; background: url(https://i.imgur.com/wWiismG.png); margin-top: 85px; margin-left: 29px; overflow: hidden;"> <!--START INDEX--> <a name="HOME"></a> <div style="display: inline-block; height: 493px; width: 286px;"> <div style="display: block; width: 266px; text-align: center; padding: 10px 0px 5px 0px; margin: 0px 10px 0px; 10px; border-bottom: 1px solid #6793f4;"><span style="font-size: 25px; font-family: Palatino, helvetica; color:#f4f9fc; line-height:35px; letter-spacing:1px; text-transform: uppercase; text-shadow: #00040e 0px 1px 1px;">CONTACTS<br/></span></div> <div style="display: block; padding: 20px; width: 246px; height: 398px; overflow: auto;"> <center> <div style="margin-left: 2px;"> <!--START IMAGE LINK--> <a href="#CR-LINK"><img src="IMG-URL" style="height: 55px; width: 55px; border-radius: 10px; border: 1px solid #6793f4" alt="NAME"></a> <!--END IMAGE LINK--> </div></center></div></div> <!--END INDEX--> <!--START ENTRY--> <a name="CR-LINK"></a> <div style="display: inline-block; height: 493px; width: 286px; overflow: auto;"> <div style="display: inline-block; margin-left: 10px;"> <span style="font-family: Palatino, helvetica, arial, sans-serif; font-size:10px; color:#f4f9fc; letter-spacing:1px; text-align:justify; line-height: 10px; text-transform: uppercase;"> <a href="http://USERNAME.dreamwidth.org/" style="text-decoration: none; color: #f4f9fc;">USERNAME</a></span></div> <div style="display: inline-block; float: right; margin-right: 10px;"><span style="font-family: Palatino, helvetica, arial, sans-serif; font-size:10px; color:#f4f9fc; letter-spacing:1px; text-align:justify; line-height: 10px; text-transform: uppercase;"><a href="INBOX-URL" style="text-decoration: none; color: #f4f9fc;">MESSAGE</a></span></div> <div style="width: 286px; margin-top: 10px;"> <img src="ICON-URL" style="border-radius: 50px; border: 2px solid #6793f4; margin-left: 91px;" alt="NAME"></div> <div style="width: 276px; border-bottom: 1px solid #6793f4; margin: 5px; height: 40px; text-align: center;"><span style="font-size: 22px; font-family: Palatino, helvetica; color:#f4f9fc; line-height:35px; letter-spacing:1px; text-transform: uppercase; text-shadow: #00040e 0px 1px 1px;"> NAME MCNAME<br/></span></div> <div style="width: 266px; height: 133px; margin: 10px;"> <div style="text-align: left; padding: 5px; font-family: Palatino, helvetica, arial, sans-serif; color:#f4f9fc; font-size: 10px; letter-spacing: 0.5px;"> SHORT BLURB GOES HERE. </div></div> <div style="width: 266px; margin: 0px 10px 0px 10px; height: 90px;"><div style="text-align: center;"> <span style="font-size: 20px; font-family: Palatino, helvetica; color:#eff0eb; line-height:35px; letter-spacing:1px; font-variant: small-caps; text-shadow: #393d3c 0px 1px 1px;"> Rank Lv # </span></div> <!--BARS START--> <div style="display: block; margin: auto; height: 20px; width: 200px; border: 2px solid #1c484b; margin-bottom: 3px; background: #1e3c3a; border-radius: 12px;"> <div style="height: 100%; width: PERCENT%; background: #92f6ea; border-radius: 10px 0px 0px 10px;"></div></div> <div style="display: block; margin: auto; margin-top: 8px; width: 125px; height: 40px; text-align: center;"> <span style="font-size: 14px; font-family: Palatino, helvetica; color: #eff0eb; line-height:35px; letter-spacing:1px; text-transform: uppercase; text-shadow: #393d3c 0px 1px 1px;"> STATUS </span></div> <!--BARS END--> </div> <div style="display: block; margin: auto; margin-top: 25px; height: 40px; text-align: center;"> <span style="font-size: 24px; font-family: Palatino, helvetica; color: #A6A6A6; line-height:35px; letter-spacing:1px; text-transform: uppercase; text-shadow: #747474 0px 1px 1px;"> <a href="SONG-URL" style="color: #92f6ea; text-decoration: none;" target="_blank">♫</a></span></div></div> <!--END ENTRY--> </div> <!--END PHONE SCREEN--> <!--START NAVIGATION--> <div style="height: 50px; width: 250px; margin-left: 50px; margin-top: 5px;"> <div id="MENU-BUTTON" style="display: inline-block;"><a href="#HOME"><img src="http://i.imgur.com/HoFM2eL.png" alt="Menu Button"></a></div> <div id="HOME-BUTTON" style="display: inline-block; margin-left: 42px"><a href="#HOME"><img src="http://i.imgur.com/AnouINm.png" alt="Home Button"></a></div> <div id="BACK-BUTTON" style="display: inline-block; float: right;"><a href="#HOME"><img src="http://i.imgur.com/rHw5yxu.png" alt="Back Button"></a></div></div> <!--END NAVIGATION--> </div> <div style="display: block; clear: both; height: 10px; text-align: center; font-variant: small-caps; padding: 5px;">Code by <a href="http://yuff.dreamwidth.org">Yuff</a></div></raw-code>
HTML-Editor Friendly Version	HTML-Editor Friendly Version

NOTES:

The bottom buttons are fully functional! They are how you return to the navigation screen.

The blue one is heavily inspired by the Legend of Heroes: Trails of Cold Steel video game series and its social link system. The yellow one has no real fandom association.

On the yellow one, you'll have to enter in color codes for the text/bar color in the ranking area. For my own, I used the colors to rate their overall opinion (Green = Like/ Yellow = Neutral/ Red = Dislike / Gray = Unsure). If no color is added, it'll default to black.

On the blue one's bars, If the value is above 98, replace border-radius: 10px 0px 0px 10px; with just border-radius: 10px;

A phone background image can be changed/added to the phone. For best result, it should be a height of 493px and width of 286px. It will automatically resize any images to fit.

Extra screens can be added! Here's a good example. You just have to reassign one of the bottom buttoms to go to a new screen, though this is pretty advanced coding to pull off.

Modifications are totally fine. I'd love to see what you do with it though!

Comments are nice but not necessary. However, please leave the credit line on!

If you like what you see, I am currently taking commissions! Take a look!

Flat | Top-Level Comments Only

hello!! that's absolutely not a problem, real life happens and this definitely wasn't ( and isn't! ) a big, big deal for me.

i had just been wondering if there was a method and if there isn't, it is was it is. i thought there might not be since it didn't seem as though the code was "incorrect" to me, either. if it's a browser issue, at least i know i haven't messed up your awesome code. thank you so much for looking into this for me, i appreciate it!

Aw it's not problem! And no don't worry, you definitely didn't do anything to mess up the code. I tested it on one of my own (since when I designed the code I tested it on chrome and microsoft edge, but not Firefox oops) and it was the same deal.

Also just wanna let you know I love what you did with it!! It looks so cute. :>

Enjoy using the code!! And yeah if I ever come up with some fix, I'll let you know, though that'll probably be a long while if ever.

i generally just use chrome myself so i wasn't even aware of the issue until a friend using firefox brought it to my attention. i'm glad i didn't cause something odd to happen though, haha.

thank you! i'm very happy with how it turned out!

thanks!! and no problem, thanks for taking time out to take a look at all.

Phone CR Chart! (Trails of Cold Steel Inspired)

no subject

no subject

no subject