Thread Header Bundle

[tesscodes]

Information

Hey guys! Thread headers are pretty high on the list of frequently requested codes, so this month I've put together a batch of headers for you all! The aesthetic for these is on the small side, but they're very easy to scale up by changing the font size and image dimensions on each code if you prefer things a little larger. Enjoy! 💖

UPDATE: 12.02.22 Wrapped each header in a separate div tag to counteract a site issue that occurs when adding tags to an entry.

Name One & Name Two
Rating • Date • Location

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Coding: Header #1

<lj-raw><div><a href="" style="max-width:500px;margin:0 auto;display:flex;align-items:center;justify-content:center;font-family:calibri,sans-serif;font-size:10px;line-height:1.5;text-decoration:none;color:#222;"> <!--IMGS--> <div style="margin:0 10px 0 0;"> <img src="GIF1" style="height:55px;width:120px;padding:3px;background:#fff;border:1px dotted #bbb;box-shadow:1px 1px 1px 0 rgba(0,0,0,0.1);object-fit:cover;box-sizing:border-box;"> <img src="GIF2" style="height:55px;width:120px;padding:3px;background:#fff;border:1px dotted #bbb;box-shadow:2px 2px 2px 0 rgba(0,0,0,0.1);object-fit:cover;box-sizing:border-box;margin:0 0 0 -20px;transform:rotate(6deg);"> </div> <!--INFO--> <div style=""> <div style="text-transform:uppercase;letter-spacing:2px;font-size:9px;"> <b style="color:#999;">Name One</b> & <b style="color:#999;">Name Two</b><br> <i>Rating • Date • Location</i> </div> Scene_Info </div> </a></div></lj-raw><span style="display:none;"><lj-cut></span>

Name One & Name Two
Rating • Date • Location

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Coding: Header #2

<lj-raw><div><a href="" style="max-width:500px;margin:0 auto;display:flex;align-items:center;justify-content:center;font-family:calibri,sans-serif;font-size:10px;line-height:1.5;text-decoration:none;color:#222;"> <!--IMG--> <img src="TRANSPARENT_IMG" style="margin:0 10px 0 0;"> <!--INFO--> <div style=""> <div style="text-transform:uppercase;letter-spacing:2px;font-size:9px;"> <b style="color:#999;">Name One</b> & <b style="color:#999;">Name Two</b><br> <i>Rating • Date • Location</i> </div> Scene_Info </div> </a></div></lj-raw><span style="display:none;"><lj-cut></span>

Name One & Name Two
Rating • Date • Location

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Coding: Header #3

<lj-raw><div><a href="" style="max-width:500px;margin:0 auto;display:flex;align-items:center;justify-content:center;font-family:calibri,sans-serif;font-size:11px;line-height:1.5;text-decoration:none;color:#222;"> <!--IMGS--> <div style="grid-area:one;background:#eee url(TOP_IMG)center;background-size:cover;"></div> <div style="grid-area:two;background:#eee url(BOTTOM_IMG)center;background-size:cover;"></div> <div style="grid-area:three;background:#eee url(TALL_IMG)center;background-size:cover;"></div> </div> <!--INFO--> <div style=""> <div style="text-transform:uppercase;letter-spacing:2px;font-size:10px;"> <b style="color:#999;">Name One</b> & <b style="color:#999;">Name Two</b><br> <i>Rating • Date • Location</i> </div> Scene_Info </div> </a></div></lj-raw><span style="display:none;"><lj-cut></span>

Name One & Name Two
Rating • Date • Location

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Coding: Header #4

<lj-raw><div><a href="" style="max-width:500px;margin:0 auto;display:flex;align-items:center;justify-content:center;font-family:calibri,sans-serif;font-size:11px;line-height:1.5;text-decoration:none;color:#222;"> <!--IMGS--> <img src="ICON1" style="height:70px;margin:0 5px 0 0;"> <img src="ICON2" style="height:70px;margin:0 5px 0 0;"> <!--CONTENT--> <div style="background:#eee;display:flex;"> <!--LEFT BORDERS--> <div style="background:#ddd url(IMAGE_BORDER)center;background-size:cover;border-left:3px solid #999;width:20px;"></div> <!--SCENE INFO--> <div style="padding:12px;"> <div style="text-transform:uppercase;letter-spacing:2px;font-size:10px;"> <b style="color:#999;">Name One</b> & <b style="color:#999;">Name Two</b><br> <i>Rating • Date • Location</i> </div> Scene_Info </div> </div> </a></div></lj-raw><span style="display:none;"><lj-cut></span>

Name One & Name Two
Rating • Date • Location

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Coding: Header #5

<lj-raw><div><a href="" style="max-width:350px;margin:10px auto 0 auto;display:block;font-family:calibri,sans-serif;font-size:11px;line-height:1.5;text-decoration:none;color:#222;box-sizing:border-box;padding:15px;background:#eee url(BORDER_IMG)center;background-size:cover;"> <!--ICONS--> <div style="margin:-5px 10px 5px -25px;float:left;position:relative;"> <img src="LG_ICON" style="height:55px;background:#999;padding:5px;border-radius:100%;box-sizing:border-box;display:block;margin:-15px 0;"> <img src="SM_ICON" style="height:45px;background:#999;padding:5px;border-radius:100%;box-sizing:border-box;display:block;margin:-15px 0;"> </div> <!--INFO--> <div style="background:#fff;padding:10px;box-shadow:0 0 0 15px rgba(0,0,0,0.2);"> <div style="text-transform:uppercase;letter-spacing:2px;font-size:10px;"> <b style="color:#999;">Name One</b> & <b style="color:#999;">Name Two</b><br> <i>Rating • Date • Location</i> </div> Scene_Info </div> </a></div></lj-raw><span style="display:none;"><lj-cut></span>

Name & Name & Name & Name
Rating • Date • Location

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Coding: Header #6

<lj-raw><div><a href="" style="max-width:500px;margin:0 auto;display:flex;align-items:center;justify-content:center;font-family:calibri,sans-serif;font-size:10px;line-height:1.5;text-decoration:none;color:#222;text-align:center;"> <!--LEFT BORDER--> <div style="height:40px;width:5px;background:#bbb;margin:0 5px 0 0;"></div> <!--LEFT IMG--> <div style="height:90px;width:20px;background:#999 url()center;background-size:cover;"></div> <!--CONTENT--> <div style="margin:0 25px;"> <!--ICONS--> <img src="ICON" style="height:40px;"> <img src="ICON" style="height:40px;"> <img src="ICON" style="height:40px;"> <img src="ICON" style="height:40px;"> <!--SCENE INFO--> <div style="text-transform:uppercase;letter-spacing:2px;font-size:9px;"> <b style="color:#999;">Name</b> & <b style="color:#999;">Name</b> & <b style="color:#999;">Name</b> & <b style="color:#999;">Name</b><br> <i>Rating • Date • Location</i> </div> Scene_Info </div> <!--RIGHT IMG--> <div style="height:90px;width:20px;background:#999 url()center;background-size:cover;"></div> <!--RIGHT BORDER--> <div style="height:40px;width:5px;background:#bbb;margin:0 0 0 5px;"></div> </a></div></lj-raw><span style="display:none;"><lj-cut></span>

Name & Name & Name & Name
Rating • Date • Location

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Coding: Header #7

<lj-raw><div><a href="" style="max-width:500px;margin:0 auto;display:flex;align-items:center;justify-content:center;font-family:calibri,sans-serif;font-size:11px;line-height:1.5;text-decoration:none;color:#222;"> <!--IMGS--> <div style="grid-area:one;background:#eee url(TOP_LEFT)center;background-size:cover;"></div> <div style="grid-area:two;background:#eee url(TOP_RIGHT)center;background-size:cover;"></div> <div style="grid-area:three;background:#eee url(BOTTOM_LEFT)center;background-size:cover;"></div> <div style="grid-area:four;background:#eee url(BOTTOM_RIGHT)center;background-size:cover;"></div> </div> <!--INFO--> <div style=""> <div style="text-transform:uppercase;letter-spacing:2px;font-size:10px;"> <b style="color:#999;">Name</b> & <b style="color:#999;">Name</b> & <b style="color:#999;">Name</b> & <b style="color:#999;">Name</b><br> <i>Rating • Date • Location</i> </div> Scene_Info </div> </a></div></lj-raw><span style="display:none;"><lj-cut></span>

Editing Guide

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

FONTS

calibri,sans-serif - All text
font-size:10px; - Thread summary
font-size:9px; - Thread info

DIMENSIONS

Change the max-width to a larger number if your content ends up looking a little squished.

COLORS

#fff

#1 image border; #5 content background

#eee

#4 content background

#bbb

#1 image borders; #6 small side borders

#999

Accent color

#222

Text

rgba(0,0,0,0.1)

#1 image box shadow

rgba(0,0,0,0.2)

#5 image border overlay; change to rgba(255,255,255,0.1) for a white overlay instead, or rgba(0,0,0,0) to disable

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!