jay, novice human (![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
10billionghosts) wrote2023-02-19 02:32 pm
10billionghosts) wrote2023-02-19 02:32 pm
Entry tags:
code: kittiwake - a 2 column application/biosheet (updated 2/19/2023)
BASIC INFO
name//full name here//
alias
//akas here//
age & dob
//##, mm dd, zodiac//
pronouns
//pronouns//
height & build
//#'#, build//
features
//note distinguishing features about appearance here//
family
//note relevant family here//
STATS
MND
3
BDY
3
SOL
3
INF
3
HISTORY
// a simple text section for personality or 'about'. write what you need between the lj-raw tags. //PERSONALITY
// a simple text section for history. write what you need between the lj-raw tags. //ABILITIES
ability name;Gummies tiramisu donut liquorice oat cake tart oat cake jelly-o. Tiramisu shortbread chocolate cake sweet roll gummies. Fruitcake pastry cake liquorice cake pastry.
ability name;
Gummies tiramisu donut liquorice oat cake tart oat cake jelly-o. Tiramisu shortbread chocolate cake sweet roll gummies. Fruitcake pastry cake liquorice cake pastry.
CONNECTIONS
OOC
PLAYER . TIMEZONE . PB . CONTACTUPDATE 2/19/2023! This design has been fully rewritten from the ground up to clean up code and create a (hopefully) more user friendly experience.
The previous version of this code, original public release 9/27/2021 (and the IJ-only GPSL version of this code released mid-2021) are deprecated! Please update to this version of the code, and let me know in the comments if you have any issues!
KITTIWAKE is a simple, mobile friendly(-ish) bio sheet code that will automatically scale vertically no matter how much text you add; it should look nice whether you want a brief character write-up or a lengthy one.
The base template comes pre-styled with the basic vital info on the left, and then a D&D-style stat block, 3 plain text sections (personality, history, skills/abilities), a simple image board for things like connections, aesthetics, or inventory, and a tiny ooc section. It's fairly easy to add, remove, and shuffle around sections on the right side, and I encourage you to customize to get something that fits your needs!
MANY thanks tobaisemain who helped an absolute ton with getting the original version of this code to work in the first place. Additional thanks to aclosermoon for getting me to take a peek at what I'd put together originally and updating it.
HERE'S THE CODE:
HOW TO USE:
❣️ As usual, mind those lj-raw tags. With biosheets in particular, if you notice something goofy with the code once you've entered your own text, often the issue is that an lj-raw tag has been misplaced or deleted!
❣️ This code is mobile friendly and insanejournal friendly!
❣️ The code comes with a basic, centered, default LJ-cut out of the box. Feel free to delete that part and add your own fake LJ-cuts, if you'd like.
❣️ Feel free to edit any of the content presented in the template! The right-side subsections can be changed, shuffled around, deleted, or added onto very easily. Don't want a connections subsection? Just delete all the code in the [image board] section! Want another text section? copy paste the [history] or [personality] section again and change up the header!
❣️ Be on the lookout for any instances of 'IMG_URL' and change it to a relevant image (gifs work). There's one near the top of the code, under the [character portrait] section, and (by default) 3 under the [image board] section. Images you place should automatically scale to fit the space they were put in.
❣️ hex code #30429a is the primary color for this code, handling headers and the stat box colors. It's declared a lot in this code, so just run a find-replace on it with the hex code of the color you'd like to use when you're changing up colors.
❣️ hex code #2b2b2b controls the main font color on the right side. It is declared at the very top of the code, and you'll only need to change it once. hex code #fff controls the font color on the left. It's declared under the LEFT SIDE header. Replace these to adjust font color.
❣️ By default, the left column is a gradient. Let's go over how you can edit this to suit your needs:
❣️ Customizing the [stat block] section is as simple as copy-pasting or deleting {{ a stat }} sections. Change to a 3 stat system or use the traditional D&D 6 stat system!
❣️ The [image board] section comes with two types of "image". One is a link, the other is not. Be sure you're using the right one for your needs and delete the other style, and don't forget to update the 'title' text for each!
❣️ This code comes with a credit at the bottom by default. Appreciate it if you leave it in, but you can delete if you want! :)
❣️ I love peeking at what people do with my codes, so feel free to comment if you use! If you're feeling generous, you can also donate to my ko-fi.
The previous version of this code, original public release 9/27/2021 (and the IJ-only GPSL version of this code released mid-2021) are deprecated! Please update to this version of the code, and let me know in the comments if you have any issues!
KITTIWAKE is a simple, mobile friendly(-ish) bio sheet code that will automatically scale vertically no matter how much text you add; it should look nice whether you want a brief character write-up or a lengthy one.
The base template comes pre-styled with the basic vital info on the left, and then a D&D-style stat block, 3 plain text sections (personality, history, skills/abilities), a simple image board for things like connections, aesthetics, or inventory, and a tiny ooc section. It's fairly easy to add, remove, and shuffle around sections on the right side, and I encourage you to customize to get something that fits your needs!
MANY thanks to
baisemain who helped an absolute ton with getting the original version of this code to work in the first place. Additional thanks to aclosermoon for getting me to take a peek at what I'd put together originally and updating it. HOW TO USE:
❣️ As usual, mind those lj-raw tags. With biosheets in particular, if you notice something goofy with the code once you've entered your own text, often the issue is that an lj-raw tag has been misplaced or deleted!
❣️ This code is mobile friendly and insanejournal friendly!
❣️ The code comes with a basic, centered, default LJ-cut out of the box. Feel free to delete that part and add your own fake LJ-cuts, if you'd like.
❣️ Feel free to edit any of the content presented in the template! The right-side subsections can be changed, shuffled around, deleted, or added onto very easily. Don't want a connections subsection? Just delete all the code in the [image board] section! Want another text section? copy paste the [history] or [personality] section again and change up the header!
❣️ Be on the lookout for any instances of 'IMG_URL' and change it to a relevant image (gifs work). There's one near the top of the code, under the [character portrait] section, and (by default) 3 under the [image board] section. Images you place should automatically scale to fit the space they were put in.
❣️ hex code #30429a is the primary color for this code, handling headers and the stat box colors. It's declared a lot in this code, so just run a find-replace on it with the hex code of the color you'd like to use when you're changing up colors.
❣️ hex code #2b2b2b controls the main font color on the right side. It is declared at the very top of the code, and you'll only need to change it once. hex code #fff controls the font color on the left. It's declared under the LEFT SIDE header. Replace these to adjust font color.
❣️ By default, the left column is a gradient. Let's go over how you can edit this to suit your needs:
- background:linear-gradient(315deg, rgba(27,40,103,1) 0%, rgba(48,66,154,1) 75%); is the default setting for the left column. If you would like to change up the gradient, I would recommend using a CSS gradient generator like cssgradient.io and pasting the code you get over the 'linear gradient' portion of the code.
- If you would like a solid color on the left column, delete 'linear-gradient(315deg, rgba(27,40,103,1) 0%, rgba(48,66,154,1) 75%);' and change it to the hex code for the color you'd like.
- (ADVANCED) If you would like to use an image for the background, delete 'linear-gradient(315deg, rgba(27,40,103,1) 0%, rgba(48,66,154,1) 75%);' and replace it with '#aaa url('BG_IMG_URL');', where #aaa is an appropriate placeholder background color and 'BG_IMG_URL' is the URL of the image you want to use. I would recommend sticking with seamless repeating pattern images when doing this, to make sure the image doesn't break
❣️ Customizing the [stat block] section is as simple as copy-pasting or deleting {{ a stat }} sections. Change to a 3 stat system or use the traditional D&D 6 stat system!
❣️ The [image board] section comes with two types of "image". One is a link, the other is not. Be sure you're using the right one for your needs and delete the other style, and don't forget to update the 'title' text for each!
❣️ This code comes with a credit at the bottom by default. Appreciate it if you leave it in, but you can delete if you want! :)
❣️ I love peeking at what people do with my codes, so feel free to comment if you use! If you're feeling generous, you can also donate to my ko-fi.
BASIC INFO
name//full name here//
alias
//akas here//
age & dob
//##, mm dd, zodiac//
pronouns
//pronouns//
height & build
//#'#, build//
features
//note distinguishing features about appearance here//
family
//note relevant family here//
STATS
MND
3
BDY
3
SOL
3
INF
3
HISTORY
// a simple text section for personality or 'about'. write what you need between the lj-raw tags. //PERSONALITY
// a simple text section for history. write what you need between the lj-raw tags. //ABILITIES
//ability name//;//ability description//
//ability name//;
//ability description//
no subject
no subject