Tessisamess

S	M	T	W	T	F	S
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

Ola

Lily

WHO Thing • WHERE Thing • WHEN Thing
Fusce dignissim, ipsum eu commodo porttitor, ipsum enim congue elit, et efficitur massa tellus a enim. WARNINGS Thing

Cut Text Goes Here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dignissim iaculis sodales. Pellentesque malesuada arcu id nulla condimentum ullamcorper. Vestibulum rutrum elementum condimentum. Donec pulvinar tristique leo, quis suscipit ante pulvinar et. Fusce dignissim, ipsum eu commodo porttitor, ipsum enim congue elit, et efficitur massa tellus a enim. Etiam finibus, sem ac maximus pellentesque, elit dolor vulputate nibh, nec hendrerit libero mauris at erat. In et ex nec leo ornare dapibus. Suspendisse potenti. Aenean eget odio dolor. Quisque in viverra mi. Nullam faucibus, nisl ac tincidunt dictum, mi sem facilisis neque, id tristique massa felis sit amet metus. Quisque pulvinar et justo vitae consequat. Vivamus faucibus condimentum ligula a accumsan. Aliquam posuere est vel sapien viverra, id auctor ligula vehicula. Nulla facilisi.

Phasellus at facilisis urna. Nunc id diam lacinia, commodo tellus eu, dapibus turpis. Donec luctus id metus vel ornare. Suspendisse sit amet enim purus. Integer sed nisi arcu. Cras vitae lorem suscipit, dapibus ligula bibendum, tincidunt enim. In et odio nisl. Sed arcu mauris, fermentum sit amet orci at, interdum mattis nisi. Aenean imperdiet, sapien eget lacinia ultrices, mi odio porttitor urna, vitae vestibulum massa justo vitae enim. In odio nisi, tempor sit amet diam eget, hendrerit tincidunt mi. Etiam quam tortor, lacinia at varius vel, sagittis vel felis. Nullam rutrum lacus nec ligula tristique malesuada. Nam iaculis, dui nec rutrum faucibus, augue enim consectetur eros, vel maximus lectus mauris in felis. Nulla ullamcorper faucibus interdum. Nam id lacinia tortor, pharetra egestas libero. Duis tincidunt quam et massa imperdiet vulputate.

Morbi posuere mauris et nisl sagittis eleifend. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur auctor luctus libero non tempor. Integer lacus sapien, cursus sed elit id, mollis cursus purus. Duis id risus ultricies, iaculis elit malesuada, cursus eros. Etiam ut fringilla massa. Fusce ac lacus dignissim, consequat tellus ut, interdum elit. Praesent nulla elit, pharetra eu elit eget, consequat dictum lorem.

CODING

Information

Hey guys! We've got some scene headers with fake cut and log/starter formatting today. This is pretty easy to resize and comes with a two image setup and a three image setup if you'd like a separating setting-based image or a third character in the header. A huge thank you to

ohdeers for the request and design prompt! Enjoy! 💖

Coding: Two images

<lj-raw><div style="max-width:800px;margin:0 auto;border:1px solid rgba(0,0,0,0.1);font-family:Open Sans,trebuchet ms,arial,sans-serif;font-size:12px;line-height:1;background:#fff;color:#333;">

<div style="height:200px;display:flex;justify-content:space-between;font-size:20px;text-transform:uppercase;font-weight:bold;letter-spacing:3px;color:#fff;text-shadow:1px 1px 2px rgba(0,0,0,0.4);">

<div style="background:#ddd url()center;background-size:cover;width:calc((100% / 2) - 1px);height:100%;display:flex;justify-content:center;align-items:flex-end;padding:0 0 10px 0;box-sizing:border-box;">
			Nameone
		</div>

</div>

<div style="padding:20px;text-align:center;">

<b style="font-size:10px;color:#1C789E;">WHO</b> Thing •
		<b style="font-size:10px;color:#1C789E;">WHERE</b> Thing •
		<b style="font-size:10px;color:#1C789E;">WHEN</b> Thing<br>

<b style="font-size:10px;color:#1C789E;">WARNINGS</b> Thing

</div>

<a href="ENTRY_URL#log" style="color:#fff!important;background:#ACCCD9;padding:20px;border-top:1px solid rgba(0,0,0,0.1);border-bottom:1px solid rgba(0,0,0,0.1);text-align:center;text-decoration:none;display:block;font-size:10px;text-transform:uppercase;font-weight:bold;letter-spacing:3px;text-shadow:1px 1px 1px rgba(0,0,0,0.2);">
		CUT_TEXT
	</a>

<span style="display:none;"><lj-cut></span>

<a name="log"></a><div style="background:#fff;color:#222;padding:30px 30px 10px 30px;text-align:justify;line-height:1.8;font-size:14px;">

TAG<br><br>

<hr style="margin:0 30px;border:none;height:1px;background:rgba(0,0,0,0.2);"><br>

TAG<br><br>

</div>

</div><a href="http://tessisamess.insanejournal.com/127745.html" style="display:block;max-width:800px;margin:5px auto 0 auto;font-size:8px;font-weight:bold;letter-spacing:2px;color:#bbb;text-decoration:none;text-align:right;">CODING</a></lj-raw></lj-cut>

Coding: Three images

<lj-raw><div style="max-width:800px;margin:0 auto;border:1px solid rgba(0,0,0,0.1);font-family:Open Sans,trebuchet ms,arial,sans-serif;font-size:12px;line-height:1;background:#fff;color:#333;">

<div style="background:#ddd url()center;background-size:cover;width:calc((100% / 3) - 1px);height:100%;display:flex;justify-content:center;align-items:flex-end;padding:0 0 10px 0;box-sizing:border-box;">
			Nameone
		</div>

</div>

<div style="padding:20px;text-align:center;">

<b style="font-size:10px;color:#1C789E;">WHO</b> Thing •
		<b style="font-size:10px;color:#1C789E;">WHERE</b> Thing •
		<b style="font-size:10px;color:#1C789E;">WHEN</b> Thing<br>

<b style="font-size:10px;color:#1C789E;">WARNINGS</b> Thing

</div>

<span style="display:none;"><lj-cut></span>

<a name="log"></a><div style="background:#fff;color:#222;padding:30px 30px 10px 30px;text-align:justify;line-height:1.8;font-size:14px;">

TAG<br><br>

<hr style="margin:0 30px;border:none;height:1px;background:rgba(0,0,0,0.2);"><br>

TAG<br><br>

</div>

Editing Guide

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

FONTS

Open Sans,trebuchet ms,arial,sans-serif - Overall font

DIMENSIONS

800px - Container width
200px - Image header height

ADDING MORE CHARACTERS

Copy and paste a character block and then change the number in each width to reflect this. For instance, in the 3 image version, the width is (100% / 3) and if you wanted four instead, this would change to (100% / 4)

COLORS

#fff Cut text; image names; container background and log background (this shows up as a background twice, so if you want your header to have a different background color, change the first background.)

#ACCCD9 Cut text background; information headings

#333 Header text

#222 Log text

rgba(0,0,0,0.1) All borders

#000 weee

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!

Tags: codes, codes: thread header

Profile

Title Here

Navigation

July 2024

Links List

Resources

Tags

Layout By

Thread Header: Streamline

Information

Coding: Two images

Coding: Three images

Editing Guide

Terms of Use

Comments