• When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!

    Remember to credit artists when using work not your own.

Help any nice messaging templates?

noil

cursed with ideas
Roleplay Availability
Roleplay Type(s)
looking for templates/formatting that makes it look like a series of messages back and forth between people? the built in text messaging thing leaves much to be desired

like this thing but less hideous/more customizable:
Recipient
them
Hi
me
Who is this?
them
Lol, It's me silly.
 
As far as I know, there are none already made, though you can go through the freebie threads and maybe prove me wrong.

If that's the case, you would need to either code one up yourself to look the way you want it to, or you can hire a coder to do it for you (some do it for free occasionally as well- I believe reveriee's thread is currently accepting requests).
 
ya if nobody has one floating around I'll take a stab at it myself, just wanted to check first before I put in the effort bc this is def not my forte lol
 
every time I try to do anything bbcode my respect for people who know what they're doing goes up 10,000%

slowly figuring how to get things where I want them, stuck on how to get one box to stick to the left and one to the right; and how to get the width of the boxes to flex with their content
Edit: ah, well, also looks like in preview my positioning from the bottom is good but actual post its broken :T

Code:
[comment]

outer box 

[/comment][border=0px; background-color: #fff; width: 250px; height: 400px; border-radius: 5px; align: left;][comment]

inner container, a little shorter than the outer box; and container to make the messages stick to the bottom

[/comment][border=0px; width= 100%; height=380px; padding: 0px;][border=0px; width= 100%; position: absolute; bottom: 10px; padding: 0px;][comment]

box #1

[/comment][border=0px; background-color: #000; border-radius: 5px; position: relative; color: #fff; font-family:calibri; margin: 5px;][right]blah blah[/right][/border][comment]

box #2

[/comment][border=0px; background-color: #7a7a7a; border-radius: 5px; position: relative; color: #fff; font-family:calibri; margin: 5px;]blah blah blah blah blah 2
blah[/border][/border][/border]
blah blah​
blah blah blah blah blah 2
blah
 
Mkay, so you don't need to specify an alignment to the left, as that is going to be the default. You can then just wrap the alternating messages with [right][/right] (your mistake there was you put the tags inside the [border] tag rather than outside it). I would also recommend zeroing out all your margins and paddings (and adding box-sizing: border-box;), so your calculations are smoother and the previews don't look different from the actual post.
As far as getting the messages to stick to the bottom of the parent container, there are several ways to do it. You can use position: absolute; bottom: 0px;, but RPN can bug out without a value set for top, and it requires a set value for width. You can do it with position: relative;. The way I would do it (bc it's simplest) would just be to adjust the top margin of your first message to give the requisite space, but of course if you plan to use the template a lot it would have to get adjusted depending on your contents.
As for getting your divs to adjust to the size of their contents, just add a display: inline-block; and you're good to go.

Hope that helped~



blah blah

blah blah blah blah blah 2
blah


blah blah

blah blah blah blah blah 2
blah

[comment]-----outer box-----[/comment][border=0px; box-sizing: border-box; margin: 0px; padding: 0px; background-color: #fff; width: 250px; height: 400px; border-radius: 5px;]

[comment]-----message 1-----[/comment][right][border=0px; background-color: #000; border-radius: 5px; position: relative; color: #fff; font-family:calibri; margin: 45px 5px 5px 5px; display: inline-block;]blah blah[/border][/right]

[comment]-----message 2-----[/comment][border=0px; background-color: #7a7a7a; border-radius: 5px; position: relative; color: #fff; font-family:calibri; margin: 5px; display: inline-block;]blah blah blah blah blah 2
blah[/border]

[comment]-----message 3-----[/comment][right][border=0px; background-color: #000; border-radius: 5px; position: relative; color: #fff; font-family:calibri; margin: 5px; display: inline-block;]blah blah[/border][/right]

[comment]-----message 4-----[/comment][border=0px; background-color: #7a7a7a; border-radius: 5px; position: relative; color: #fff; font-family:calibri; margin: 5px; display: inline-block;]blah blah blah blah blah 2
blah[/border][/border]
 
that helps so much thank you for the explanations!! 💜

for the stick to bottom-- yeah I figured I could just margin its way down there but I was really hoping to have something flexible that I wouldn't have to screw with when putting different stuff in there. if top margin is the only practical way I'll just deal with it, but, grr. do you know if RPN bugs out the absolute bottom thing in a consistent way? if it's always dropping it by the same amount it did to me in my first attempt maybe I could bump it up to the correct place and just know my preview will be weird???
 
No problem.

So for the more permanent/flexible version of things, you just need to add a position: relative; to the screen container, and then your inner container needs to have the width set to 250px or 100% with position: absolute; bottom: 0px;- that should stick your messages to the bottom of the screen.

blah blah
blah blah blah blah blah 2
blah
blah blah
blah blah blah blah blah 2
blah

[comment]-----outer box-----[/comment][border=0px; box-sizing: border-box; margin: 0px; padding: 0px; background-color: #fff; width: 250px; height: 400px; border-radius: 5px; position: relative;][comment]

-----inner box-----[/comment][border=0; box-sizing: border-box; margin: 0px; padding: 0px; width: 100%; position: absolute; bottom: 0px;][comment]

-----message 1-----[/comment][right][border=0px; background-color: #000; border-radius: 5px; position: relative; color: #fff; font-family: calibri; margin: 5px; display: inline-block;]blah blah[/border][/right][comment]

-----message 2-----[/comment][border=0px; background-color: #7a7a7a; border-radius: 5px; position: relative; color: #fff; font-family: calibri; margin: 5px; display: inline-block;]blah blah blah blah blah 2
blah[/border][comment]

-----message 3-----[/comment][right][border=0px; background-color: #000; border-radius: 5px; position: relative; color: #fff; font-family: calibri; margin: 5px; display: inline-block;]blah blah[/border][/right][comment]

-----message 4-----[/comment][border=0px; background-color: #7a7a7a; border-radius: 5px; position: relative; color: #fff; font-family:calibri; margin: 5px; display: inline-block;]blah blah blah blah blah 2
blah[/border][/border][/border]
 
Like I said, it adjusts your container to the size of its contents (well, since height adjusts to content size automatically, really it just adjusts the width as well).
 
ah whups I missed that in reading, sorry
thank you so much for your help! I am being filled with new knowledge lol
 
alright thanks to Ayama's help I've got something I'm pretty happy with if anyone wants it:
 3:14            
Conversation   
blah blah

blah blah blah blah blah checking if this wraps correctly
third message
4th message

Message
Code:
[comment] header

[/comment][border=0px; box-sizing: border-box; margin: 0px; padding: 2px; background-color: #000; color: #fff; font-size: 10px; width: 210px; height: 20px; border-radius: 10px 10px 0px 0px; position: relative;] 3:14            [fa]far fa-do-not-enter[/fa] [fa]fas fa-wifi-fair[/fa] [fa]fas fa-signal-bars-good[/fa] [fa]fas fa-battery-half[/fa][/border][comment]

outer box 

[/comment][border=0px; box-sizing: border-box; margin: 0px; padding: 0px; background-color: #000; width: 210px; height: 400px; border-radius: 0px 0px 10px 10px; position: relative;][comment]

convo icons - if you change conversation name will have to mess with # of spaces between the name and the icons

[/comment][border=0px; box-sizing: border-box; width: 100%; margin: 0px; padding: 0px; border-radius: 0px; background-color: #000; color: #fff; font-family: calibri; font-size: 15px;] [fa]fas fa-arrow-left[/fa][b] Conversation[/b]    [fa]fa fa-video[/fa] [fa]fa fa-phone[/fa] [fa]fa fa-magnifying-glass[/fa][/border][comment]

inner container to make the messages stick to the bottom

[/comment][border=0px; box-sizing: border-box; margin: 0px; padding: 0px; width: 100%; position: absolute; bottom: 0px;][comment]

message #1 - can add as many messages fit (too many will break it), changing the border radius, right tag, and color to show which it's from
1
[/comment][border=0px; background-color: #575757; border-radius: 10px 10px 10px 0px; position: relative; color: #fff; font-family: calibri; font-size: 13px; margin: 5px; display: inline-block;]blah blah[/border]
[comment]

message #2

[/comment][right][border=0px; background-color: #b0a2de; border-radius: 10px 10px 0px 10px; position: relative; color: #000; font-family: calibri; font-size: 13px; margin: 5px; display: inline-block;]blah blah blah blah blah checking if this wraps correctly[/border][/right]
[comment]

message #3

[/comment][right][border=0px; background-color: #b0a2de; border-radius: 10px 10px 0px 10px; position: relative; color: #000; font-family: calibri; font-size: 13px; margin: 5px; display: inline-block;]third message[/border][/right]
[comment]

message #4

[/comment][border=0px; background-color: #575757; border-radius: 10px 10px 10px 0px; position: relative; color: #fff; font-family: calibri; font-size: 13px; margin: 5px; display: inline-block;]4th message[/border]
[comment]

message area

[/comment][right][border=2px solid #575757; box-sizing: border-box; background-color: #000; border-radius: 0px 0px 10px 10px; position: relative; color: #7a7a7a; font-family: calibri; font-size: 13px; margin: 2px; width: 98.5%;]Message [fa]fa fa-play[/fa][/border][/right][/border][/border]
blah blah

blah blah blah blah blah checking if this wraps correctly
third message
4th message
Code:
[comment]outer box 

[/comment][border=0px; box-sizing: border-box; margin: 0px; padding: 0px; background-color: #000; width: 210px; height: 400px; border-radius: 0px; position: relative;][comment]

inner container to make the messages stick to the bottom

[/comment][border=0px; box-sizing: border-box; margin: 0px; padding: 0px; width: 100%; position: absolute; bottom: 0px;][comment]

message #1 - can add as many messages fit (too many will break it), changing the border radius, right tag, and color to show which it's from
1
[/comment][border=0px; background-color: #575757; border-radius: 10px 10px 10px 0px; position: relative; color: #fff; font-family: calibri; font-size: 13px; margin: 5px; display: inline-block;]blah blah[/border]
[comment]

message #2

[/comment][right][border=0px; background-color: #b0a2de; border-radius: 10px 10px 0px 10px; position: relative; color: #000; font-family: calibri; font-size: 13px; margin: 5px; display: inline-block;]blah blah blah blah blah checking if this wraps correctly[/border][/right]
[comment]

message #3

[/comment][right][border=0px; background-color: #b0a2de; border-radius: 10px 10px 0px 10px; position: relative; color: #000; font-family: calibri; font-size: 13px; margin: 5px; display: inline-block;]third message[/border][/right]
[comment]

message #4

[/comment][border=0px; background-color: #575757; border-radius: 10px 10px 10px 0px; position: relative; color: #fff; font-family: calibri; font-size: 13px; margin: 5px; display: inline-block;]4th message[/border][/border][/border]
 

Users who are viewing this thread

Back
Top