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.

Horizontal Scrolling Tumblr Theme

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

Sign up for the monthly newsletter.

Written by John Surdakowski

John Surdakowski is a web designer and developer currently living in New York. He loves experimenting with new styles and techniques both in web and mobile. John has a Twitter account where he posts random things. You should follow him. @avexdesign - Also, check out John on Instagram and Google+

3 Responses

  • Usman Shoukat

    Great work John :)

    • avexdesigns

      Thanks!

  • Vero Nica

    hello! thanks for your work! but where do i have to put that html-text? after which tag? i don´t have so much experience with this.. thank you very much!