jay, novice human (![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
10billionghosts) wrote2025-09-23 09:13 pm
10billionghosts) wrote2025-09-23 09:13 pm
Entry tags:
code: wilder, a modular bio code (UPDATED 9/23/25)
UPDATE 9/23/25: Hiya! This code was originally released 10/19/2021. I've rewritten it from the ground up for cleaner presentation, adding indentation, improved spacing, and better commenting in hopes of making it easier to use. The code itself has also been made a few pixels wider at its max width, and the mood board at the top has been adjusted slightly to accommodate.
You do not NEED to update to this new version of the code, however, you may find a better overall user experience if you do!
Slightly edited version of the original entry description follows. The HOW TO USE section has also been updated to be more in line with the current version of the code.
WILDER is a mobile-friendly modular character bio sheet design featuring multiple completely optional sections. These modular sections can be moved around, duplicated, or removed entirely to suit your specific needs, meaning you can probably fenangle it into an info page or event code, if you want!
For the ambitious, this code can be spliced together with my IC/OOC code, SHUFFLE, to create some interesting results. (9/23/2025 note: this may no longer be true, i need to go back and update the code in shuffle as well to be sure, so for now splicing these codes together is a DO AT YOUR OWN RISK situation. i'll update this when i've updated SHUFFLE.)
WILDER is part of the geometric set, a group of matchy codes that will work well together for a community or game. So, if you're interested, be sure to browse that tag. Periodically, I hope to add more content that matches this overall aesthetic, and also plan on attempting to make more code sets in the future. (9/23/2025 note: lol. lmao even.)
A customized version of WILDER can be viewed at the bottom of this page.
CODE HERE:
HOW TO USE:
❣️ Mind those lj-raw tags!! They're everywhere!
❣️ This code is mobile friendly and (is probably still) insanejournal friendly!
❣️ THIS CODE FEATURES A HIDDEN LJ-CUT. The "BIO" text at the bottom of the image board functions as the lj-cut text. BE SURE TO UPDATE #POST_URL_HERE to the URL of the profile's post.
❣️ Be sure to change each instance of IMG_URL in the header section. The image board is now labeled with comments so you can more easily see which image is being changed!
❣️ hex code #3a7a85 is the topmost solid color bar on the header.
❣️ hex code #5a858c is the second solid color bar on the header.
❣️ hex code #738f94 is the third solid color bar on the header.
❣️ hex code #93a9ad is, you guessed it, the fourth solid color bar on the header.
❣️ hex code #b7c6c9 is the color for all basic header bars, header text, and the bottom border of all text fields.
❣️ hex code #cae3e8 is the light color that makes up the background of all text fields like the "FULL NAME" and "ALIAS" fields.
❣️ If you use the AESTHETIC section, be sure to change every instance of IMG_URL. Instructions for adding additional images to the aesthetic section are in the code itself.
❣️ Special thanks to all the lovelies who took a look at this code while it was in progress. It should work across browsers, but if you run into any weirdness, feel free to comment on this post and I'll have a look!
❣️ This code contains a credit link. I'd appreciate if you'd left it in!
❣️ I love peeking at what people do with my codes, so feel free to comment if you use! If you like what I make, please consider throwing me some dosh on ko-fi!
You do not NEED to update to this new version of the code, however, you may find a better overall user experience if you do!
Slightly edited version of the original entry description follows. The HOW TO USE section has also been updated to be more in line with the current version of the code.
WILDER is a mobile-friendly modular character bio sheet design featuring multiple completely optional sections. These modular sections can be moved around, duplicated, or removed entirely to suit your specific needs, meaning you can probably fenangle it into an info page or event code, if you want!
WILDER is part of the geometric set, a group of matchy codes that will work well together for a community or game. So, if you're interested, be sure to browse that tag. Periodically, I hope to add more content that matches this overall aesthetic, and also plan on attempting to make more code sets in the future. (9/23/2025 note: lol. lmao even.)
A customized version of WILDER can be viewed at the bottom of this page.
HOW TO USE:
❣️ Mind those lj-raw tags!! They're everywhere!
❣️ This code is mobile friendly and (is probably still) insanejournal friendly!
❣️ THIS CODE FEATURES A HIDDEN LJ-CUT. The "BIO" text at the bottom of the image board functions as the lj-cut text. BE SURE TO UPDATE #POST_URL_HERE to the URL of the profile's post.
- To do this, you will need to post the profile first, and then edit it to change #POST_URL_HERE to the post's URL.
❣️ Be sure to change each instance of IMG_URL in the header section. The image board is now labeled with comments so you can more easily see which image is being changed!
❣️ hex code #3a7a85 is the topmost solid color bar on the header.
❣️ hex code #5a858c is the second solid color bar on the header.
❣️ hex code #738f94 is the third solid color bar on the header.
❣️ hex code #93a9ad is, you guessed it, the fourth solid color bar on the header.
❣️ hex code #b7c6c9 is the color for all basic header bars, header text, and the bottom border of all text fields.
❣️ hex code #cae3e8 is the light color that makes up the background of all text fields like the "FULL NAME" and "ALIAS" fields.
❣️ If you use the AESTHETIC section, be sure to change every instance of IMG_URL. Instructions for adding additional images to the aesthetic section are in the code itself.
❣️ Special thanks to all the lovelies who took a look at this code while it was in progress. It should work across browsers, but if you run into any weirdness, feel free to comment on this post and I'll have a look!
❣️ This code contains a credit link. I'd appreciate if you'd left it in!
❣️ I love peeking at what people do with my codes, so feel free to comment if you use! If you like what I make, please consider throwing me some dosh on ko-fi!
FULL NAME
character name
BIRTH DATE
00/00/0000
AGE
00
FIELD
answer
ALIAS
aliases
PRONOUNS
pronouns here
FIELD
answer
FIELD
answer
APPEARANCE
!! YOUR CONTENT HERE, text for an appearance section !!
HEIGHT
height value
HAIR
hair color / desc
BUILD
build desc
EYES
eye color
PERSONALITY
!! YOUR CONTENT HERE, area for a personality section or otherwise large block of text !!
BACKGROUND
FAMILY
a small space to list family members
family name 1, relation;
description
family name 2, relation;
description
family name 1, relation;
description
family name 2, relation;
description
ABILITIES
NAME FOR ABILITY/SKILL/MAGIC #1
!! write a brief description about your ability/talent/magic/whatever here! it'll scale. !!
NAME FOR ABILITY/SKILL/MAGIC #1
!! write a brief description about your ability/talent/magic/whatever here! it'll scale. !!
NAME FOR ABILITY/SKILL/MAGIC #1
!! write a brief description about your ability/talent/magic/whatever here! it'll scale. !!
MISC
🌕 fact
🌕 fact
🌕 fact
🌕 fact
🌕 fact
AESTHETIC
OOC
NAME
player
CONTACT
contact
CANON/PB
answer
TIMEZONE
timezone
no subject
no subject
no subject
no subject
no subject
no subject
no subject
no subject
no subject
this is the entry, this is the image I'm trying to get there. As you can see it's focusing in on the upper right corner instead of the majority of the image.
no subject
Think of positioning an image written in code this way as though you're sliding a whole picture around behind a cut out on a piece of construction paper, rather than adjusting the size of the image itself. You can change the positioning of the image with the value that's right after the image's URL and the close parenthesis that follow it. So, when it says url('your_url_here')center; 'center' is how the image is positioned. It is centered based on where that specific tetris block-shaped container is.
My codes all set images like this to 'center' by default because that's the most universally friendly way to handle potential images, BUT, you can fine tune it by changing that 'center' to a few different values.
It's a little more complex a topic than can be thoroughly covered in a comment, but Mozilla has a visual guide to how it works over here if you're interested.
That specific image you're using just happens to be so close to its container's width that setting its alignment to left or right doesn't really do anything.
THE SPECIFIC FIX for the image you want to use, then, is changing this part:
url('https://i.imgur.com/FIH91Cv.png')center;
To THIS:
url('https://i.imgur.com/FIH91Cv.png')89px center;
You can further customize this in a couple of ways!
First: that first number value after the parenthesis, '89px', is handling the horizontal position of the image. It can be as small a value as '60px' before the face starts to disappear again. So, any value between 60px and 89px will work.
Second: That 'center' is handling the vertical positioning. You can change it to 'top' or to a negative value (I thought "-30px" looked nice) to adjust the vertical positioning of the face.
So, for example, you could do:
url('https://i.imgur.com/FIH91Cv.png')89px -30px;
or like
url('https://i.imgur.com/FIH91Cv.png')75px -15px;
I hope that helps a little!
no subject
Just tried the fix you proposed and it worked!!! thank you so much 🙏
no subject
no subject
no subject
Each image has the following code in it: background:#ccc url('IMG_URL')center;background-size:cover;
Paste the URL for the image you'd like to use over the text IMG_URL. Any image you put into the box will resize to fit within the box.
As far as positioning goes, the concepts I described above still apply here. As the aesthetic squares in this code are just-about-perfectly square in shape, your easiest option is to select images that are, themselves, either square or have focal content that is very well centered either vertically or horizontally in the image itself.
If you find you want to mess with positioning, you'll want to change that word: 'center'.
Often, 'center' alone will do you fine, but if you want to see more of the upper part of an image, you can change it from just 'center' to 'center top', or 'center bottom' for the reverse. You can also change center to 'left' to see more of the left part of the image, or 'right' to see more of the right.
Finer tuning of the position of an image is, as is probably obvious from my previous comment, a little more complex and requires some mathing and trial and error, but the above comment does detail how to fine tune your image's position a little.
Hope that helps!
no subject
no subject
So, you'll want to use images that are at least 150px by 150px or larger for it to look best.
no subject
no subject
no subject
no subject
no subject
no subject
https://primavictrix.dreamwidth.org/844.html
https://primavictrix.dreamwidth.org/715.html
no subject
no subject
no subject
no subject
See HERE and HERE. Credited of course :3 Thank you so much for your amazing work.
Now to dive through the rest of your codes for the profile, muahaha.
no subject
Keep up your fantastic work, these are all so clean and gorgeous (And easy to customize!! Seriously, this is one of the first times I've been able to work with a set up so easily!)
no subject
no subject
no subject
Glad you like it! 😊