Search code examples
tumblr

Different style per tagged page on Tumblr

I'm trying to change the style of a tagged page on Tumblr (as in the page that collects all the specific tags - for example). At the moment all the tagged pages look the same. This is the code I've used -

{block:TagPage}
<div id="sp">
<div class="container">
<div class="row">
<h1 class="main-logo"><a href="/">
<img src="http://static.tumblr.com/bw1wxme/p5cn7shd5/logo_web.png" alt="" />
</a></h1>
</div><!-- row -->
</div><!-- /container -->
</div><!-- /portrwrap -->
{/block:TagPage}

Working example

I'm trying to use a different background for a certain tagged page. For example, when you visit the /tagged/shows page, it has a different background to the /tagged/news page.

Unlike Wordpress, I've been unable to find a page ID. I looked into this but that only changes the style of the post, not the tagged page.

Solution

  • You could set an '#id' on the body element, based on the current tag:

    <body {block:TagPage}id="{URLSafeTag}"{/block:TagPage} />
...
</body>

    When you visit a tagged page, tagged/news/ the HTML will render like so: 

    <body id="news" />
...
</body>

    That way you can change all elements on the page, such as the navigation.

    #news #nav {
   background-color: red;
}

    Hope that helps!

    Reference: https://www.tumblr.com/docs/en/custom_themes#tag-pages