mistojen: (Default)
mistojen ([personal profile] mistojen) wrote2016-10-02 04:49 pm
  • Add Memory
  • Share This Entry
Entry tags:

miscellaneous: all the things

All The Things

I got this idea looking through old codes on [insanejournal.com profile] rp_tutorials a few days ago and finally had the chance to put something together on my own. This "table" is meant to be something of a be all, end all for your character. If there isn't something on there, you can add a link to it in the Miscellaneous section. Everything you could ever need for your character is on here, otherwise. The CR Chart, like the playlist, has an autoscroll coded in if your cr gets pretty large and you need the extra space. Songs on the playlist and cr partner journals will open in new tabs automatically when clicked.



CHARACTER NAME

ic stats



canon: canon name
canon point: canon point
age: age
species: species
pb: played by
games: [community profile] game, [community profile] game, [community profile] game

player



backtagging okay? yes/no/ask first
threadjacking okay? yes/no/ask first
HMD: Talk to me.
contact: PM me or [plurk.com profile] PLURKNAME
ooc journal: [personal profile] journalname
musebox: [profile] museboxname

kinks



FAVES: fave kink, fave kink, fave kink, fave kink
DEAL-BREAKERS: nope kink, nope kink, nope kink
FULL KINKS LIST: Here.

cr chart



playlist



song name here • artist name here song name here • artist name here song name here • artist name here song name here • artist name here song name here • artist name here song name here • artist name here song name here • artist name here song name here • artist name here song name here • artist name here song name here • artist name here song name here • artist name here song name here • artist name here song name here • artist name here song name here • artist name here song name here • artist name here song name here • artist name here song name here • artist name here song name here • artist name here

history



Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed magna lectus. Curabitur blandit non arcu ut ultrices. Donec porttitor luctus egestas. Mauris imperdiet, risus sed sodales eleifend, massa arcu vehicula augue, molestie commodo lorem mi vitae purus. Nam sagittis mauris at risus rhoncus lobortis. Suspendisse facilisis ante quam, vehicula convallis est blandit lobortis. Duis accumsan tempor sem nec sodales. Aenean vitae tincidunt erat. Proin congue ligula at eros malesuada, ut porttitor velit cursus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer vel odio suscipit sapien tempus tristique. Phasellus metus quam, faucibus id dui nec, volutpat imperdiet diam. Sed iaculis elementum tellus, eu vulputate ipsum tristique sit amet. Integer eu mauris ut erat tristique rhoncus.

Morbi sed nisi est. Nunc non ligula urna. Praesent vel varius sapien. Phasellus eget justo pulvinar odio eleifend malesuada. Ut a tempus nibh, a sodales dui. Nunc leo mauris, egestas quis metus a, facilisis consectetur arcu. Maecenas justo sem, commodo quis lorem id, aliquet sollicitudin tellus. Sed sed purus egestas metus iaculis consequat non quis nunc. Integer et orci nec lectus efficitur finibus. Donec commodo posuere gravida.

Nunc vel pretium turpis, quis molestie dui. Nunc vel blandit orci, quis condimentum magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porta urna purus. Donec vehicula augue vitae sapien cursus, quis vehicula mauris fermentum. Mauris non metus volutpat dui consequat malesuada eget quis massa. Proin finibus hendrerit elit ac pretium. Donec fringilla vehicula erat, ac consequat urna lobortis a. Aliquam et iaculis orci, molestie mattis nulla. Curabitur auctor eget nunc nec pharetra. Cras vulputate, augue eu laoreet bibendum, velit nunc sollicitudin ante, sed elementum purus felis non libero. Ut vehicula et lectus quis ornare. Nam tristique est quis pharetra hendrerit. Curabitur faucibus lacus ligula, in rhoncus metus consectetur maximus. In porta sapien sed orci luctus, et scelerisque est consequat. Cras in libero sed leo bibendum laoreet eu a mi.

personality



Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed magna lectus. Curabitur blandit non arcu ut ultrices. Donec porttitor luctus egestas. Mauris imperdiet, risus sed sodales eleifend, massa arcu vehicula augue, molestie commodo lorem mi vitae purus. Nam sagittis mauris at risus rhoncus lobortis. Suspendisse facilisis ante quam, vehicula convallis est blandit lobortis. Duis accumsan tempor sem nec sodales. Aenean vitae tincidunt erat. Proin congue ligula at eros malesuada, ut porttitor velit cursus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer vel odio suscipit sapien tempus tristique. Phasellus metus quam, faucibus id dui nec, volutpat imperdiet diam. Sed iaculis elementum tellus, eu vulputate ipsum tristique sit amet. Integer eu mauris ut erat tristique rhoncus.

Morbi sed nisi est. Nunc non ligula urna. Praesent vel varius sapien. Phasellus eget justo pulvinar odio eleifend malesuada. Ut a tempus nibh, a sodales dui. Nunc leo mauris, egestas quis metus a, facilisis consectetur arcu. Maecenas justo sem, commodo quis lorem id, aliquet sollicitudin tellus. Sed sed purus egestas metus iaculis consequat non quis nunc. Integer et orci nec lectus efficitur finibus. Donec commodo posuere gravida.

Nunc vel pretium turpis, quis molestie dui. Nunc vel blandit orci, quis condimentum magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porta urna purus. Donec vehicula augue vitae sapien cursus, quis vehicula mauris fermentum. Mauris non metus volutpat dui consequat malesuada eget quis massa. Proin finibus hendrerit elit ac pretium. Donec fringilla vehicula erat, ac consequat urna lobortis a. Aliquam et iaculis orci, molestie mattis nulla. Curabitur auctor eget nunc nec pharetra. Cras vulputate, augue eu laoreet bibendum, velit nunc sollicitudin ante, sed elementum purus felis non libero. Ut vehicula et lectus quis ornare. Nam tristique est quis pharetra hendrerit. Curabitur faucibus lacus ligula, in rhoncus metus consectetur maximus. In porta sapien sed orci luctus, et scelerisque est consequat. Cras in libero sed leo bibendum laoreet eu a mi.

miscellaneous



APPS: Game 1, Game 2, Game 3
VISUALOSITIES: Now you see me.
OTHER STAT: Goes here.
OTHER LINK: Goes here.

threads sept. 2016





threads oct. 2016



'all the things' design by mistojen



color change:

#0069D9
instructions:
  1. Make sure you check the box that says Disable Auto-Formatting located below the subject line and above the content box for your entry itself.
  2. Fill out the information in div classes "ic", "ooc", and "kinks".
  3. In div class "cr" there is one line of cr in the code, but feel free to copy that line and paste as many in as you like. Then replace the applicable information per cr partner. You can remove the "game" section of the title if you don't want to specify which game that line of cr applies to. Repl
  4. In div class "playlist," there is one song in the code, but feel free to copy that line and paste as many in as you like. Then replace the applicable information per song.
  5. Replace the following:
    • CHARACTER NAME with your character's name. Currently, the font is set to 50px, but if that's too big for your character's name to fit, you can always lower it.
    • MAINIMAGE with the url for the image as your base on the left. This needs to be at least 250x250 in size and must be square. If the image is larger, it will scale down automatically. To resize and crop gifs, I recommend EZGif.
    • HISTORY GOES HERE with your character's history or a summary thereof.
    • PERSONALITY GOES HERE with your character's personality or a summary thereof.
    • All instances of URLGOESHERE with the URL applicable to the section in which you're working.
  6. In the div class "misc," you can either work with the examples and thread tracker I have already put in there, or feel free to put whatever else you want in that section, whether it's game specifics for your game or games, reference links to character inventory or other information, or just a quick blurb of some kind; doesn't matter. That section will autoscroll if whatever you choose to put there ends up filling more space than you have, just like the playlist, cr, history, and personality sections do.
  7. This code does require that you put in two line breaks <*br><*br> (remove the asterisks) between paragraphs, for example, in the history section, in order to have the space between paragraphs.
  8. Please do not remove credit.
  9. If you have any questions or run into hiccups, please feel free to comment below and I'll try to get back to you ASAP to help.
  10. Enjoy!
Flat | Top-Level Comments Only
shigeo: (Thinking)

[personal profile] shigeo 2016-12-18 03:27 pm (UTC)(link)
Hello! I'm finding a peculiarity in my code here. In my activity tracking section, each month seems to be progressively getting indented to the right, and I don't exactly know what's going on with that. The only major change I did was to take out kinks and put other stuff there instead (since he's 14 so yeah)
mistojen: (Default)

[personal profile] mistojen 2016-12-18 03:32 pm (UTC)(link)
It miiiight be that you're missing the closing ul tag at the end of the list for each of the lists of trackers. Try adding <*/ul> (minus the asterisk) after the last <*/li> in each of your trackers and see if that helps? If it doesn't, could you pastebin me the code so that I can play around with it and see what the problem is? It's a little harder to try tweaks with just the Inspect feature on my browser, unfortunately, but just looking at it, that seems to be the issue, that you haven't closed the list out (potentially my fault for not making a more explicit note in the code that there needs to be an end to each individual one, which I will fix when I'm not about to run out to work - thank you!) so what's happening is each subsequent thread tracker appears, to the code, to be a subset of the last entry in the previous thread tracker.
mistojen: (Default)

[personal profile] mistojen 2016-12-18 03:34 pm (UTC)(link)
In addition, now that I'm really looking at it, your Mob's stats section is slipping over the top of your playlist section, so if you're seeing that as well and it's not just my screen, you can add overflow-y: auto; to the style section of the class="hobbies" div and that'll give it a scroll bar so they don't overlap like that :)
Edited 2016-12-18 15:35 (UTC)
shigeo: (His hair is neat...)

[personal profile] shigeo 2016-12-18 03:38 pm (UTC)(link)
Awesome, thank you! The AC section looks great - the hobbies isn't something that needs to scroll on my browser so I can't check, but did I properly get it scrolling for yours?
mistojen: (Default)

[personal profile] mistojen 2016-12-18 03:46 pm (UTC)(link)
Awesome, I'm glad! It might just be my screen, then. I checked the code right quick (and now I really do have to run lol) but you've got the overflow in the <*p> tag where it would need to be in the <*div> tag directly above where you've got it right now if you want it to scroll for smaller screens like mine.
shigeo: (Contentment)

[personal profile] shigeo 2016-12-18 03:47 pm (UTC)(link)
YEP I just figured it out, alrighty, thanks for the speedy responses!
mistojen: (Default)

[personal profile] mistojen 2016-12-18 04:14 pm (UTC)(link)
Awesome and no problem! You caught me at just the right time haha
flangirl: gacha One Piece Treasure Cruise (Sakura-chan 🌸)

[personal profile] flangirl 2020-03-31 08:47 am (UTC)(link)
Hello! I was hoping you could give me an idea of what's up with the overscroll in my entry. Obviously I've made a bunch of alterations to the style code, but the overscroll being twice the length of the content started happening as soon as I started putting information in... I assume it's either a DW or a Chromebook issue, but I'm not sure how to fix it.

Thank you so much for this excellent code!!
mistojen: (Default)

[personal profile] mistojen 2020-03-31 12:49 pm (UTC)(link)
Yeah this is like the bane of my existence, I swear. It's got to be a DW thing because it's so sporadic; it happens on some entries and not on others. The browser is adding like 13 line breaks (< br > tags) at the bottom of your final piece of information (so like in your STATS box, under Obvious Features, there's literally thirteen line break tags that I'm sure you didn't manually add and I don't know how to remove if they're not in the actual code). So the only solution I've come up with is to wrap a div around any content that is receiving this treatment and then put a negative bottom margin on it until the scroll isn't so bad. The only problem with that is that may need to update that negative margin if you add more content or remove some. Don't know for sure... For what it's worth, I did a quick test on your STATS box and it looks like a div with a margin-bottom of -13rem is the sweet spot. Are you familiar with using your browser's dev tools to fiddle with that sort of thing where you can see it before making the change in the actual code? If no, I'm happy to go through for you and give you the ideal margins a little later.

I'll have to ask around some of my other coding friends and see if any of them have come up with a better solution to this, though; I keep meaning to and keep forgetting, so thanks for the reminder. Can you do me a favor and create a pastebin with the code you have right now and link me? It might be helpful if I can troubleshoot it off DW and see if it really is a DW thing.
flangirl: anime arc Whole Cake Island (Pufferfish-chan)

[personal profile] flangirl 2020-03-31 01:35 pm (UTC)(link)
Ohhhh my god. Yeah, no, absolutely do not have that many added linebreaks - in fact I have zero linebreak tags between that and the < /div >.

I'm not very familiar with using devtools to preview, but I'm fine with trial-and-error through the Preview popup! -13 gives me a good place to start. (Is that supposed to be rem or em? I'm learning coding as I go, haha.)

I apologize for the kludginess of this entire code... I did a lot of finagling to attempt to get what I wanted within DW's parameters.
https://pastebin.com/j1PwE2QU

Thanks again!
mistojen: (Default)

[personal profile] mistojen 2020-03-31 01:56 pm (UTC)(link)
Yeah that happens to me a lot, too. I'll have to do some further investigation and see what's inserting all those line breaks. I usually have zero and it turns into 10 or more. I used rem, but em is fine, too; they're pretty similar (the only difference is that rem is relative to the font-size of the entire page and em is relative to the size of the parent element, in this case the div above the div you'd be using the negative margin on) and no worries, I literally learned coding by starting off just editing other people's code to fit my whims haha.

If you wanted to try with devtools, on most browsers, you right-click and Inspect Element or Inspect, then it'll show you kind of the HTML in one piece of the window that pops up and the CSS in another so you can play around there. I just find that it saves me a lot of extra clicks and refreshes, but your way totally works as well.

No worries, thanks. I'll have to look into it when I have a little extra time. But in the meantime, the negative margin can be kind of a sloppy workaround.
flangirl: manga arc Whole Cake Island; coloring by <user name="cricket_melodies"> (Teacup-chan)

[personal profile] flangirl 2020-05-18 12:17 pm (UTC)(link)
So here's a thing - I put my threads in a table to best center the thread name and other player around a central column and noticed barely any overscroll.

So I put a basic [table style="padding:0px;"][tr][td] around my permissions and the overscroll all but vanished.

Thoroughly weird but seems to be a dynamic workaround.
mistojen: (Default)

[personal profile] mistojen 2020-05-18 01:26 pm (UTC)(link)
Oooh, interesting... yeah that definitely seems weird but DW in general is weird to code in lol. I'll take a look at it and if I can recreate it (and it's not just a lucky fluke for you), then I'll have to update the code above for others! Thanks! I think I'm also going to maybe reach out to the DW team and see if they can figure out why sometimes a shitload of random line breaks just sort of insert themselves into the codes because if they know anything about why it happens and how it happens, maybe I can design some CSS to negate it, idk. It'll have to be a project for me to tackle when things calm down for me, but in the meantime, I'll try to test this sometime this week and then update the code above.

Thanks for following up!
Flat | Top-Level Comments Only