forest expertise info/permissions sheet

[flyingthesky]

[live preview]

HOW TO USE IT

Sorry about the live preview being a totally different looking code - it's the same code, honestly, but when I decided to release it I realized that releasing it with the images I use would make it incredibly unuseful for other people.

There's two versions here (green and orange) but really this is a pretty simple code to customize for yourself - as you can see from the version I use, which looks nothing like this. All you'll need is a header image that's 750px by 300px that fades down into the background color and a footer image that's ~750px by 120px and fades up into the background color. I use images for the background, because I'm weird, but if you don't want that you're just going to replace background: url(https://i.imgur.com/Ffx4jPi.jpg); or background: url(https://i.imgur.com/UpvWfTP.jpg); with background-color: #[HEXCODE];

You'll also want a 200px by 300px image to show what your character looks like! Well, technically it just needs to be 200px wide and it can be any height if you want your top section to be a little longer? Because no matter how long it is, it'll always appear in that column. The layout of this code is visually something like this:


so if you want, you can actually put stuff under the image? And then you just have two columns to work with on top and one on the bottom. You can add new sections fairly easily in either section - just copy the span tag. If you want to keep the links colored, like they are in the previews, add style="color: #[HEXCODE];" to any link between the a and the href. It's #809181 for the green version and #bf400b for the orange.

GREEN VERSION

<cut text="[PUT SOME WITTY CUT TEXT HERE]"><raw-code><center> <div style="width: 750px; height: 100%; color: #FFFFFF;"><div><img src="https://i.imgur.com/fv5SHBM.jpg"></div><div style="background: url(https://i.imgur.com/Ffx4jPi.jpg); width: 750px; margin-top: -50px;"><center><table style="width: 700px; color: #FFFFFF; background-color: transparent;"><tr><td><img src="[CHARACTER PHOTO URL HERE]" title="[SOME WITTY HOVER TEXT]"></td> <td style="vertical-align: top;"><span style="color: #809181; font-family: 'Century Gothic', sans serif; font-size: 3em; font-weight: bold; letter-spacing: -3px;">[CHARACTER NAME]</span><br/> <p style="color: #FFFFFF; text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu ante aliquet, molestie urna eu, tincidunt turpis. Donec aliquet pellentesque tellus aliquet eleifend. Sed sodales lorem in diam convallis, eu porttitor leo iaculis. Vestibulum enim ipsum, efficitur vitae pellentesque sed, placerat vitae tellus. Vestibulum enim ipsum, efficitur vitae pellentesque sed, placerat vitae tellus.</p> <table style="width: 100%;"><tr><td style="width: 50%;"><span style="color: #809181; font-family: 'Century Gothic', sans serif; font-size: 2em; font-weight: bold; letter-spacing: -3px;">OOC INFO</span><br /> <p style="color: #FFFFFF; text-align: justify;">contact: <a style="color: #809181;" href="[PLURK URL]">[PLURK USERNAME]</a> on plurk<br /> timezone: [TIMEZONE] (<a style="color: #809181;" href="[LINK TO A CLOCK OF YOUR TIMEZONE]">check</a>)</p></td><td style="width: 3px; height: 100%; background-color: #809181; padding-left: 5px; padding-right: 5px;"></td><td style="text-align: right; width: 50%;"><span style="color: #809181; font-family: 'Century Gothic', sans serif; font-size: 2em; font-weight: bold; letter-spacing: -3px;">IC INFO</span><br /> <p style="color: #FFFFFF; text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu ante aliquet, molestie urna eu, tincidunt turpis.</p></td></tr></table></td></tr> <tr><td colspan="2"><span style="color: #809181; font-family: 'Century Gothic', sans serif; font-size: 3em; font-weight: bold; letter-spacing: -3px;">INVENTORY</span><br/> <ul style="color: #FFFFFF; text-align: justify;"><li><b>[ITEM #1]:</b> [DESCRIPTION]</li><li><b>[ITEM #2]:</b> [DESCRIPTION]</li><li><b>[ITEM #3]:</b> [DESCRIPTION]</li></ul></td></tr> <tr><td colspan="2"><span style="color: #809181; font-family: 'Century Gothic', sans serif; font-size: 3em; font-weight: bold; letter-spacing: -3px;">PERMISSIONS</span><br/> <p style="color: #FFFFFF; text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu ante aliquet, molestie urna eu, tincidunt turpis. Donec aliquet pellentesque tellus aliquet eleifend. Sed sodales lorem in diam convallis, eu porttitor leo iaculis. Vestibulum enim ipsum, efficitur vitae pellentesque sed, placerat vitae tellus. Vestibulum enim ipsum, efficitur vitae pellentesque sed, placerat vitae tellus.</p></td></tr></table></center></div><div style="margin-top: -25px;"><img src="https://i.imgur.com/rodsNZI.jpg"></div></div></raw-code></cut>
For the green code the dark green bg is an image, but the hex code is #084246, and the accent color is #8B0000. If you want to make a new section, just add a <span style="color: #809181; font-family: 'Century Gothic', sans serif; font-size: 2em; font-weight: bold; letter-spacing: -3px;">[HEADER TEXT]</span> wherever you want a new header and put all the content below it in p tags with style="color: #FFFFFF; text-align: justify;".

ORANGE VERSION

<cut text="[SOME WITTY CUT TEXT HERE]"><raw-code><center> <div style="width: 750px; height: 100%;"><div><img src="https://i.imgur.com/4vMd8T6.jpg"></div><div style="background: url(https://i.imgur.com/UpvWfTP.jpg); width: 750px; margin-top: -50px;"><center><table style="width: 700px; background-color: transparent;"><tr><td><img src="[CHARACTER PHOTO URL HERE]" title="[SOME WITTY HOVER TEXT]"></td> <td style="vertical-align: top;"><span style="color: #bf400b; font-family: 'Century Gothic', sans serif; font-size: 3em; font-weight: bold; letter-spacing: -3px;">[CHARACTER NAME]</span><br/> <p style="color: #000000; text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu ante aliquet, molestie urna eu, tincidunt turpis. Donec aliquet pellentesque tellus aliquet eleifend. Sed sodales lorem in diam convallis, eu porttitor leo iaculis. Vestibulum enim ipsum, efficitur vitae pellentesque sed, placerat vitae tellus. Vestibulum enim ipsum, efficitur vitae pellentesque sed, placerat vitae tellus.</p> <table style="width: 100%;"><tr><td style="width: 50%;"><span style="color: #bf400b; font-family: 'Century Gothic', sans serif; font-size: 2em; font-weight: bold; letter-spacing: -3px;">OOC INFO</span><br /> <p style="color: #000000; text-align: justify;">contact: <a style="color: #bf400b;" href="[PLURK URL]">[PLURK USERNAME]</a> on plurk<br /> timezone: [TIMEZONE] (<a style="color: #bf400b;" href="[LINK TO A CLOCK OF YOUR TIMEZONE]">check</a>)</p></td><td style="width: 3px; height: 100%; background-color: #bf400b; padding-left: 5px; padding-right: 5px;"></td><td style="text-align: right; width: 50%;"><span style="color: #bf400b; font-family: 'Century Gothic', sans serif; font-size: 2em; font-weight: bold; letter-spacing: -3px;">IC INFO</span><br /> <p style="color: #000000; text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu ante aliquet, molestie urna eu, tincidunt turpis.</p></td></tr></table></td></tr> <tr><td colspan="2"><span style="color: #bf400b; font-family: 'Century Gothic', sans serif; font-size: 3em; font-weight: bold; letter-spacing: -3px;">INVENTORY</span><br/> <ul style="color: #000000; text-align: justify;"><li><b>[ITEM #1]:</b> [DESCRIPTION]</li><li><b>[ITEM #2]:</b> [DESCRIPTION]</li><li><b>[ITEM #3]:</b> [DESCRIPTION]</li></ul></td></tr> <tr><td colspan="2"><span style="color: #bf400b; font-family: 'Century Gothic', sans serif; font-size: 3em; font-weight: bold; letter-spacing: -3px;">PERMISSIONS</span><br/> <p style="color: #000000; text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu ante aliquet, molestie urna eu, tincidunt turpis. Donec aliquet pellentesque tellus aliquet eleifend. Sed sodales lorem in diam convallis, eu porttitor leo iaculis. Vestibulum enim ipsum, efficitur vitae pellentesque sed, placerat vitae tellus. Vestibulum enim ipsum, efficitur vitae pellentesque sed, placerat vitae tellus.</p></td></tr></table></center></div><div style="margin-top: -25px;"><img src="https://i.imgur.com/5FuALrq.jpg"></div></div></raw-code></cut>
For the orange version, the bg is an image again but the hex code is #e08800 and the accent color is #bf400b. If you want to make a new section, just add a <span style="color: #bf400b; font-family: 'Century Gothic', sans serif; font-size: 2em; font-weight: bold; letter-spacing: -3px;">[HEADER TEXT]</span> wherever you want a new header and put all the content below it in p tags with style="color: #000000; text-align: justify;".

That's it. Have fun, if you have questions leave them down below and I'll try to get to them in a timely manner. If you're wondering about the name, it's a Dear Evan Hansen reference (don't listen to that in public probably) because I originally made the code for Connor.