RP Resources

Codes + Layouts + Tutorials + More

×

Community Rules

This comm is open to anyone to post codes, layouts, resources, tutorials, and requests for help and content. Of course, we do have some rules, so please read through them before jumping in; thank you!

Treat others the way you'd like to be treated. This is not a drama comm, and we expect you guys to be awesome and stay civil. If a situation gets out of hand, please contact a mod, and leave comments intact so we can accurately handle the situation.

Please tag your posts and check out the tagging guide if you have any questions!

■ Very long posts or posts formatted with your own div styling for organization should be behind a cut to save people's f-lists.

Work safe above the cut, please!

■ If posting codes, guides, etc. absolutely do not post content that you did not make. That's stealing, and it's super uncool, bro! If you are posting expanded/edited codes made by yourself using another user's coding as well, please be sure you have their permission (You do not need direct permission if they allow edits to be re-posted in their blanket rules.)
■ Do not post tutorials/links to tutorials that show people how to steal codes from other users. Again: Stealing. Not cool.
When asking for help with something, please check the help tags (help: coding, help: graphics, help: icons, help: layouts, help: other) first to see if your question has already been posted and answered to avoid duplicates.

We do not allow game ads to be posted on this comm since there are so many communities specifically for that already; if you're pimping a game as an addition to a regular post, that's fine. (OK: You post an RP code and mention in the post, oh hey, also I'm running this game! NOT OK: Posts dedicated to game promo.)

We do allow other types of community promos if they are related to RP (icon comms, other types of resource comms, etc.) Just shoot us a comment in our dropbox beforehand and we'll let you know if it's cool to post!
×

Tagging Guide

zzz
×

Banners & Buttons





Previous | Next

[info]yo
[info]rpresources

[info]yo
[info]rpresources

[info]yo
[info]rpresources
Hey! So, I've checked most the tags on here and rp_tutorials but I couldn't find anything that was quite what I was looking for. Maybe I just checked the wrong tags and I'm sorry if this has been asked!

1. Are there any tutorials about putting a gif and text over photos in the userinfo. Kind of like here and here. (Sorry if those are your journals!)

2. I used to use the codes at pbcoding for things like taken lists, making stuff on neocities, and for faux-celebs. I've found a few for insta, twitter, ONTD, floating around but does anyone know any for taken lists, making character profiles on neocities, and tutorials for HTML square/rectangle tables to use in character lists and stuff?

3. Is there a master list for profile codes to edit fonts, table widths, alignments, putting justified text next to a photo, and hiding/editing the rest of the user info links?

Sorry for so many questions!

Comments

Jun. 16th, 2016 09:26 pm (UTC)
This is easy to use from [info]tessisamess.

I used the code to make the banner at my old journal. I'm not sure if that's what you're looking for or not.
Jun. 16th, 2016 09:27 pm (UTC)
I'm trying to find a way to put gifs in the upper/lower corners and stuff, but that's definitely something I could use too! Thank you!
Jun. 17th, 2016 12:08 am (UTC)
What you're gonna wanna do here is make a table with the background as your image, similar to the one ~eleanorrigby suggested, then add in rows/cols to suit your needs (ex. a colspan="2" top row and two cols under it if you want it in the bottom left or right; flipped for the top left or right.) After that you'll want another table if you want a background color around your gif, and then put the image in that. If you want only the gif, you're good to stick it into whichever area you want it to sit.

The keys to making this work are the widths and heights. You can define the width of the overall table, as well as td cells (heights are super useful in td cells), and then the inner gif, and that's what makes everything sit correctly.

Here's a quick and dirty example/template for you:

Clearing space
Clearing space Gif here

Jun. 17th, 2016 12:10 am (UTC)
This is just assuming based on your examples that you want to use this IN your profile since it only allows basic HTML and tables; if you want a div version that works in entries, there's a much cleaner way to bust something like this out. Anyway, I hope that helps!
Jun. 17th, 2016 12:16 am (UTC)
There's also this way, which is less coding to deal with! The key in this one is to change valign and div align as needed. The first one can be set to top or bottom (deleting it makes it the default middle) and the div align can be set to left, center, or right.

Gif or inner table with gif



(SORRY FOR THE SPAM LOL there's more than one way to do this so I belatedly was like I SHOULD MENTION THAT.)
Jun. 17th, 2016 12:33 am (UTC)
I had forgotten how much I loved that code..lol. I need to do some more banners with it. It looks great and isn't hard to figure out.
Jun. 17th, 2016 09:07 pm (UTC)
thank you so much! i'm working on it now, so i will probably have some editing questions!
Jun. 17th, 2016 09:21 pm (UTC)
so this is what i have so far. is there a way to put a translucent border around the gif? like a gray or something? and also to put text below the gif and align it 150 like the gif? and then putting text the same width as the whole image above and/or below in various fonts and stuff? SORRY FOR SO MANY QUESTIONS! if there's a master list somewhere i'd also love it so i don't have to keep bugging you lol
Jun. 17th, 2016 10:05 pm (UTC)
Okay so! For a transparent border, you'll need a background image, since standard HTML won't let you use opacity or rgba format for color codes.

I'm not sure of a masterlist, I'm sorry, but you could check this out! The only downside to playing with that is that the site styles tables with a little bit of CSS in the style tag, and you won't be able to do that on IJ so it's irrelevant.

For text the same width as the inner image, you'll just want a single cell table with the width you want, no alignment set so it defaults over to the left under the image, and then style each line with the font tag as needed (ex. <font size="1" face="courier new" color="#fff">)
Jun. 17th, 2016 09:57 pm (UTC)
omg i'm so sorry. so okay, i tried combing the first comment ^^ and your html. but the text box keeps moving to the bottom right and i can't seem to get it back to center and at a different size (or anywhere if i wanted to move it around)



this is what i'm trying to mess with, but i'm not sure what part about it is causing it to mess up
Jun. 17th, 2016 10:18 pm (UTC)
Okay so I cleaned up the table for you, so now all you should need to do is change the alignment on the inner table as needed, as well as the valign on the td containing it (currently it's set to bottom right, but this can be set to any combination.)



A note on getting it to sit in the middle of the table: Set the inner table's alignment to center, remove the td alignment holding it, and then stick a couple of <br> tags in front of the inner table.
Jun. 17th, 2016 10:36 pm (UTC)
thank you so much! you're amazing! i appreciate it so very much
Jun. 18th, 2016 03:14 am (UTC)
i'm so sorry to bug you again! i was trying to do my friend's profile and i can't get the gif to be at the top right corner



i'm not sure what i messed up in the code. but i checked and i think i changed everything right like you said? do i need to add a
somewhere? i'm so sorry for all the questions! i'm terrible at html
Jun. 18th, 2016 03:30 am (UTC)
Fixed it! :D You just had two td valigns instead of one and a div align is all.

Jun. 18th, 2016 03:31 am (UTC)
thank you so so much! i really appreciate it! ♥
Jun. 20th, 2016 05:37 pm (UTC)
You are a GODDESS. Please never delete these responses. I love how thorough you are.
Jun. 20th, 2016 05:41 pm (UTC)
Aw, no problem! I'll leave them up; don't worry! ♥
Jun. 21st, 2016 06:09 am (UTC)
YAS :D Thank you so much for commenting! I have been looking for these codes FOREVER. I love experimenting with HTML and CSS, but this was killing me and I was clueless! You're a savior <333