Tessisamess

Information

Today, as helped decided by my $5+ patrons over on Patreon, we have three mood boards; two larger ones with varying setups, and a mini! If you like these I'll be sure to make more in varying styles, so be sure to comment if you want more mood boards! And if you'd like to get in on future polls for what types of free-use content I'm posting every month, head on over to my Patreon.

These mood boards should be somewhat easy to edit with a height/width guide (below) and basic plugging in of images is as easy as 1-2-3. Enjoy! ♥

And don't forget—this is the last day of my 20% off sale!

Cant get enough mood boards? marlovian has two great ones too!

Square Coding

<div style="width:500px;height:600px;margin:10px auto;background:#fff;padding:0.5%;border:1px solid #ddd;display:flex;flex-wrap:wrap;"> <!---CHANGE PERCENTAGES TO OBTAIN DIFFERENT WIDTHS AND HEIGHTS--> <div style="background:#ddd url(URL1)center;background-size:cover;width:40%;height:53%;margin:0.5%;"></div> <div style="background:#ddd url(URL2)center;background-size:cover;width:58%;height:53%;margin:0.5%;"></div> <div style="background:#ddd url(URL3)center;background-size:cover;width:40%;height:45%;margin:0.5%;"></div> <div style="background:#ddd url(URL4)center;background-size:cover;width:58%;height:45%;margin:0.5%;"></div> <!---CHANGE PERCENTAGES TO OBTAIN DIFFERENT POSITIONING OF ICON--> <img src="ICONHERE" style="background:#fff;padding:1%;width:100px;height:100px;position:relative!important;left:30%;bottom:55%;"> </div><center><a href="http://tessisamess.insanejournal.com/" style="font-family:helvetica,arial,sans-serif;color:#aaa;text-decoration:none;letter-spacing:2px;font-size:9px;">© TESSISAMESS</a></center>

Circle Coding

<div style="width:500px;height:600px;margin:10px auto;background:#fff;padding:0.5%;border:1px solid #ddd;display:flex;flex-wrap:wrap;"> <!---CHANGE PERCENTAGES TO OBTAIN DIFFERENT WIDTHS AND HEIGHTS--> <div style="background:#ddd url(URL1)center;background-size:cover;width:58%;height:53%;margin:0.5%;"></div> <div style="background:#ddd url(URL2)center;background-size:cover;width:40%;height:53%;margin:0.5%;"></div> <div style="background:#ddd url(URL3)center;background-size:cover;width:40%;height:45%;margin:0.5%;"></div> <div style="background:#ddd url(URL4)center;background-size:cover;width:58%;height:45%;margin:0.5%;"></div> <!---CHANGE PERCENTAGES TO OBTAIN DIFFERENT POSITIONING OF ICON--> <img src="ICONHERE" style="background:#fff;padding:1%;width:100px;height:100px;border-radius:130px;position:relative!important;left:38.8%;bottom:56%;"> </div><center><a href="http://tessisamess.insanejournal.com/" style="font-family:helvetica,arial,sans-serif;color:#aaa;text-decoration:none;letter-spacing:2px;font-size:9px;">© TESSISAMESS</a></center>

Diamond Coding

<div style="width:400px;height:400px;margin:10px auto;background:#fff;padding:0.5%;border:1px solid #ddd;display:flex;flex-wrap:wrap;"> <!---CHANGE PERCENTAGES TO OBTAIN DIFFERENT WIDTHS AND HEIGHTS--> <div style="background:#ddd url(URL1)center;background-size:cover;width:49%;height:56%;margin:0.5%;"></div> <div style="background:#ddd url(URL2)center;background-size:cover;width:49%;height:56%;margin:0.5%;"></div> <div style="background:#ddd url(URL3)center;background-size:cover;width:49%;height:42%;margin:0.5%;"></div> <div style="background:#ddd url(URL4)center;background-size:cover;width:49%;height:42%;margin:0.5%;"></div> <!---CHANGE PERCENTAGES TO OBTAIN DIFFERENT POSITIONING OF ICON--> <div style="position:relative!important;left:36.2%;bottom:55%;"> <div style="transform-origin:50% 50%;overflow:hidden;width:110px;height:110px;transform:rotate(45deg) translateY(-25px) translateX(-25px);"><div style="transform-origin:50% 50%;overflow:hidden;width:100px;height:100px;width:180px;height:180px;transform:rotate(-45deg);background:#fff;background-size:110px;"></div></div> <div style="transform-origin:50% 50%;overflow:hidden;width:100px;height:100px;transform:rotate(45deg) translateY(-25px) translateX(-25px);margin:-105px 0 0 5px;"><div style="transform-origin:50% 50%;overflow:hidden;width:100px;height:100px;width:180px;height:180px;transform:rotate(-45deg);background:#ddd url(ICONHERE)center top;background-size:110px;"></div></div> </div> </div><center><a href="http://tessisamess.insanejournal.com/" style="font-family:helvetica,arial,sans-serif;color:#aaa;text-decoration:none;letter-spacing:2px;font-size:9px;">© TESSISAMESS</a></center>

Installation Guide

Paste into an entry and fill in the following!

URL1 through URL4 - Background images
ICONHERE - Icon image

Editing Guide

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

COLORS

#fff - Background color
#ddd - Border color

OTHER VALUES
Inner widths/heights are percentage-based, so if all you want to do is scale the whole code up or down it's as simple as changing the outer width and height!

600px - Height on Square and Circle
500px - Width on Square and Circle
400px - Height and width on Diamond

0.5% and 1% - Padding/space between images

30% and 50% - Positioning of icon on Square
38.8% and 56% - Positioning of icon on Circle
36.2% and 55% - Positioning of icon on Diamond

40% and 53% - Width/height - top left - Square
58% and 53% - Width/height - top right - Square
40% and 45% - Width/height - bottom left - Square
58% and 45% - Width/height - bottom right - Square

58% and 53% - Width/height - top left - Circle
40% and 53% - Width/height - top right - Circle
40% and 45% - Width/height - bottom left - Circle
58% and 45% - Width/height - bottom right - Circle

49% and 56% - Width/height - top row - Diamond
49% and 42% - Width/height - bottom row - Diamond

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!