Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › showing a Div in the home page only ?

  • This topic is empty.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • June 9, 2013 at 8:40 am #45403
    Historical Forums User
    Participant

    hello everyone ..

    i’am trying to type a code that let me show a div only in the main page (index) , so if any visitors visits a second page .. the div will disappear.

    BTW i’am doing this on tumblr , so i guess there is an easy way to do it with some {block:thingy} code ?

    June 9, 2013 at 9:18 am #138128
    Jozsef K.
    Participant

    HTML: <body id=”home”>

    CSS: #home .yourdiv {display:none}

    June 9, 2013 at 9:23 am #138131
    Senff
    Participant

    The body on the home page already has a class “home” by default.

    [EDIT: not true — see below.]

    So you could simply do this in your CSS:

    .somediv {display:none;}
    body.home .somediv {display:block;}

    June 9, 2013 at 9:32 am #138133
    Historical Forums User
    Participant

    unfortunately tumblr is using one templates , not a several pages .. so i can’t use this way because the body class will be applied to all of my blog pages , that’s mean it will appear in all the pages

    June 9, 2013 at 9:44 am #138134
    Senff
    Participant

    Hmm…. I thought it was a default setting for Tumblr to add the class “home” to the main page, but I just noticed that’s not the case. I looked at some old Tumblr thing I once did and it turns out that the home class was added with some nifty jQuery.

    OK well, try this then:

    {block:IndexPage}

    This will only show on the index page.

    {/block:IndexPage}

    June 9, 2013 at 4:41 pm #138149
    Historical Forums User
    Participant

    Senff i tried this code at the first , but for some reason it didn’t do the job

    and more ideas guys :( ?

    June 9, 2013 at 9:20 pm #138173
    Senff
    Participant

    @7imaginary: strange — as it’s very basic Tumblr code. I just tried it in my very super basic theme and it does work: http://senff.tumblr.com/

    June 10, 2013 at 3:30 am #138178
    Jozsef K.
    Participant

    Maybe your div has an inline style applied to it, like style=”display:none”

    June 14, 2013 at 7:18 pm #138769
    Historical Forums User
    Participant

    any more suggestion guys ?

    June 14, 2013 at 8:45 pm #138775
    Historical Forums User
    Participant

    i finally found the answer while searching :

    #box{
    display:none;
    }

    .page1 #box{
    display:block;
    }

    Only displayed in first page.

    {CurrentPage} is a tumblr variable that’s hold the page number

    thank all of you guys for helping me :)

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The forum ‘CSS’ is closed to new topics and replies.