Making Tumblr theme chats look like phone messages

Don’t be complacent with those boring line-by-line chats for your Tumblr theme!

In this tutorial, we’ll transform list-like chat logs into beautiful phone message-style chats that place the users on different sides of the screen.

For the HTML, your theme should already include code for chat posts - we’ll just use a simple template for the chat posts in this tutorial.

The most important part of the code, however, is that you include a class with the Tumblr theme variable of {Alt} for each of the lines, as below. {Alt} is used to add a class of “odd” or “even”, depending if the line number is odd/even.

{block:Posts}
{block:Chat}
<div class="chat">
    <ul>
        {block:Lines}<li class="{Alt}">{block:Label} {Label} {/block:Label}{Line}</li>{/block:Lines}
	</ul>
</div>
{/block:Chat}
{/block:Posts}

Let’s get started with a reset to get rid of the default list styling present in most browsers.

.chat ul {
    list-style: none;
	margin: 0;
	padding: 0;
}

Each line of the dialogue has common styles: a slight rounded border, margin to separate the lines plus padding and a set width (so each line doesn’t take up the entire post space). A glossy button-like look is given with the box-shadow set to inset.

.chat li {
    border-radius: 0.2em;
	border: 1px solid rgba(0, 0, 0, 0.05);
	box-shadow: 1px 1px 1px rgb(255, 255, 255) inset;
	margin-bottom: 2%;
	padding: 2%;
	width: 50%;
}

Finally we’re making use of the {Alt} variable I mentioned before. The odd numbered chat items are set the left, whilst the even numbered chat items are set the right.

A different color can also be set to each using the {Alt} CSS classes.

.chat .odd {
    float: left;
	background: rgb(236, 236, 236);
}
.chat .even {
	float: right;
	background: rgb(166, 230, 255);
}