Intheworstways: I spent WAY too much time on this, and there are still some things I'd like to add, but hey I made a smartphone texting template.

Intheworstways — Tue, 21 Jun 2016 18:53:30 GMT

I spent WAY too much time on this, and there are still some things I'd like to add, but hey I made a smartphone texting template.

New page

<div style="margin: auto; padding-top: 100px; padding-bottom: 100px; padding-left: 20px; padding-right: 20px; width: 400px; border: 2px solid black; border-radius: 40px; background: #0a0809; /* Old browsers */
background: -moz-linear-gradient(45deg, #0a0809 0%, #0a0e0a 49%, #6e7774 50%, #aebcbf 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg, #0a0809 0%,#0a0e0a 49%,#6e7774 50%,#aebcbf 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg, #0a0809 0%,#0a0e0a 49%,#6e7774 50%,#aebcbf 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0a0809', endColorstr='#aebcbf',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */">
{| width="100%" style="border: 1px solid #e5e5e5; background: #e5e5e5"
| bgcolor="#e5e5e5" valign="middle" align="middle" width="16%" height="50px" colspan=2| <span style="font:20px/30px Roboto, Helvetica, sans-serif;">'''{{{Name}}}'''</span>
|-
| bgcolor="#e5e5e5" valign="top" width="16%" colspan=2 style="border: 1px solid #e5e5e5;"| <div style="height:600px;width:390px;background: #e5f2ff; border:1px solid #ccc;font:20px/30px Roboto, Helvetica, sans-serif;overflow:auto;">
{{{Chattext}}}
</div>
|-
| bgcolor="#e5e5e5" valign="middle" align="middle" width="75%" height="40px" style="border: 1px solid #e5e5e5;" style="border: 1px solid #e5e5e5;"| <p style="display:block; height: auto; border: 2px solid grey; background: white; font:20px/30px Roboto, Helvetica, sans-serif;position: relative; margin: 1px 0 1px 1px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 30px; text-align:center; padding-top: 5px; padding-bottom: 5px; padding-left: 10px; padding-right: 10px;">Text</p>
| bgcolor="#e5e5e5" valign="middle" align="middle" width="25%" height="40px" style="border: 1px solid #e5e5e5;"| <p style="display:block; height: auto; background: #9dd53a; /* Old browsers */
background: -moz-linear-gradient(top, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=0 ); /* IE6-9 */ font:20px/30px Roboto, Helvetica, sans-serif;position: relative; margin: 1px 0 1px 1px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 30px; text-align:center; padding-top: 5px; padding-bottom: 5px; padding-left: 10px; padding-right: 10px;">Send</p>
|-
|}
</div>

<noinclude>[[Category:Templates]]

Template:Phone text - Revision history

Intheworstways: I spent WAY too much time on this, and there are still some things I'd like to add, but hey I made a smartphone texting template.