displaying a div only on tumblr blog homepage?

Question

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

Answer 1

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

The HTML Markup will be

{block:IndexPage}

   

      This Content will appear in only on home page
   

{/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:

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)

查看其它9个回答

发布评论:

提交评论

---

•  加载中...