Disable footer for certain pages with css? Possible?

DSX

I am using the basic pages plugin, and have kinda had to rebuild it to get it to do what i need (not because it isn't a fantastic bit of coding, kudos to the dev.)

anyways could you take a quick look at this css? the app has its own css so i was hoping to only disable the footer on the pages only using basicpages.

so far...

#PageTitle {
    display:none;
}

body.PageMobile .PageContent {
    margin: 0 10px 10px 10px;
}

body.PageMobile #PageBody a {
    word-wrap: break-word;
}

    .Breadcrumbs {
        display: none;
    }

html, body {
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
                background-color: white;
            }
            #container {
                width: inherit;
                height: inherit;
                margin: 0;
                padding: 0;
                background-color: white;
            }
            h1 {
                margin: 0;
                padding: 0;
            }

any clue why i can't get .footer {display: none;}to work the same as i was able to disable the breadcrumbs only for these pages?

vrijvlinder

Have you tried this? I mean use a web inspector do not guess. To specify a page you add the body.class ....

body.PageMobile footer {
display: none!important;
}

R_J

@DSX said:
any clue why

Last year I've learned about "CSS specificity" (and today I learned it's not "specifity" but "specificity"), which is the reason why your css rule didn't work: http://css-tricks.com/specifics-on-css-specificity/

Before that I always thought that the last rule always wins - and sometimes was angry because it didn't work.

Best way is to look at your browsers developer tools which can show you what rule is responsible for the css part you want to change. Copy that exact selector in order not to raise specificity, and because you'll then have a selector with the samt prio, but only later in the code, your rule will be taken to style the element.

DSX

@vrijvlinder said:
Have you tried this? I mean use a web inspector do not guess. To specify a page you add the body.class ....

body.PageMobile footer {
display: none!important;
}

yes, my apologies for not writing it correctly. as we are discussing i could not get it to work

DSX

@R_J said:
Best way is to look at your browsers developer tools which can show you what rule is responsible for the css part you want to change. Copy that exact selector in order not to raise specificity, and because you'll then have a selector with the samt prio, but only later in the code, your rule will be taken to style the element.

insightful man thanks, i am having difficulty because i have my site pulling on two different bootstrap themes for content. Unfortunately since i didn't write the themes they have the same tags which i am editing.

Was able to get it to work. Thank you for your suggestions.