Horizontal Scrolling Tumblr Theme

Client Request: Create a custom horizontal scrolling tumblr theme

Our client, Campfire, hired us to create a horizontal scrolling tumblr theme for the new Cinemax TV show “Banshee.” The tumblr page would house various clips from the show as GIFs. Users can then collect and share GIFs, starting a viral buzz about Banshee.

Working with the Campfire design team, we came up with an idea for a horizontal scrolling tumblr theme. Some key elements to point out are: the sticky nav on the left side, the horizontal scrolling on post pages, vertical scrolling on permalink pages with comments / likes, and adjusting the width depending on the amount of posts.

How we solved it

All of these design requests made the project a bit tricky. I found tutorials on horizontal scrolling tumblr themes, but not with adjusting width or sticky nav. So with a combination of different tutorials around the web, Stack Overflow posts, coffee, and a little CSS tinkering, we were able to achieve all of the design asks.

We also really pushed the boundaries of tumblr, customizing different pages and posts, based on their tags and enabling vertical scrolling based on the type of page (permalinks.)

Below is a stripped down version (excluding some styling) of the CSS that was used.

html { height:100%; }

`

body {
height:100%;
min-height: 100%;
}

.post-type-one {
width:622px;
height:501px;
float:left;
display:inline-block;
}

.posts {
position:absolute;
top: 50%;
float:left;
display: inline;
margin:-250px -9999px 0 825px;
clear: both;
}

`

aside { height:100%; float:left; overflow: visible; position: fixed; top:0; bottom:0; }

Hopefully this helped you get started on your way building a horizontal scrolling tumblr theme.
Please let me know in the comments if you have any questions.
Thanks!

John