[Template] Chatter

Welcome to Chatter! Everyone knows it, whether you're an experienced tweeter or a quiet reader. The website is used to share things about your life, interests, and even the news! So don't wait any longer and create a Twitter profile so you don't get left behind.

How does it work?
You create a topic with your chatter tag as the title. For example, this could be @socialtest. Then, in the first post, you create a profile using the code below. In principle, this is quite straightforward. Images resize automatically, so as long as they are large enough, you don't need to worry about it. Congratulations! After this, you are the proud owner of your Chatter profile.

Code:

<div class="ctwm" id="twprof"><div class="ctwpheader"><img src="https://dummyimage.com/500x165/9c9c9c/fff.png&text=Header+Image"></div>
<div class="ctwpicon"><img src="https://dummyimage.com/125x125/9c9c9c/fff.png&text=Icon"></div>
<div class="ctwpright"><ctwpr>...</ctwpr><ctwprf>Follow</ctwprf></div>
<div class="ctwpmain"><nn>Twittername</nn>
<twptag>@taghere</twptag>
<ctwpbio>Bio here</ctwpbio>
<ctwpf><b>00</b> following</ctwpf> <ctwpf><b>000</b> followers</ctwpf>
</div></div>

This will end up looking like this:

Now the real work begins: you can start Chattering! You do this with the code below. Again, a very short and self-explanatory code:

Code:

<div class="ctwm"><div class="ctwml"><img src="https://dummyimage.com/125x125/9c9c9c/fff.png&text=Icon"></div><div class="ctwmr"><nn>Name here</nn> <tt>@taghere · just now</tt>
<tw>This is a chatter!</tw>
</div></div>

Which will look like this:

Is all you want a standard Chatter? Then this is where you can stop reading! From here, it gets a bit more complicated, but the codes have still remained as simple as possible. To add a link to your post, use the following code. Place this after /tw in your code:

Code:

<div class="ctwebsite"><div class="ctwebl"><img src="https://imgur.com/JxYUp3P.png"></div><div class="ctwebr"><ctu>www.websitelinkgoeshere.com</ctu>
<ctt>Website title goes here</ctt>
<ctd>Description goes here. Keep it short.</ctd></div></div>

Do you want your Chatter to be a reply to a previous Chatter? That's also possible! You place the following code after the ctwm and before the ctwml. The parts you don't want to use, such as the like or the more replies section, can be omitted as desired.

Code:

<div class="ctwreply"><like>name liked</like><div class="ctwml"><img src="https://pbs.twimg.com/profile_images/1507313436665196544/MmCm7sHA_400x400.jpg"></div><div class="ctwmr"><nn>Name here</nn> <tt>@taghere · just now</tt>
<tw>Some chatter will be going here and it could be long, it could be short, in the end it doesn't really matter. It'll just be here. Enjoy. It could be way longer than this though, but then I'll have to come up with some text because I'm too lazy to lorem my way out of this</tw></div></div><div class="ctwmorereplies">Show more replies</div>

You can also add this to your tw, but it's not required:

Code:

<twr>Replying to <b>@taghere</b></twr>

Having trouble using the code? DM Wap!