CODEWITHSUNDEEP
csshtmlnavigationthemestumblr
Jack Reid
Jack Reid

Reputation: 87

How to hide a <div> on non-permalink pages on Tumblr

I have a navigational which sits in the right margin of the page, and is basically just a series of anchor links that scroll with the 'fixed' property. This works fine inside the permalink page of the post, but still appears under the section pages, which are just /tagged/x pages.

Here's an example of the code which is inside the post html:

<div class="contents">
<p align="center"><strong>NAVIGATE</strong></p>
<a href="#intro">Introduction</a><br>
<a href="#jcole">J Cole</a><br>
<a href="#cudi">Kanye & Kid Cudi</a><br>
<a href="#joeyb">Joey Bada$$</a><br>
<a href="#mchg">Magna Carta Holy Grail</a><br>
<a href="#out1">Other News</a><br>
<a href="#out2">Other Highs</a> </div>

Then the div is styled as such in the theme code:

.contents{
position:fixed;
width: 220px;
top:300px;
right: 20px;
font-size: 16px;
color: white;
line-height: 20px;
text-align: right;
background: black;}

How do I get the to appear only on permalink pages?

Thanks, Jack.

Upvotes: 0

Views: 1623

Answers (1)

graygilmore
graygilmore

Reputation: 1768

Do get code to only appear on post permalinks you need to include a combination of blocks.

{block:PermalinkPage}{block:Date}
    <!-- code placed in here will *only* render on post permalinks -->
{/block:Date}{/block:PermalinkPage}

The PermalinkPage block is pretty self explanatory. The trick here is using the Date block. Pages, you see, don't have dates assigned to them, they are just static content. Only post permalinks have a date assigned to them so you can use it to help filter your conditionals.

Update

If this content is being entered individually on each post you'll need to go a slightly different route. In the <head> of your theme file you should be able to do this:

<style type="text/css">
    {block:PermalinkPage}{block:Date}
    .contents { display: block; }
    {/block:Date}{/block:PermalinkPage}
</style>

Then in your original styles for the .contents block, just make sure to make it be display: none;.

Now it will only be display block on post permalinks.

Upvotes: 1

Related Questions