Mockup: Network Accessories

[tesscodes]

Information

Hey guys! When I run games or GPSLs, I also like to make fun network accessories since my friends and I enjoy them, so I decided to take my bases and do up a free version of the set for any other mods (or whoever!) who'd like to do similar for their players. Enjoy! 💖

network profile

Character_Name

@username

Every time I think I have a new hobby it turns out I just like to buy stuff.

CODING

Coding: Profile

<lj-raw><div style="width:280px;margin:0 auto;background:#fff;box-shadow:1px 1px 4px 1px rgba(0,0,0,0.15);border:1px solid rgba(0,0,0,0.1);border-bottom:4px solid #587AC0;border-radius:4px;overflow:hidden;line-height:1.7;font-family:tahoma,arial,sans-serif;font-size:11px;"> <!--HEADER--> <div style="text-align:center;background:#587AC0;padding:5px 0 5px 10px;display:flex;align-items:center;color:#fff;font-size:25px;font-family:georgia,serif;font-style:italic;letter-spacing:-1px;"><img src="https://i.imgur.com/wmn8wYK.png" style="filter:invert(1);margin:0 5px 0 0;">network profile</div> <!--PFP--> <div style="background:#eee url(PROFILE_IMG)center;background-size:cover;height:220px;"></div> <!--USER INFO--> <div style="border-bottom:1px solid rgba(0,0,0,0.1);padding:10px 5px;margin:0 10px;font-size:13px;line-height:1.2;"> <b style="color:#587AC0;">Character_Name</b> <div style="color:#999;">@username</div> </div> <!--BLURB--> <div style="padding:15px;max-height:160px;overflow:auto;box-sizing:border-box;color:#222;"> ABOUT_ME </div> </div><div style="margin:3px auto 0 auto;width:280px;font-size:8px;letter-spacing:1px;text-align:right;"><a href="https://tessisamess.insanejournal.com/155095.html" style="color:#999;text-decoration:none;">CODING</a></div></lj-raw>

network post

Character_Name

@username

Vivamus ut volutpat arcu, ut maximus nunc. Nam urna metus, bibendum quis diam sed, faucibus consequat dolor. Suspendisse potenti. Morbi congue erat nec sollicitudin dictum. Nam sagittis lectus a sapien molestie, id ornare lectus elementum. Quisque euismod ut neque et interdum.

CODING

Coding: Post

<lj-raw><div style="max-width:500px;margin:0 auto;background:#fff;box-shadow:1px 1px 4px 1px rgba(0,0,0,0.15);border:1px solid rgba(0,0,0,0.1);border-bottom:4px solid #587AC0;border-radius:4px;overflow:hidden;line-height:1.7;font-family:tahoma,arial,sans-serif;font-size:12px;"><div style="text-align:center;background:#587AC0;padding:8px 0 8px 8px;display:flex;align-items:center;color:#fff;font-size:20px;font-family:georgia,serif;font-style:italic;letter-spacing:-1px;"><img src="https://i.imgur.com/wmn8wYK.png" style="filter:invert(1);margin:0 5px 0 0;height:20px;">network post</div> <!--USER INFO--> <div style="border-bottom:1px solid rgba(0,0,0,0.1);padding:10px 5px;margin:0 10px;font-size:13px;line-height:1.2;"> <img src="ICON_URL" style="float:left;height:33px;width:33px;background:#587AC0;border-radius:100%;padding:2px;box-sizing:border-box;margin:0 5px 0 0;"> <b style="color:#587AC0;">Character_Name</b> <div style="color:#999;">@username</div> </div> <!--BLURB--> <div style="padding:15px;color:#222;"> POST_CONTENT </div> </div><div style="margin:3px auto 0 auto;width:500px;font-size:8px;letter-spacing:1px;text-align:right;"><a href="https://tessisamess.insanejournal.com/155095.html" style="color:#999;text-decoration:none;">CODING</a></div></lj-raw>

Name (@username) followed you

Name (@username) unfollowed you

Name (@username) blocked you

Coding: Notifications

Follow <lj-raw><div style="display:flex;align-items:center;font-family:tahoma,arial,sans-serif;font-size:14px;color:#333;"> <img src="ICON_URL" style="height:33px;width:33px;background:#587AC0;border-radius:100%;padding:2px;box-sizing:border-box;margin:0 -8px 0 0;"><img src="https://i.imgur.com/zhQOLFl.png" style="margin:0 5px -15px 0;height:17px;position:relative;"> Name (@username) followed you </div></lj-raw>

Unfollow <lj-raw><div style="display:flex;align-items:center;font-family:tahoma,arial,sans-serif;font-size:14px;color:#333;"> <img src="ICON_URL" style="height:33px;width:33px;background:#587AC0;border-radius:100%;padding:2px;box-sizing:border-box;margin:0 -8px 0 0;"><img src="https://i.imgur.com/4FkVwag.png" style="margin:0 5px -15px 0;height:17px;"> Name (@username) unfollowed you </div></lj-raw>

Block <lj-raw><div style="display:flex;align-items:center;font-family:tahoma,arial,sans-serif;font-size:14px;color:#333;"> <img src="ICON_URL" style="height:33px;width:33px;background:#587AC0;border-radius:100%;padding:2px;box-sizing:border-box;margin:0 -8px 0 0;"><img src="https://i.imgur.com/Qu752sX.png" style="margin:0 5px -15px 0;height:17px;"> Name (@username) blocked you </div></lj-raw>

Editing Guide

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

FONTS

tahoma,arial,sans-serif - Body text
georgia,serif - Title text

DIMENSIONS

33px - Userpics
280px - Profile width
220px - Profile image height
500px - Post width

IMAGES

https://i.imgur.com/wmn8wYK.png - Network logo
https://i.imgur.com/zhQOLFl.png - Follow icon
https://i.imgur.com/4FkVwag.png - Unfollow icon
https://i.imgur.com/Qu752sX.png - Block icon

COLORS

#fff

Header text; content background

#999

Username

#587AC0

Accent color

#111

Body text

rgba(0,0,0,0.1)

Borders; box shadow

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!