Previous | Next

Biosheet: Headliner

(this is an in-entry code; I just wanted to save room, haha)


Hey, guys! I haven't been doing as many biosheets lately and my Patreon users are really interested in getting more of those again, so hopefully the rest of you are too! If you'd like to be able to vote on what sort of free content gets posted, be sure and become a patron so you don't miss out on exclusive polls every month!

This biosheet has just about everything you could want bundled inside of a editorial feeling, multi-page code, which features a large header and pages for your standard bio sections, a gallery, music, and more! Enjoy! ♥

The Coding

Installation Guide

Paste into an entry and fill in the following!

NAME HERE - Header name title
HEADERIMG - Header background
INITIALS - Header monogram


ABOUT NAME - About title
ABOUTSUBTITLE - About Subtitle
Fill in sidebar as needed
ABOUT INFO HERE - About info

PERSONALITYSUBTITLE - Personality Subtitle
TRAITSICON - Personality sidebar icon
ABCD-E - Personality acronym
PERSONALITY TYPE - Personality type
50% (x2) and TRAIT - Trait title and percentage
Fill in sidebar as needed
PERSONALITY INFO HERE - Personality info

Fill in sidebar as needed

HISTORYSUBTITLE - History Subtitle
Fill in sidebar as needed
HISTORY INFO HERE - History info

VISUALSSUBTITLE - Visuals Subtitle
GALLERYURL - image link (copy/paste image url as many times as desired)

CONNECTIONSSUBTITLE - Connections Subtitle
FRIENDURL - Journal link
NAMEHERE - Friend name
CONNECTION TYPE - Relationship
CONNECTION INFO - Info about person
copy/paste this block as many times as needed

PLAYLISTSUBTITLE - Playlist Subtitle
SONGURL - Youtube link
ALBUMART - Album cover image
SONGTITLE - Song title
SONGARTIST - Song artist
0:00 - Song runtime
copy/paste this block as many times as needed

yourname through aimname - OOC info
CONTACTURL - Dropbox link

Editing Guide

Paste the coding into Notepad or similar and bring up Replace All (usually Ctrl+H) to replace values quickly and easily!

helvetica,arial,sans-serif - Overall font
Palatino Linotype - Accent font

#fff - Content background color and header/footer font color
#eee - Light accent color
#ADD7C9 - Main accent color
#333 - Font color

Terms of Use

♡ Do not remove credit.
♡ Do not redistribute my codes in part or in whole (posting a copy for players to use in your game is fine with a link to original post.)
♡ If you break something during editing, please feel free to drop me a comment and I'll help as best I can!
♡ I love seeing edits! This isn't a rule, but if you have a cool edit of one of my codes I'd love to see it!


Aug. 1st, 2017 10:58 pm (UTC)
Holy shit, this would be so awesome for games as well, if you edited it appropriately!
Aug. 1st, 2017 11:00 pm (UTC)
Yeah, I was thinking that too! I might do a game version with different pages, tbh. (And probably a layout with the same header setup haha.)
Aug. 1st, 2017 11:01 pm (UTC)
Please do! This would be fantastic for world building and FAQ pages.
Aug. 2nd, 2017 01:09 am (UTC)
That would be amazing, because I had the exact same thought [info]nebari did. As soon as I started clicking around, my brain started puzzling out how to fit a whole game's worth of information in a single post. Anyway, regardless of what you choose to do, this is really gorgeous. Thanks for sharing it!
Aug. 1st, 2017 11:17 pm (UTC)

Everything you do is perfect!
Aug. 8th, 2017 06:00 pm (UTC)
Shhhh no thank you!!!! <3
Aug. 2nd, 2017 01:22 am (UTC)

my face whenever tess updates

Aug. 8th, 2017 06:00 pm (UTC)

Re: my face whenever tess updates

Aug. 2nd, 2017 03:33 am (UTC)
Ohhhhhh my god!! *hearteyes* and just when I was about to work on a new character this week. Perf.
Aug. 8th, 2017 06:00 pm (UTC)
Oh sweet! I love when timing works out like that haha.
Aug. 8th, 2017 06:01 pm (UTC)
Life is kicking me in the ass so I haven't been able to do it yet, but when I get it done I'm definitely going to show you.
Aug. 8th, 2017 06:09 pm (UTC)
Man, I feel you. Last month was nuts for me haha. I can't wait to see it, though! I'm wicked stoked to see how people edit this one tbh.
Aug. 2nd, 2017 07:35 am (UTC)
BLESS YOU TESS for making my life easier by combining every extra character tidbit I use into one actual code. You never cease to amaze and now I need to find an immediate use for this. 🙌
Aug. 8th, 2017 06:01 pm (UTC)
Aug. 3rd, 2017 09:18 am (UTC)
I'm not finished yet...but

You're ruining my life.
Aug. 8th, 2017 06:01 pm (UTC)
YASSSSSSSSSSS girl ugh. I love seeing it in use for an actual character.
Aug. 3rd, 2017 11:53 am (UTC)
Oh, wow, this is amazing.
Aug. 8th, 2017 06:01 pm (UTC)
Thank you!! ♥
Aug. 31st, 2017 08:01 am (UTC)
Dear lord baby Jesus this is beautiful and hauntingly large to edit.
Aug. 31st, 2017 04:20 pm (UTC)
Thank you so much!! AND YEAH, HAHA, THERE'S A LOT. It's coming along gorgeously, though! I love that you found a gif big enough to use as the header background; it looks awesome!
Aug. 31st, 2017 06:27 pm (UTC)
is there a way to get rid of the circle and initials, but keep the title and subtitle where they are?
Aug. 31st, 2017 06:47 pm (UTC)
Yeah sure! Just remove:

<div id="monogram" style="width:80px;height:80px;line-height:76px;margin:0 auto;border:2px solid #ADD7C9;color:#ADD7C9;border-radius:120px;font-family:Palatino Linotype;font-size:30px;font-style:italic;margin-bottom:35px;-webkit-box-shadow:1px 1px 2px 0 rgba(0,0,0,0.5);box-shadow:1px 1px 2px 0 rgba(0,0,0,0.5);">

And then change the padding in id="titles" to padding:15% 15% 0 15%;
Aug. 31st, 2017 06:57 pm (UTC)
you da best. thank you so much! <3

i was almost there with my no code skills/knowledge.
Dec. 10th, 2017 02:48 pm (UTC)
hey tess! i love this code, and it's perfect for an oc i'm playing over on dw. thing is, it doesn't port over there perfectly — it's almost right, but it won't center in my splash page properly (see on the journal itself, here) and there's an issue with the information pages themselves which... i'm having trouble describing, but if you check the personality and history tabs you should be able to see for yourself if you scroll down. i have done some editing of the code, but i don't think it's anything that should cause these problems — the code works right on ij, which you can see here. another of your codes, the halloween-themed permissions one, is having the same problem (here). is there something i need to change to make these work on dw?
Dec. 14th, 2017 09:23 pm (UTC)
Yeah, I noticed that a while back when I tried out the permissions code over on DW on a whim, and I like... honestly have no clue??? what it is in DW's default coding that's causing those gaps and I even tried to fix it and dug all through the inherited specs (and did it again just now.) And there's literally no discernible reason for it to be behaving this way on either code.

So far from my testing what I've been able to tell is that the size of the gap in the codes that have this issue are directly related in some way to the amount of content in that div. When I was testing my permissions code I noticed that the gap is roughly the same size as the amount of content above it, so I doubled the content amount in one section of it and the gap got relatively larger.

I really wish I had an answer to this for you, but it's honestly so weird. Maybe there's just some strange DW hiccup that requires a hack fix to cancel it out that I just haven't heard about yet since I haven't done a lot of coding over there yet, but I honestly don't get why I'm not seeing an actual reason for it in the coding. :\
Jan. 3rd, 2018 07:41 pm (UTC)
Heyo! I finally have a fix for this bug! Do a replace all on <br> and change them all to <br/> and any gapping issues should resolve themselves! (FINALLY LOL.)
Jan. 4th, 2018 02:46 am (UTC)
i... i can't believe it was that easy. i feel like a total moron, i'd seen that in dw codes people used br / instead of br for line breaks but thought the difference was utterly inconsequential. WHAT A FOOL I AM!!! thank you for the explanation, sorry for not thanking you earlier, and thank you for the fix now!!!
Jan. 4th, 2018 02:52 am (UTC)
I'm ngl, I can't believe it either haha. A patron of mine showed me the fix today and I was like no shit, really?! LOL. Once I saw why, it made total sense, but I just didn't even think of it!

Obviously, the first thing I did was come back to your comment HAHA. You're welcome! ♥
Dec. 12th, 2017 09:41 pm (UTC)
Hi Tess~

I love this code so much! is there a way to make it work with DW?


Dec. 14th, 2017 09:24 pm (UTC)
Hey! Sorry, but probably not at this time. I'm going to keep trying, but see here for more in-depth info on the issue! (Or... lack of, honestly.)
Jan. 3rd, 2018 07:41 pm (UTC)
Hey, Beth! I finally have a fix for this! Do a replace all on <br> and change them all to <br/> and any gapping issues should resolve themselves! (FINALLY LOL.)
Jan. 5th, 2018 01:12 am (UTC)
is there a site you use for find and replace?
Jan. 5th, 2018 01:24 am (UTC)
Nah, I use Notepad (any Windows computer comes with it by default) but most word processors should have a Replace All function by hitting CTRL+H (if you're on a Mac that would be COMMAND+SHIFT+F in your word processor, I believe.)

From there you'd just need to fill it in so that it's something like:

Find what: <br>
Replace with: <br/>
And hit: Replace All
Jan. 5th, 2018 01:25 am (UTC)
Thank you so much
Jan. 5th, 2018 01:26 am (UTC)
No problem!
Jan. 5th, 2018 01:32 am (UTC)
I have to fill it in but yay
Feb. 3rd, 2018 09:15 pm (UTC)

Add more people

How do you add more people to the connections part without the code getting messed up?
Feb. 3rd, 2018 10:17 pm (UTC)

Re: Add more people

The connections list is flexbox, so you should be able to add as many as you need already. Just make sure you're copy/pasting the right block!

<a name="3"></a><div class="page" style="height:570px;padding:40px;overflow:auto;">
<center class="page-head" style="margin:0 18% 20px 18%;line-height:200%;">
<b style="letter-spacing:3px;font-size:20px;color:#ADD7C9;">CONNECTIONS</b><br>
<i style="font-family:Palatino Linotype;">CONNECTIONSSUBTITLE</i>

<div id="connections" style="display:flex;flex-wrap:wrap;justify-content:space-around;align-items:flex-start;text-align:center;">

<div class="connect" style="width:160px;">
<a href="FRIENDURL" target="_blank"><img src="FRIENDICON" style="width:120px;height:120px;margin-bottom:20px;padding:10px;background:#eee;"></a>
<b style="letter-spacing:3px;font-size:17px;color:#ADD7C9;">NAME HERE</b><br>
<i style="font-family:Palatino Linotype;">CONNECTION TYPE</i><br>

<!--- MORE CHARS HERE --->

Feb. 8th, 2018 03:27 am (UTC)
Can you help me with a fix? I can't figure out why not everything is staying under its place and instead you can see everything when you scroll down on the "home" page

see here:http://kaleylynn.insanejournal.com/3093.html