Thread Header: Instant

[tesscodes]

Information

Hey guys, how about a new thread header design! I've included three versions: Two person, three person, and one for events. This code is designed to take on a journal layout's styling as to not disrupt the page design, with the only conflicting styling being the font family. If you want this code to FULLY take on journal styling, just remove the font and you're all set. Enjoy! 💖

NAME & NAME

WHEN | WHERE | RATING

POST SUMMARY Last word of summary.

⚠ Thing, Thing, Thing

Coding: Two Person Thread

<lj-raw><div style="max-width:600px;margin:0 auto;display:flex;align-items:center;font-family:times,serif;text-transform:uppercase;letter-spacing:3px;font-size:10px;line-height:1;"> <!--IMAGE--> <div style="height:110px;width:90px;background:#ddd url(IMG1)center;background-size:cover;margin:0 0 20px 10px;border:7px solid #fff;border-bottom:25px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,0.1),-2px 2px 3px 0 rgba(0,0,0,0.1);box-sizing:border-box;position:relative;"></div> <!--IMAGE--> <div style="height:110px;width:90px;background:#ddd url(IMG2)center;background-size:cover;margin:15px 0 0 -15px;border:7px solid #fff;border-bottom:25px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,0.1),-3px 3px 3px 0 rgba(0,0,0,0.1);box-sizing:border-box;transform:rotate(8deg);"></div> <!--THREAD INFO--> <div style="margin:0 0 0 20px;width:calc(100% - (90px * 2) - 20px);"> <div style="font-size:20px;color:#000;"> NAME & NAME </div> WHEN | WHERE | RATING<br><br> SUMMARY <!--CUT TEXT--> <a href="ENTRY_URL" style="text-decoration:none;">INFO</a>. <!--WARNNGS--> <div style="margin:10px 0 0 0;display:flex;align-items:center;"> <span style="margin:0 4px 0 0;font-size:15px;">⚠</span> Thing, Thing, Thing </div> </div> </div></lj-raw>

NAME, NAME & NAME

WHEN | WHERE | RATING

POST SUMMARY Last word of summary.

⚠ Thing, Thing, Thing

Coding: Three Person Thread

<lj-raw><div style="max-width:600px;margin:0 auto;display:flex;align-items:center;font-family:times,serif;text-transform:uppercase;letter-spacing:3px;font-size:10px;line-height:1;"> <!--IMAGE--> <div style="height:110px;width:90px;background:#ddd url(IMG1)center;background-size:cover;margin:20px -30px 0 0;border:7px solid #fff;border-bottom:25px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,0.1),-1px 1px 3px 0 rgba(0,0,0,0.1);box-sizing:border-box;transform:rotate(-8deg);"></div> <!--IMAGE--> <div style="height:110px;width:90px;background:#ddd url(IMG2)center;background-size:cover;margin:0 0 20px 10px;border:7px solid #fff;border-bottom:25px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,0.1),-2px 2px 3px 0 rgba(0,0,0,0.1);box-sizing:border-box;position:relative;"></div> <!--IMAGE--> <div style="height:110px;width:90px;background:#ddd url(IMG3)center;background-size:cover;margin:15px 0 0 -15px;border:7px solid #fff;border-bottom:25px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,0.1),-3px 3px 3px 0 rgba(0,0,0,0.1);box-sizing:border-box;transform:rotate(8deg);"></div> <!--THREAD INFO--> <div style="margin:0 0 0 20px;width:calc(100% - (90px * 3));"> <div style="font-size:17px;color:#000;"> NAME, NAME & NAME </div> WHEN | WHERE | RATING<br><br> SUMMARY <!--CUT TEXT--> <a href="ENTRY_URL" style="text-decoration:none;">INFO</a>. <!--WARNNGS--> <div style="margin:10px 0 0 0;display:flex;align-items:center;"> <span style="margin:0 4px 0 0;font-size:15px;">⚠</span> Thing, Thing, Thing </div> </div> </div></lj-raw>

EVENT NAME

Maecenas at convallis augue, sit amet accumsan massa. Vivamus feugiat sem sed dui cursus, at aliquet dolor aliquet.

MORE | MORE | MORE | Join In!

Coding: Event Thread

<lj-raw><div style="max-width:600px;margin:8px auto 0 auto;display:flex;align-items:center;font-family:times,serif;text-transform:uppercase;letter-spacing:3px;font-size:10px;line-height:1;"> <!--IMAGE--> <div style="height:110px;width:170px;background:#ddd url(IMG)center;background-size:cover;margin:0 0 0 10px;border:7px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,0.1),-2px 2px 3px 0 rgba(0,0,0,0.1);box-sizing:border-box;position:relative;transform:rotate(-3deg);"></div> <!--THREAD INFO--> <div style="margin:0 0 0 20px;width:calc(100% - 170px - 20px);"> <div style="font-size:25px;color:#000;"> TITLE </div> SUMMARY<br><br> MORE | MORE | MORE <!--CUT TEXT--> | <a href="ENTRY_URL" style="text-decoration:none;">Join In!</a> </div> </div></lj-raw>

Editing Guide

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

FONTS

times,serif - All text

DIMENSIONS

600px - Container width
110px - Icon width
90px - Icon height
110px - Gif width
170px - Gif height

COLORS

#fff

Image background

rgba(0,0,0,0.1)

mage border; box shadow

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!