[8] Mother 3 Codes

[lina_trinch]

Navigation

Click Here For Live Previews


Code:
<center><div style="width: 500px;height: 300px;"> <!----SELECTOR----> <div style="width: 500px;height: 50px;background: #000;"> <a href="#1"><img src="NAVIMAGE_URL" style="position: relative;top: 4px;right: 88px; width: 40px; height: 40px; border-radius: 15px; background: #fff;align: left;border: 1px solid #5e5e5e;"></a> <a href="#2"><img src="NAVIMAGE_URL" style="position: relative;top: 4px;right: 88px; width: 40px; height: 40px; border-radius: 15px; background: #fff;align: left;border: 1px solid #5e5e5e;"></a> <a href="#3"><img src="NAVIMAGE_URL" style="position: relative;top: 4px;right: 88px; width: 40px; height: 40px; border-radius: 15px; background: #fff;align: left;border: 1px solid #5e5e5e;"></a> <a href="#4"><img src="NAVIMAGE_URL" style="position: relative;top: 4px;right: 88px; width: 40px; height: 40px; border-radius: 15px; background: #fff;align: left;border: 1px solid #5e5e5e;"></a> <div style="display:inline-block;width: 130px;height: 40px;position: relative;top: -19px;left: 88px;background: #fff;border-radius: 10px;border: 1px solid #000;"> <div style="display:block;width: 126px;height: 36px;margin-top: 2px;background: #ded7cc;border-radius: 8px;"> <font style="font-family: monospace; color: #000; font-size: 16px;position:relative;top: 6px;left: 2px;letter-spacing: 2px;">Navigation</font> </div></div> </div> <!----PAGE BLOCK----> <div style="width: 500px;height: 250px;background: #4a2c0a;overflow: hidden;"> <div style="height:250px;overflow:hidden;align:center;"> <!----HOME SCREEN----> <a name="1"></a> <div style="width:500px; height:250px; background: #4a2c0a; overflow:hidden;"> <div style="display:inline-block;width: 240px;height: 180px;margin-top: 5px;margin-right: 3px;background: #fff;border-radius: 15px;border: 1px solid #000;"> <div style="width: 230px;height: 170px;margin-top: 5px;background: #ded7cc;border-radius: 10px;"> <div style="width: 95%; height: 95%;overflow: hidden; text-align: left;"> <font style="font-family: monospace;font-size: 12px;"> <b>Character Name</b><br /> <font style="margin-left: 10px;">⮚ Canon Name<br /> <font style="margin-left: 20px;">⮚ <a href="URL" style="text-decoration: none;color: #000;">LINK</a><br /> <font style="margin-left: 20px;">⮚ <a href="URL" style="text-decoration: none;color: #000;">LINK</a><br /> <font style="margin-left: 20px;">⮚ <a href="URL" style="text-decoration: none;color: #000;">LINK</a><br /> <font style="margin-left: 20px;">⮚ <a href="URL" style="text-decoration: none;color: #000;">LINK</a><br /> <font style="margin-left: 30px;">⮚ <a href="URL" style="text-decoration: none;color: #000;">LINK</a><br /> <font style="margin-left: 30px;">⮚ <a href="URL" style="text-decoration: none;color: #000;">LINK</a> </font></div> </div></div> <div style="display:inline-block;width: 240px;height: 180px;background: #fff;border-radius: 15px;border: 1px solid #000;"> <div style="width: 230px;height: 170px;margin-top: 5px;background: #ded7cc;border-radius: 10px;"> <div style="width: 95%; height: 95%;overflow: hidden; text-align: left;"> <font style="font-family: monospace;font-size: 12px;"> <b>Played By: NAME HERE</b><br /> <font style="margin-left: 10px;">⮚ Plurk: <a href="URL" style="text-decoration: none;color: #000;">NAME HERE</a><br /> <font style="margin-left: 10px;">⮚ Discord: NAME HERE<br /> <font style="margin-left: 10px;">⮚ <a href="URL" style="text-decoration: none;color: #000;">LINK</a> </font> <div style="background: url(IMAGE_URL); background-position:center; width: 210px; height: 50px; border: 4px solid #fff; border-radius: 15px;position:relative;bottom: -32px;"></div> </div> </div></div> <div style="width: 485px;height: 50px;background: #fff;border-radius: 15px;border: 1px solid #000;margin-top: 5px;"> <div style="width: 475px;height: 40px;margin-top: 5px;background: #ded7cc;border-radius: 10px;"> <div style="width: 98%; height: 98%;overflow: hidden; text-align: left;"> <img src="https://img.icons8.com/windows/32/000000/magical-scroll.png" style="margin-top: 4px;display: inline-block;"></img> <div style="font-family: monospace;font-size: 12px;display: inline-block; position: relative; bottom: 10px;"><b>Code by <a href="https://killthecake.dreamwidth.org/" style="text-decoration: none;color: #000;">KillTheCake</a></b> </div></div></div></div> </div> <!----FIRST GAME SCREEN WITH SMALL IMAGE----> <a name="2"></a> <div style="width:500px; height:250px; background: #4a2c0a; overflow:hidden;"> <div style="display:inline-block;width: 240px;height: 180px;margin-top: 5px;margin-right: 3px;background: #fff;border-radius: 15px;border: 1px solid #000;"> <div style="width: 230px;height: 170px;margin-top: 5px;background: #ded7cc;border-radius: 10px;"> <div style="width: 95%; height: 95%;overflow: hidden; text-align: left;"> <font style="font-family: monospace;font-size: 12px;"> <b>Game Name</b><br /> <font style="margin-left: 10px;">⮚ <a href="URL" style="text-decoration: none;color: #000;">LINK</a><br /> <font style="margin-left: 10px;">⮚ <a href="URL" style="text-decoration: none;color: #000;">LINK</a><br /> <font style="margin-left: 10px;">⮚ <a href="URL" style="text-decoration: none;color: #000;">LINK</a><br /> <font style="margin-left: 10px;">⮚ <b>Lorem Ipsum</b><br /> <font style="margin-left: 20px;">⮚ Lorem Ipsum<br /> <font style="margin-left: 10px;">⮚ <b>Lorem Ipsum</b><br /> <font style="margin-left: 20px;">⮚ Lorem Ipsum </font></div> </div></div> <!---SMALL IMAGE BOX---> <div style="display:inline-block;width: 240px;height: 180px;background: #fff;border-radius: 15px;border: 1px solid #000;"> <div style="width: 230px;height: 170px;margin-top: 5px;background: #ded7cc;border-radius: 10px;"> <div style="width: 95%; height: 95%;overflow: hidden; text-align: left;"> <font style="font-family: monospace;font-size: 12px;"> <b>Lorem Ipsum</b><br /> <font style="margin-left: 10px;">⮚ Lorem Ipsum<br /> <font style="margin-left: 10px;">⮚ Lorem Ipsum<br /> <font style="margin-left: 10px;">⮚ Lorem Ipsum </font> <div style="background: url(IMAGE_URL); background-position:center; width: 210px; height: 50px; border: 4px solid #fff; border-radius: 15px;position:relative;bottom: -32px;"></div> </div> <!---SMALL IMAGE BOX END---> </div></div> <div style="width: 485px;height: 50px;background: #fff;border-radius: 15px;border: 1px solid #000;margin-top: 5px;"> <div style="display:block;width: 475px;height: 40px;margin-top: 5px;background: #ded7cc;border-radius: 10px;"> <div style="width: 98%; height: 98%;overflow: hidden; text-align: left;"> <img src="https://img.icons8.com/windows/32/000000/old-shop.png" style="margin-top: 4px;display: inline-block;"></img> <div style="font-family: monospace;font-size: 12px;display: inline-block; position: relative; bottom: 10px;">Lorem Ipsum </div></div></div></div> </div> <!----SECOND GAME SCREEN WITH MEDIUM IMAGE----> <a name="3"></a> <div style="width:500px; height:250px; background: #4a2c0a; overflow:hidden;"> <div style="display:inline-block;width: 240px;height: 180px;margin-top: 5px;margin-right: 3px;background: #fff;border-radius: 15px;border: 1px solid #000;"> <div style="width: 230px;height: 170px;margin-top: 5px;background: #ded7cc;border-radius: 10px;"> <div style="width: 95%; height: 95%;overflow: hidden; text-align: left;"> <font style="font-family: monospace;font-size: 12px;"> <b>Game Name</b><br /> <font style="margin-left: 10px;">⮚ <a href="URL" style="text-decoration: none;color: #000;">LINK</a><br /> <font style="margin-left: 10px;">⮚ <a href="URL" style="text-decoration: none;color: #000;">LINK</a><br /> <font style="margin-left: 10px;">⮚ <a href="URL" style="text-decoration: none;color: #000;">LINK</a><br /> <font style="margin-left: 10px;">⮚ <b>Lorem Ipsum</b><br /> <font style="margin-left: 20px;">⮚ Lorem Ipsum<br /> <font style="margin-left: 10px;">⮚ <b>Lorem Ipsum</b><br /> <font style="margin-left: 20px;">⮚ Lorem Ipsum </font></div> </div></div> <!---MEDIUM IMAGE BOX---> <div style="display:inline-block;width: 240px;height: 180px;background: #fff;border-radius: 15px;border: 1px solid #000;"> <div style="width: 230px;height: 170px;margin-top: 5px;background: #ded7cc;border-radius: 10px;"> <div style="width: 95%; height: 95%;overflow: hidden; text-align: left;"> <div style="background: url(IMAGE_URL); background-position:center; width: 210px; height: 140px; border: 4px solid #fff; border-radius: 15px;position:relative;top: 10px;"></div> </div> </div></div> <!---MEDIUM IMAGE BOX END---> <div style="width: 485px;height: 50px;background: #fff;border-radius: 15px;border: 1px solid #000;margin-top: 5px;"> <div style="display:block;width: 475px;height: 40px;margin-top: 5px;background: #ded7cc;border-radius: 10px;"> <div style="width: 98%; height: 98%;overflow: hidden; text-align: left;"> <img src="https://img.icons8.com/windows/32/000000/mana.png" style="margin-top: 4px;display: inline-block;"></img> <div style="font-family: monospace;font-size: 12px;display: inline-block; position: relative; bottom: 10px;">Lorem Ipsum </div></div></div></div> </div> <!----THIRD GAME SCREEN WITH LARGE IMAGE----> <a name="4"></a> <div style="width:500px; height:250px; background: #4a2c0a; overflow:hidden;"> <div style="display:inline-block;width: 240px;height: 180px;margin-top: 5px;margin-right: 3px;background: #fff;border-radius: 15px;border: 1px solid #000;"> <div style="width: 230px;height: 170px;margin-top: 5px;background: #ded7cc;border-radius: 10px;"> <div style="width: 95%; height: 95%;overflow: hidden; text-align: left;"> <font style="font-family: monospace;font-size: 12px;"> <b>Game Name</b><br /> <font style="margin-left: 10px;">⮚ <a href="URL" style="text-decoration: none;color: #000;">LINK</a><br /> <font style="margin-left: 10px;">⮚ <a href="URL" style="text-decoration: none;color: #000;">LINK</a><br /> <font style="margin-left: 10px;">⮚ <a href="URL" style="text-decoration: none;color: #000;">LINK</a><br /> <font style="margin-left: 10px;">⮚ <b>Lorem Ipsum</b><br /> <font style="margin-left: 20px;">⮚ Lorem Ipsum<br /> <font style="margin-left: 10px;">⮚ <b>Lorem Ipsum</b><br /> <font style="margin-left: 20px;">⮚ Lorem Ipsum </font></div> </div></div> <!---LARGE IMAGE BOX---> <div style="display:inline-block;width: 240px;height: 180px;background: #fff;border-radius: 15px;border: 1px solid #000;"> <div style="width: 230px;height: 170px;margin-top: 5px;background: url(IMAGE_URL);background-position: center;border-radius: 10px;"> <div style="width: 95%; height: 95%;overflow: hidden; text-align: left;"> </div> </div></div> <!---LARGE IMAGE BOX END---> <div style="width: 485px;height: 50px;background: #fff;border-radius: 15px;border: 1px solid #000;margin-top: 5px;"> <div style="display:block;width: 475px;height: 40px;margin-top: 5px;background: #ded7cc;border-radius: 10px;"> <div style="width: 98%; height: 98%;overflow: hidden; text-align: left;"> <img src="https://img.icons8.com/windows/32/000000/adventure.png" style="margin-top: 4px;display: inline-block;"></img> <div style="font-family: monospace;font-size: 12px;display: inline-block; position: relative; bottom: 10px;">Lorem Ipsum </div></div></div></div> </div> </div></div></div>

❖ Make sure Disable Auto-Formatting is checked when you copy/paste the code into your post. ❖ There are three image options (or rather, three page layout options). All are in the code. If you wanted to move them around, you can copy/paste the code in between the brackets for SMALL / MEDIUM / LARGE image boxes. ❖ This code is very customizable if you have some experience in css/html. Without experience, you can still fiddle around with the layout already provided to get the setup you're looking for. If you have any problems with it, let me know. ❖ Don't add too much information in the boxes. They don't scroll. (They could but I couldn't figure out a way for them to scroll and not look terrible.) ❖ The icons in the bottom boxes are from Icons8. Ctrl+F & Replace: ❖ NAVIMAGE_URL - icons on top bar ❖ IMAGE_URL - various images in the body ❖ URL - link urls ❖ LINK - the name of links ❖ icons8 - to find all icon urls in the bottom boxes ❖ Character Name - your character's name ❖ Canon Name - your character's canon ❖ NAME HERE - your handles on Plurk, Discord, and just RP in general ❖ Game Name - your character's game ❖ Lorem Ipsum - various pieces of text for you to fill in (or remove) #000 background of top bar, outer border of blocks, all text #fff background of icons on top bar, inner border of blocks #5e5e5e border of icons on top bar #4a2c0a background of main body #ded7cc background of blocks

CR Chart

Click Here For Live Previews


Code:
<center><div style="width: 500px;height: 300px;"> <!----SELECTOR----> <div style="width: 500px;height: 50px;background: #000;"> <a href="#good"><img src="https://img.icons8.com/windows/40/000000/ok--v1.png" style="position: relative;top: 4px;right: 110px; width: 40px; height: 40px; border-radius: 15px; background: #83d177;align: left;border: 1px solid #5e5e5e;"></a> <a href="#neutral"><img src="https://img.icons8.com/windows/40/000000/cancel-2.png" style="position: relative;top: 4px;right: 110px; width: 40px; height: 40px; border-radius: 15px; background: #d1ce77;align: left;border: 1px solid #5e5e5e;"></a> <a href="#bad"><img src="https://img.icons8.com/windows/40/000000/cancel.png" style="position: relative;top: 4px;right: 110px; width: 40px; height: 40px; border-radius: 15px; background: #d18577;align: left;border: 1px solid #5e5e5e;"></a> <div style="display:inline-block;width: 130px;height: 40px;position: relative;top: -19px;left: 110px;background: #fff;border-radius: 10px;border: 1px solid #000;"> <div style="display:block;width: 126px;height: 36px;margin-top: 2px;background: #ded7cc;border-radius: 8px;"> <font style="font-family: monospace; color: #000; font-size: 16px;position:relative;top: 6px;left: 2px;letter-spacing: 2px;">CR Chart</font> </div></div> </div> <!----PAGE BLOCK----> <div style="width: 500px;height: 250px;background: #4a2c0a;overflow: hidden;"> <div style="height:250px;overflow:hidden;align:center;"> <!----POSITIVE CR----> <a name="good"></a> <div style="width:500px; height:250px; background: #4a2c0a; overflow:hidden;"> <div style="display:inline-block;width: 485px;height: 180px;margin-top: 5px;margin-right: 3px;background: #fff;border-radius: 15px;border: 1px solid #000;"> <div style="width: 475px;height: 170px;margin-top: 5px;background: #ded7cc;border-radius: 10px;overflow: hidden;"> <table style="width: 98%; height: 98%; text-align: left;"><tbody style="font-family: monospace;font-size: 12px;"><tr><td style="border-right: 3px dashed #fff;width: 220px;"> <b>Character Name</b><br /> <font style="margin-left: 10px;">⮚ Lorem Ipsum<br /> <font style="margin-left: 20px;">⮚ <a href="URL" style="text-decoration: none;color: #000;">LINK</a><br /> <b>Character Name</b><br /> <font style="margin-left: 10px;">⮚ Lorem Ipsum<br /> <b>Character Name</b><br /> <b>Character Name</b><br /> <b>Character Name</b><br /> <font style="margin-left: 10px;">⮚ Lorem Ipsum </td><td><div style="margin-left: 5px;"> <b>Character Name</b><br /> <font style="margin-left: 10px;">⮚ Lorem Ipsum<br /> <font style="margin-left: 20px;">⮚ <a href="URL" style="text-decoration: none;color: #000;">LINK</a><br /> <b>Character Name</b><br /> <font style="margin-left: 10px;">⮚ Lorem Ipsum<br /> <b>Character Name</b><br /> <b>Character Name</b><br /> <b>Character Name</b><br /> <font style="margin-left: 10px;">⮚ Lorem Ipsum </div></td></tr></tbody></table> </div></div> <div style="width: 485px;height: 50px;background: #fff;border-radius: 15px;border: 1px solid #000;margin-top: 5px;"> <div style="width: 475px;height: 40px;margin-top: 5px;background: #ded7cc;border-radius: 10px;"> <div style="width: 98%; height: 98%;overflow: hidden; text-align: left;"> <img src="https://img.icons8.com/windows/32/000000/thumb-up.png" style="margin-top: 4px;display: inline-block;"></img> <div style="font-family: monospace;font-size: 12px;display: inline-block; position: relative; bottom: 10px;">Positive CR List by <b><a href="https://killthecake.dreamwidth.org/" style="text-decoration: none;color: #000;">KillTheCake</a></b> </div></div></div></div> </div> <!----NEUTRAL CR----> <a name="neutral"></a> <div style="width:500px; height:250px; background: #4a2c0a; overflow:hidden;"> <div style="display:inline-block;width: 485px;height: 180px;margin-top: 5px;margin-right: 3px;background: #fff;border-radius: 15px;border: 1px solid #000;"> <div style="width: 475px;height: 170px;margin-top: 5px;background: #ded7cc;border-radius: 10px;overflow: hidden;"> <table style="width: 98%; height: 98%; text-align: left;"><tbody style="font-family: monospace;font-size: 12px;"><tr><td style="border-right: 3px dashed #fff;width: 220px;"> <b>Character Name</b><br /> <font style="margin-left: 10px;">⮚ Lorem Ipsum<br /> <font style="margin-left: 20px;">⮚ <a href="URL" style="text-decoration: none;color: #000;">LINK</a><br /> <b>Character Name</b><br /> <font style="margin-left: 10px;">⮚ Lorem Ipsum<br /> <b>Character Name</b><br /> <b>Character Name</b><br /> <b>Character Name</b><br /> <font style="margin-left: 10px;">⮚ Lorem Ipsum </td><td><div style="margin-left: 5px;"> <b>Character Name</b><br /> <font style="margin-left: 10px;">⮚ Lorem Ipsum<br /> <font style="margin-left: 20px;">⮚ <a href="URL" style="text-decoration: none;color: #000;">LINK</a><br /> <b>Character Name</b><br /> <font style="margin-left: 10px;">⮚ Lorem Ipsum<br /> <b>Character Name</b><br /> <b>Character Name</b><br /> <b>Character Name</b><br /> <font style="margin-left: 10px;">⮚ Lorem Ipsum </div></td></tr></tbody></table> </div></div> <div style="width: 485px;height: 50px;background: #fff;border-radius: 15px;border: 1px solid #000;margin-top: 5px;"> <div style="display:block;width: 475px;height: 40px;margin-top: 5px;background: #ded7cc;border-radius: 10px;"> <div style="width: 98%; height: 98%;overflow: hidden; text-align: left;"> <img src="https://img.icons8.com/windows/32/000000/hand-peace.png" style="margin-top: 4px;display: inline-block;"></img> <div style="font-family: monospace;font-size: 12px;display: inline-block; position: relative; bottom: 10px;">Neutral CR List by <b><a href="https://killthecake.dreamwidth.org/" style="text-decoration: none;color: #000;">KillTheCake</a></b> </div></div></div></div> </div> <!----NEGATIVE CR----> <a name="bad"></a> <div style="width:500px; height:250px; background: #4a2c0a; overflow:hidden;"> <div style="display:inline-block;width: 485px;height: 180px;margin-top: 5px;margin-right: 3px;background: #fff;border-radius: 15px;border: 1px solid #000;"> <div style="width: 475px;height: 170px;margin-top: 5px;background: #ded7cc;border-radius: 10px;overflow: hidden;"> <table style="width: 98%; height: 98%; text-align: left;"><tbody style="font-family: monospace;font-size: 12px;"><tr><td style="border-right: 3px dashed #fff;width: 220px;"> <b>Character Name</b><br /> <font style="margin-left: 10px;">⮚ Lorem Ipsum<br /> <font style="margin-left: 20px;">⮚ <a href="URL" style="text-decoration: none;color: #000;">LINK</a><br /> <b>Character Name</b><br /> <font style="margin-left: 10px;">⮚ Lorem Ipsum<br /> <b>Character Name</b><br /> <b>Character Name</b><br /> <b>Character Name</b><br /> <font style="margin-left: 10px;">⮚ Lorem Ipsum </td><td><div style="margin-left: 5px;"> <b>Character Name</b><br /> <font style="margin-left: 10px;">⮚ Lorem Ipsum<br /> <font style="margin-left: 20px;">⮚ <a href="URL" style="text-decoration: none;color: #000;">LINK</a><br /> <b>Character Name</b><br /> <font style="margin-left: 10px;">⮚ Lorem Ipsum<br /> <b>Character Name</b><br /> <b>Character Name</b><br /> <b>Character Name</b><br /> <font style="margin-left: 10px;">⮚ Lorem Ipsum </div></td></tr></tbody></table> </div></div> <div style="width: 485px;height: 50px;background: #fff;border-radius: 15px;border: 1px solid #000;margin-top: 5px;"> <div style="display:block;width: 475px;height: 40px;margin-top: 5px;background: #ded7cc;border-radius: 10px;"> <div style="width: 98%; height: 98%;overflow: hidden; text-align: left;"> <img src="https://img.icons8.com/windows/32/000000/thumbs-down.png" style="margin-top: 4px;display: inline-block;"></img> <div style="font-family: monospace;font-size: 12px;display: inline-block; position: relative; bottom: 10px;">Negative CR List by <b><a href="https://killthecake.dreamwidth.org/" style="text-decoration: none;color: #000;">KillTheCake</a></b> </div></div></div></div> </div> </div></div></div>

❖ Make sure Disable Auto-Formatting is checked when you copy/paste the code into your post. ❖ There are a few instances where you can add text here and there, but space is ultimately limited. There are still options within the code for it (and creating links) so you can add, remove, or change those as you see fit. ❖ Don't add too much information in the boxes. They don't scroll. (They could but I couldn't figure out a way for them to scroll and not look terrible.) ❖ The icons in the top and bottom boxes are from Icons8. Ctrl+F & Replace: ❖ URL - link urls ❖ LINK - the name of links ❖ icons8 - to find all icon urls in the top and bottom boxes ❖ Character Name - your character's name ❖ Lorem Ipsum - various pieces of text for you to fill in (or remove) #000 background of top bar, outer border of blocks, all text #fff inner border of blocks #5e5e5e border of icons on top bar #83d177 background of positive icon #d1ce77 background of neutral icon #d18577 background of negative icon #4a2c0a background of main body #ded7cc background of blocks

Inbox/Contact

Click Here For Live Previews


Code:
<center><div style="width: 500px;height: 300px;"> <!----TOP BOX----> <div style="width: 500px;height: 50px;"> <div style="width: 460px;height: 50px;position: relative;top: 10px;background: #fff;border-radius: 10px;border: 1px solid #000;"> <div style="display:block;width: 456px;height: 46px;margin-top: 2px;background: #ded7cc;border-radius: 8px;"> <font style="font-family: monospace; color: #000; font-size: 13px;position:relative;top: 12px;">You've reached an inbox! Please leave a message! <a href="https://killthecake.dreamwidth.org/" style="text-decoration: none;color: #000;">⏷</a></font> </div></div> </div> <!----IMAGE----> <div style="width: 500px;height: 200px;background: url(IMAGE_URL);background-position:center;background-size: 100%;"></div> <!---BOTTOM BOXES---> <div style="display:inline-block;width: 105px;height: 50px;position: relative;top: -15px;background: #fff;border-radius: 10px;border: 1px solid #000;"> <div style="display:block;width: 101px;height: 46px;margin-top: 2px;background: #ded7cc;border-radius: 8px;"> <font style="font-family: monospace; color: #000; font-size: 13px;position:relative;top: 12px;">[ Video ]</font> </div></div> <div style="display:inline-block;width: 105px;height: 50px;position: relative;top: -15px;background: #fff;border-radius: 10px;border: 1px solid #000;"> <div style="display:block;width: 101px;height: 46px;margin-top: 2px;background: #ded7cc;border-radius: 8px;"> <font style="font-family: monospace; color: #000; font-size: 13px;position:relative;top: 12px;">[ Voice ]</font> </div></div> <div style="display:inline-block;width: 105px;height: 50px;position: relative;top: -15px;background: #fff;border-radius: 10px;border: 1px solid #000;"> <div style="display:block;width: 101px;height: 46px;margin-top: 2px;background: #ded7cc;border-radius: 8px;"> <font style="font-family: monospace; color: #000; font-size: 13px;position:relative;top: 12px;">[ Text ]</font> </div></div> <div style="display:inline-block;width: 105px;height: 50px;position: relative;top: -15px;background: #fff;border-radius: 10px;border: 1px solid #000;"> <div style="display:block;width: 101px;height: 46px;margin-top: 2px;background: #ded7cc;border-radius: 8px;"> <font style="font-family: monospace; color: #000; font-size: 13px;position:relative;top: 12px;">[ Action ]</font> </div></div> </div>

❖ Make sure Disable Auto-Formatting is checked when you copy/paste the code into your post. ❖ All of the text you see in the preview is the same in the code. You'll have to ctrl+f those phrases to find and change them. ❖ The little down arrow in the top box is the credit link. Please don't remove it. If you do for whatever reason, please credit me elsewhere. Ctrl+F & Replace: ❖ IMAGE_URL - url of your image #000 outer border of blocks, all text #fff inner border of blocks #ded7cc background of blocks