Forgotten Tales Mods (![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
keeperoftales) wrote2018-08-15 12:14 pm
keeperoftales) wrote2018-08-15 12:14 pm
{ cr chart }
CR Chart: Notebook—
§ about.
Because I'm insane I've made a CR chart for players who may be interested in keeping one. Because of its format, it could be used for other purposes, like a visual stand-in for the character journal or keeping notes and information about everyone. Could even use it like a diary of sorts.
There are three total versions to this. Rather than talk about each of them, you can "flip" through the notebook to see the slight variations and read about it. Not only can you flip through the pages, but there is a "navigation bar" beneath, allowing you to "jump" to a specific character. Only up to Della works, the rest are slotted in for visual representation.
Although the code is straightforward and easy to update, keeping up with links, especially for the previous and next pages, can be annoying. So for those interested, I have made an automated script for this particular chart. I've made it as easy to use as possible so that all anyone has to do is input their data and run it, but there are ways to customize it a little more. Further instructions are detailed below.
Any credit goes tolaenavesse @ ![[community profile]](https://www.dreamwidth.org/img/silk/identity/community.png)
efryndiel, which also has a gen version available.
» Here are the pastebin links to each version of the raw code. You can save or c/p the code and edit it as you see fit:
» Code for the symbol legend is here (stick it above the </raw-code>:
» The colors are:
» As mentioned the text will automatically "cut" or "hide" once it hits the limit.
» The symbols provided are completely random and can be whatever you want.
» To add more "Character Pages" use the code between "CHARACTER START" and "END CHARACTER". For the last character of the book, just delete the "NEXT PAGE" div code.
» When adding or removing characters, make sure the anchor tag (<a name="char#">) matches the links for the navigation links (previous, next, and navigation bar).
» Use <br /> tags for line breaks!
» The navigation bar is default to center the icons, but if you have more than nine and want it to look like the example shown, delete the <center> tags.
After reading about the raw code, you may be tempted to have something that could reduce the work for you. Google Spreadsheets allows the user to create app scripts, and with this tool it can take the data in the sheet and generate the code. If you're just going to use the template as is, this is the easiest and fastest thing you can use to maintain the code. If you want to make certain modifications, it's not difficult and quite easy, but it does require a few extra steps that those unfamiliar with how spreadsheets and coding work might find a little daunting at first. But the payoff is worth it.
There is even a script to let you preview the code within the spreadsheet! Handy.
Also, the generated code doesn't have any line breaks so it's...one giant mess. But since you're c/ping everything it shouldn't matter too much, ah ha...
NOTE: The symbol legend is not included, so you'll have to add that to the page manually and inside the </raw-code>. You can just paste any updated generated code above it, just be sure to delete the </raw-code> at the end of the code so that the legend is back inside.
Here are the spreadsheets. To save, Make a Copy of it for your own use:
For a live example of how it would look like filled out, here is Rokurou's with the final product.
I have included detailed instructions on how to do practically everything you could possibly do with the code with minimum risk. But if you have any questions or need help with modifications, just comment and I'll take a poke, even customize it for you if possible. However, I am not a professional, so my own abilities are limited.
| ☼ | ♥ | ♪ | ✦ | ✖ |
| one | two | three | four | five |
§ about.
There are three total versions to this. Rather than talk about each of them, you can "flip" through the notebook to see the slight variations and read about it. Not only can you flip through the pages, but there is a "navigation bar" beneath, allowing you to "jump" to a specific character. Only up to Della works, the rest are slotted in for visual representation.
Although the code is straightforward and easy to update, keeping up with links, especially for the previous and next pages, can be annoying. So for those interested, I have made an automated script for this particular chart. I've made it as easy to use as possible so that all anyone has to do is input their data and run it, but there are ways to customize it a little more. Further instructions are detailed below.
Any credit goes to
laenavesse @ efryndiel, which also has a gen version available.§ instructions & raw code.
» Here are the pastebin links to each version of the raw code. You can save or c/p the code and edit it as you see fit:
- Version 1: Quote + Double Static Rating
- Version 2: Quote + Single Static Rating
- Version 3: All in One
» Code for the symbol legend is here (stick it above the </raw-code>:
» The colors are:
- #7d6f62: cover background
- #d3cec0: cover border right; cover subtitle color; bookmark background; divider background
- #473c2f: cover border left
- #ccc496: cover title
- #804024: quote text; links
- #3e2f22: note text
- #ac3b25: circle symbols
- #73604b: other symbols
» As mentioned the text will automatically "cut" or "hide" once it hits the limit.
» The symbols provided are completely random and can be whatever you want.
» To add more "Character Pages" use the code between "CHARACTER START" and "END CHARACTER". For the last character of the book, just delete the "NEXT PAGE" div code.
» When adding or removing characters, make sure the anchor tag (<a name="char#">) matches the links for the navigation links (previous, next, and navigation bar).
» Use <br /> tags for line breaks!
» The navigation bar is default to center the icons, but if you have more than nine and want it to look like the example shown, delete the <center> tags.
§ automated script instructions.
After reading about the raw code, you may be tempted to have something that could reduce the work for you. Google Spreadsheets allows the user to create app scripts, and with this tool it can take the data in the sheet and generate the code. If you're just going to use the template as is, this is the easiest and fastest thing you can use to maintain the code. If you want to make certain modifications, it's not difficult and quite easy, but it does require a few extra steps that those unfamiliar with how spreadsheets and coding work might find a little daunting at first. But the payoff is worth it.
There is even a script to let you preview the code within the spreadsheet! Handy.
Also, the generated code doesn't have any line breaks so it's...one giant mess. But since you're c/ping everything it shouldn't matter too much, ah ha...
NOTE: The symbol legend is not included, so you'll have to add that to the page manually and inside the </raw-code>. You can just paste any updated generated code above it, just be sure to delete the </raw-code> at the end of the code so that the legend is back inside.
Here are the spreadsheets. To save, Make a Copy of it for your own use:
For a live example of how it would look like filled out, here is Rokurou's with the final product.
I have included detailed instructions on how to do practically everything you could possibly do with the code with minimum risk. But if you have any questions or need help with modifications, just comment and I'll take a poke, even customize it for you if possible. However, I am not a professional, so my own abilities are limited.