[21] Clean Permissions

[lina_trinch]

Sailor Neptune

Sailor Moon
michiru kaiou
female
seventeen
homosexual

Abilities

⯌ Power Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vitae ultrices est. Proin vel euismod arcu.

⯌ Power Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vitae ultrices est. Proin vel euismod arcu.

⯌ Power Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vitae ultrices est. Proin vel euismod arcu.

Out-of-Character

⯌ Backtag Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vitae ultrices est. Proin vel euismod arcu.

⯌ Fourthwall Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vitae ultrices est. Proin vel euismod arcu.

⯌ Off-Limits Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vitae ultrices est. Proin vel euismod arcu.

⯌ Other Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vitae ultrices est. Proin vel euismod arcu.

In-Character

⯌ Pysical Contact Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vitae ultrices est. Proin vel euismod arcu.

⯌ Mental Contact Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vitae ultrices est. Proin vel euismod arcu.

⯌ Flirt Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vitae ultrices est. Proin vel euismod arcu.

⯌ Fight Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vitae ultrices est. Proin vel euismod arcu.

⯌ Injury Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vitae ultrices est. Proin vel euismod arcu.

⯌ Death Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vitae ultrices est. Proin vel euismod arcu.

⯌ Other Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vitae ultrices est. Proin vel euismod arcu.

by killthecake

Code:
<center> <div style="width: 775px;line-height: 18px;display: table;"> <div style="display:inline-block;width: 300px;float:left;"> <div style="border: 1px solid #4a4a4a;width: 300px; height: 350px;background: url(IMG);background-position:center;background-size:cover;box-shadow: 4px 4px 2px #4a4a4a;"></div> <div style="margin-top: 10px;text-align:center;font-family:helvetica;font-variant:small-caps;font-weight:bold;font-size: 25px;text-shadow: 1px 1px 1px #4a4a4a;letter-spacing: 4px;"> charcter <div style="height: 2px;background: #4a4a4a;width: 90%;margin: 5px 15px;"></div> <font style="font-size:18px;"> canon <br /><font style="font-size: 15px;letter-spacing:0px;font-weight:normal;text-shadow: none;"> alias <br /> gender <br /> age <br /> sexuality </font></font></div> <div style="border: 1px solid #4a4a4a;margin-top: 25px;box-shadow: 4px 4px 2px #4a4a4a;padding: 10px;background: #fff;"> <div style="font-family:helvetica;font-variant:small-caps;font-weight:bold;font-size: 20px;text-shadow: 1px 1px 1px #4a4a4a;letter-spacing: 4px;text-align:left;"> Abilities <div style="height: 2px;background: #4a4a4a;margin: 5px 0px;"></div> <font style="letter-spacing: 0px;font-size: 15px;text-shadow:none;font-weight:normal;"> <b> ⯌ Power </b><font style="font-variant:normal;"> Lorem ipsum </font><br /><br /> <b> ⯌ Power </b><font style="font-variant:normal;"> Lorem ipsum </font><br /><br /> <b> ⯌ Power </b><font style="font-variant:normal;"> Lorem ipsum </font></font></div></div> </div> <div style="display:inline-block;width: 450px;margin-left: 25px;"> <div style="border: 1px solid #4a4a4a;box-shadow: 4px 4px 2px #4a4a4a;padding: 10px;background: #fff;"> <div style="font-family:helvetica;font-variant:small-caps;font-weight:bold;font-size: 20px;text-shadow: 1px 1px 1px #4a4a4a;letter-spacing: 4px;text-align:left;"> Out-of-Character <div style="height: 2px;background: #4a4a4a;margin: 5px 0px;"></div> <font style="letter-spacing: 0px;font-size: 15px;text-shadow:none;font-weight:normal;"> <b> ⯌ Backtag </b><font style="font-variant:normal;"> Lorem ipsum </font><br /><br /><b> ⯌ Fourthwall </b><font style="font-variant:normal;"> Lorem ipsum </font><br /><br /><b> ⯌ Off-Limits </b><font style="font-variant:normal;"> Lorem ipsum </font><br /><br /><b> ⯌ Other </b><font style="font-variant:normal;"> Lorem ipsum </font></font></div></div> <div style="border: 1px solid #4a4a4a;box-shadow: 4px 4px 2px #4a4a4a;padding: 10px;margin-top: 25px;background: #fff;"> <div style="font-family:helvetica;font-variant:small-caps;font-weight:bold;font-size: 20px;text-shadow: 1px 1px 1px #4a4a4a;letter-spacing: 4px;text-align:left;"> In-Character <div style="height: 2px;background: #4a4a4a;margin: 5px 0px;"></div> <font style="letter-spacing: 0px;font-size: 15px;text-shadow:none;font-weight:normal;"> <b> ⯌ Pysical Contact </b><font style="font-variant:normal;"> Lorem ipsum </font><br /><br /><b> ⯌ Mental Contact </b><font style="font-variant:normal;"> Lorem ipsum </font><br /><br /><b> ⯌ Flirt </b><font style="font-variant:normal;"> Lorem ipsum </font><br /><br /><b> ⯌ Fight </b><font style="font-variant:normal;"> Lorem ipsum </font><br /><br /><b> ⯌ Injury </b><font style="font-variant:normal;"> Lorem ipsum </font><br /><br /><b> ⯌ Death </b><font style="font-variant:normal;"> Lorem ipsum </font><br /><br /><b> ⯌ Other </b><font style="font-variant:normal;"> Lorem ipsum </font></font></div></div> </div> <!--CREDIT--> <div style="font-family:helvetica;font-variant:small-caps;font-weight:bold;font-size: 12px;margin-top: 5px;float:right;"> <a href="https://killthecake.dreamwidth.org/" style="text-decoration:none;color: #7a7a7a;"> by killthecake </a></div> </div>

❖ Make sure Disable Auto-Formatting is checked when you copy/paste the code into your post. ❖ You can add as much info/text as you want. The heights of the boxes will adjust. (Except for the picture box. That size stays the same.) ❖ The spaces to fill in (backtagging, fourthwall, etc.) are just some ideas. Feel free to put whatever you want. ❖ It's pretty straightforward but let me know if you have any questions or problems. Ctrl+F & Replace: ❖ IMG - Url for the image ❖ character - Name of the character ❖ canon - Name of the canon ❖ alias - Another name for the character, not your handle ❖ gender - Self-explanatory ❖ age - Self-explanatory ❖ sexuality - Self-explanatory ❖ Lorem ipsum - Text to fill in #fff Backgrounds #7a7a7a Credit text #4a4a4a Borders, line breaks, and shadows

Comments

[lonelynotforsaken]

Hey, this is an awesome code. Just wanted to ask: We were having a little trouble getting a friend's to work properly until we made the below code (minus the ') go from 450px to 300px. Any ideas on why this might happen? Reducing the size of that was the only way to get it to align right like the first image.

<'div style="display:inline-block;width: 450px;margin-left: 25px;">

[lina_trinch]

Oh, that's wild. It could be that they changed something else in the code, like the width of the image to make theirs fit or maybe the font/font size. It could also be a layout they're using or even a different stylesheet of the site. I don't think screen size and resolution would cause this problem.

Or maybe it's a browser issue. I keep having trouble with browser compatibility, lol. Were they using Chrome or something else? If I can figure out what the problem was, I could (hopefully) fix it in the base code over here.

Thanks to your friend for using my thing, though, and to you for bringing it to my attention! I'm glad you guys were able to fix the problem but I'm sorry there was a problem to begin with. D| oy

[lonelynotforsaken]

I'm checking with her on the browser, but I actually went through and looked at the code to match up to the original for her, and I was using Chrome. I cleaned up a few things and made sure to check Disable Auto-Formatting for her. That got rid of some spacing issues she was having, but still not the alignment.

You mentioned the resolution, though, and I'm starting to think it might be that.

Your live preview at 100% resolution on my monitor (1920 x 1080). I had to zoom out to 80% to get this live preview.

[lina_trinch]

Oh, that is definitely a problem, eek

I'm going to work with it in a few days when I get a minute to see if I can fix it somehow that doesn't make the boxes smaller. But, uh, the fix in the end might be as easy as just doing what you guys did and making the boxes smaller, lol. I'll let you know when I change it and if I do some wacky hijinks to the original.

Thanks for letting me know about this! ♥

[lonelynotforsaken]

Of course! Thank you for making all the wonderful codes you do! I follow your plurk and have been dazzled by the simple to populate, but very pretty codes you make. Much appreciate the awesome work you do.

[redcosmedic]

Thank you! Used with some edits HERE!

[notthatblonde]

I have a question... I was wondering how to get the out-of-character and in character, boxes to rest to the right image box, like the example?

[lina_trinch]

Some people have had problems with this in the past and I'm not really sure how to fix it, especially after the big code push that broke everything.

One person found a fix by changing the width of the boxes from 450px to 300px because the problem was being caused by their screen size and the boxes needed to be smaller. If you zoom the page out to 80% or more and that fixes it, then changing the width would fix it for good.