CODEWITHSUNDEEP
htmlcsstumblr
Elli OHare
Elli OHare

Reputation: 11

Style even and odd Tumblr posts

I had an idea to do a Tumblr theme where the posts are displayed differently depending on if they're even or odd. I know how to do this just straight HTML, however, I'm new to Tumblr coding. This would be what I mean:

Mockup of what I'm looking to accomplish

Any thoughts? Is this something that can be done within Tumblr's code? I know how to insert the {Block: Post} stuff, but I'm unsure how to make Tumblr split the posts as even or odd...

Upvotes: 1

Views: 234

Answers (2)

chloe784
chloe784

Reputation: 609

Tumblr has blocks specifically for odd and even posts. You can easily add relevant classes to your posts depending on if it is odd or even. For example:

<div class="post {block:Odd}odd{/block:Odd}{block:Even}even{/block:Even}">
    ...
</div>

You can also use these odd and even blocks to wrap around odd and even specific CSS.

Upvotes: 1

hesonline
hesonline

Reputation: 76

As @Rory McCrossan says, nth-child is a good way to achieve that.

tr {
  background: red;
}

tr:nth-child(odd) {
  background: blue;
}

https://jsfiddle.net/q710v9h4/

You can do nth-child(odd) or nth-child(even). Take a look here as well: http://nthmaster.com/

Upvotes: 1

Related Questions