Blogger is:
Online
Currently watching:
Chilled Chaos videos
Currently working on:
Fluffy, lame fanfics
Mood:
Sleepy (always sleepy)
Hi, you seem to have stumbled across my blog. Please, cuddle in, make yourself comfy and leaf through all the Klaine, Glee, Crisscolfer, Night Vale, and Starkid you can find. I post other things too so you should peak at my navigation for a full description. If you want a friend or need anyone to talk to, please toddle over to my ask box. *forehead kiss* have a wonderful day!
Click Me!

Making Tumblr theme chats look like phone messages

buildthemes:

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.

image

HTML: Chat posts with “alt”

Chats with robots can be very enriching

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 with glossy messages

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);
}
— Anonymous: Omnipah?

Oh my god, perfection. Pure perfection in every way. Attention all personal please go follow this blog. Please.

aniphia:

modestmgmtofficial:

wattpad fic titles are so funny i can’t breathe

15 and pregnant with Niall Horan’s child
wat

erika-youknowtheangel:

Cecil… Are you drunk again? I- Look, I’m sorry, okay?
But, for one, marrying a landscape would be a little odd, even in the terms of Night Vale, but that’s besides the point. 
Even so, it’s missing the one thing I truly care about: 
You.

send me a tumblr user’s url and I’ll tell you what I think of them

Remember when our biggest problem was that Chris wasn’t wearing the ring 24/7 on set?

I can’t with this sign because

saltandpuff:

image

BACK FOOT OPEN

RUB RUB 7 DAYS

I love how every time I share good news with my family they make me feel bad about myself. I love it.

Stop shopping at Urban Outfitters.

overtheunderpass:

honeybeeprofessor:

DOnt shop at urban outfitters 

image

they literally sold a blood-stained-looking sweatshirt with the name of a college that there was a school shooting at 

image

they sold prescription-drug related accessories trying to make it cute

image

they sold a board game entitled “gettopoly” i should not have to explain why this is bad

image

they sold a super cissexist card with the T slur on it 

image

they literally sold this shirt

PLEASE STOP SHOPPING AT URBAN OUTFITTERS

WOW, Ew

Oh there you are...
/
@LAUNTS