where the butterfly goes

[ code ] cr chart cards with affection bars

2025-07-17T05:29:42Z

Posted by: laenavesse

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

( instructions )

comments

[ code ] profile / information sheet

2023-08-27T21:41:32Z

Posted by: laenavesse

profile sheet

AGE:

GENDER:

HEIGHT:

RACE:

PLAYER: USERNAME

ACTIVE: 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:

<raw-code><div style="margin: 25px auto; max-width: 800px; min-width: 465px; display: flex; flex-wrap: wrap; justify-content: center; font-family: trebuchet ms, sans-serif;  font-size: 12px;">

<div style="background: #ebe6da; border-left: 5px solid #3e2f22; padding: 2px 5px;"><b>AGE:</b> </div>
<div style="background: #ebe6da; border-left: 5px solid #3e2f22; padding: 2px 5px;"><b>GENDER:</b> </div>
<div style="background: #ebe6da; border-left: 5px solid #3e2f22; padding: 2px 5px;"><b>HEIGHT:</b> </div>
<div style="background: #ebe6da; border-left: 5px solid #3e2f22; padding: 2px 5px;"><b>RACE:</b> </div>
<div style="background: #ebe6da; border-left: 5px solid #3e2f22; padding: 2px 5px;"><b>PLAYER:</b> <user name="USERNAME" site="plurk.com"></div>
<div style="background: #ebe6da; border-left: 5px solid #3e2f22; padding: 2px 5px;"><b>ACTIVE:</b> <user name="GAME">, MEMES</div>
</div>

<div style="margin-left: 20px; width: calc(100% - 220px); display: flex; flex-flow: column wrap; text-align: justify;">

<div style="max-width: 500px; height: 40px; clip-path: polygon(0% 0%, 100% 0, 95% 50%, 100% 100%, 0% 100%); background: #5a1915; height: 40px; font-family: baskerville, serif; font-size: 18px; color: #e5e0c8; line-height: 2.2; text-transform: uppercase; text-align: center;">CHARACTER NAME</div>
<div style="max-width: 400px; height: 20px; clip-path: polygon(0% 0%, 100% 0, 95% 50%, 100% 100%, 0% 100%); background: #f4e5c1; font-family: baskerville, serif; font-size: 14px; color: #3e2f22; line-height: 1.6; text-transform: uppercase; text-align: center;">CANON</div>

<div style="margin-top: 10px; width: 100%; height: 450px; overflow: hidden; background: #f9f7f4; background: url(https://i.imgur.com/WrZOEpW.jpg); background-size: cover; border: 1px solid #3e2f22;">

<a name="about" style="height: 0; font-size: 0px;"></a>
<div style="height: 100%; padding: 5px 10px 10px;"><div style="height: 30px; font-family: palatino, serif; font-size: 18px; line-height: 1.4; border-bottom: 1px solid #3e2f22; text-align: center; text-shadow: 1px 1px 6px #807b69;">ABOUT</div>

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">VISUAL:</b> <a href="URL" style="text-decoration: none; color: #5a1915;">LINK</a>
<br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; padding: 2px 5px;">BUILD:</b> 
<br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; padding: 2px 5px;">FEATURES:</b> 
<br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; padding: 2px 5px;">ATTIRE:</b> 
<br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; padding: 2px 5px;">WEAPONS:</b> 
<br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; padding: 2px 5px;">VOICE:</b> 
<br /><br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">ORIGINS:</b> 
<br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">FAMILY:</b> 
<br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">RELATIONSHIPS:</b> 
<br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">OCCUPATION:</b> 
<br /><br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">HISTORY:</b> BLUR BLURB 
<br /><br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">EXTRA SECTION:</b> BLURB BLURB
</div>
</div>

<a name="personality" style="height: 0; font-size: 0px;"></a>
<div style="height: 100%; padding: 5px 10px 10px;"><div style="height: 30px; font-family: palatino, serif; font-size: 18px; line-height: 1.4; border-bottom: 1px solid #3e2f22; text-align: center; text-shadow: 1px 1px 6px #807b69;">PERSONALITY</div>

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">ATTITUDE:</b> 
<br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">VIRTUES:</b> 
<br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">VICES:</b> 
<br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">QUIRKS:</b> 
<br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">LIKES:</b> 
<br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">DISLIKES:</b> 
<br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">HOBBIES:</b> 
<br /><br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">FIRST IMPRESSIONS:</b> BLURB BLURB
<br /><br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">MOTIVATIONS:</b> BLURB BLURB
<br /><br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">FLAWS:</b> BLURB BLURB
<br /><br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">EXTRA:</b> BLURB BLURB
</div>
</div>

<a name="abilities" style="height: 0; font-size: 0px;"></a>
<div style="height: 100%; padding: 5px 10px 10px;"><div style="height: 30px; font-family: palatino, serif; font-size: 18px; line-height: 1.4; border-bottom: 1px solid #3e2f22; text-align: center; text-shadow: 1px 1px 6px #807b69;">ABILITIES</div>

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">WEAPONS:</b> 
<br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">INVENTORY:</b> 
<br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">STRENGTH:</b> 
<br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">DEXTERITY:</b> 
<br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">CONSTITUTION:</b> 
<br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">INTELLIGENCE:</b> 
<br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">WISDOM:</b> 
<br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">CHARISMA:</b> 
<br /><br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">SKILLS:</b> BLURB BLURB
<br /><br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">EXTRA SECTION:</b> BLURB BLURB
<br /><br />

</div>
</div>

<a name="permissions" style="height: 0; font-size: 0px;"></a>
<div style="height: 100%; padding: 5px 10px 10px;"><div style="height: 30px; font-family: palatino, serif; font-size: 18px; line-height: 1.4; border-bottom: 1px solid #3e2f22; text-align: center; text-shadow: 1px 1px 6px #807b69;">PERMISSIONS</div>

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">THREADHOPPING:</b> 
<br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">FOURTHWALLING:</b> 
<br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">ROMANCE:</b>
<br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">MINDREADING:</b> 
<br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">MANIPULATION:</b> 
<br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">FIGHTING:</b> 
<br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">INJURY:</b> 
<br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">KILLING:</b> 
<br /><br />

Feel free to contact for more information and plotting!
</div>
</div>

<a name="prefs" style="height: 0; font-size: 0px;"></a>
<div style="height: 100%; padding: 5px 10px 10px;"><div style="height: 30px; font-family: palatino, serif; font-size: 18px; line-height: 1.4; border-bottom: 1px solid #3e2f22; text-align: center; text-shadow: 1px 1px 6px #807b69;">PREFERENCES</div>

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">CONTENT:</b> 
<br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">SHIPPING:</b> 
<br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">DYNAMICS:</b> 
<br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">MAIN PAIRINGS:</b>
<br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">TAG STYLE:</b> 
<br />

<b style="display: inline-block;margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">TAG SPEED:</b> 
</div>
</div>

<a name="extra" style="height: 0; font-size: 0px;"></a>
<div style="height: 100%; padding: 5px 10px 10px;"><div style="height: 30px; font-family: palatino, serif; font-size: 18px; line-height: 1.4; border-bottom: 1px solid #3e2f22; text-align: center; text-shadow: 1px 1px 6px #807b69;">EXTRA</div>

<div style="margin-top: 10px; height: calc(100% - 45px); overflow: auto; padding: 10px; box-sizing: border-box; scrollbar-color: #4e4339 #bea792;">
<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">FIELD:</b> 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 <b>a name="extra"</b> to match the link in the navigation.
<br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">FIELD:</b> 
<br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">FIELD:</b> 
<br /><br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">FIELD:</b> 
</div>
</div>

</div>

<div style="min-width: 200px; margin-top: 10px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; font-size: 10px; ">

<div style="height: 20px; clip-path: polygon(0 15%, 5% 15%, 5% 0, 95% 0, 95% 15%, 100% 15%, 100% 85%, 95% 85%, 95% 100%, 5% 100%, 5% 85%, 0 85%); background: #3e2f22; line-height: 1.5; text-transform: uppercase; text-align: center; padding: 2px 15px; box-sizing: border-box;"><a href="#about" style="text-decoration: none; color: #f4e5c1;">about</a></div>

<div style="height: 20px; clip-path: polygon(0 15%, 5% 15%, 5% 0, 95% 0, 95% 15%, 100% 15%, 100% 85%, 95% 85%, 95% 100%, 5% 100%, 5% 85%, 0 85%); background: #3e2f22; line-height: 1.5; text-transform: uppercase; text-align: center; padding: 2px 15px; box-sizing: border-box;"><a href="#personality" style="text-decoration: none; color: #f4e5c1;">personality</a></div>

<div style="height: 20px; clip-path: polygon(0 15%, 5% 15%, 5% 0, 95% 0, 95% 15%, 100% 15%, 100% 85%, 95% 85%, 95% 100%, 5% 100%, 5% 85%, 0 85%); background: #3e2f22; line-height: 1.5; text-transform: uppercase; text-align: center; padding: 2px 15px; box-sizing: border-box;"><a href="#abilities" style="text-decoration: none; color: #f4e5c1;">abilities</a></div>

<div style="height: 20px; clip-path: polygon(0 15%, 5% 15%, 5% 0, 95% 0, 95% 15%, 100% 15%, 100% 85%, 95% 85%, 95% 100%, 5% 100%, 5% 85%, 0 85%); background: #3e2f22; line-height: 1.5; text-transform: uppercase; text-align: center; padding: 2px 15px; box-sizing: border-box;"><a href="#permissions" style="text-decoration: none; color: #f4e5c1;">permissions</a></div>

<div style="height: 20px; clip-path: polygon(0 15%, 5% 15%, 5% 0, 95% 0, 95% 15%, 100% 15%, 100% 85%, 95% 85%, 95% 100%, 5% 100%, 5% 85%, 0 85%); background: #3e2f22; line-height: 1.5; text-transform: uppercase; text-align: center; padding: 2px 15px; box-sizing: border-box;"><a href="#prefs" style="text-decoration: none; color: #f4e5c1;">prefs</a></div>

<div style="height: 20px; clip-path: polygon(0 15%, 5% 15%, 5% 0, 95% 0, 95% 15%, 100% 15%, 100% 85%, 95% 85%, 95% 100%, 5% 100%, 5% 85%, 0 85%); background: #3e2f22; line-height: 1.5; text-transform: uppercase; text-align: center; padding: 2px 15px; box-sizing: border-box;"><a href="#extra" style="text-decoration: none; color: #f4e5c1;">extra</a></div>

</div>

<div style="min-width: 200px; margin-top: 10px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; font-size: 10px; text-transform: uppercase; text-align: center; ">
<div style="height: 20px; clip-path: polygon(0 15%, 5% 15%, 5% 0, 95% 0, 95% 15%, 100% 15%, 100% 85%, 95% 85%, 95% 100%, 5% 100%, 5% 85%, 0 85%); background: #f4e5c1; line-height: 1.5; padding: 2px 15px; box-sizing: border-box;"><a href="URL" style="text-decoration: none; color: #3e2f22;">inbox</a></div>

<div style="height: 20px; clip-path: polygon(0 15%, 5% 15%, 5% 0, 95% 0, 95% 15%, 100% 15%, 100% 85%, 95% 85%, 95% 100%, 5% 100%, 5% 85%, 0 85%); background: #f4e5c1; line-height: 1.5; padding: 2px 15px; box-sizing: border-box;"><a href="https://efryndiel.dreamwidth.org/10342.html" style="text-decoration: none; color: #3e2f22;">code</a></div>

</div>

</div>
</div></raw-code>

( instructions )

comments

[ code ] thread tracker v. cottagecore (with bonus inventory list)

2023-03-24T05:58:51Z

Posted by: laenavesse

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 )

comments

[ code ] fable rewards (featuring cottagecore tracker)

2023-03-23T02:04:10Z

Posted by: laenavesse

For players in 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 )

comments

[ code ] calendar script

2023-02-06T02:30:13Z

Posted by: laenavesse

February

Sunday

Monday

Tuesday

Wednesday

Thursday

Friday

Saturday

Plot With Me

State of the Game

ATP/EMP

Event/TDM

Reserves Open

Activity Check

March

Sunday

Monday

Tuesday

Wednesday

Thursday

Friday

Saturday

Apps Open

CR Meme

Player Event

April

Sunday

Monday

Tuesday

Wednesday

Thursday

Friday

Saturday

SELECT MONTH

February

March

April

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 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.

Calendar

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 laenavesse @ 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!

comments

[ code ] image gallery v. adaptive

2023-01-24T07:56:44Z

Posted by: laenavesse

—— 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 laenavesse @ 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.

Image Gallery v. Adaptive

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.

comments

[ code ] image board - pin board

2022-11-24T21:58:35Z

Posted by: laenavesse

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 laenavesse @ 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.

Image Gallery: Pin Board v. Basic Default
Image Gallery: Pin Board v. Custom Image Border Colors

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.

comments

[ commissions ] automation script codes

2022-11-22T05:41:38Z

Posted by: laenavesse

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 )

comments

[ code ] thread tracker: avalon reward points calculator and form generator

2021-04-28T01:04:30Z

Posted by: laenavesse

avalon point rewards submission

With this automated script, we can go from this:

To this!

about & instructions
This particular tracker is designed for 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 laenavesse @ 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.

comments

[ code ] thread tracker: notebook

2021-04-20T08:04:18Z

Posted by: laenavesse

tracker notebook

2021

January April May June September

2020

January February March April May June July August September October November December

2019

June July August September October November December

⌘ 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