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.

Showing Tumblr chat message, reminiscent to the modern styles in phone messaging apps

HTML: Chat posts with “alt”

HTML markup rendering the chat as a list

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}
CSS: Chat styling

Chat messages now with CSS for glossy and colorful effect

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);
}

I find it incredibly difficult

to take “pagan” websites seriously when they’re just full of messy flickering .gifs and clipart and are completely unreadable. 

I’m old, I’ve been on the internet since the late 90’s and I managed to evolve. It is time to let geocities go. 

Loading more posts...