COMMISSIONS
I offer two types of commission services: code automation and plurk emotes. Further information can be found in their own sections below, but here is a quick general overview of how my commissions work.

» I can work with most pre-made codes and adapt them to my automation scripts. Thread trackers (with or without points and/or forms), CR charts, muse lists, info sheets, visuals—if there is anything that involves a lot of repetitive sections or data, I can script it.

» For script commissions, you can contact via PM, comment to this entry, or use my Ko-Fi to purchase a package. However I would like to see the code first to ensure that I can add a script to it.

» For emotes, please request using the current emote request plurk. There is a repository of the main style I make, but I can do other simple styles. The repository will also have a link to the current request plurk.

» Payments go through my Ko-Fi and uses PayPal. You can either pay via Tips or the designated package for scripts.

» Emotes can take anywhere between 1-2 days depending on my schedule. Code scripts can take 1-5 days depending on how difficult it is implement the script. I'll let you know beforehand if there will be a delayed start.

CODE AUTOMATION SCRIPTS )
PLURK EMOTES )

profile sheet


AGE:
GENDER:
HEIGHT:
RACE:
PLAYER: [plurk.com profile] USERNAME
ACTIVE: [community profile] game, MEMES
CHARACTER NAME
CANON
ABOUT
CANON POINT: All of these fields are optional, so can add, remove, and edit however you want!
VISUAL: Here is a formatted link you can have so it's not the default link color. Oooh aaah.
BUILD: The "About" page has full character details and history bio at the bottom
HAIR: The whole layout will dynamically resize for smaller screens, and can work as a splash page.
EYES: Navigation is at the bottom, add and remove link buttons as needed. They're all just templates.
FEATURES:
ATTIRE:
WEAPONS:
VOICE:

ORIGINS:
FAMILY:
RELATIONSHIPS:
OCCUPATION:

HISTORY: Whatever blurb you want. Maybe you want to use some cut text to save space?

Have a cut tag. And now you can dump your spoilers.

EXTRA SECTION: BLURB BLURB
PERSONALITY
ALIGNMENT: This is all just a bunch of random characterization stuff
ATTITUDE:
VIRTUES:
VICES:
QUIRKS:
LIKES:
DISLIKES:
HOBBIES:

FIRST IMPRESSIONS: BLURB BLURB

MOTIVATIONS: BLURB BLURB

FLAWS: BLURB BLURB

EXTRA: BLURB BLURB
ABILITIES
CLASS:
WEAPONS:
INVENTORY:
STRENGTH: Really getting D&D here—
DEXTERITY:
CONSTITUTION:
INTELLIGENCE:
WISDOM:
CHARISMA:

SKILLS: BLURB BLURB

EXTRA SECTION: BLURB BLURB

PERMISSIONS
BACKTAGGING: Replace and add whatever you need!
THREADHOPPING:
FOURTHWALLING:
ROMANCE:
MINDREADING:
MANIPULATION:
FIGHTING:
INJURY:
KILLING:

Feel free to contact for more information and plotting!
PREFERENCES
MEMES: Or turn this into a kink list. Or add a kink list section.
PSLS:
AUS:
CONTENT:
DO NOT WANT:
SHIPPING:
DYNAMICS:
MAIN PAIRINGS:
TAG STYLE:
TAG SPEED:
EXTRA
FIELD: This is just a preformatted extra section that you can use however you wish. Could be for a kink list, some game info, character's inventory, whatever you want! Just make sure to change the a name="extra" to match the link in the navigation.
FIELD:
FIELD:
FIELD:
FIELD:

FIELD:


code



instructions )
cottagecore collapsible tracker
(with bonus inventory list)


2023
January
2/06 : Log » this tracker has a lot of different options! and many ways to customize! it does have a "manual c/p" version if the spreadsheet is too overwhelming for those not familiar with googlesheets or don't need all the bells and whistles
» { character } you can do custom formatting with your info, such as using italics or other html formatting codes
» { character } the neat thing about this sheet is it will keep a tally of your comments or points, which is handy for games that use rewards
2/10 » { character } this sheet has "just the tracker" version and there is a "rewards" version. since every game has a different format, please contact me so i can set one up for your game specifically
February
3/14: Network » { character } leaving fields blank is totally fine. don't like the "TYPE" column? just clear out the example values and right click > hide the column
3/14: Network » { character } same with the "COM#", "STATUS", and "USED" columns. You can hide the "COM#" column and toggle comments to be invisible or shown, but you can delete the "STATUS" and "USED" columns as they aren't used the code.
3/19 : Network » i just randomly colored the empty squares to make it look nice you can always reset that back to white or change it
» { character } the "STYLE" sheet has a lot of fields to customize. the "MONTHS" sheet is where you put in all the cool customization for the month headers. if you want to make the header blank, just leave the field empty.
» { character } blurb blurb blurb blurby blurb

March
4/03: Network » { character } now i just have a lot of blurbs blah blah blah blah blah
4/12: Log » { character } blah blah blah blah
4/15: Inbox » { character } it's for testing stuff so you can preview before clearing out everything
4/20: Log » { character } lalalalalalala
April
5/01 : Log » these are all collapsible by the way, just click on the month headers or click on the screenshot below




Inventory
Item
» shovel
» watering can
» cards
Furniture
» chair
» bed
» stool
Regain
» puppy: optional blurb written out with item
» portrait
Misc.
» billboard sign

Inventory
simplified version with just the list of items, no group headers

» shovel
» watering can
» cards
» chair
» bed
» stool
» puppy: optional blurb written out with item
» portrait
» billboard sign



instructions )
For players in [community profile] fabletales and from other games who might be interested to see how rewards submissions can be handled, this spreadsheet script will help keep track of all your threads, how many points you've accumulated and spent, generate rewards forms, and can also keep up with all your rewards/inventory. I used the Cottagecore Thread Tracker and Inventory design as a base, but this sheet could be used for any kind of tracker or inventory code with modifications. There are three versions, so you can choose which version you'd like:

»» Fable Rewards Only (inventory only with forms)
»» Fable Thread Tracker and Rewards (has both the thread tracker and inventory with forms

screenshots and info )
February
Sunday
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
1
Plot With Me
2
3
State of the Game
4
5
ATP/EMP
6
7
8
9
10
11
12
13
14
Event/TDM
15
16
17
18
19
20
21
22
Reserves Open
23
24
25
26
Activity Check
27
28
March
Sunday
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
1
Apps Open
2
3
CR Meme
4
5
Player Event
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
April
Sunday
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
SELECT MONTH




about & instructions

This is a fully automated calendar that uses Google Sheets to generate a calendar that will fit whatever needs you have. It's a simple design, but can be customized if you know what to do (I can also help change things if needed). The main draw is being able to not only display a calendar, but also maintain it without having to dig into the code and update it manually all the time. You can color the cells and it will be the same on the code. You can also customize the calendar so that you can put unique Month headers or Days if you have custom labeled calendar. It is based off the Gregorian 7x5 (with occasional 7x6) grid, but not impossible to change to something different. This will work for any year by adjusting the Starting Day settings, and will also work for leap years.

Here are some screenshots: Spreadsheet; Preview. For a live example, I used this for [community profile] songerein here, and our spreedsheet looks like this.

To save, Make a Copy of the spreadsheet for your own use. It's already "pre-filled" with random data so you can see how it works. When you run it for the first time, you'll have to accept permissions (it's safe as everything is local to your machine). Just follow the instructions that pop up and then you'll be able to run it.
The generated code doesn't have any line breaks so it's one giant mess. Since you're c/ping everything it shouldn't matter too much, however, there is HTML Formatter and other HTML formatters that will make it less of a giant blob! Just C/P the giant blob and it will reformat into something more legible.

I have included detailed instructions on how to work the sheet. 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.

As a side note, for those who use Tessisamess's calendar code, I have it scripted for this, as well. I just don't have a public release version since the calendar code is not mine and I feel a little awkward publicly releasing scripts for other codes. It does have credits for both Tess and myself. If you wish to have a scripted version of that code, just hit me up and I'll send it over.

A small credit code is included, but any credit goes to [personal profile] laenavesse @ [community profile] efryndiel. Although not necessary, I do accept tips on ko-fi! For this script in particular, I'd really appreciate any from those who use it since it was a beast to create. I can also do script commissions for other codes!
—— HEADER TEXT ——

     



about

This is an adaptive image gallery utilizing the Adaptive Photo Layout from CSS-Tricks. It's a nice, clean way to display images with that photo gallery look. It's set to be dynamic so it will adjust to fit the window. To prevent weird stretching, the final row of images will not fill all the way to the end. It also includes title text so you can add descriptions or image credits on hover.

It's not too bad to update manually, but I have made an automated script that will make it easier to update the images and change overall styles. 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 within the cuts.

A small credit code is included, but any credit goes to [personal profile] laenavesse @ [community profile] efryndiel. Although not necessary, I do accept tips now on ko-fi! I can also do script commissions.


raw code instructions
» Pastebins for the raw code. You can save or c/p the code and edit it as you see fit:

» The colors used are:

  • #804024: header text
  • #866a4c: li background

» Just copy the image code to add new images. No need for line breaks or anything, it's designed to flow and wrap automatically. Images can be ordered in any way you want. There shouldn't be too much aspect ratio distortion, but that is something to keep in mind and you may need to resize an image.

» The max-width of the image must stay 100%. The max-height can change, however I would recommend keeping it no bigger than ~250px. It is possible to use this for a larger display, but it will depend on your image sizes.

» You can adjust the margin of the «li» tag to increase or decrease the white gap between images. "0" will make all the images flush, as seen in this screenshot. This is set to "1" by default in the script.

» I have the maximum width (max-width) of the main div set at 75%, but this can be changed to whatever you want. In the automation script, you'll need to specify if the value is a percentage (ex, 90%) or absolute value (ex, 750px). The "%" or the "px" need to be included!

» If you want a border around the images like this, you will want to use the second pastebin base to work off of. Because we're using the unordered list for this code, we have to do a "workaround" to create a border. You can make three kinds of edits in the «li» tag:

  • background-color will be your "border color". Change the color here to be whatever color you want the "border" to be.
  • padding will be your "border width". Change the value to adjust the size of the padding to increase the "border"'s thickness.
  • margin is for the space between images. I'd suggest to make the value half of the padding for a nice proportion (example, padding: 2px, margin: 1px).

And that's all there is to it. The script has this option as a "toggle" so you can easily swap between having a border or not.



automated script and instructions
After reading about the raw code, you may be tempted to have something that could reduce the work for you. Google Sheets allows the user to create app scripts, and with this tool it can take the data in the sheet and generate the code. With the number of images you might have, this will make maintaining and organizing everything a breeze. This script also toggles between whether you want to have a "border" around your images or not. If you want to make certain modifications, it's not too difficult, but it does require a few extra steps that may seem daunting to those not familiar with how coding or Google Sheets work. But the payoff is worth it.

There is even a script to let you preview the code within the spreadsheet! Handy.

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... However, if it does matter to you there is HTML Formatter and other HTML formatters that will make it less of a giant blob! Just C/P the giant blob and it will reformat into something more legible.

To save, Make a Copy of the spreadsheet for your own use. It's already "pre-filled" with random data so you can see how it works. When you run it for the first time, you'll have to accept permissions (it's safe as everything is local to your machine). Just follow the instructions that pop up and then you'll be able to run it.
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.

image board: pin board


—— HEADER TEXT ——
code by efryndiel



about

This Image Board or image gallery is very simple and straightforward, yet super flexible for how you might to display images. The main div is dynamic and is set to fill the entire page, and the images will shift and adjust to fit. This means that it may look different depending on the size of the browser window. Although what's displayed has the images rotated at various angles, they could all be set to straight instead. It's easy to move images around to suit one's needs as well as changing the widths. Styled like a "pin board," it has a very "free floating" kind of appearance. It also includes alt text so you can add descriptions or image credits on hover. The images are also thumbnails that will open to the original sized file when clicked.

Although this is pretty simple to update manually, I have made an automated script that will make it easier to update the images and change overall styles. 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 within the cuts.

A small credit code is included, but any credit goes to [personal profile] laenavesse @ [community profile] efryndiel. Although not necessary, I do accept tips now on ko-fi!


raw code instructions
» Pastebin for the raw code. You can save or c/p the code and edit it as you see fit: Image Board: Pin Board

» The colors used are:

  • #f4f3ef: main div (board) bg color
  • #866a4c: main div (board) border color
  • #948659: image border color
  • #d5d5d5: box shadow color for both main div (board) and images
  • #804024: header text

» Just copy the image code to add new images. No need for line breaks or anything, it's designed to flow and wrap automatically. All images are also aligned to be centered. Images can be ordered any way you want, though you may want to keep in mind how images of different heights will look against each other.

» You can change the widths of the images to be whatever you want, though it's recommended to be between 200px-300px. 300+px works well for wider, horizontal images. But they can really be whatever you want depending on the kind of look or purpose you're going for!

» You can change the border color of each image to give a more colorful look.

» The code that rotates the image is transform: rotate(#deg);. If you want the image to be straight, you can just remove this value completely (in the automation, you would set the value to "0"). Negative values rotate the image counterclockwise, positive values rotate it clockwise. I would suggest being in the range between -10 and 10 for subtle tilts.

» Adjust the box-shadow color if changing the main div (board) color so that it can pop better if the default doesn't work well.

» For the minimum width (min-width) of the main div, I would suggest making it 50px wider than the biggest image. Because the div is dynamic, when the browser is screen is downsized it will automatically change and the images with flow to fit (mostly so it still looks decent on mobile). So if your largest image is 300px wide, the main div should be 350px. The code is currently set to 350px.

» I have the maximum width (max-width) of the main div set at 100%, but this can be changed to whatever you want. In the automation script, you'll need to specify if the value is a percentage (ex, 90%) or absolute value (ex, 750px). The "%" or the "px" need to be included!



automated script and instructions
After reading about the raw code, you may be tempted to have something that could reduce the work for you. Google Sheets allows the user to create app scripts, and with this tool it can take the data in the sheet and generate the code. With the number of images you might have, this will make maintaining and organizing everything a breeze. If you want to make certain modifications, it's not too difficult, but it does require a few extra steps that may seem daunting to those not familiar with how coding or Google Sheets work. 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... However, if it does matter to you there is HTML Formatter that will make it less of a giant blob! Just C/P the giant blob and it will reformat into something more legible.

I have two versions of the spreadsheets, one the more basic one and one that is already modified to allow custom border colors for individual images. To save, Make a Copy of it for your own use.

It's already "pre-filled" with random data so you can see how it works.

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.

avalon point rewards submission


With this automated script, we can go from this:


To this!




about & instructions

This particular tracker is designed for [community profile] isleofavalon as it includes the submission for for the rewards. There are two versions. 1) Default: tracker starts at year 2021; 2) 2020: tracker includes 2020 for the old vets. This tracker CAN double up and be used with my automated thread trackers, but these particular ones just generate the submission form. If you'd like it to be merged with a thread tracker, I'll be happy to help.

Credit goes to [personal profile] laenavesse @ [community profile] efryndiel.


To save the spreadsheet, Make a Copy of the spreadsheet of your choice for your own use: Default (2021) | 2020

It's already "pre-filled" with random data so you can see how it works. You can even use just one sheet for all your years instead of separating them out.

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. Otherwise, this is mostly working with the spreadsheet itself, so there's a lot of freedom to work with it.

tracker notebook


⌘ January 2021
1/01: thread type » blurb

1/02: toplevel » something something prompt liners, quick overview, list of people who responded if feeling detailed

1/03: character name » just giving a general feel of what a thread tracker might look like

1/04: log post » maybe will just have a bunch of one liners.

1/05: network » can pretty much do what you want and can also format stuff idk how detailed people actually get in their trackers. here have a
line break

1/06: open log » Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum euismod mi ac ornare. Etiam vulputate libero in felis feugiat, non hendrerit lorem commodo. Pellentesque id vestibulum nisi, fringilla faucibus orci. Ut at cursus arcu. Integer ex ligula, hendrerit at tincidunt at, luctus quis eros. Suspendisse nisl orci, porta eget feugiat sed, pulvinar a justo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In venenatis tortor id dolor finibus commodo. Praesent ut orci ut elit malesuada iaculis. Nunc elementum purus in arcu consectetur fermentum.

1/07: » any extra stuff will be hidden, but good news! those using the automation script can adjust the overall height no problem

1/08: » you could also just have no line breaks and have everything single spaced

1/09: » don't forget to read the instructions

⌘ April 2021
4/02: thread type » blurb

4/10: thread type » blurb

⌘ May 2021
5/03: character name » blurb

5/22: event toplevel » blurb blurb blurb long blurb and then you can add html like a
line break and format things within the blrub like bold words or something idk

5/25: network » blurb blurb chatter accidental video

5/25: closed log » we know you're doing dirty things :shiftyeyes:

⌘ June 2021
6/05: character name » blurb

⌘ September 2021
9/01: character name » blurb

⌘ January 2020
date: thread type » blurb

⌘ February 2020
date: thread type » blurb

⌘ March 2020
date: thread type » blurb

⌘ April 2020
date: thread type » blurb

⌘ May 2020
date: thread type » blurb

⌘ June 2020
date: thread type » blurb

⌘ July 2020
date: thread type » blurb

⌘ August 2020
date: thread type » blurb

⌘ September 2020
date: thread type » blurb

⌘ October 2020
date: thread type » blurb

⌘ November 2020
date: thread type » blurb

⌘ December 2020
date: thread type » blurb

⌘ June 2019
date: thread type » blurb

⌘ July 2019
date: thread type » blurb

⌘ August 2019
date: thread type » blurb

⌘ September 2019
date: thread type » blurb

⌘ October 2019
date: thread type » blurb

⌘ November 2019
date: thread type » blurb

⌘ December 2019
date: thread type » blurb




about

This Thread Tracker is a simple notebook style that kind of matches my CR Notebook ie, I lifted all the default colors from it /cough

The code is pretty straightforward and easy to update, but with trackers trying to keep up with everything and update can be annoying. So for those interested, I have made an automated script for this particular tracker. 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 within the cuts.

A small credit code is included, but any credit goes to [personal profile] laenavesse @ [community profile] efryndiel. Once again I must honor DimensionSlip for providing a base and concept for the automations and fun fact, the sorting methods are actually based of a script we used for the Taken lists in [community profile] empatheias and [community profile] forgottentales.


raw code instructions
» Pastebin for the raw code. You can save or c/p the code and edit it as you see fit: Thread Tracker: Notebook

» The colors used are:

  • #866a4c: navigation year text; navigation border; page header bg
  • #f7f6f3: navigation month bg
  • #804024: navigation month text; page link
  • #efd2b2: navigation arrow; page header text
  • #f9f9f7: page bg
  • #d3cec0 : page bg line
  • #3e2f22: page text
  • #c2b59f: page border

» 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 "Month Pages" use the code between "MONTH CONTAINER" and "END MONTH CONTAINER". Same for adding years to the navigation, only you're looking for the BOX: YEAR and corresponding END header.
» When adding or removing pages, make sure the anchor tag (ex; <a name="jan2021">) matches the links for the Month pages on the navigation (ex; <a href="#jan2021">).
» Use <br /> tags for line breaks!
» You can adjust the height of the main container to be longer or shorter to fit your needs. Just be sure you change in the height in both the first container and the Notebook Page Container. The default is ex; 650px for both.



automated script and 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. With the number of threads you might have, this will make maintaining and organizing everything a breeze. 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... However, if it does matter to you there is HTML Formatter that will make it less of a giant blob! Just C/P the giant blob and it will reformat into something more legible.

Here is the spreadsheet. To save, Make a Copy of it for your own use: Thread Tracker: Notebook

It's already "pre-filled" with random data for up to three years so you can see how it works. You're free to remove any of those extra years, it'll work with just one year just fine. Should you ever need to make a new year, just duplicate the Year Template and you're good to go.

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.

tracker collapsible details


2021
January
1/01: thread type ⋙ blurb

1/02: toplevel ⋙ something something prompt liners, quick overview, list of people who responded if feeling detailed

1/03: character name ⋙ just giving a general feel of what a thread tracker might look like

1/04: log post ⋙ maybe will just have a bunch of one liners.

1/05: network ⋙ can pretty much do what you want and can also format stuff idk how detailed people actually get in their trackers. here have a
line break

1/06: open log ⋙ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum euismod mi ac ornare. Etiam vulputate libero in felis feugiat, non hendrerit lorem commodo. Pellentesque id vestibulum nisi, fringilla faucibus orci. Ut at cursus arcu. Integer ex ligula, hendrerit at tincidunt at, luctus quis eros. Suspendisse nisl orci, porta eget feugiat sed, pulvinar a justo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In venenatis tortor id dolor finibus commodo. Praesent ut orci ut elit malesuada iaculis. Nunc elementum purus in arcu consectetur fermentum.

1/07: ⋙ too wide? no worries you can adjust the width no problem

1/08: ⋙ you could also just have no line breaks and have everything single spaced

1/09: ⋙ don't forget to read the instructions

April
4/02: thread type ⋙ blurb

4/10: thread type ⋙ blurb

May
5/03: character name ⋙ blurb

5/22: event toplevel ⋙ blurb blurb blurb long blurb and then you can add html like a
line break and format things within the blrub like bold words or something idk

5/25: network ⋙ blurb blurb chatter accidental video

5/25: closed log ⋙ we know you're doing dirty things :shiftyeyes:

June
6/05: character name ⋙ blurb

September
9/01: character name ⋙ blurb

2020
January
date: thread type ⋙ blurb

February
date: thread type ⋙ blurb

March
date: thread type ⋙ blurb

April
date: thread type ⋙ blurb

May
date: thread type ⋙ blurb

June
date: thread type ⋙ blurb

July
date: thread type ⋙ blurb

August
date: thread type ⋙ blurb

September
date: thread type ⋙ blurb

October
date: thread type ⋙ blurb

November
date: thread type ⋙ blurb

December
date: thread type ⋙ blurb

2019
June
date: thread type ⋙ blurb

July
date: thread type ⋙ blurb

August
date: thread type ⋙ blurb

8/11: type ⋙ filler filler filler

September
date: thread type ⋙ blurb

9/28: type ⋙ filler filler filler

October
date: thread type ⋙ blurb

10/31: type ⋙ filler filler filler

November
date: thread type ⋙ blurb

11/05: type ⋙ filler filler filler

December
date: thread type ⋙ blurb

12/25: type ⋙ filler filler filler




about

This Thread Tracker is very simplistic compared to anything else I've done hah. Utilizing the collapsible cuts, the code is pretty straightforward and easy to update, but with trackers trying to keep up with everything and update can be annoying. So for those interested, I have made an automated script for this particular tracker. 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 within the cuts.

A small credit code is included, but any credit goes to [personal profile] laenavesse @ [community profile] efryndiel. Once again I must honor DimensionSlip for providing a base and concept for the automations and fun fact, the sorting methods are actually based of a script we used for the Taken lists in [community profile] empatheias and [community profile] forgottentales.


raw code instructions
» Pastebin for the raw code. You can save or c/p the code and edit it as you see fit: Thread Tracker: Collapsible Details

» The colors used are:

  • #ccaf64: year border
  • #806d3f: year id text
  • #eb8d52: year detail arrow
  • #69948f: month box shadow
  • #264b4d: month id text
  • #cba551: month detail arrow
  • #000000: month text
  • #93151b: link

year header width (%) 90
month width (%) 85
content width (%) 90
» The symbols provided are completely random and can be whatever you want.
» To add more "Month Pages" use the code between "MONTH CONTAINER" and "END MONTH CONTAINER". Same for adding years to the navigation, only you're looking for the YEAR CONTAINER and corresponding END YEAR CONTAINER header.
» Use <br /> tags for line breaks!
» You can adjust the width of the containers to be wider or shorter to fit your needs.



automated script and 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. With the number of threads you might have, this will make maintaining and organizing everything a breeze. 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... However, if it does matter to you there is HTML Formatter that will make it less of a giant blob! Just C/P the giant blob and it will reformat into something more legible.

Here is the spreadsheet. To save, Make a Copy of it for your own use: Thread Tracker: Collapsible Details

It's already "pre-filled" with random data for up to three years so you can see how it works. You're free to remove any of those extra years, it'll work with just one year just fine. Should you ever need to make a new year, just duplicate the Year Template and you're good to go.

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.

profile sheet


LOREM IPSUM DOLOR SIT AMET
❝ something fancy quote i guess or something there's quite a bit of space ❞


§


CHARACTER
NAME: Can remove if written in the header
CANON:
AGE:
DOB: (OPTIONAL)
GENDER:
SPECIES: (OPTIONAL; useful if non-human)
ACTIVE: (OPTIONAL; useful if in games or primarily in memes, etc.)
DETAILS
VISUAL: Link
HEIGHT:
BUILD:
HAIR:
EYES:
FEATURES: Any notable features that the character may have that other characters may notice or should be mentioned
ATTIRE:
INVENTORY: (OPTIONAL) whatever other items they may constantly carry
WEAPONS: (OPTIONAL)
VOICE: (OPTIONAL)
BACKGROUND
HOME:
FAMILY:
OCCUPATION:
IN-DEPTH: Link (OPTIONAL: if included in the bottom section, read more)
BLURB: OPTIONAL; write a brief at a glance blurb
EXTRA: FREEBIE FIELD
PERSONALITY
ALIGNMENT:
ATTITUDE:
QUIRKS:
LIKES:
DISLIKES:
VIRTUES:
VICES:
HOBBIES:

IN-DEPTH: Link (OPTIONAL: if included in the bottom section, read more)
BLURB: Brief at at a glance blurb
ABILITIES
CLASS:
WEAPONS:
STRENGTH:
DEXTERITY:
CONSTITUTION:
INTELLIGENCE:
WISDOM:
CHARISMA:
SKILLS: Link or BLURB (OPTIONAL: if included in the bottom section, read more)
PERMISSIONS
BACKTAGGING: ✔✘
THREADHOPPING: ✔✘
FOURTHWALLING: ✔✘
ROMANCE: ✔✘
MINDREADING: ✔✘
MANIPULATION: ✔✘
INJURY: ✔✘
FIGHTING: ✔✘
KILLING: ✔✘
PREFERENCES
MEMES:
PSLS:
AU TYPES:
CONTENT TYPE:
DO NOT WANT:
SHIPPING:
MAIN PAIRINGS:
TAG STYLE: [ brackets ]; prose; both
TAG SPEED: average estimate on what to expect tag turn around; ex. once a day, a few times a week, mostly night, timezone, etc.
GAME
It's basically an extra box, but this is an example box of how to use if a character is in a game. Fields can be changed however to match the needs of the game, just threw in a random list that could be used anywhere.

POINT TAKEN:
ARRIVAL: Date entered the game
RESIDENCE:
OCCUPATION:
INVENTORY:
CHANGES: Any game specific changes (could warrant own fields)
RELATIONSHIP: if dating someone or something
APPLICATION: Link
CREDITS
LAYOUT: Link
ARTWORK: (OPTIONAL) if you use any fanart anywhere or in the header: Link
CODE: laenavesse @ efryndiel
PLAYER
PLAYER:
PLURK: @PLURKHANDLE.plurk.com
DISCORD: stuffwithnumbers
TIMEZONE:


§




§


HISTORY
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at placerat elit, mattis condimentum justo. Praesent arcu urna, euismod at laoreet eu, elementum quis lorem. Pellentesque maximus tincidunt quam, a pretium leo sollicitudin nec. Vestibulum pretium eu nulla commodo bibendum. Morbi nec risus in velit luctus varius sit amet vel est. In quis risus tempus, egestas tellus sit amet, maximus augue. Vivamus vulputate in ligula in tempor. Suspendisse aliquam augue ante, eget mattis justo imperdiet sit amet. Pellentesque et mollis metus. Curabitur aliquam ligula vel tellus mollis, at euismod nunc posuere. Proin lectus mi, commodo a porttitor in, viverra eget augue. Proin in purus eget tellus porttitor pharetra eu condimentum eros. Nulla vel ultricies sapien.

Morbi sem urna, placerat ac lacus id, feugiat placerat magna. In augue tellus, vehicula a tempor ullamcorper, varius non orci. Suspendisse sollicitudin urna nec tempor sodales. Maecenas venenatis, magna at rhoncus faucibus, diam neque dapibus lacus, quis fermentum urna enim vel felis. Ut vulputate quam vitae diam tempus, vitae porta magna auctor. Donec pretium rhoncus mauris, nec ultricies eros finibus in. Fusce facilisis ullamcorper ante. Sed ultrices nisl ut luctus bibendum. Sed in nulla eu ante auctor vulputate quis at nulla. Quisque feugiat libero et lorem convallis, id suscipit nisl lobortis. Proin eu libero eu quam rutrum aliquet quis id enim. Sed bibendum imperdiet dignissim. Mauris finibus mauris ac nibh eleifend, a suscipit dui porta. Sed maximus vehicula aliquet. Phasellus a lectus sed magna blandit fringilla. Nullam quis mi hendrerit, laoreet ex eu, tincidunt leo.

Praesent lorem diam, faucibus quis dignissim quis, varius eu mauris. Sed id nisl ut tortor euismod molestie eu vel erat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam vel egestas orci. Vivamus nec metus quam. Vivamus iaculis purus sed porta interdum. Nunc dignissim erat vel sem tempus convallis quis vitae justo. Proin ultricies lacus quis quam ultrices consequat. Nunc viverra odio nec ligula sollicitudin aliquam. Duis id pretium ipsum, sed euismod quam. Etiam vehicula quam nulla, vitae ullamcorper lacus sagittis luctus. Cras egestas tellus eu ex tincidunt dapibus. Quisque elementum, odio vitae consequat lobortis, justo ex iaculis odio, quis dignissim mauris massa a dui. Sed vestibulum tristique volutpat. Praesent varius dui a felis commodo, eget malesuada orci rutrum. In dapibus turpis leo, ut ultrices eros accumsan vestibulum.
PERSONALITY
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at placerat elit, mattis condimentum justo. Praesent arcu urna, euismod at laoreet eu, elementum quis lorem. Pellentesque maximus tincidunt quam, a pretium leo sollicitudin nec. Vestibulum pretium eu nulla commodo bibendum. Morbi nec risus in velit luctus varius sit amet vel est. In quis risus tempus, egestas tellus sit amet, maximus augue. Vivamus vulputate in ligula in tempor. Suspendisse aliquam augue ante, eget mattis justo imperdiet sit amet. Pellentesque et mollis metus. Curabitur aliquam ligula vel tellus mollis, at euismod nunc posuere. Proin lectus mi, commodo a porttitor in, viverra eget augue. Proin in purus eget tellus porttitor pharetra eu condimentum eros. Nulla vel ultricies sapien.

Morbi sem urna, placerat ac lacus id, feugiat placerat magna. In augue tellus, vehicula a tempor ullamcorper, varius non orci. Suspendisse sollicitudin urna nec tempor sodales. Maecenas venenatis, magna at rhoncus faucibus, diam neque dapibus lacus, quis fermentum urna enim vel felis. Ut vulputate quam vitae diam tempus, vitae porta magna auctor. Donec pretium rhoncus mauris, nec ultricies eros finibus in. Fusce facilisis ullamcorper ante. Sed ultrices nisl ut luctus bibendum. Sed in nulla eu ante auctor vulputate quis at nulla. Quisque feugiat libero et lorem convallis, id suscipit nisl lobortis. Proin eu libero eu quam rutrum aliquet quis id enim. Sed bibendum imperdiet dignissim. Mauris finibus mauris ac nibh eleifend, a suscipit dui porta. Sed maximus vehicula aliquet. Phasellus a lectus sed magna blandit fringilla. Nullam quis mi hendrerit, laoreet ex eu, tincidunt leo.

Praesent lorem diam, faucibus quis dignissim quis, varius eu mauris. Sed id nisl ut tortor euismod molestie eu vel erat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam vel egestas orci. Vivamus nec metus quam. Vivamus iaculis purus sed porta interdum. Nunc dignissim erat vel sem tempus convallis quis vitae justo. Proin ultricies lacus quis quam ultrices consequat. Nunc viverra odio nec ligula sollicitudin aliquam. Duis id pretium ipsum, sed euismod quam. Etiam vehicula quam nulla, vitae ullamcorper lacus sagittis luctus. Cras egestas tellus eu ex tincidunt dapibus. Quisque elementum, odio vitae consequat lobortis, justo ex iaculis odio, quis dignissim mauris massa a dui. Sed vestibulum tristique volutpat. Praesent varius dui a felis commodo, eget malesuada orci rutrum. In dapibus turpis leo, ut ultrices eros accumsan vestibulum.
EXTRA SECTION
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at placerat elit, mattis condimentum justo. Praesent arcu urna, euismod at laoreet eu, elementum quis lorem. Pellentesque maximus tincidunt quam, a pretium leo sollicitudin nec. Vestibulum pretium eu nulla commodo bibendum. Morbi nec risus in velit luctus varius sit amet vel est. In quis risus tempus, egestas tellus sit amet, maximus augue. Vivamus vulputate in ligula in tempor. Suspendisse aliquam augue ante, eget mattis justo imperdiet sit amet. Pellentesque et mollis metus. Curabitur aliquam ligula vel tellus mollis, at euismod nunc posuere. Proin lectus mi, commodo a porttitor in, viverra eget augue. Proin in purus eget tellus porttitor pharetra eu condimentum eros. Nulla vel ultricies sapien.

Morbi sem urna, placerat ac lacus id, feugiat placerat magna. In augue tellus, vehicula a tempor ullamcorper, varius non orci. Suspendisse sollicitudin urna nec tempor sodales. Maecenas venenatis, magna at rhoncus faucibus, diam neque dapibus lacus, quis fermentum urna enim vel felis. Ut vulputate quam vitae diam tempus, vitae porta magna auctor. Donec pretium rhoncus mauris, nec ultricies eros finibus in. Fusce facilisis ullamcorper ante. Sed ultrices nisl ut luctus bibendum. Sed in nulla eu ante auctor vulputate quis at nulla. Quisque feugiat libero et lorem convallis, id suscipit nisl lobortis. Proin eu libero eu quam rutrum aliquet quis id enim. Sed bibendum imperdiet dignissim. Mauris finibus mauris ac nibh eleifend, a suscipit dui porta. Sed maximus vehicula aliquet. Phasellus a lectus sed magna blandit fringilla. Nullam quis mi hendrerit, laoreet ex eu, tincidunt leo.

Praesent lorem diam, faucibus quis dignissim quis, varius eu mauris. Sed id nisl ut tortor euismod molestie eu vel erat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam vel egestas orci. Vivamus nec metus quam. Vivamus iaculis purus sed porta interdum. Nunc dignissim erat vel sem tempus convallis quis vitae justo. Proin ultricies lacus quis quam ultrices consequat. Nunc viverra odio nec ligula sollicitudin aliquam. Duis id pretium ipsum, sed euismod quam. Etiam vehicula quam nulla, vitae ullamcorper lacus sagittis luctus. Cras egestas tellus eu ex tincidunt dapibus. Quisque elementum, odio vitae consequat lobortis, justo ex iaculis odio, quis dignissim mauris massa a dui. Sed vestibulum tristique volutpat. Praesent varius dui a felis commodo, eget malesuada orci rutrum. In dapibus turpis leo, ut ultrices eros accumsan vestibulum.





quick nav
This is a shorter version of the main code for those who may want a simple "navigation" entry. It's very basic and you can add in more boxes by following the instructions at the end of this entry. NOTE: code uses default header, but alternate header is available.


LOREM IPSUM DOLOR
SIT AMET
❝ a smaller at a glance version using an alternate header ❞


§


CHARACTER
NAME: Can remove if written in the header
CANON:
AGE:
DOB: (OPTIONAL)
GENDER:
SPECIES: (OPTIONAL; useful if non-human)
ACTIVE: (OPTIONAL; useful if in games or primarily in memes, etc.)
PERMISSIONS
BACKTAGGING: ✔✘
THREADHOPPING: ✔✘
FOURTHWALLING: ✔✘
ROMANCE: ✔✘
MINDREADING: ✔✘
MANIPULATION: ✔✘
INJURY: ✔✘
FIGHTING: ✔✘
KILLING: ✔✘
PREFERENCES
MEMES:
PSLS:
AU TYPES:
CONTENT TYPE:
DO NOT WANT:
SHIPPING:
MAIN PAIRINGS:
TAG STYLE: [ brackets ]; prose; both
TAG SPEED: average estimate on what to expect tag turn around; ex. once a day, a few times a week, mostly night, timezone, etc.
PLAYER
PLAYER:
PLURK: @PLURKHANDLE.plurk.com
DISCORD: stuffwithnumbers
TIMEZONE:


§







Under the cut are four header codes, including the default one. To replace the header code, replace everything between the <!-- HEADER --> and <!-- END HEADER --> text. Really you can put anything in here, these are just samples so you can use them as templates and edit however you want!

alternate headers

LOREM IPSUM DOLOR SIT AMET
❝ v1: single image + ribbon header ❞


§


LOREM IPSUM DOLOR
SIT AMET
❝ v2: double image + ribbon header ❞


§


❝ v3: single image no ribbon header ❞


§


❝ v4: multiple images no ribbon header ❞





code instructions

❖ It's a pretty straightforward, but thorough, profile sheet. Each box is a category and adding or removing boxes is very easy. There is always a "SEPERATOR" between boxes and a "DIVIDER" between sections. For a live example, look here.
❖ The colors are:

  • #eee6d6: ribbon background
  • #c2b59f: ribbon border
  • #3e2f22: ribbon text; § color; cateogry text
  • #f2ece0: link ribbon background
  • #84704e: image border
  • #827662: hr color; § shadow ; box border
  • #e4e0d8: small box header background
  • #f2ece1: in-depth header box background
  • #f7f6f3: box background
  • #804024: field text
  • #895e0a: link color; summary arrow color

❖ Ribbon text will automatically be hidden if too long. You can leave the ribbon text empty if you'd prefer it blank, it's mostly there as a template. Same goes for the long quote, you can leave it blank or completely delete that portion if you don't need it.
❖ The § is used, but any symbol could work in its place.
❖ The code has five ribbons for the links, but more can be added or removed.
❖ A note about the images for the header: for the ribbon ones, it's best to stick with 100x100 whether it's the userpic or a static image. For the ribbonless ones, it can be whatever. By default it's set to turn into a circle, but changing (or just removing) the border-radius values can give it a different shape.
❖ Info text is set to "justify" align, but if the spacing between words gets too weird change it "left".

❖ To add a collapsing box, add the following code (includes the seperator between boxes):


❖ To add a static box, add the following code (includes the seperator code between boxes):


❖ To add an extra in-depth box, add the following code (includes the seperator code between boxes):


❖ Credit code is provided, but all goes to [personal profile] laenavesse @ [community profile] efryndiel. Let me know if you have any problems or any other comments!
the notebook




Little Notebook
For CR or Something
idk what are examples
"My sword is my life. That's just the kind of daemon I am."
● ● ● ○ ○
☼ ♥ ♪ ✦ ✖
Name: Rokurou Rangetsu
Canon: Tales of Berseria
Game: [community profile] empatheias, [community profile] forgottentales
Notes: A daemon swordsman with a love for swords, fighting, and alcohol. A chill, carefree guy, but he's a daemon for a reason with various insecurities and complexes that he strives hard to overcome. Capable of dual wielding both short swords and great swords.
About the code: V1: Quote + Double Static Rating
This version features space for two rating bars, such as an affinity/strength or use of symbols for different meanings. They will always be at the bottom of the bookmark no matter how long or short the quote is. If you want one bar, go to version 2.
(now a fully filled sheet, extra will cut off)
"I hate violence."
● ● ● ○ ○
Name: Shizuo Heiwajima
Canon: Durarara!!
Birthday: January 28
Age: 25
Favorite things: Sweets
Notes: I don't know I'm just filling this out in various ways to show what could be done in here and not be too boring herp.
About the code: V2: Quote + Single Static Rating.
The rating bar will always be at the bottom of the bookmark no matter how long or short the quote is. Showing the "rating" bar, but can be used for symbols or whatever you want.
"I long for peace and quiet."

☼ ♥ ♪ ✦ ✖
☼ ♥ ♪ ✦ ✖
Name: Eustace
Canon: Granblue Fantasy
Active? [community profile] forgottentales
Muse Strength: ■ ■ ■ □ □
Plotting Potential: ■ ■ ■ □ □
Shipping Potential: ■ ■ □ □ □
Likelihood to Drop: ■ ■ □ □ □
Notes: Didn't we used to do these kind of survey memes back in the day...
About the code: V3: All in One
In this version, the rating bars are always at the end of the quote, so there is a bit more fluctuation. Because of that, you can actually have multiple lines if you wanted. This is how it looks with a short quote. A longer version is next, followed by a quote only.
"My maiden had always been right in front of me."

☼ ♥ ♪ ✦ ✖
Name: Helios
Canon: Sailor Moon
Trust: ◆◆◆◆◆
Support: ◆◆◆◆◆
Attraction: ◆◆◆◆◇
Affection: ◆◆◆◆◆
Strength: ◆◆◆◆◇
Notes: Uh, cheat way to have symbols and then multiple rating bars???
About the code: V3: All in One
Same as the previous page but with longer quote and a single rating bar. Next page is full quote only.
"I'm going to keep at it. I'll protect all that you've given me."
Name: Alvin
Canon: Tales of Xillia 1/2
Journals: [personal profile] selfmotivations / [personal profile] opportunitycosts
Occupation: Business, ex-mercenary, ex-traitor
Relationship: Single
Notes: Okay I've ran out of ideas of what else I could throw in here I THINK YOU GOT SOME IDEAS BY NOW
About the code: V3: All in One
Same as the previous pages but it's a quote only. ...All right might not have been the best choice for this particular one but you get the idea how it looks. Like the notebook pages, any overflow text is automatically cut (hidden), so that's pretty much it right there. No rating bars.
"Ah, so this is the end, huh? Farewell, all my dear fans the world over."
Name: Raven
Canon: Tales of Vesperia
Nickname: "Old Man," "Fishy Old Man"
Notes: Feeling like the old man right now...so tired...grant me sweet release...
About the code: V3: All in One
Just showing off how it looks if you change the bookmark (and quote) color!

This is the last page of the notebook! There is a navigation bar below so you can jump to any character. Everyone past Raven is a lie. /dumps random muses to fill space
one two three four five



about

This CR Chart is in a cute notebook style and could be used for other purposes, like keeping notes or a diary of sorts.

There are three total versions of the code, and each one is described and shown in the above example. Just "flip" through the notebook by clicking on the »» links to see how it all works. There is also a "navigation bar" beneath it, 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 within the cuts.

A small credit code is included, but any credit goes to [personal profile] laenavesse @ [community profile] efryndiel, and major credit to DimensionSlip for providing a base and concept for the automation.


raw code instructions
» 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:

  • #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 and 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 as a CR chart, CR notetaking, or even a comprehensive muselist, 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... However, if it does matter to you there is HTML Formatter that will make it less of a giant blob! Just C/P the giant blob and it will reformat into something more legible.

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 a modified version of Rokurou I did for a game 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.


v1. one row


(full view)





v2. multiple rows


(full view)

default
blurb box
blank row



v3. in-depth info


(full view)




v4. everything


(live preview)




instructions & notes


❖ Large, but nice and open, clean info sheet that can double as navigation and other things if so desired. Threw in some possible optional stuff that some folks might find useful, so edit and modify as needed! Default colors are from the v2 and v3 set.

❖ Colors:

  • #1f1c1e: header, box title text
  • #bc600f: subtitle, link text
  • #804024: label text, summmary border-bottom
  • #c2c1be: box border
  • rgba(85, 81, 79): hr gradient

❖ For adding a new row of boxes, use the "BLANK ROW" code and insert after <!-- FIRST ROW END --!> text.

Note on the text details summary code: by default the "BACKGROUND" section is left "open" for visual convenience. To have it "closed" by default instead, just change "details open" to "details." If you want a different section to remain open, change "details" to "detials open."

Note on the images: all previews have the images at 250x350 but you can have it whatever works best for you. It's also possible to use different number of images so long as it fits the width (code is set to be at minimum 800px). Nothing fancy about the image codes, so very easy to modify.

❖ Heavily inspired by EFFICIO.

❖ Credit either [personal profile] laenavesse or [community profile] efryndiel
cr chart card


⋗ ⋗ ⋗ ROKUROU ⋖ ⋖ ⋖
◆◆◆◆◆ ⇒ ⚔
◆◆◆◆◇ ⇒ ♞
◆◆◆◇◇ ⇒ ⛯
◆◆◇◇◇ ⇒ ✠

daemon swordsman. all he wants to do is fight strong foes, drink, and just enjoy his life. also a sword fanatic so watch out if he gets excited.



single card


multiple cards

info card


⋗ ⋗ ⋗ ALVIN ⋖ ⋖ ⋖
can put some text
idk series name
journal name
stuff in four lines

and more blurb or whatever Lorem ipsum dolor sit amet, consectetur adipiscing elit. In id dolor et ligula molestie luctus. Phasellus hendrerit, purus ac malesuada



single card


multiple cards



sample legend header

⋗ ⋗ ⋗ LEGEND ⋖ ⋖ ⋖
⚔: first ♞: second ⛯: third ✠: fourth
⚜: top symbol ◉: second symbol ⛢: third symbol





sample header

⋗ ⋗ ⋗ CASTMATES ⋖ ⋖ ⋖






instructions & notes


❖ Mostly designed for CR charts, but they can be used for little info or muse cards. You can see it in the works here. Default color template is the Rokurou set.

❖ Colors:

  • #93151B: character header, boxshadow, hr line
  • #4C1459: text
  • #300D38: symbol text color
  • #FFC46A: symbol diamond bg color
  • #EB8D52: header text

❖ For the multiple set, all you have to do is copy/paste the card code from START CARD to END CARD after each card. Just make sure everything stays within the raw-code tags and you're all good.

Note on the diamond symbols: because symbols aren't uniform in size, you'll probably have to fiddle with the font-size and/or the line-height to make the symbol fit centered. Increasing the line-height will move the symbol down, and decreasing it will move it up. Also, the top symbol is in link form only as a template reference.

Note on the info cards: to be honest the only difference between it and the CR chart version is the top text section. For quick edit, just replace the CR BARS CONTENT with the following section and you're good.


Last note: everything is coded so that if there's too much text to be displayed, the overflow will be hidden. Some ways to adjust (other than reducing content) is decreasing font size or, in the case of the character header, remove some of the arrows. They're just space filler decoration so you can do whatever with it lol.

❖ Credit either [personal profile] laenavesse or [community profile] efryndiel
profile card (large version)


shizuo heiwajima
» hatesviolence «
durarara!!


CODE
» knightofchanges «
ace
heart no kuni no alice


CODE


single muse


raven
» rainofheaven «
tales of vesperia


CODE
» soulsymmetrical «
death the kid
soul eater


CODE



multiple muses



ACTIVE
definitely way more than sixteen letters
» aboutnineteenletters «
canon
more than sixteen letters
» maxwillrequiresmallerfont «
canon
sixteen letters
» journalname «
canon
showing
» journalname «
canon
same sized cards
» journalname «
canon
in a row
» journalname «
canon


CODE (name on top with header)


» journalname «
sixteen letters
canon
» aboutnineteenletters «
more than sixteen letters
canon
» maxwillrequiresmallerfont «
definitely way more than sixteen letters
canon


CODE (journal on top with header)


instructions


❖ Designed for muselists and profile cards, they can also be used for minimal cr charts and quick permission lists. Anything can be added after the initial three fields so it's pretty versatile. Feel free to modify c:
❖ Colors:

  • background: #fff
  • borders: #fff
  • shadow: #c2baa0
  • character text: #999
  • journal+canon text: #5b5748

UPDATED! The multiple cards no longer uses table code and is now a flex div, meaning you can just keep adding new cards without having to add rows or anything. Much easier to update compared to its original version.
❖ Credit either [personal profile] laenavesse or [community profile] efryndiel
OSZAR »