killthecake | [7] Permissions & Kink List All-In-One

wei wuxian
the untamed

Age: 21

Gender: Male

Orientation: Homosexual

Out-of-Character

Backtagging:	Lorem Ipsum
Fourthwalling:	Lorem Ipsum
Offlimits:	Lorem Ipsum
Other:	Lorem Ipsum

navigation

In-Character

Physical Contact:	Lorem Ipsum
Mental Contact:	Lorem Ipusm
Flirting/Affection:	Lorem Ipusm
Fighting:	Lorem Ipsum
Injury/Death:	Lorem Ipsum
Other:	Lorem Ipsum

Powers/Abilities

Power: Or Ability

Or Use This Section: For something else like another navigation or maybe some in-game info

Info Could Be: Housing, alignments, roomies, inventory, etc

Oh Look Another: Slot

Oh Look!!: I can scroll!!!

Shipping

Canon OTP: Lorem Ipsum

Canon NoTP: Lorem Ipsum

Preferences: Lorem Ipsum

Availability: Lorem Ipsum

Other: Lorem Ipsum

killthecake

Faves

• Kink
• Kink
• Kink
• Kink
• Kink
• Kink
• Kink
• Kink
• Kink
• Kink
• Kink
• Kink
• Kink

Yes

• Kink
• Kink
• Kink
• Kink
• Kink
• Kink
• Kink

Maybe

• Kink
• Kink
• Kink
• Kink
• Kink
• Kink
• Kink

IC No

• Kink
• Kink
• Kink
• Kink
• Kink
• Kink
• Kink

OOC No

• Kink
• Kink
• Kink
• Kink
• Kink
• Kink
• Kink

killthecake

Codes:

Permissions:

<center><div style="width: 845px; height: 663px; background: white;">
<div style="width: 800px; height: 618px; background: #fff;border:5px double #000;position:relative;top: 18px;">

<div style="width: 800px; height: 150px; background-image: url(HEADER_IMG); background-position: center; border-bottom:1px solid black;">

<div style="text-align: center; background: rgba(0,0,0,0.1);position:relative;top:50px;">
<font style="font-family: helvetica; font-variant: small-caps;font-size: 18px; letter-spacing: 20px; padding: 10px; color: rgba(250,250,250,0.7);text-shadow: 2px 2px 3px #000;">character</font>
<br>
<font style="font-family: helvetica; font-variant: small-caps;font-size: 12px; letter-spacing: 15px; padding: 10px; color: rgba(250,250,250,0.7);text-shadow: 2px 2px 3px #000;">canon</font></div>
</div>

<table style="width: 800px;border-bottom: 3px double black;"><tbody style="text-align:center;font-family: helvetica; font-variant: small-caps;font-size: 12px;"><tr>

<td style="width: 266px;"><b>Gender:</b> _GENDER</td>

<td style="width: 266px;"><b>Orientation:</b> _ORIENTATION</td>

</tr></tbody></table>

<div style="display:inline-block;width: 250px; height: 200px; border: 3px double black;margin-right: 2px;margin-top: 3px;overflow: auto;-moz-overflow: auto;">

<font style="text-align:center;font-family: helvetica; font-variant: small-caps;font-size: 18px;font-weight: thin;">Out-of-Character</font>
<div style="display: block; width: 220px;border: 1px solid #454545;"></div>

<center><table style="width: 220px;"><tbody style="font-family: helvetica; font-variant: small-caps;font-size: 12px;">
<tr style="border-bottom: 1px solid #454545;"><td style="width:110px;"><b>Backtagging:</b>
</td><td style="width: 110px;">Lorem Ipsum
</td></tr>
<tr style="border-bottom: 1px solid #454545;"><td style="width:110px;"><b>Fourthwalling:</b>
</td><td style="width:110px;">Lorem Ipsum
</td></tr>
<tr style="border-bottom: 1px solid #454545;"><td style="width:110px;"><b>Offlimits:</b>
</td><td style="width:110px;">Lorem Ipsum
</td></tr>
<tr style="border-bottom: 1px solid #454545;"><td style="width:110px;"><b>Other:</b>
</td><td style="width:110px;">Lorem Ipsum
</td></tr>
</tbody></table></center>

</div>

<div style="display:inline-block;width: 250px; height: 200px; border: 3px double white;margin-right: 2px;background-image: url(IMAGE); background-position: center;overflow: auto;-moz-overflow: auto;">

</div>

<div style="display:inline-block;width: 250px; height: 200px; border: 3px double black;overflow: auto;-moz-overflow: auto;">

<font style="text-align:center;font-family: helvetica; font-variant: small-caps;font-size: 18px;font-weight: thin;">In-Character</font>
<div style="display: block; width: 220px;border: 1px solid #454545;"></div>

<center><table style="width: 220px;"><tbody style="font-family: helvetica; font-variant: small-caps;font-size: 12px;">
<tr style="border-bottom: 1px solid #454545;"><td style="width:110px;"><b>Physical Contact:</b>
</td><td style="width: 110px;">Lorem Ipsum
</td></tr>
<tr style="border-bottom: 1px solid #454545;"><td style="width:110px;"><b>Mental Contact:</b>
</td><td style="width:110px;">Lorem Ipusm
</td></tr>
<tr style="border-bottom: 1px solid #454545;"><td style="width:110px;"><b>Flirting/Affection:</b>
</td><td style="width:110px;">Lorem Ipusm
</td></tr>
<tr style="border-bottom: 1px solid #454545;"><td style="width:110px;"><b>Fighting:</b>
</td><td style="width:110px;">Lorem Ipsum
</td></tr>
<tr style="border-bottom: 1px solid #454545;"><td style="width:110px;"><b>Injury/Death:</b>
</td><td style="width:110px;">Lorem Ipsum
</td></tr>
<tr style="border-bottom: 1px solid #454545;"><td style="width:110px;"><b>Other:</b>
</td><td style="width:110px;">Lorem Ipsum
</td></tr>
</tbody></table></center>

</div>

<div style="display:inline-block;width: 380px; height: 200px; border: 3px double black;margin-right: 5px;overflow: auto;-moz-overflow: auto;">

<font style="text-align:center;font-family: helvetica; font-variant: small-caps;font-size: 18px;font-weight: thin;">Powers/Abilities</font>
<div style="display: block; width: 350px;border: 1px solid #454545;"></div>

<center><table style="width: 350px;"><tbody style="font-family: helvetica; font-variant: small-caps;font-size: 12px;">
<tr style="border-bottom: 1px solid #454545;"><td style="width:175px;"><b>Power:</b> Lorem Ipsum
</td></tr>
<tr style="border-bottom: 1px solid #454545;"><td style="width:175px;"><b>Power:</b> Lorem Ipsum
</td></tr>
<tr style="border-bottom: 1px solid #454545;"><td style="width:175px;"><b>Power:</b> Lorem Ipsum
</td></tr>
<tr style="border-bottom: 1px solid #454545;"><td style="width:175px;"><b>Power:</b> Lorem Ipsum
</td></tr>
</tbody></table></center>

</div>

<div style="display:inline-block;width: 380px; height: 200px; border: 3px double black;overflow: auto;-moz-overflow: auto;">

<font style="text-align:center;font-family: helvetica; font-variant: small-caps;font-size: 18px;font-weight: thin;">Shipping</font>
<div style="display: block; width: 350px;border: 1px solid #454545;"></div>

<center><table style="width: 350px;"><tbody style="font-family: helvetica; font-variant: small-caps;font-size: 12px;">
<tr style="border-bottom: 1px solid #454545;"><td style="width:175px;"><b>Canon OTP:</b> Lorem Ipsum
</td></tr>
<tr style="border-bottom: 1px solid #454545;"><td style="width:175px;"><b>Canon NoTP:</b> Lorem Ipsum
</td></tr>
<tr style="border-bottom: 1px solid #454545;"><td style="width:175px;"><b>Preferences:</b> Lorem Ipsum
</td></tr>
<tr style="border-bottom: 1px solid #454545;"><td style="width:175px;"><b>Availability:</b> Lorem Ipsum
</td></tr>
<tr style="border-bottom: 1px solid #454545;"><td style="width:175px;"><b>Other:</b> Lorem Ipsum
</td></tr>
</tbody></table></center>

</div>

<div style="height:30px;display:flex;align-items:center;padding:10px 710px;font-size:9px;letter-spacing:4px;font-weight:bold;text-transform:uppercase;"><a href="https://killthecake.dreamwidth.org/" style="text-decoration:none; color: #000;">killthecake</a></div>

</div></center>

Kink List:

<center><div style="width: 900px; height: 263px; background: white;">
<div style="width: 850px; height: 218px; background: #fff;border:5px double #000;position:relative;top: 18px;">
<table style="width:850px; height: 218px;"><tbody>

<tr><td style="width: 168px;border-right: 3px double black;">

<div style="text-align: center; background: rgba(128, 0, 128,0.3);position:relative;margin-top:3px;">
<font style="font-family: helvetica; font-variant: small-caps;font-size: 18px; letter-spacing: 2px;color: #000;">Faves</font></div>
<div style="display: block; width: 98.5%;border: 1px solid #454545;"></div>
<div style="width: 100%; height: 85%; overflow: auto;-moz-overflow: auto;">

• Kink
<br />• Kink
<br />• Kink
<br />• Kink
<br />• Kink
<br />• Kink
<br />• Kink
<br />• Kink
<br />• Kink
<br />• Kink
<br />• Kink
<br />• Kink
<br />• Kink

</div></td>

<td style="width: 168px;border-right: 3px double black;">

• Kink
<br />• Kink
<br />• Kink
<br />• Kink
<br />• Kink
<br />• Kink
<br />• Kink

</div></td>

<td style="width: 168px;border-right: 3px double black;">

<div style="text-align: center; background: rgba(255, 215, 0,0.3);position:relative;">
<font style="font-family: helvetica; font-variant: small-caps;font-size: 18px; letter-spacing: 2px;color: #000;">Maybe</font></div>
<div style="display: block; width: 98.5%;border: 1px solid #454545;"></div>
<div style="width: 100%; height: 85%; overflow: auto;-moz-overflow: auto;">

• Kink
<br />• Kink
<br />• Kink
<br />• Kink
<br />• Kink
<br />• Kink
<br />• Kink

</div></td>

<td style="width: 168px;border-right: 3px double black;">

• Kink
<br />• Kink
<br />• Kink
<br />• Kink
<br />• Kink
<br />• Kink
<br />• Kink

</div></td>

<td style="width: 168px;">

• Kink
<br />• Kink
<br />• Kink
<br />• Kink
<br />• Kink
<br />• Kink
<br />• Kink

</div></td></tr></tbody></table>
</div>

<div style="height:30px;display:flex;align-items:center;padding:10px 765px;font-size:9px;letter-spacing:4px;font-weight:bold;text-transform:uppercase;"><a href="https://killthecake.dreamwidth.org/" style="text-decoration:none; color: #000;">killthecake</a></div>

</div></center>

❖ Make sure Disable Auto-Formatting is checked when you copy/paste the code into your post.

❖ If you use both codes you can either put <br /> between the two codes to add a space or just enter them as is and let them smoosh together.

❖ If you use both codes, feel free to erase the credit on one or the other. Please leave at least one credit link, though.

❖ To add extra lines in the permissions code, you'll want to copy/paste everything between the <tr> tags. To remove them, just take out those bits.

❖ Inspiration from Tessisamess and Yuff.

Ctrl+F & Replace:
❖ HEADER_IMG - Header image url. Make it at least 800x150.
❖ IMAGE - Image url in the block. Make it at least 250x200.
❖ URL - Link url in the image.

❖ character - Character name (main heading). I recommend leaving it lowercase.
❖ canon - Canon name (subheading). I recommend leaving it lowercase.
❖ link - Link name in the image block. Also recommend leaving it lowercase.
❖ _AGE - Age of character.
❖ _GENDER - Gender of character.
❖ _ORIENTATION - Sexuality of character. Again, these are placeholders for whatever you want.
❖ Lorem Ipsum - Your permissions text to fill in. The bold font should be just in front of or above the Lorem Ipsum's, so you know what you're typing about.
❖ Kink - Your kink text to fill in.

White Background of outline beyond the outer border.
Black Borders

#fff Background of everything inside the borders.
#000 Borders, text shadows on image text, kink list header text.
#454545 Link breaks in boxes.

rgba(0,0,0,0.1) Background of header/image text (the bar thing).
rgba(250,250,250,0.7) Text in header and image.
rgba(128, 0, 128,0.3) Faves header background.
rgba(0, 128, 0,0.3) Yes header background.
rgba(255, 215, 0,0.3) Maybe header background.
rgba(255, 140, 0,0.3) IC No header background.
rgba(255, 0, 0,0.3) OOC No header background.

Flat | Top-Level Comments Only

I have a question! Is there a way to make the kink list scroll in each box like the powers section does? I was looking at the code for the permissions to see if there was a way to get the kink list entries to scroll as well.

Hi! Every box on the permissions and kink list should scroll. You just have to write enough to make the box overflow for the scrollbar to appear. I did the ones above just as examples, lol.

Unless you mean to make the headers and everything within the box to scroll, too?

oh awesome, I was a little concerned because of the example lol. Thank you! Tha's all I was wondering was if it would scroll with the contents.

ETA: It doesn't scroll on firefox 76.0.1, but it does scroll on Vivaldi 3.0.1874.38/Chrome 83.0.4103.61.

https://i.imgur.com/eu3sNRA.png < firefox with siteskin
https://i.imgur.com/L6XzfJo.png < it also does this in the entry page with the layout applied.

Edited 2020-05-28 04:08 (UTC)

!!!!!!!! That's no good!

There isn't much I can do about layouts but I think a lot of that *may be* the browser. Regardless, the firefox issue: CTRL+F every instance of overflow: auto; at the start of each section and, right after it, add

-moz-overflow: auto;

This should fix it on the browser. When I get a minute, I'll add that fix to the code itself.

Thanks for pointing it out! I'm terrible with compatibility.

Not a problem! And thank you! I'll go fix in a second.

I deleted my question since I figured it out! Just needed a couple of paragraph tags before and after to space out my own comments on the kink list.

Edited 2020-09-04 01:00 (UTC)

I'm glad you figured it out! Sorry for the late reply, regardless, lol. Though the newest DW update did mess with this code a lot, tbh. Glad you got around it!

I love the use of images in a permissions post! I was wondering if you know how to solve the weirdness that seems to be going on with the borders? Maybe it's because of the change in DW code, but they aren't meeting at some edges and overlap with scrolling boxes in others

Edit: I also just noticed that the credit at the bottom is almost completely covered and very much want to fix that, too!

Edited 2020-10-17 01:46 (UTC)

Hi there! Yeah, the changes were caused by the recent code push. They messed up the table codes so it comes out looking like... that. There's no real way to fix it without changing the whole thing, so I've been planning to make a new one that gets rid of the tables but I haven't had the time, alas.

I really need to put a notice or something at the top of this post at this point. x.x

But thank you for your interest! I'm glad you liked it enough to try.

So sorry to bug you about it! I was able to tweak the size of the main div a bit to get things to fit, but no luck with the credit code for some reason. I'll put it elsewhere in the post if that's alright with you!

I'm glad you were able to tweak it! And yeah, feel free to stick credit anywhere. One of these days, I'll make a very similar code that won't break on DW lol. Thanks!

Hi Lina!

Is there a way to add a ships section to the kinks list without using the whole permissions code?

Beth

Sure! Are you thinking as another section like the Yes/Maybe/No stuff like this? or do you mean on the top or bottom or elsewhere?

Edited 2021-04-20 02:08 (UTC)

Hi!

I just added a section on top here but I like the idea of having it a part of the kinks code.

how's about this?

OMG That is just what I wanted!

Here ya go! It took me a minute to work out the kinks (haha) that the last code push created. Let me know if you have any trouble with it. :)

wanted to give you a head's up about this - not sure what DW may have changed to affect the code for this, but the base code now looks like this when posted.

but only if you post it new or edit an existing post. anything already posted stays as is.

Hi! I'm sorry about this. That looks like a really annoying problem.

I've tried to recreate it but I only seem able to when I unclick the Disable Auto-Format checkbox. Do you think that was the case on your side? If not, I'll keep digging into what the issue is.

that was it. my bad - thought i had ticky'd it. all good! thnx.

It's no problem! I'm glad it was just that. Thanks for bringing it to my attention, anyway!

[7] Permissions & Kink List All-In-One

no subject

no subject

no subject

in an rp account, still me

same - the account in question actually!

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject