Search code examples
htmlcsstumblrtumblr-themes

Hide posts with a specific tag from the Tumblr theme's index page

I want to hide any post with a specific tag from a blog's index page.

The theme in question is Pation by Zen Themes.

<!DOCTYPE html>
<!--[if IE 8]><html class="lt-ie10 lt-ie9"> <![endif]-->
<!--[if IE 9]><html class="lt-ie10"> <![endif]-->
<!--[if gt IE 9]><!--><html><!--<![endif]-->
<head>


{MobileAppHeaders}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">

<!--

    Pation | Zen Themes

    Release Date: Dec 7th, 2016
    Last Update: Apr 23rd, 2016

-->

<title>{Title}{block:SearchPage} ({lang:Search results for SecarchQuery}){/block:SearchPage}{block:PermalinkPage}{block:PostSummary} — {PostSummary}{/block:PostSummary}{/block:PermalinkPage}</title>{block:Description}<meta name=description content="{MetaDescription}">{/block:Description}<link rel=alternate type=application/rss+xml href={RSS}><link rel="shortcut icon" href={Favicon}><link rel=apple-touch-icon-precomposed href={PortraitURL-128}>

{block:Hidden}
<meta name=image:Logo content="">
<meta name=image:Background content="">

<meta name=color:Background content=#ffffff>
<meta name=color:Title content=#111111>
<meta name=color:Text content=#555555>
<meta name=color:Accent content=#0040ff>

<meta name="if:Repeat Background Image" content=0>
<meta name="if:Stick Title" content=1>
<meta name="if:Retina Logo Image" content=1>
<meta name="if:Enable Archive Link" content=1>
<meta name="if:Enable Random Link" content=1>
<meta name="if:Enable RSS Link" content=0>
<meta name="if:Inline Social Links" content=1>
<meta name="if:Icon Social Links" content=0>
<meta name="if:Infinite Scrolling" content=1>
<meta name="if:Randomize Post Size" content=1>
<meta name="if:Photo Hover Style 1" content=1>
<meta name="if:Photo Hover Style 2" content=1>
<meta name="if:Photo Hover Style 3" content=0>
<meta name="if:2000 and Late" content=0>
<meta name=if:Ragtime content=0>
<meta name=if:Cerean content=0>
<meta name="if:TV Static" content=0>

<meta name="text:Follow Link Label" content=Follow>
<meta name="text:Ask Link Label" content=Ask>
<meta name="text:Submit Link Label" content=Submit>
<meta name="text:Archive Link Label" content=Archive>
<meta name="text:Random Link Label" content=Random>

<meta name="text:Post Width" content=240>
<meta name="text:Post Margin" content=60>
<meta name="text:Randomized Post Width Minimum" content=180>
<meta name="text:Randomized Post Width Maximum" content=270>

<meta name="text:Behance URL" content="">
<meta name="text:Dribbble URL" content="">
<meta name="text:Facebook URL" content="">
<meta name="text:Flickr URL" content="">
<meta name="text:Linkedin URL" content="">
<meta name="text:Instagram URL" content="">
<meta name="text:Pinterest URL" content="">
<meta name="text:SoundCloud URL" content="">
<meta name="text:Twitter URL" content="">
<meta name="text:Vimeo URL" content="">
<meta name="text:Youtube URL" content="">

<meta name="text:Custom Link 1" content=""/>
<meta name="text:Custom Link 1 Title" content=""/>
<meta name="text:Custom Link 2" content=""/>
<meta name="text:Custom Link 2 Title" content=""/>
<meta name="text:Custom Link 3" content=""/>
<meta name="text:Custom Link 3 Title" content=""/>
<meta name="text:Custom Link 4" content=""/>
<meta name="text:Custom Link 4 Title" content=""/>
<meta name="text:Custom Link 5" content=""/>
<meta name="text:Custom Link 5 Title" content=""/>

<meta name=select:Font content="Helvetica Neue" title="Helvetica Neue"/><meta name=select:Font content=Arial title=Arial /><meta name=select:Font content=Arimo title=Arimo /><meta name=select:Font content=Arvo title=Arvo /><meta name=select:Font content=Abel title=Abel /><meta name=select:Font content=Bitter title=Bitter /><meta name=select:Font content="courier new" title=Courier /><meta name=select:Font content=Domine title=Domine /><meta name=select:Font content="Droid Sans" title="Droid Sans"/><meta name=select:Font content="Droid Serif" title="Droid Serif"/><meta name=select:Font content=Georgia title=Georgia /><meta name=select:Font content=Helvetica title=Helvetica /><meta name=select:Font content=Karla Title=Karla /><meta name=select:Font content=Lato title=Lato /><meta name=select:Font content="Libre Baskerville" title="Libre Baskerville"/><meta name=select:Font content=Lora title=Lora /><meta name=select:Font content=Mako title=Mako /><meta name=select:Font content=Merriweather title=Merriweather /><meta name=select:Font content=Muli title=Muli /><meta name=select:Font content=Montserrat title=Montserrat /><meta name=select:Font content="Noto Sans" title="Noto Sans"/><meta name=select:Font content=Oswald title=Oswald /><meta name=select:Font content="Playfair Display" title="Playfair Display"/><meta name=select:Font content="PT Mono" title="PT Mono"/><meta name=select:Font content="PT Sans" title="PT Sans"/><meta name=select:Font content="PT Serif" title="PT Serif"/><meta name=select:Font content=Raleway title=Raleway /><meta name=select:Font content=Roboto title=Roboto /><meta name=select:Font content="Roboto Condensed" title="Roboto Condensed"/><meta name=select:Font content="Roboto Slab" title="Roboto Slab"/><meta name=select:Font content="Ropa Sans" title="Ropa Sans"/><meta name=select:Font content=Rokkitt title=Rokkitt /><meta name=select:Font content=Signika title=Signika /><meta name=select:Font content="Source Sans Pro" title="Source Sans Pro"/><meta name=select:Font content="Times New Roman" title="Times New Roman"/><meta name=select:Font content=Questrial title=Questrial />
{/block:Hidden}

<link rel=stylesheet href="http://fonts.googleapis.com/css?family={select:Font}:400,400italic,700,700italic"><link rel=stylesheet href=http://static.tumblr.com/j6tha7z/rrQohtn99/s.css><style>body{font:13px/1.8em "{select:Font}",Helvetica,sans-serif;color:{color:Text};background:{color:background} url({image:Background}){block:ifrepeatbackgroundimage} repeat fixed;{/block:ifrepeatbackgroundimage}{block:ifnotrepeatbackgroundimage}no-repeat center fixed;background-size:cover;-webkit-background-size:cover{/block:ifnotrepeatbackgroundimage}}h1,h2,h3,h4,h5,h6{font:700 13px/1.5em "{select:Font}",Helvetica,sans-serif;color:{color:Title}}a{color:{color:accent}}#title a{color:{color:Title}}#links.responsive ul{background:{color:Title}}#links.responsive ul li a{color:{color:background}!important}.action a{font-family:"{select:Font}",Helvetica Neue,Helvetica,sans-serif;color:{color:title}}.action a:hover{border-bottom:2px solid{color:Title}}#links #social{display:none;{block:ifBehanceURL}display:inline-block;{/block:ifBehanceURL}{block:ifDribbbleURL}display:inline-block;{/block:ifDribbbleURL}{block:ifFacebookURL}display:inline-block;{/block:ifFacebookURL}{block:ifFlickrURL}display:inline-block;{/block:ifFlickrURL}{block:ifLinkedinURL}display:inline-block;{/block:ifLinkedinURL}{block:ifInstagramURL}display:inline-block;{/block:ifInstagramURL}{block:ifPinterestURL}display:inline-block;{/block:ifPinterestURL}{block:ifSoundCloudURL}display:inline-block;{/block:ifSoundCloudURL}{block:ifTwitterURL}display:inline-block;{/block:ifTwitterURL}{block:ifVimeoURL}display:inline-block;{/block:ifVimeoURL}{block:ifYoutubeURL}display:inline-block;{/block:ifYoutubeURL}}#links #social li a{color:rgba({RGBcolor:Title},.6)}#links #social li a:hover{border-bottom:2px solid rgba({RGBcolor:Title},.4)}#social.icon-social-links li a{color:{color:Title}!important}#pagination a{color:{color:Title}}.hover-1 .ot a,.hover-2 .ot a,.hover-3 a{font:700 20px/1em "{select:Font}",Helvetica,sans-serif;color:{color:accent}}#loading-status,#loading-status a{font-family:"{select:Font}",Helvetica Neue,Helvetica,sans-serif;color:{color:title}}.two-late .X.format-photo:after{box-shadow:inset 0 0 9px 9px{color:background}}.text h2 a{color:{color:title}}.text-hover a{font:700 15px/1em "{select:Font}",Helvetica,sans-serif;color:{color:accent}}.text blockquote{border-left:2px solid{color:text}}.text .asker a{font:700 8px/1.5em "{select:Font}",Helvetica,sans-serif;color:{color:title}}h1.fixed a,#links ul li a{font-family:"{select:Font}",Helvetica Neue,Helvetica,sans-serif}#controls a,#post-action>a,#post-action #note-counts,ol.notes li.note.more_notes_link_container,ol.notes li.note.more_notes_link_container a{font-family:"{select:Font}",Helvetica Neue,Helvetica,sans-serif;color:{color:title}}ol.notes li.note:before{font-family:"{select:Font}",Helvetica Neue,Helvetica,sans-serif}#ajax-load #ajax-overlay{background:{color:background}}{CustomCSS}


</style>
</head>

<body class="{block:IndexPage}index{/block:IndexPage}{block:PermalinkPage}permalink{/block:PermalinkPage} tumblr-default-controls{block:ifsticktitle} stick-title{/block:ifsticktitle}{block:ifretinalogoimage} retina_logo_image{/block:ifretinalogoimage}{block:if2000andlate} two-late{/block:if2000andlate}{block:indexpage}{block:ifinfinitescrolling} infinite_scrolling{/block:ifinfinitescrolling}{block:ifrandomizepostsize} randomize_post_size{/block:ifrandomizepostsize}{block:ifcerean} cerean{/block:ifcerean}{block:ifRagtime} ragtime{/block:ifRagtime}{block:iftvstatic} tv-static{/block:iftvstatic}{/block:indexpage}">

<script>var post_width=240,post_margin_bottom=60,post_margin_horizontal=post_margin_bottom/2,randomized_post_width_min=180,randomized_post_width_max=300,post_width={text:Post Width},post_margin_bottom={text:Post Margin},post_margin_horizontal=post_margin_bottom/2,randomized_post_width_min={text:Randomized Post Width Minimum},randomized_post_width_max={text:Randomized Post Width Maximum};</script>

<div id=loading-status class="fixed action"><span class=ld_index>Index</span><span class=ld_permalink><a href=http://{name}.tumblr.com>← To Homepage</a></span><span class=loading>Loading...</span><span class=the_end>You've reached the end</span></div><div id=ajax-load><div id=ajax-content></div><div id=ajax-overlay></div></div>

{block:IndexPage}{block:iflogoimage}<a id=title class="fixed logo" href=/><img src={image:Logo}></a>{/block:iflogoimage}{block:ifnotlogoimage}<h1 id=title class=fixed><a href=/>{title}</a></h1>{/block:ifnotlogoimage}<nav id=links class="fixed action{block:ifinlinesociallinks} inline-social-links{/block:ifinlinesociallinks}"><a id=navigation_slide href=#>Menu</a><ul id=navigation>{block:AskEnabled}<li><a class=ajax href=http://{name}.tumblr.com/ask title="{text:Ask Link Label}">{text:Ask Link Label}</a></li>{/block:AskEnabled}{block:SubmissionsEnabled}<li><a class=ajax href=http://{name}.tumblr.com/submit title="{text:Submit Link Label}">{text:Submit Link Label}</a></li>{/block:SubmissionsEnabled}{block:ifenablearchivelink}<li><a href=/archive title="{text:Archive Link Label}">{text:Archive Link Label}</a></li>{/block:ifenablearchivelink}{block:ifenablerandomlink}<li><a href=/random title="{text:Random Link Label}">{text:Random Link Label}</a></li>{/block:ifenablerandomlink}{block:ifenablersslink}<li><a href={RSS} title=RSS>RSS</a></li>{/block:ifenablersslink}{block:HasPages}{block:Pages}<li><a href={URL} title={Label}>{Label}</a></li>{/block:Pages}{/block:HasPages}{block:ifCustomLink1Title}<li><a href="{text:Custom Link 1}">{text:Custom Link 1 Title}</a></li>{/block:ifCustomLink1Title}{block:ifCustomLink2Title}<li><a href="{text:Custom Link 2}">{text:Custom Link 2 Title}</a></li>{/block:ifCustomLink2Title}{block:ifCustomLink3Title}<li><a href="{text:Custom Link 3}">{text:Custom Link 3 Title}</a></li>{/block:ifCustomLink3Title}{block:ifCustomLink4Title}<li><a href="{text:Custom Link 4}">{text:Custom Link 4 Title}</a></li>{/block:ifCustomLink4Title}{block:ifCustomLink5Title}<li><a href="{text:Custom Link 5}">{text:Custom Link 5 Title}</a></li>{/block:ifCustomLink5Title}

</ul><ul id=social {block:ificonsociallinks}class=icon-social-links {/block:ificonsociallinks}>{block:ifBehanceURL}<li class=behance><a href="{text:Behance URL}" title=Behance target=_blank><i class=icon-behance></i><span>Behance</span></a>{/block:ifBehanceURL}{block:ifDribbbleURL}<li class=dribbble><a href="{text:Dribbble URL}" title=Dribbble target=_blank><i class=icon-dribbble></i><span>Dribbble</span></a>{/block:ifDribbbleURL}{block:ifFacebookURL}<li class=facebook><a href="{text:Facebook URL}" title=Facebook target=_blank><i class=icon-facebook></i><span>Facebook</span></a>{/block:ifFacebookURL}{block:ifFlickrURL}<li class=flickr><a href="{text:Flickr URL}" title=Flickr target=_blank><i class=icon-flickr></i><span>Flickr</span></a>{/block:ifFlickrURL}{block:ifLinkedinURL}<li class=linkedin><a href="{text:Linkedin URL}" title=Linkedin target=_blank><i class=icon-linkedin></i><span>Linkedin</span></a>{/block:ifLinkedinURL}{block:ifInstagramURL}<li class=instagram><a href="{text:Instagram URL}" title=Instagram target=_blank><i class=icon-instagram></i><span>Instagram</span></a>{/block:ifInstagramURL}{block:ifPinterestURL}<li class=pinterest><a href="{text:Pinterest URL}" title=Pinterest target=_blank><i class=icon-pinterest></i><span>Pinterest</span></a>{/block:ifPinterestURL}{block:ifSoundCloudURL}<li class=soundcloud><a href="{text:SoundCloud URL}" title=SoundCloud target=_blank><i class=icon-soundcloud></i><span>SoundCloud</span></a>{/block:ifSoundCloudURL}{block:ifTwitterURL}<li class=twitter><a href="{text:Twitter URL}" title=Twitter target=_blank><i class=icon-twitter></i><span>Twitter</span></a>{/block:ifTwitterURL}{block:ifVimeoURL}<li class=vimeo><a href="{text:Vimeo URL}" title=Vimeo target=_blank><i class=icon-vimeo></i><span>Vimeo</span></a>{/block:ifVimeoURL}{block:ifYoutubeURL}<li class=youtube><a href="{text:Youtube URL}" title=Youtube target=_blank><i class=icon-youtube></i><span>Youtube</span></a>{/block:ifYoutubeURL}</ul></nav>{/block:IndexPage}

<div id=container>

    {block:indexpage}{block:Description}<div id=description>{Description}</div>{/block:Description}{/block:indexpage}<div id=grid>{block:Posts inlineMediaWidth="700" inlineNestedMediaWidth="700"}{block:permalinkpage}<div id=position >{/block:permalinkpage}<article id="{PostID}" class="X {block:Answer} text format-answer{/block:Answer}{block:Chat} text format-chat{/block:Chat}{block:Link} text format-link{/block:Link}{block:Text} text format-text{/block:text}{block:Quote} text format-quote{/block:Quote}{block:Photo} photo format-photo{/block:Photo}{block:Photoset} photo format-photoset{/block:Photoset}{block:Audio} media format-audio{/block:Audio}{block:Video} media format-video{/block:Video}{block:permalinkpage} pp{/block:permalinkpage}">{block:indexpage}<div class=gif></div>{/block:indexpage}
    {block:Answer}<h2 class=title><a href={permalink}>{Question}</a></h2><div class=asker><img src={AskerPortraitURL-64}>{Asker}</div><p class=answer>{answer}</p>{/block:Answer}{block:Chat}{block:Title}<h2 class=title><a href={permalink}>{Title}</a></h2>{/block:Title}<ul class=chats>{block:Lines}<li>{block:Label}<b>{Label}</b>{/block:Label}{Line}</li>{/block:Lines}</ul>{/block:Chat}{block:Link}<h2 class=title><a class=link href={URL}>{Name} →</a></h2>{block:Description}{Description}{/block:Description}{/block:Link}{block:Text}{block:Title}<h2 class=title><a href={permalink}>{Title}</a></h2>{/block:Title}{Body}{/block:Text}{block:Quote}<h2 class=title><a href={permalink}> “{Quote}”</a></h2><div class=source>— {Source}</div>{/block:Quote}
    {block:indexpage}<div class=text-hover><a href={permalink}>Permalink</a><a href={ReblogURL} target=_blank>Reblog</a></div>{/block:indexpage}

    {block:Photo}{block:indexpage}{block:ifnotphotohoverstyle3}{block:ifnotphotohoverstyle2}{block:ifphotohoverstyle1}<div class=hover-1><a href={permalink}>{Notecount}</a><a href={ReblogURL} target=_blank>Reblog</a><a href={permalink}>Posted {timeago}</a><a href={permalink}>{Month} {DayOfMonth}{DayOfMonthSuffix}, {Year}</a></div>{/block:ifphotohoverstyle1}{/block:ifnotphotohoverstyle2}{/block:ifnotphotohoverstyle3}{block:ifnotphotohoverstyle3}{block:ifphotohoverstyle2}<div class=hover-2><a href={permalink}>{MonthNumberWithZero}.{DayOfMonthWithZero}.{ShortYear}</a><span>/</span><a href={ReblogURL} target=_blank>Reblog</a><span>/</span><a href={permalink}>{NoteCount} NTS</a></div>{/block:ifphotohoverstyle2}{/block:ifnotphotohoverstyle3}{block:ifphotohoverstyle3}<div class=hover-3><a href={ReblogURL} target=_blank><i class=icon-retweet></i></a><a class=like-button>{LikeButton size="19"}<i class=icon-heart></i></a></div>{block:ifphotohoverstyle3}<a class=g href={permalink}></a><img src={PhotoURL-500} alt="{PhotoAlt}">{/block:indexpage}

    {block:PermalinkPage}{LinkOpenTag}<img src={PhotoURL-HighRes} alt="{PhotoAlt}">{LinkCloseTag}{/block:PermalinkPage}{/block:Photo}{block:Photoset}{block:indexpage}{block:Photos}<a href={permalink}><img src={PhotoURL-HighRes} alt="{PhotoAlt}"></a>{/block:Photos}{/block:indexpage}

    {block:permalinkpage}{Photoset-700}{/block:permalinkpage}{/block:Photoset}{block:Audio}{block:IndexPage}{AudioEmbed-400}{/block:IndexPage}{block:PermalinkPage}{AudioEmbed-640}{/block:PermalinkPage}{/block:Audio}
    {block:Video}{block:IndexPage}{VideoEmbed-400}{/block:IndexPage}{block:PermalinkPage}{VideoEmbed-700}{/block:PermalinkPage}{/block:Video}</article>{block:permalinkpage}</div>{/block:permalinkpage}{block:date}{block:PermalinkPage}
    <div id=post-action class=fixed>{block:Caption}<a href=# id=slide_caption>Caption</a><div id=caption class=text>{Caption}</div>{/block:Caption}{block:PostNotes}<a href=# id=slide_notes>Notes</a><div id=notes><div id="note-counts">{NoteCountWithLabel}</div>{PostNotes-64}</div>{/block:PostNotes}</div>{/block:PermalinkPage}{block:PermalinkPagination}<div id=post-navigation class="fixed action">{block:NextPost}<a href={NextPost}>← </a>{/block:NextPost}{block:PreviousPost}<a href={PreviousPost}> →</a>{/block:PreviousPost}</div>{/block:PermalinkPagination}{/block:date}{/block:Posts}</div>

{block:indexpage}<footer id=pagination>{block:ifInfiniteScrolling}{block:NextPage}<div id=infinite-next><a href={NextPage}></a></div>{/block:NextPage}{/block:ifInfiniteScrolling}{block:ifnotInfiniteScrolling}{block:Pagination}<a href=# class=prev>←</a><a href=# class=next>→</a>{block:PreviousPage}<a href={PreviousPage} class="prev exist">←</a>{/block:PreviousPage}{block:NextPage}<a href={NextPage} class="next exist">→</a>{/block:NextPage}{/block:Pagination}{/block:ifnotInfiniteScrolling}</footer>{/block:indexpage}


<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script><script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script><script src=http://static.tumblr.com/j6tha7z/Gjjo5i6mh/s.js></script>

</body>
</html>
Solution

  • Tumblr has a handy variable {TagsAsClasses}. With this you can style posts according to tags, making what you want achievable. Please note though that this only hides posts. Meaning if you have 10 posts per page, and the most recent 10 posts on your blog have the tag you want to hide posts with, no posts will show and your blog and this will interfere with infinite scroll triggering.

    So to begin with you need to add the {TagsAsClasses} variable to your post tags. 

    <article id="{PostID}" class="{block:IndexPage}{TagsAsClasses}{/block:IndexPage} X {block:Answer} text format-answer{/block:Answer}{block:Chat} text format-chat{/block:Chat}{block:Link} text format-link{/block:Link}{block:Text} text format-text{/block:text}{block:Quote} text format-quote{/block:Quote}{block:Photo} photo format-photo{/block:Photo}{block:Photoset} photo format-photoset{/block:Photoset}{block:Audio} media format-audio{/block:Audio}{block:Video} media format-video{/block:Video}{block:permalinkpage} pp{/block:permalinkpage}">

    It's wrapped in {block:IndexPage}{/block:IndexPage} so that you can still see the post on its permalink page.

    Next add the following CSS to your theme.

    {block:IndexPage}
.{block:TagPage}x{/block:TagPage}{block:SearchPage}x{/block:SearchPage}dontshow {
   display: none!important;
   margin: 0!important;
   padding: 0!important;
   width: 0!important;
   border: 0!important;
   outline: none!important;
}
{/block:IndexPage}

    Change "dontshow" with the tag you want to hide. If you don't want the posts to show in search or on tag pages, delete the tag page and search page blocks.

    Also note that using {TagsAsClasses} runs the risk that you might add a tag to a post that corresponds with a class in the theme (especially because you didn't make it yourself).