Tessisamess

Information

Hey guys, it's February, so let's have fun this month with codes that are all about ships & getting steamy! To kick things off, here's something I've never made before! An interest level separated kink list with two (slightly) different formats! The whole thing is scalable, so just change the outer width if you'd prefer it larger or smaller. This could easily be used for other types of lists, like OOC media lists, permissions, whatever you can think of, really!

As usual, since this is a code type I've never done before and I am totally unsure of the interest level for more, just let me know in the comments if you'd like fancier kink lists, different setups, and all that good stuff, and I'll be happy to make and post more this year! Enjoy! ♥

Coding: Boxed

<lj-raw><div style="max-width:950px;margin:0 auto;display:flex;justify-content:space-between;flex-wrap:wrap;font-family:century gothic,helvetica,arial,sans-serif;font-size:12px;line-height:1.6;color:#222;"> <div style="width:20%;background:#fff;border:1px solid #eee;padding:2%;"> <div style="text-align:center;margin:0 0 10px 0;padding:0 0 5px 0;border-bottom:4px solid #4938A4;font-size:18px;letter-spacing:1px;"> <img src="https://i.imgur.com/Mpd3jn1.png" style="max-width:50px;"><br> FAVORITES </div> Thing<br> </div> <div style="width:20%;background:#fff;border:1px solid #eee;padding:2%;"> <div style="text-align:center;margin:0 0 10px 0;padding:0 0 5px 0;border-bottom:4px solid #38A477;font-size:18px;letter-spacing:1px;"> <img src="https://i.imgur.com/sgvhkol.png" style="max-width:50px;"><br> ABSOLUTELY </div> Thing<br> </div> <div style="width:20%;background:#fff;border:1px solid #eee;padding:2%;"> <div style="text-align:center;margin:0 0 10px 0;padding:0 0 5px 0;border-bottom:4px solid #C3AA2E;font-size:18px;letter-spacing:1px;"> <img src="https://i.imgur.com/NextU1H.png" style="max-width:50px;"><br> NOT SURE </div> Thing<br> </div> <div style="width:20%;background:#fff;border:1px solid #eee;padding:2%;"> <div style="text-align:center;margin:0 0 10px 0;padding:0 0 5px 0;border-bottom:4px solid #C32E2E;font-size:18px;letter-spacing:1px;"> <img src="https://i.imgur.com/gDbnZ9A.png" style="max-width:50px;"><br> NO THANKS </div> Thing<br> </div> <div style="width:100%;background:#fff;border:1px solid #eee;padding:2%;margin-top:1%;text-align:justify;font-size:13px;"> <div style="text-align:center;margin:0 0 10px 0;padding:0 0 5px 0;border-bottom:4px solid #9238A4;font-size:18px;letter-spacing:1px;"> NOTES & OTHER INFO </div> Etc. info </div> <a href="http://tessisamess.insanejournal.com/" style="width:100%;margin-top:5px;text-align:right;font-size:9px;text-decoration:none;color:#ccc;"> CODE BY </a> </div></lj-raw>

Coding: Open

<lj-raw><div style="max-width:850px;margin:0 auto;display:flex;justify-content:space-between;flex-wrap:wrap;font-family:century gothic,helvetica,arial,sans-serif;font-size:12px;line-height:1.6;color:#222;"> <div style="width:23%;"> <div style="text-align:center;margin:0 0 10px 0;padding:0 0 5px 0;border-bottom:4px solid #4938A4;font-size:18px;letter-spacing:1px;"> <img src="https://i.imgur.com/Mpd3jn1.png" style="max-width:50px;"><br> FAVORITES </div> Thing<br> </div> <div style="width:23%;"> <div style="text-align:center;margin:0 0 10px 0;padding:0 0 5px 0;border-bottom:4px solid #38A477;font-size:18px;letter-spacing:1px;"> <img src="https://i.imgur.com/sgvhkol.png" style="max-width:50px;"><br> ABSOLUTELY </div> Thing<br> </div> <div style="width:23%;"> <div style="text-align:center;margin:0 0 10px 0;padding:0 0 5px 0;border-bottom:4px solid #C3AA2E;font-size:18px;letter-spacing:1px;"> <img src="https://i.imgur.com/NextU1H.png" style="max-width:50px;"><br> NOT SURE </div> Thing<br> </div> <div style="width:23%;"> <div style="text-align:center;margin:0 0 10px 0;padding:0 0 5px 0;border-bottom:4px solid #C32E2E;font-size:18px;letter-spacing:1px;"> <img src="https://i.imgur.com/gDbnZ9A.png" style="max-width:50px;"><br> NO THANKS </div> Thing<br> </div> <div style="width:100%;margin-top:40px;text-align:justify;font-size:13px;"> <div style="text-align:center;margin:0 0 10px 0;padding:0 0 5px 0;border-bottom:4px solid #9238A4;font-size:18px;letter-spacing:1px;"> NOTES & OTHER INFO </div> Etc. Info </div> <a href="http://tessisamess.insanejournal.com/" style="width:100%;margin-top:20px;text-align:right;font-size:9px;border-top:1px solid #eee;text-decoration:none;color:#ccc;"> CODE BY </a> </div></lj-raw>

Editing Guide

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

HOT TIP

Want a little more information for a kink without it taking up a ton of space and bulking up the look of your overall list? You can quickly add hover info using:
<font title="More info">Thing*</font>

Just be sure to add a note in the bottom section so people know they can hover items with asterisks for more information!

IMAGES

https://i.imgur.com/Mpd3jn1.png - Favorites icon
https://i.imgur.com/sgvhkol.png - Absolutely icon
https://i.imgur.com/NextU1H.png - Not Sure icon
https://i.imgur.com/gDbnZ9A.png - No Thanks icon

FONTS

century gothic,helvetica,arial,sans-serif - Overall font
font-size:12px; - Overall font size
font-size:18px; - Header font size

DIMENSIONS

max-width:950px; - Overall width for BOXED (inner content will scale to fit if resized)
max-width:850px; - Overall width for OPEN (inner content will scale to fit if resized)

COLORS

#fff

Container backgrounds on BOXED only

#eee

Container borders on BOXED only; credit border on OPEN only

#4938A4

Favorites header border

#38A477

Absolutely header border

#C3AA2E

Not Sure header border

#C32E2E

No Thanks header border

#9238A4

Notes header border

#222

Overall text

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!