efryndiel | [ code ] cr chart cards with affection bars

cr cards with affection bars

Cidolfus Telamon

» » » ramuhs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mattis elementum elit, ut tempor nisl accumsan ac. Ut est libero, commodo at cursus in, ultricies mattis massa. In hac habitasse platea dictumst. Cras facilisis tellus mauris, sit amet lacinia urna maximus condimentum. Pellentesque sit amet ipsum at tellus facilisis condimentum. In pellentesque nibh eget imperdiet facilisis. Nam sed purus vestibulum, posuere quam et, iaculis felis.

AFFECTION

TRUST

SUPPORT

STRENGTH

Eustace

» » » flamekthunder

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mattis elementum elit, ut tempor nisl accumsan ac. Ut est libero, commodo at cursus in, ultricies mattis massa.

AFFECTION

TRUST

SUPPORT

STRENGTH

Aranea Highwind

» » » draganea

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

AFFECTION

TRUST

SUPPORT

STRENGTH

Dropped

Rokurou Rangetsu

» » » rokubro

AFFECTION

TRUST

SUPPORT

STRENGTH

Shizuo Heiwajima

» » » hatesviolence

AFFECTION

TRUST

SUPPORT

STRENGTH

about
This is a re-coded and scripted version of an old code I had that got killed in that old DW code push and I just never got around to fixing it until someone made the request for it! Since it was pretty easy to script I went ahead and did it lol. Although the little tracker code there is up to date, I am thinking about scripting it later, but we'll see!

A small credit code is included, but any credit goes to

laenavesse @

efryndiel. Although not necessary, I do accept tips on ko-fi! I can also do script commissions for other codes!

raw code instructions
Here is the Pastebin for the raw code. You can save or c/p the code and edit it as you see fit:
» CR Chart

» The colors in this code are:

#f4f3ef: background color, second bar color
#c2baa0: border color
#d5d5d5: box shadow color
#423e31: character name color
#999999: character name shadow color
#5b5748: journal name color
#2b250f: main text color
#423e31: bar text color
#d4ccb5: main bar and bar border color

» Even though the template uses JOURNALS for the subheader, you could change it to be the character's canon, fun title, or whatever you want.
» The DROPPED characters section is coded to be collapsible, with the <details> tag set on the default close. If you want to have the section open all the time, change the tag to <details open>.
» You can add or remove the bars to be whatever you want, the card will grow to accommodate the height.
» Because I use linear-gradient for the bar, this is how you edit it: change the percentages of both colors to be the same. For example, if the bar should be 25%, the code will look like this:

linear-gradient(90deg, #d4ccb5 25%, #f4f3ef 25%)

Technical explanation is the first color is the advancing bar color, and the second color is the bar's background color. The first color will stop at 25%, and the second color will start right where the first color stops.

» For mobile users: if you want the text to scale properly on both desktop and mobile (especially mobile Chrome users), you'll need to change the font-size for both the CHARACTER NAME and the JOURNALNAME to the following for best results:

CHARACTER NAME: font-size: clamp(0.875rem, 0.61rem + 1.324vi, 1.438rem);

JOURNALNAME: font-size: clamp(0.75rem, 0.603rem + 0.735vi, 1.063rem);

The text will be a lot smaller on mobile view, but it won't stretch out as much. If you want to adjust, use a generator like this Font-Size Clamp generator. Here are the settings I used to help! Note: This issue is worse with Chrome; on Firefox and Vivaldi they scale better with the default sizes.

For those using the spreadsheet, you can input the clamp() formula into the cell for the font size and it will work.

» Use <br /> tags for line breaks!

spreadsheet script and instructions
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. This makes things like cr charts much more manageable to maintain, and here are some other highlights featured with this sheet and script:

Just add columns to the end of the given template for more bars.
Like written in the raw code instructions, the second column is labeled for JOURNALS, but you can put whatever you want and even rename the column for organization purposes.
Toggle feature for the Dropped Characters section to be included and whether it starts open or closed.

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

»» CR Chart with Affection Bars

It does dump the code out as a giant blob, so use something like HTML Formatter if you want something neater (it has no affect on the code itself).

It's already "pre-filled" with random data so you can see how it works. Detailed instructions are included 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.

[ code ] cr chart cards with affection bars

no subject