Tessisamess

CODE BY TESSISAMESS

Information

Hey guys! I liked one of my last gallery codes so much that I decided to make a semi-matching one for my newest playlist, Fog!

Your header will vertically center as much content as you do or don't need, and you can put in as many images in as you like and they will automatically align and resize themselves. Enjoy! ♥

The Coding

<lj-raw><div id="container" style="width:800px;margin:0 auto;background:#aaa url(BGIMAGE)center top no-repeat;background-size:100% auto;border:1px solid #ccc;font-family:tahoma,arial,sans-serif;text-align:center;"> <div id="container-head" style="height:400px;border-bottom:1px solid #ccc;display:flex;justify-content:center;align-items:center;text-transform:uppercase;color:#fff;text-shadow:1px 1px 1px rgba(0,0,0,0.4);"> <div id="head-inner"> <div id="title" style="font-size:26px;letter-spacing:1px;">҈<br> TITLEHERE </div> <div id="subtitle" style="font-size:13px;letter-spacing:3px;"> SUBTITLEHERE </div> </div> </div> <div id="gallery" style="background:#fff;padding:30px;-webkit-column-count:3;-webkit-column-gap:0;-moz-column-count:3;-moz-column-gap:0;column-count:3;column-gap:0;"> <!---YOUR IMAGES; ADD AS MANY AS YOU LIKE--> <img src="URL" style="width:100%!important;height:auto!important;"> <img src="URL" style="width:100%!important;height:auto!important;"> <img src="URL" style="width:100%!important;height:auto!important;"> <img src="URL" style="width:100%!important;height:auto!important;"> <img src="URL" style="width:100%!important;height:auto!important;"> <img src="URL" style="width:100%!important;height:auto!important;"> </div> </div><center><a href="http://tessisamess.insanejournal.com/" style="display:block;margin-top:3px;font-family:helvetica,arial,sans-serif;color:#aaa;text-decoration:none;letter-spacing:4px;font-size:8px;">CODE BY TESSISAMESS</a></center></lj-raw>

Installation Guide

Paste into an entry and fill in the following!

BGIMAGE - Your background
&#1160; - Header symbol
TITLEHERE - Title line
SUBTITLEHERE - Subtitle line
URL(x6) - Each gallery image (copy/paste as needed)

Editing Guide

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

SIZING SPECS

width:800px; - Overall width
height:400px; - Header height (will auto-center to fit extra content that does not exceed 290px)
padding:30px; - Gallery padding
column-count:3 (x3) - Number of gallery columns

WANT IT TO SCROLL?

Add this to div id="gallery"! max-height:700px;overflow:auto;

COLORS

#fff - Header text color & gallery background
#ccc - Container borders

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!