Please upgrade here. These earlier versions are no longer being updated and have security issues.

Disable footer for certain pages with css? Possible?

DSXDSX New
edited May 2015 in Vanilla 2.0 - 2.8

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?

Comments

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    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_JR_J Cheerleader & Troubleshooter Munich Moderator
    edited May 2015

    @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.


    BleistivthgtonightDSX
  • @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

  • @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.

Sign In or Register to comment.