jay, novice human (![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
10billionghosts) wrote2022-08-04 10:41 pm
10billionghosts) wrote2022-08-04 10:41 pm
Entry tags:
code: SLICK CHAOS - a biosheet code
Adventures in "Oh, look, good brain chemicals!" continue with SLICK CHAOS, a biosheet that looks real fuckin' nice on desktop if I do say so myself, but also looks incredibly slick on mobile. Hence the name.
Not too terribly much to say here. I've been wanting to make something with offset squares (like the about, appearance, and background sections in this code) for literally years now, and I finally found a way to use them. UHHHHHHHHHHH------- live full-size preview at the bottom, code below, instructions beneath that, and other than that? Probably all you need to know. Right? Right. Alright chums let's do this Leeroy Jenkins.
HERE IS THE CODE:
HOW TO USE:
❣️ Mind those lj-raw tags!!
❣️ This code is mobile compatible and insanejournal friendly! In fact, this code looks sick as hell on dreamwidth mobile imo. It was fully coded on desktop, so it's completely desktop compatible. It just happens to look real nice on phones. Anyway fuckin' fistpump for a code that came together easily lads.
❣️ There are three instances where you will need to change IMG_URL to the url for a picture. The first two are intended to be pictures of your character/PB, but the third one is just an optional divider I added because I felt like the code needed it. Use whatever kinda pic u want for that.
❣️ I've marked each ROW in this code via comment because all ROWs are optional. You can delete them entirely or shuffle them around to suit your needs!
❣️ hex code #ba4f59 is your primary color, a darker pink used on backgrounds.
❣️ hex code #f5909a is your secondary color here, a lighter pink, used primarily as a back-background.
❣️ hex code #242424 is a dark, dark gray used for any instance that looks kinda like black.
❣️ hex code #fff is white and is used for some text stuff.
❣️ Briefly, for the personality section, I've labeled each trait type + (positive), = (neutral), and flame emoji ("spicy"). This is a personal preference of mine. I don't like calling character traits outright negative, rather I prefer to call out traits that can become a problem for my characters and others. I know this is a personal quirk of mine so 100% FEEL FREE TO CHANGE THAT FLAME EMOJI TO A MINUS SIGN or do away with it entirely or turn it into a flower or whatever. If it feels good do it baby. Existence is pain but my codes don't have to be.
❣️ This code contains a credit link. I'd appreciate if you'd left it in, but you can remove it if you'd like!
❣️ I love peeking at what people do with my codes, so feel free to comment if you use! If you'd like, you can also donate to my ko-fi!
Not too terribly much to say here. I've been wanting to make something with offset squares (like the about, appearance, and background sections in this code) for literally years now, and I finally found a way to use them. UHHHHHHHHHHH------- live full-size preview at the bottom, code below, instructions beneath that, and other than that? Probably all you need to know. Right? Right. Alright chums let's do this Leeroy Jenkins.
HOW TO USE:
❣️ Mind those lj-raw tags!!
❣️ This code is mobile compatible and insanejournal friendly! In fact, this code looks sick as hell on dreamwidth mobile imo. It was fully coded on desktop, so it's completely desktop compatible. It just happens to look real nice on phones. Anyway fuckin' fistpump for a code that came together easily lads.
❣️ There are three instances where you will need to change IMG_URL to the url for a picture. The first two are intended to be pictures of your character/PB, but the third one is just an optional divider I added because I felt like the code needed it. Use whatever kinda pic u want for that.
❣️ I've marked each ROW in this code via comment because all ROWs are optional. You can delete them entirely or shuffle them around to suit your needs!
❣️ hex code #ba4f59 is your primary color, a darker pink used on backgrounds.
❣️ hex code #f5909a is your secondary color here, a lighter pink, used primarily as a back-background.
❣️ hex code #242424 is a dark, dark gray used for any instance that looks kinda like black.
❣️ hex code #fff is white and is used for some text stuff.
❣️ Briefly, for the personality section, I've labeled each trait type + (positive), = (neutral), and flame emoji ("spicy"). This is a personal preference of mine. I don't like calling character traits outright negative, rather I prefer to call out traits that can become a problem for my characters and others. I know this is a personal quirk of mine so 100% FEEL FREE TO CHANGE THAT FLAME EMOJI TO A MINUS SIGN or do away with it entirely or turn it into a flower or whatever. If it feels good do it baby. Existence is pain but my codes don't have to be.
❣️ This code contains a credit link. I'd appreciate if you'd left it in, but you can remove it if you'd like!
❣️ I love peeking at what people do with my codes, so feel free to comment if you use! If you'd like, you can also donate to my ko-fi!
firstname lastname
I couldn't figure out what to do with this section but I liked it here so for the sample code we're calling it an ABOUT section, but do with it as you will. In theory, this is space for a few paragraphs to give folks the elevator pitch of your character -- room enough to briefly describe what you're bringing to the table with a character without the typical Wall 'o' Text, I guess?
Just something a lil more digestible than the full profile.
You could briefly cover personality and background, review how the character fits into the setting, and their current motivations. IDK, I'm just rambling -- yinz know how to RP already and I forgot somewhere along the line. I ain't the expert. Mostly I'm just trying to fill space to show off how much room you have.
I was thinking you may also have luck using this as an abilities section if you're playing a Powers game, or like an inventory section? Maybe a CR list or a pokedex idk the world is your cloyster babe.
Just something a lil more digestible than the full profile.
You could briefly cover personality and background, review how the character fits into the setting, and their current motivations. IDK, I'm just rambling -- yinz know how to RP already and I forgot somewhere along the line. I ain't the expert. Mostly I'm just trying to fill space to show off how much room you have.
I was thinking you may also have luck using this as an abilities section if you're playing a Powers game, or like an inventory section? Maybe a CR list or a pokedex idk the world is your cloyster babe.
personality
+
positive trait . trait . trait . trait . trait
=
neutral trait . trait . trait . trait . trait
🔥
spicy trait . trait . trait . trait . trait
appearance
This is a small space for some appearance notes like vibes, style, voice, etc. Not a ton of room here by default, but I think you can overfill it without donking up the layout.
abilities
background
Finally, here is your standard space for a character background. You can add in a family section, a hometown section, etc. etc. This thing is already so overdesigned lmao u deserve a simple does what it says on the tin text box.
Bonbon candy canes bonbon ice cream bonbon. Oat cake fruitcake fruitcake toffee bear claw. Cupcake ice cream sugar plum toffee jelly beans candy canes cake. Apple pie bear claw gummies pudding powder ice cream chocolate. Brownie halvah cookie shortbread gummies. Halvah sugar plum carrot cake pie sugar plum.
Jujubes tiramisu lemon drops jelly beans cookie apple pie jelly beans croissant. Marzipan sweet muffin muffin muffin candy canes gummi bears sugar plum chocolate cake. Gummies brownie candy canes icing macaroon topping jelly topping.
Toffee tootsie roll icing halvah chocolate tootsie roll gingerbread macaroon sugar plum. Soufflé jelly-o jelly beans tiramisu bear claw. Pudding chupa chups tiramisu gummi bears jelly-o brownie. Marzipan sesame snaps chupa chups dragée ice cream.
Tiramisu tart topping apple pie jelly candy canes. Oat cake tiramisu cupcake pastry dessert jelly cookie biscuit wafer. Candy canes muffin candy canes caramels bonbon gummies donut pudding sesame snaps. Donut dessert brownie shortbread pudding jelly marzipan sweet roll. Sweet cotton candy jelly ice cream muffin macaroon. Sweet roll jelly jujubes gingerbread chocolate.
Bonbon candy canes bonbon ice cream bonbon. Oat cake fruitcake fruitcake toffee bear claw. Cupcake ice cream sugar plum toffee jelly beans candy canes cake. Apple pie bear claw gummies pudding powder ice cream chocolate. Brownie halvah cookie shortbread gummies. Halvah sugar plum carrot cake pie sugar plum.
Jujubes tiramisu lemon drops jelly beans cookie apple pie jelly beans croissant. Marzipan sweet muffin muffin muffin candy canes gummi bears sugar plum chocolate cake. Gummies brownie candy canes icing macaroon topping jelly topping.
Toffee tootsie roll icing halvah chocolate tootsie roll gingerbread macaroon sugar plum. Soufflé jelly-o jelly beans tiramisu bear claw. Pudding chupa chups tiramisu gummi bears jelly-o brownie. Marzipan sesame snaps chupa chups dragée ice cream.
Tiramisu tart topping apple pie jelly candy canes. Oat cake tiramisu cupcake pastry dessert jelly cookie biscuit wafer. Candy canes muffin candy canes caramels bonbon gummies donut pudding sesame snaps. Donut dessert brownie shortbread pudding jelly marzipan sweet roll. Sweet cotton candy jelly ice cream muffin macaroon. Sweet roll jelly jujubes gingerbread chocolate.
no subject
no subject
no subject
no subject
no subject
no subject
no subject
no subject
no subject
no subject
no subject
no subject
no subject
As you can see here under the "name" section, when I try to use italics (regular <i></i>), it adds a line break. I have enough knowledge of CSS and html to be able to edit code with a lot of trial and error, but I haven't been able to figure out why this line break is being added or what I need to change/delete to make it go away. Or did I do something wrong to add that? I did turn off the lj-raw tags around the content of that box. The "name" section is just a modified duplicate of the personality code, with just one content box.
no subject
Within the div that wraps around the text under the 'name' section, remove JUST the following: 'display:flex;flex-wrap:wrap;justify-content:center;align-items:center;'.
Pretty sure the flex grid stuff being there is causing your issue. :)
no subject
no subject
no subject
no subject
mostly, I'm just looking for the option to tab between two separate identities on individual pages, if that makes sense.
no subject
I'll let you know how it goes in a couple of days and/or reply again to let you know when I've finished it.
no subject
this is the page as I have it now, I would just like to be able to duplicate the same page twice in one entry with the ability to tab between them.
edit: sorry, I just realized I have some examples that might be simpler than the tess code to demonstrate:
https://killthecake.dreamwidth.org/32635.html
https://killthecake.dreamwidth.org/31677.html
no subject
Thank you for the examples!
no subject
no subject
First, absolutely love the codes you come up with (and that you've got an eye for mobile friendly codes you're my hero).
Second, and I hope this isn't complicated but it was pointed out to me as I was putting together a character sheet that this particular code doesn't play nice on dark mode or using the Dreamwidth "dark" site skin.
Default skin looks fine:
Dark mode loses the text in and around the "white" boxes. This first is viewed with a journal using the DW dark site skin:
This is my pal using "dark mode" on their phone:
If you have an easy suggestion I'm all ears! Otherwise I'll personally pivot to another code that I know works in dark mode. But I thought it good to point out with people's fondness for dark mode as we all stay up too late scrolling our phones instead of sleeping.
no subject
In the meantime, you can achieve something that's more dark mode friendly in a couple of different ways:
- by adjusting the hex codes. Specifically, #242424 is the one you'll want to change. That's dark gray, and you can adjust it to something that plays nice against both light and dark backgrounds (reds & pinks, certain higher saturation blues, greens). To do this quickly, pick out the hex code for the color you'd like to use, and then put the code into a text editor like Notepad++ or gdocs, then use find-replace to replace every instance of #242424 with your new color.
- (imperfect, but) by removing non-crucial instances of #242424, most of the text, at least, will be automatically changed to off-white on dark mode displays while still being black in default site skin. Lemme see if I can't do that for you. One sec, going to try posting it in another comment replied to this one.
no subject
no subject
no subject
no subject
me, furiously doodling in middle distancebut ye.good stuff.
honestly, this one is so user friendly, I might just switch another character of mine's info page to this code instead lol
no subject
Aaa I'm REALLY glad you find the code easy to use. I'm always worried about the usability of my longer stuff.
Did you draw your own icons? I love them they're SO fun and expressive
no subject
But if you like the art, his canon is "Witch Hat Atelier" by Kamome Shirahama (wait, where'd the fieldset with that info go, did i delete it oh NO-) and it's slated to get an anime next year! meanwhile, the manga has like... 80 some chapters and is a monthly series. It's licensed, so you might be able to find the books in your local library or bookstore!