tesscodes | Mockup: Snapchat

default caption! 📷

Send a chat

big text caption! 📷

Send a chat

		label caption! 📷
    

Send a chat

Information

Hey guys! While I'm at it, I thought it would be fun to make a Snapchat screen with multiple caption options. Just delete the caption styles you don't need, add your photo and caption text, and you're all set! You can also move your caption up or down the screen depending on where you'd like it positioned. Enjoy! 💖

The Coding

<lj-raw><div style="width:350px;height:675px;margin:0 auto 3px auto;background:#ddd url(YOUR_IMAGE)center;background-size:cover;font-family:arial,sans-serif;font-size:15px;color:#fff;text-align:center;display:flex;flex-direction:column;line-height:1.3;box-sizing:border-box;">

<div style="padding:30px 10px 0 0;text-align:right;"><img src="https://i.imgur.com/uVsgSSo.png"></div>

<div style="margin:auto 0 0 0;background:rgba(0,0,0,0.6);padding:7px 10px;">
		caption_text
	</div>

<b style="margin:auto 0 0 0;font-size:30px;transform:rotate(-7deg);">
		caption_text
	</b>

<div style="margin:auto 0 0 0;font-family:monospace;letter-spacing:2px;"><span style="background:#000;padding:7px 20px;line-height:3;">
		caption_text
    </span></div>

<div style="margin:auto 0 0 0;padding:0 5px 5px 5px;">
		<img src="https://i.imgur.com/57tzsrw.png">
		<div style="display:flex;justify-content:center;align-items:center;margin:5px 0 0 0;">
			<div style="width:31px;height:31px;border:1px solid rgba(255,255,255,0.5);background:rgba(0,0,0,0.4);border-radius:100%;margin:0 5px 0 0;display:flex;justify-content:center;align-items:center;"><img src="https://i.imgur.com/NWlbd2F.png" style="margin:0 0 1px 0;"></div>
			<b style="width:calc(100% - 45px);height:33px;border:1px solid rgba(255,255,255,0.5);background:rgba(0,0,0,0.4);border-radius:33px;box-sizing:border-box;text-align:left;line-height:32px;padding:0 0 0 18px;">Send a chat</b>
		</div>
	</div>

</div><center style="font-family:calibri;font-size:10px;letter-spacing:2px;color:#999;text-align:center;"><a href="http://tessisamess.insanejournal.com/133437.html" style="text-decoration:none;color:#bbb;">CODING</a></center></lj-raw>

Installation Guide

Paste into an entry and fill in the following!

YOUR_IMAGE - Photo
caption_text - Caption

Editing Guide

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

FONTS

arial,sans-serif - Default text
monospace - Label caption text

IMAGES

https://i.imgur.com/uVsgSSo.png - More options
https://i.imgur.com/NWlbd2F.png - Camera
https://i.imgur.com/57tzsrw.png - Chat arrow

MOVING YOUR CAPTION

margin:auto 0 0 0; - change auto to move your caption up or down.

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!