Mockup: Text Messages

[tesscodes]

NAME & NAME

WHEN | RATING Cras dictum velit quis finibus cursus!

Lorem ipsum dolor sit amet, consectetur adipiscing elit?

Aenean commodo tellus nibh.

Etiam eleifend dui sit amet mi auctor ullamcorper. Nulla facilisi. Aliquam eu lacus tincidunt, pulvinar urna sit amet, maximus felis. 😂

Cras dictum velit quis finibus cursus!

👀

Quisque vel turpis ut enim convallis tempor nec vitae orci. Aenean et est vitae est auctor laoreet. Sed at auctor nunc, at viverra lacus. Mauris non dignissim sem. Integer ut est eu ex imperdiet gravida in at odio. Duis semper porttitor est id condimentum. Sed nisi leo, sagittis at leo vel, scelerisque euismod libero.

O

M

G

CODING

Information

Hey guys! I've been meaning to get around to making a formal post for the texting code I created for use in my GPSLs, so here we go! This code works both for posting text logs and for posting opening texts for a comment thread, and I've included comment-specific codes for replying to each other as well. Additionally, there are options for emoji-only messages and picture messages for all types. Enjoy! 💖

Entry Coding

<lj-raw><div style="max-width:700px;margin:0 auto;"> <!--IMAGES--> <center style="display:flex;align-items:center;justify-content:center;"> <img src="YOUR_ICON" style="height:100px;padding:5px;border:1px solid #ddd;"> <div style="margin:0 10px;width:72px;height:72px;-webkit-mask:url(https://i.imgur.com/vppNjlG.png)center no-repeat;mask:url(https://i.imgur.com/vppNjlG.png)center no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background:#0C82FD;"></div> <img src="THEIR_ICON" style="height:100px;padding:5px;border:1px solid #ddd;"> </center> <!--SCENE INFO--> <div style="margin:10px 0 0 0;text-transform:uppercase;letter-spacing:3px;font-size:9px;line-height:1.2;text-align:center;"> <h4 style="font-size:20px;margin:0;"> NAME & NAME </h4> WHEN | RATING <!--CUT TEXT--> <center><a href="ENTRYURL" style="letter-spacing:3px;font-weight:bold;text-transform:uppercase;text-decoration:none;">CUT_TEXT</a></center><span style="display:none;"><lj-cut></span> </div> <!--TEXTS--> <div style="width:400px;margin:30px auto 0 auto;padding:50px 0 0 0;border-top:1px solid #ddd;font-family:calibri,sans-serif;font-size:14px;line-height:1.3;color:#000;"> <!--YOU--> <div style="display:flex;align-items:flex-end;flex-direction:row-reverse;color:#fff;margin:10px 0;"> <!--YOUR ICON--> <img src="YOUR_ICON" style="width:40px;border-radius:100%;"> <!--YOUR MSGS--> <div style="margin:0 10px 0 0;"> <!--MSG - COPY/PASTE AS NEEDED--> <div style="background:#0C82FD;padding:8px 12px;border-radius:10px;margin:5px 0 0 0;float:right;clear:both;max-width:250px;"> YOUR_MSG </div> <!--IMAGE MSG - COPY/PASTE AS NEEDED--> <div style="border-radius:10px;margin:5px 0 0 0;float:right;clear:both;width:250px;overflow:hidden;"> <img src="URL" style="width:100%;"> </div> <!--EMOJI MSG - COPY/PASTE AS NEEDED--> <div style="margin:5px 0 0 0;float:right;clear:both;max-width:250px;font-size:30px;"> 😂 </div> </div> </div> <!--THEM--> <div style="display:flex;align-items:flex-end;margin:10px 0;"> <!--THEIR ICON--> <img src="THEIR_ICON" style="width:40px;border-radius:100%;"> <!--THEIR MSGS--> <div style="margin:0 0 0 10px;"> <!--MSG - COPY/PASTE AS NEEDED--> <div style="background:#E8E8EA;padding:8px 12px;border-radius:10px;margin:5px 0 0 0;float:left;clear:both;max-width:250px;"> THEIR_MSG </div> <!--IMAGE MSG - COPY/PASTE AS NEEDED--> <div style="border-radius:10px;margin:5px 0 0 0;float:left;clear:both;width:250px;overflow:hidden;"> <img src="URL" style="width:100%;"> </div> <!--EMOJI MSG - COPY/PASTE AS NEEDED--> <div style="margin:5px 0 0 0;float:left;clear:both;max-width:250px;font-size:30px;"> 😂 </div> </div> </div> </div> </div><div style="text-align:right;width:400px;margin:70px auto 0 auto;"><a href="https://tessisamess.insanejournal.com/146752.html" style="letter-spacing:1px;text-transform:uppercase;text-decoration:none;font-size:8px;color:#bbb;">CODING</a></div></lj-raw>

Comment Coding: Original poster's replies

<lj-raw><div style="width:400px;display:flex;align-items:flex-end;flex-direction:row-reverse;font-family:calibri,sans-serif;font-size:14px;line-height:1.3;color:#fff;"> <!--YOUR ICON--> <img src="YOUR_ICON" style="width:40px;border-radius:100%;"> <!--YOUR MSGS--> <div style="margin:0 10px 0 0;"> <!--MSG - COPY/PASTE AS NEEDED--> <div style="background:#0C82FD;padding:8px 12px;border-radius:10px;margin:5px 0 0 0;float:right;clear:both;max-width:250px;"> YOUR_MSG </div> <!--IMAGE MSG - COPY/PASTE AS NEEDED--> <div style="border-radius:10px;margin:5px 0 0 0;float:right;clear:both;width:250px;overflow:hidden;"> <img src="URL" style="width:100%;"> </div> <!--EMOJI MSG - COPY/PASTE AS NEEDED--> <div style="margin:5px 0 0 0;float:right;clear:both;max-width:250px;font-size:30px;"> 😂 </div> </div> </div></lj-raw>

Comment Coding: Other people's replies

<lj-raw><div style="width:400px;display:flex;align-items:flex-end;font-family:calibri,sans-serif;font-size:14px;line-height:1.3;color:#000;"> <!--THEIR ICON--> <img src="THEIR_ICON" style="width:40px;border-radius:100%;"> <!--THEIR MSGS--> <div style="margin:0 0 0 10px;"> <!--MSG - COPY/PASTE AS NEEDED--> <div style="background:#E8E8EA;padding:8px 12px;border-radius:10px;margin:5px 0 0 0;float:left;clear:both;max-width:250px;"> THEIR_MSG </div> <!--IMAGE MSG - COPY/PASTE AS NEEDED--> <div style="border-radius:10px;margin:5px 0 0 0;float:left;clear:both;width:250px;overflow:hidden;"> <img src="URL" style="width:100%;"> </div> <!--EMOJI MSG - COPY/PASTE AS NEEDED--> <div style="margin:5px 0 0 0;float:left;clear:both;max-width:250px;font-size:30px;"> 😂 </div> </div> </div></lj-raw>

Installation Guide

Paste into an entry and fill in the following!

YOUR_ICON - Your icon
THEIR_ICON - Their icon

If you're posting texts as one log, I recommend doing the icons last, because then you'll be able to run a replace all one time to fill them all in.

Dimensions

100px - Header user icons
72px - Speech bubbles icon
40px - Message user icons

Editing Guide

Paste the coding into Notepad or similar and bring up Replace All (usually Ctrl+H) to replace values quickly and easily!

FONTS

calibri,sans-serif - All texts (your top header will take on the community's layout font styling)

IMAGES

https://i.imgur.com/vppNjlG.png - Header speech bubbles icon; change this to any transparent icon you like and you'll still be able to change the color of it!

COLORS

#fff

Your texts

#E8E8EA

Their texts background

#ddd

Header icons border

#0C82FD

Your texts background

#0B80F9

Speech bubble icon color

#000

Their texts

Terms of Use

♡ Do not remove credit.
♡ Do not redistribute my codes in part or in whole (posting a copy for players to use in your game is fine with a link to original post.)
♡ If you break something during editing, please feel free to drop me a comment and I'll help as best I can!
♡ I love seeing edits! This isn't a rule, but if you have a cool edit of one of my codes I'd love to see it!