CR Chart: Imagery

[tesscodes]

TITLE HERE

Nameone Nametwo Namethree Namefour

CODING

Information

Hey guys! Do you ever wish you could describe your characters' friendships with images instead of text? Now you can! This hidden CR chart supports multiple galleries, both as fixed moodboard grids, and as scrolling gallery coulmns.

It could also be used to showcase aesthetics for other things related to a character, like dividing up aesthetics for their home, clothing, work, etc. Enjoy! 💖

Coding: Fixed Grid

<lj-raw><div style="margin:0 auto;width:1000px;height:700px;background:#999 url(BACKGROUND_IMG)center top;background-size:cover;border:10px solid #fff;display:flex;justify-content:space-between;align-items:center;box-shadow:0 0 0 1px rgba(0,0,0,0.1),3px 3px 4px 0 rgba(0,0,0,0.2);padding:50px;box-sizing:border-box;font-family:times,serif;font-size:8px;text-transform:uppercase;letter-spacing:2px;text-align:center;line-height:1;"> <!--NAVIGATION--> <div style="width:calc(100% - 55% - 50px);display:flex;flex-direction:column;align-items:center;line-height:2.5;"> <!--IMAGE--> <div style="width:200px;height:200px;margin:0 0 15px 0;background:#ddd url(ROUND_IMG)center;background-size:cover;border:5px solid #fff;border-radius:100%;box-shadow:0 0 0 1px rgba(0,0,0,0.1),3px 3px 4px 0 rgba(0,0,0,0.2);box-sizing:border-box;"></div> <!--HEADER--> <div style="font-size:15px;letter-spacing:6px;color:#fafafa;">TITLE HERE</div> <a href="#1" style="background:#000;color:#f9f9f9;text-decoration:none;width:170px;margin:4px 0 0 0;">Nameone</a> <a href="#2" style="background:#000;color:#f9f9f9;text-decoration:none;width:170px;margin:4px 0 0 0;">Nametwo</a> <a href="#3" style="background:#000;color:#f9f9f9;text-decoration:none;width:170px;margin:4px 0 0 0;">Namethree</a> <a href="#4" style="background:#000;color:#f9f9f9;text-decoration:none;width:170px;margin:4px 0 0 0;">Namefour</a> </div> <!--ALL GALLERIES--> <div style="background:#fff;width:55%;height:100%;overflow:hidden;box-shadow:inset -1px -1px 10px 0 rgba(0,0,0,0.7);"> <!--GALLERY--> <a name="1"></a> <div style="grid-area:one;background:#ddd url(IMG_URL)center;background-size:cover;"></div> <div style="grid-area:two;background:#ddd url(IMG_URL)center;background-size:cover;"></div> <div style="grid-area:three;background:#ddd url(IMG_URL)center;background-size:cover;"></div> <div style="grid-area:four;background:#ddd url(IMG_URL)center;background-size:cover;"></div> <div style="grid-area:five;background:#ddd url(IMG_URL)center;background-size:cover;"></div> <div style="grid-area:six;background:#ddd url(IMG_URL)center;background-size:cover;"></div> <div style="grid-area:seven;background:#ddd url(IMG_URL)center;background-size:cover;"></div> <div style="grid-area:eight;background:#ddd url(IMG_URL)center;background-size:cover;"></div> <div style="grid-area:nine;background:#ddd url(IMG_URL)center;background-size:cover;"></div> <div style="grid-area:ten;background:#ddd url(IMG_URL)center;background-size:cover;"></div> </div> <!--GALLERY--> <a name="2"></a> <div style="grid-area:one;background:#ddd url(IMG_URL)center;background-size:cover;"></div> <div style="grid-area:two;background:#ddd url(IMG_URL)center;background-size:cover;"></div> <div style="grid-area:three;background:#ddd url(IMG_URL)center;background-size:cover;"></div> <div style="grid-area:four;background:#ddd url(IMG_URL)center;background-size:cover;"></div> <div style="grid-area:five;background:#ddd url(IMG_URL)center;background-size:cover;"></div> <div style="grid-area:six;background:#ddd url(IMG_URL)center;background-size:cover;"></div> <div style="grid-area:seven;background:#ddd url(IMG_URL)center;background-size:cover;"></div> <div style="grid-area:eight;background:#ddd url(IMG_URL)center;background-size:cover;"></div> <div style="grid-area:nine;background:#ddd url(IMG_URL)center;background-size:cover;"></div> <div style="grid-area:ten;background:#ddd url(IMG_URL)center;background-size:cover;"></div> </div> <!--GALLERY--> <a name="3"></a> <div style="grid-area:one;background:#ddd url(IMG_URL)center;background-size:cover;"></div> <div style="grid-area:two;background:#ddd url(IMG_URL)center;background-size:cover;"></div> <div style="grid-area:three;background:#ddd url(IMG_URL)center;background-size:cover;"></div> <div style="grid-area:four;background:#ddd url(IMG_URL)center;background-size:cover;"></div> <div style="grid-area:five;background:#ddd url(IMG_URL)center;background-size:cover;"></div> <div style="grid-area:six;background:#ddd url(IMG_URL)center;background-size:cover;"></div> <div style="grid-area:seven;background:#ddd url(IMG_URL)center;background-size:cover;"></div> <div style="grid-area:eight;background:#ddd url(IMG_URL)center;background-size:cover;"></div> <div style="grid-area:nine;background:#ddd url(IMG_URL)center;background-size:cover;"></div> <div style="grid-area:ten;background:#ddd url(IMG_URL)center;background-size:cover;"></div> </div> <!--GALLERY--> <a name="4"></a> <div style="grid-area:one;background:#ddd url(IMG_URL)center;background-size:cover;"></div> <div style="grid-area:two;background:#ddd url(IMG_URL)center;background-size:cover;"></div> <div style="grid-area:three;background:#ddd url(IMG_URL)center;background-size:cover;"></div> <div style="grid-area:four;background:#ddd url(IMG_URL)center;background-size:cover;"></div> <div style="grid-area:five;background:#ddd url(IMG_URL)center;background-size:cover;"></div> <div style="grid-area:six;background:#ddd url(IMG_URL)center;background-size:cover;"></div> <div style="grid-area:seven;background:#ddd url(IMG_URL)center;background-size:cover;"></div> <div style="grid-area:eight;background:#ddd url(IMG_URL)center;background-size:cover;"></div> <div style="grid-area:nine;background:#ddd url(IMG_URL)center;background-size:cover;"></div> <div style="grid-area:ten;background:#ddd url(IMG_URL)center;background-size:cover;"></div> </div> </div> </div><div style="margin:5px auto 0 auto;width:1000px;text-align:right;letter-spacing:3px;font-size:8px;font-family:times,serif;"><a href="http://tessisamess.insanejournal.com/133437.html" style="color:#999;text-decoration:none;">CODING</a></div></lj-raw>

Coding: Scrolling Columns

<lj-raw><div style="margin:0 auto;width:1000px;height:700px;background:#999 url(BACKGROUND_IMG)center top;background-size:cover;border:10px solid #fff;display:flex;justify-content:space-between;align-items:center;box-shadow:0 0 0 1px rgba(0,0,0,0.1),3px 3px 4px 0 rgba(0,0,0,0.2);padding:50px;box-sizing:border-box;font-family:times,serif;font-size:8px;text-transform:uppercase;letter-spacing:2px;text-align:center;line-height:1;"> <!--NAVIGATION--> <div style="width:calc(100% - 55% - 50px);display:flex;flex-direction:column;align-items:center;line-height:2.5;"> <!--IMAGE--> <div style="width:200px;height:200px;margin:0 0 15px 0;background:#ddd url(ROUND_IMG)center;background-size:cover;border:5px solid #fff;border-radius:100%;box-shadow:0 0 0 1px rgba(0,0,0,0.1),3px 3px 4px 0 rgba(0,0,0,0.2);box-sizing:border-box;"></div> <!--HEADER--> <div style="font-size:15px;letter-spacing:6px;color:#fafafa;">TITLE HERE</div> <a href="#1" style="background:#000;color:#f9f9f9;text-decoration:none;width:170px;margin:4px 0 0 0;">Nameone</a> <a href="#2" style="background:#000;color:#f9f9f9;text-decoration:none;width:170px;margin:4px 0 0 0;">Nametwo</a> <a href="#3" style="background:#000;color:#f9f9f9;text-decoration:none;width:170px;margin:4px 0 0 0;">Namethree</a> <a href="#4" style="background:#000;color:#f9f9f9;text-decoration:none;width:170px;margin:4px 0 0 0;">Namefour</a> </div> <!--ALL GALLERIES--> <div style="background:#fff;width:55%;height:100%;overflow:hidden;box-shadow:inset -1px -1px 10px 0 rgba(0,0,0,0.7);"> <!--GALLERY--> <a name="1"></a> <div style="height:100%;overflow:auto;padding:50px 50px calc(50px - 10px) 50px;box-sizing:border-box;"><div style="-webkit-column-count:3;-moz-column-count:3;column-count:3;-webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px;"> <img src="URL" style="width:100%!important;height:auto!important;margin:0 0 10px 0;"> <img src="URL" style="width:100%!important;height:auto!important;margin:0 0 10px 0;"> <img src="URL" style="width:100%!important;height:auto!important;margin:0 0 10px 0;"> <img src="URL" style="width:100%!important;height:auto!important;margin:0 0 10px 0;"> <img src="URL" style="width:100%!important;height:auto!important;margin:0 0 10px 0;"> <img src="URL" style="width:100%!important;height:auto!important;margin:0 0 10px 0;"> </div></div> <!--GALLERY--> <a name="2"></a> <div style="height:100%;overflow:auto;padding:50px 50px calc(50px - 10px) 50px;box-sizing:border-box;"><div style="-webkit-column-count:3;-moz-column-count:3;column-count:3;-webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px;"> <img src="URL" style="width:100%!important;height:auto!important;margin:0 0 10px 0;"> <img src="URL" style="width:100%!important;height:auto!important;margin:0 0 10px 0;"> <img src="URL" style="width:100%!important;height:auto!important;margin:0 0 10px 0;"> <img src="URL" style="width:100%!important;height:auto!important;margin:0 0 10px 0;"> <img src="URL" style="width:100%!important;height:auto!important;margin:0 0 10px 0;"> <img src="URL" style="width:100%!important;height:auto!important;margin:0 0 10px 0;"> </div></div> <!--GALLERY--> <a name="3"></a> <div style="height:100%;overflow:auto;padding:50px 50px calc(50px - 10px) 50px;box-sizing:border-box;"><div style="-webkit-column-count:3;-moz-column-count:3;column-count:3;-webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px;"> <img src="URL" style="width:100%!important;height:auto!important;margin:0 0 10px 0;"> <img src="URL" style="width:100%!important;height:auto!important;margin:0 0 10px 0;"> <img src="URL" style="width:100%!important;height:auto!important;margin:0 0 10px 0;"> <img src="URL" style="width:100%!important;height:auto!important;margin:0 0 10px 0;"> <img src="URL" style="width:100%!important;height:auto!important;margin:0 0 10px 0;"> <img src="URL" style="width:100%!important;height:auto!important;margin:0 0 10px 0;"> </div></div> <!--GALLERY--> <a name="4"></a> <div style="height:100%;overflow:auto;padding:50px 50px calc(50px - 10px) 50px;box-sizing:border-box;"><div style="-webkit-column-count:3;-moz-column-count:3;column-count:3;-webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px;"> <img src="URL" style="width:100%!important;height:auto!important;margin:0 0 10px 0;"> <img src="URL" style="width:100%!important;height:auto!important;margin:0 0 10px 0;"> <img src="URL" style="width:100%!important;height:auto!important;margin:0 0 10px 0;"> <img src="URL" style="width:100%!important;height:auto!important;margin:0 0 10px 0;"> <img src="URL" style="width:100%!important;height:auto!important;margin:0 0 10px 0;"> <img src="URL" style="width:100%!important;height:auto!important;margin:0 0 10px 0;"> </div></div> </div> </div><div style="margin:5px auto 0 auto;width:1000px;text-align:right;letter-spacing:3px;font-size:8px;font-family:times,serif;"><a href="http://tessisamess.insanejournal.com/133437.html" style="color:#999;text-decoration:none;">CODING</a></div></lj-raw>

Installation Guide

Paste into an entry and fill in the following!

BACKGROUND_IMG - Container background
ROUND_IMG - Sidebar image

Editing Guide

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

DIMENSIONS

1000px - Container width
700px - Container height
200px - Round image
170px - Link width
50% - Gallery width
50px - Content padding

FONTS

times,serif - All text

COLORS

#fff

Borders, content background

#fafafa

Title text

#f9f9f9

link text

#000

Link backgrounds

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!