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

CODE BY

Information

Hey guys! Here's something I've never made before: A character closet code! I love making transparent outfit images for my characters, and I figured those of you who like stuff like that, but don't have the tools or desire to make a transparent image board for outfits would enjoy your own cute option for displaying clothing. With this code, you're utilizing column galleries divided up by clothing type, navigated by an icon sidebar. I've included femme and masc versions so that you don't have to mess with the sidebar icons if you don't want to.

For this demo I've only done two pages, because... there are a lot of pages to do without a character in mind LOL. The first page, tops, shows the quickest way to utilize this: Find pictures you like and drop them in! The other page, dresses, only uses transparent images (or clothing with white backgrounds!) with no model present for a cleaner look. These are fairly easy to find without needing to edit them! The only thing I found myself wanting to do to the transparent versions was crop the dead space from around some of them so that they took up the appropriate amount of space. (I wanted this code to require as little actual image editing as possible!!)

Enjoy! 💖

The Coding: Femme

<lj-raw><article style="margin:0 auto;width:550px;height:600px;overflow:hidden;text-align:center;">

<a name="tops"></a>
	<section style="display:flex;">

<div style="width:70px;border:1px solid #ddd;border-bottom:0;border-right:0;display:flex;flex-direction:column;position:relative;">

</div>

<div style="width:calc(100% - 70px);height:600px;overflow:auto;background:#fff;border:1px solid #ddd;padding:20px;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;">

</div></div>

</section>

<a name="bottoms"></a>
	<section style="display:flex;">

<div style="width:70px;border:1px solid #ddd;border-bottom:0;border-right:0;display:flex;flex-direction:column;position:relative;">

</div>

</div></div>

</section>

<a name="dresses"></a>
	<section style="display:flex;">

<div style="width:70px;border:1px solid #ddd;border-bottom:0;border-right:0;display:flex;flex-direction:column;position:relative;">

</div>

</div></div>

</section>

<a name="shoes"></a>
	<section style="display:flex;">

<div style="width:70px;border:1px solid #ddd;border-bottom:0;border-right:0;display:flex;flex-direction:column;position:relative;">

</div>

</div></div>

</section>

<a name="accessories"></a>
	<section style="display:flex;">

<div style="width:70px;border:1px solid #ddd;border-bottom:0;border-right:0;display:flex;flex-direction:column;position:relative;">

</div>

</div></div>

</section>

<a name="etc"></a>
	<section style="display:flex;">

<div style="width:70px;border:1px solid #ddd;border-bottom:0;border-right:0;display:flex;flex-direction:column;position:relative;">

</div>

</div></div>

</section>

</article><center style="margin:5px 0 0 0;"><a href="https://tessisamess.insanejournal.com/144766.html" style="font-size:8px;letter-spacing:3px;color:#999;text-decoration:none;">CODE BY</a></center></lj-raw>

The Coding: Masc

<lj-raw><article style="margin:0 auto;width:550px;height:600px;overflow:hidden;text-align:center;">

<a name="tops"></a>
	<section style="display:flex;">

<div style="width:70px;border:1px solid #ddd;border-bottom:0;border-right:0;display:flex;flex-direction:column;position:relative;">

</div>

</div></div>

</section>

<a name="bottoms"></a>
	<section style="display:flex;">

<div style="width:70px;border:1px solid #ddd;border-bottom:0;border-right:0;display:flex;flex-direction:column;position:relative;">

</div>

</div></div>

</section>

<a name="suits"></a>
	<section style="display:flex;">

<div style="width:70px;border:1px solid #ddd;border-bottom:0;border-right:0;display:flex;flex-direction:column;position:relative;">

</div>

</div></div>

</section>

<a name="shoes"></a>
	<section style="display:flex;">

<div style="width:70px;border:1px solid #ddd;border-bottom:0;border-right:0;display:flex;flex-direction:column;position:relative;">

</div>

</div></div>

</section>

<a name="accessories"></a>
	<section style="display:flex;">

<div style="width:70px;border:1px solid #ddd;border-bottom:0;border-right:0;display:flex;flex-direction:column;position:relative;">

</div>

</div></div>

</section>

<a name="etc"></a>
	<section style="display:flex;">

<div style="width:70px;border:1px solid #ddd;border-bottom:0;border-right:0;display:flex;flex-direction:column;position:relative;">

</div>

</div></div>

</section>

Editing Guide

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

DIMENSIONS

550px - Container width
600px - Container height
70px - Links width
height:100%; - Links height (this makes them evenly fill the entire container height no matter how many links you have.) Make sure you replace all on height:100%; and not just 100% or it'll mess up the gallery width.

SECTIONS

Remove any section you want! It won't need further editing after also deleting the link to that section from each page's link sidebar. Sections are anchored by actual names rather than numbers, so if you're changing what a section is you can replace all on the name (ex. if changing "tops" to "shirts" you'd just run replace all on the word "tops" and all function will still work.)

IMAGES

All clothing icons from Outline Iocns by IconsMind! Images are source tags and not background images, so you'll be able to easily replace them by right-clicking images to grab the URL to replace all on.

Images are not resized in the code, so icon-size is best! Anything under 70px for the width will work just fine without resizing or adding width specs to the image source.Height doesn't really matter as much, so don't worry if they aren't square.

COLORS

#fff Container background

#ddd 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!

Tags: codes, codes: gallery, codes: other

Profile

Title Here

Navigation

July 2024

Links List

Resources

Tags

Layout By

Look Book

Information

The Coding: Femme

The Coding: Masc

Editing Guide

Terms of Use

Comments