Search code examples
csshtmlhideconditional-statementstumblr

Hide div conditionally with only CSS?

I currently use Javascript to hide my social media buttons on the main page of my Tumblr site. It's programmed to hide them only on the main page based on the url in the browser, not on any other pages.

However, I'm curious as to if there's a way to do this with just CSS (or even CSS3), similar to how media screen can make conditions for divs based on browser size. I know you can have more conditions with PHP, but Tumblr won't allow it.

Solution

  • You should be utilizing {block:PermalinkPage} and {block:IndexPage}.

    {block:PermalinkPage}
<div class="icons">
    <p>This will only appear on permalink pages.</p>
</div>
{block:PermalinkPage}

    You can go a step further by wrapping it in {block:Date} if you only want it to appear on posts and not pages.