Tessisamess

Information

Hey guys! This has very little too do with PSLs, but also it would make a GREAT primer for a character if you use your CDJ for character bios as well! Anyway, I'm just tossing these up as extras because I made them, then put one of the grids into this month's PSL Bundle with the wanted lines code, and then decided I wanted to go ahead and get the original moodboards up too, so enjoy! ♥

this is a quote & it's a pretty cool one, i bet you're super inspired now

Coding: Version #1

<lj-raw><div style="width:560px;margin:0 auto;font-family:century gothic,sans-serif;"> <div style="background:#eee url(IMG1)center;background-size:cover;grid-area:one;box-shadow:1px 1px 3px 0 rgba(0,0,0,0.3);"></div> <div style="background:#eee url(IMG2)center;background-size:cover;grid-area:two;box-shadow:1px 1px 3px 0 rgba(0,0,0,0.3);"></div> <div style="background:#eee url(IMG3)center;background-size:cover;grid-area:three;box-shadow:1px 1px 3px 0 rgba(0,0,0,0.3);"></div> <div style="background:#eee url(IMG4)center;background-size:cover;grid-area:four;box-shadow:1px 1px 3px 0 rgba(0,0,0,0.3);"></div> <div style="background:#eee url(IMG5)center;background-size:cover;grid-area:five;box-shadow:1px 1px 3px 0 rgba(0,0,0,0.3);"></div> </div> <q style="display:block;margin:40px 0 30px 0;text-align:center;font-size:21px;text-transform:uppercase;letter-spacing:2px;color:#555;"> QUOTE </q> <div style="display:flex;justify-content:space-between;height:30px;"> <div style="width:19%;background:#C18E8F;"></div> <div style="width:19%;background:#ACD6B2;"></div> <div style="width:19%;background:#2AA8B3;"></div> <div style="width:19%;background:#A685B0;"></div> <div style="width:19%;background:#EBD3AF;"></div> </div> <a href="http://tessisamess.insanejournal.com/" style="display:block;text-align:right;margin:5px 0 0 0;font-size:10px;letter-spacing:1px;text-transform:lowercase;text-decoration:none;color:#bbb;">Code</a> </div></lj-raw>

this is a quote & it's a pretty cool one, i bet you're super inspired now

Coding: Version #2

<lj-raw><div style="width:560px;margin:0 auto;font-family:century gothic,sans-serif;"> <div style="background:#eee url(IMG1)center;background-size:cover;grid-area:one;box-shadow:1px 1px 3px 0 rgba(0,0,0,0.3);"></div> <div style="background:#eee url(IMG2)center;background-size:cover;grid-area:two;box-shadow:1px 1px 3px 0 rgba(0,0,0,0.3);"></div> <div style="background:#eee url(IMG3)center;background-size:cover;grid-area:three;box-shadow:1px 1px 3px 0 rgba(0,0,0,0.3);"></div> <div style="background:#eee url(IMG4)center;background-size:cover;grid-area:four;box-shadow:1px 1px 3px 0 rgba(0,0,0,0.3);"></div> <div style="background:#eee url(IMG5)center;background-size:cover;grid-area:five;box-shadow:1px 1px 3px 0 rgba(0,0,0,0.3);"></div> </div> <q style="display:block;margin:40px 0 30px 0;text-align:center;font-size:21px;text-transform:uppercase;letter-spacing:2px;color:#555;"> QUOTE </q> <div style="display:flex;justify-content:space-between;height:30px;"> <div style="width:19%;background:#C18E8F;"></div> <div style="width:19%;background:#ACD6B2;"></div> <div style="width:19%;background:#2AA8B3;"></div> <div style="width:19%;background:#A685B0;"></div> <div style="width:19%;background:#EBD3AF;"></div> </div> <a href="http://tessisamess.insanejournal.com/" style="display:block;text-align:right;margin:5px 0 0 0;font-size:10px;letter-spacing:1px;text-transform:lowercase;text-decoration:none;color:#bbb;">Code</a> </div></lj-raw>

Installation Guide

Paste into an entry and fill in the following!

IMG1 through IMG5 - Your images
QUOTE - Your quote text

Editing Guide

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

DIMENSIONS
This code is EXTREMELY easy to resize. All you have to do is resize the overall container width and then the height of the image grid. The possibilities are pretty broad; make this as big or small, tall or short, wide or thin as you want!

560px - Version #1 width
500px - Version #1 height

560px - Version #2 width
300px - Version #2 height

MISC. REMOVALS

box-shadow:1px 1px 3px 0 rgba(0,0,0,0.3); - box shadow around each image area [appears five times]
background:linear-gradient(to right,#F2B2B3,#F2B2B3 10%,transparent 10%,transparent 90%,#F2B2B3 90%);padding:20px; - background frame and padding to outset that background [appears one time]

FONTS

century gothic,sans-serif - Overall font

COLORS

#F2B2B3

Background frame color

COLORS

#C18E8F

Bottom accent color #1

#ACD6B2

Bottom accent color #2

#2AA8B3

Bottom accent color #3

#A685B0

Bottom accent color #4

#EBD3AF

Bottom accent color #5

#555

Text color

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!