randomtology: (spiffy hats (Reno & Rude))
Yuff ([personal profile] randomtology) wrote in [community profile] yuff2017-09-16 08:43 pm
  • Add Memory
  • Share This Entry
Entry tags:

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 NAME NAME NAME NAME NAME NAME NAME
NAME
NAME
SHORT BLURB.
RANK
STATUS
Menu Button
Home Button
Back Button

CONTACTS
NAME NAME NAME NAME NAME NAME NAME NAME
NAME
NAME MCNAME
SHORT BLURB GOES HERE.
Rank Lv 4
STATUS
♫
Menu Button
Home Button
Back Button
Live Preview
Live Preview

YELLOW CODE:

BLUE 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
    foundling: (Default)

    [personal profile] foundling 2018-08-10 12:46 am (UTC)(link)
    hey there! i used this code ( with some tweaks in color & bg ) and i'm confused... it works perfectly fine on chrome! but on firefox it is being strange. it forgos the first contact icon completely and links the profile to the second one, etc. it's here but i'm not sure how to fix it... also, if you need to look at the coding, I have it here on pastebin — providing you have time to help, that is. if not, completely understandable. thanks much for a great cr chart!
    randomtology: (beyond these walls (Luke Fon Fabre))

    [personal profile] randomtology 2018-08-22 08:47 pm (UTC)(link)
    Hi there! Sorry for taking so long to respond back, RL caught up with me.

    I looked into the issue, and unfortunately it's an issue that not much can be done. The tag that's used to make the links work is a name="NAME", which technically "a name" is a dead tag according to current HTML "grammar" as you might say. So the reason it's borking some on firefox is because the browser with newer updates is recognizing it less and less. Not sure why it's just skipping around like it is, but browsers can be like that. Meanwhile chrome is much more willing to allow the code to keep working, so that's why it's fine on Chrome.

    Now, ideally we could update the HTML language to be what's currently "grammatically correct", which would be a id="NAME", but at this time Dreamwidth doesn't let us use that tag as it's running on an older UI (also ID might mess with the CSS of the entire site so I can see why they're reluctant to give us that power). I tried several ways to make it work, but I couldn't make it go. If someone else could figure it out, I'd love them long time.

    So TLDR: Firefox is being persnickety about using modern HTML grammar while DW is insisting on using old HTML grammar, and we're a little stuck between a rock and a hard place.

    Sorry! I wish I had a better answer. If I do come up with a fixed solution, I'll let you know.
    Edited 2018-08-22 20:48 (UTC)
    foundling: (Default)

    [personal profile] foundling 2018-08-22 08:52 pm (UTC)(link)
    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!
    randomtology: (spiffy hats (Reno & Rude))

    [personal profile] randomtology 2018-08-22 09:01 pm (UTC)(link)
    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.
    foundling: (Default)

    [personal profile] foundling 2018-08-22 09:06 pm (UTC)(link)
    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.
    Flat | Top-Level Comments Only