发表新帖
发表新帖

displaying a div only on tumblr blog homepage?

前端 未结
关注
9 1935
陌清茗
陌清茗 2020-12-24 11:17

I have a fairly novice understanding of CSS and HTML, and I\'m trying to do something that I think should be relatively simple (in a custom tumblr theme I\'m creating), but

相关标签:
9条回答
  • 心在旅途
    2020-12-24 11:39

    I ended up killing off the {Block:IndexPage} tag altogether and changing the original div callout to this:

    <div id="splashbox" class="mid2" style="display:none">

    Followed by this script:

    <script type="text/javascript">
window.onload=showsplashbox();
function showsplashbox() {
   //alert('location identified as ' + location.href);
   if (location.href == 'http://site.tumblr.com/' || location.href == 'http://site.tumblr.com') {
           //alert('location match, show the block');
           document.getElementById('splashbox').style.display='block';
   }
}
</script>
    0 讨论(0)
  • -上瘾入骨i
    2020-12-24 11:43

    This will work:

    {block:IndexPage}
  <div id="index"
    {block:SearchPage}style="display: none;"{/block:SearchPage}
    {block:TagPage}style="display: none;"{/block:TagPage}>
    This is displayed only on the index page.
  </div>
{/block:IndexPage}

    More info: http://ejdraper.com/post/280968117/advanced-tumblr-customization

    0 讨论(0)
  • 伪装坚强ぢ
    2020-12-24 11:54

    You can also do it just with CSS.

    #box{
  display:none;
}

.page1 #box{
  display:block;
}

    <body class="page{CurrentPage}">
  <div id="box">
    Only displayed in first page.
  </div>
</body>
    0 讨论(0)
  • 情深已故
    2020-12-24 11:56

    display:none will hide it but thats, a hidden element can still mess with your layout.

    We could use the comment code* to turn the div into a comment that wont mess with anything.

    *<!-- comment -->

    ex.

    {block:IndexPage}
{block:SearchPage}<!--{/block:SearchPage}
{block:TagPage}<!--{/block:TagPage}


<div style="width:400px; heigth:200px">
blah blah
</div>   



{block:SearchPage}-->{/block:SearchPage}
{block:TagPage}-->{/block:TagPage}
{/block:IndexPage}
    0 讨论(0)
  • 借酒劲吻你
    2020-12-24 11:57

    I was was looking to show code on post pages, but not on the index, search, etc page (i.e. pages with multiple posts. Thanks to the above, I figured out how to do it and wanted to share in case it helps somebody else.

    <div id="splashbox" style="display:none">
      This is the content I wanted to show on the post pages only.
</div>

<script type="text/javascript">
window.onload=showsplashbox();
function showsplashbox() {
   //alert('location identified as ' + location.href);
   if (self.location.href.indexOf("post") > -1 )  {
           document.getElementById('splashbox').style.display='block';
   }
}
</script>
    0 讨论(0)
  • 孤独总比滥情好
    2020-12-24 11:57

    This is solved by using div:not() operator.

    The HTML Markup will be

    {block:IndexPage}
<div id="banner">
   <div class="banner_{CurrentPage}">
      This Content will appear in only on home page
   </div>
</div>
{/block:IndexPage}

    Now add this CSS to 

    #banner div:not(.banner_1)
{
   display:none;
}
{block:SearchPage}
    #banner
    {
       display:none;
    }
{/block:SearchPage}
{block:TagPage}
    #banner
    {
       display:none;
    }
{/block:TagPage}

    The background: {CurrentPage} is a Tumblr theme variable which returns the page number of index pages (like 1, 2, 3, ...). Thus the home of any Tumblr blog is page number "1". Now I have defined the class of a div with this page number concatenated with a string "banner_" (Class can not be numeric. WTF why?) - making the class name "banner_1" on homepage. Next, in CSS, I have added display:none property to :not selector of that banner_1 class div. Thus excluding div with banner_1 class, all other div in under #banner div will disappear. Additionally, div with id #banner is hidden in search and tag pages.

    Note: <div id="#banner" > is required. Without this, :not will hide all divs in the html.

    Warning: IE users (is there anyone left?) need to change their habit. This is only supported in FF, Chrome, Safari and Opera.

    I have implemented this in http://theteazone.tumblr.com/ The Big Banner (Tea is a culture) is absent in http://theteazone.tumblr.com/page/2

    0 讨论(0)
 看不清?
提交回复
热议问题