Docs

[Christian]

You’re welcome. Glad we could help. 🙂

[michaellanfield]

Thank you for this code. For me this works even better. Instead of 70 I put 66

jQuery(document).ready(function($) {
  var $main = $('.x-main'),
      $windowHeight = $(window).outerHeight(),
      $masthead = $('.masthead').outerHeight(),
      $wpbar = $('#wpadminbar').outerHeight(),
      $footer = $('.x-colophon.bottom').outerHeight() + $('.x-colophon.top').outerHeight();
 
  $main.css('min-height', $windowHeight - $masthead - $wpbar - $footer - 66);
});

[michaellanfield]

Even though it worked for my home (main) page, it does not work for all pages. How to get it to work on all pages? I use renew.

[Jade]

Hi Michael,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[michaellanfield]

This reply has been marked as private.

[Christian]

I’ve checked your other pages and the code works. Can you give us the URL of the pages where the code doesn’t work?

Thanks.

[michaellanfield]

Yes now works, there are a few things I need to fix. All other pages the footer menu is behind the main page text and also the opacity of the footer on other pages is not same transparent as main page.

[Lely]

Hi Michael.

On other pages, the following CSS will not work:

.x-colophon.bottom {
    line-height: 0.5;
    background-color: rgba(255,255,255,0.2);
}

It’s because either those other pages have white background or there are content in white. So your footer color is white and it’s background is almost transparent. It is not visible. We have to use a more darker background.
Please update above CSS to this:

.x-colophon.bottom {
    line-height: 0.5;
    .x-colophon.bottom {
    line-height: 0.5;
    background-color: rgba(21, 179, 219, .7);/*Change this to your preferred background color*/
}
.home .x-colophon.bottom {
    line-height: 0.5;
    background-color: rgba(255,255,255,0.2); 
}

Above CSS will change footer transparent background color of other pages.

Hope this helps.

[michaellanfield]

I don’t know totally screwed up the main page footer. I set it back to previous.

[Lely]

Hi There,

Please use the following instead. I have some syntax error above.

.x-colophon.bottom {
    line-height: 0.5;
    background-color: rgba(21, 179, 219, .7);/*Change this to your preferred background color*/
}
.home .x-colophon.bottom {
    line-height: 0.5;
    background-color: rgba(255,255,255,0.2); 
}

Sorry for the inconvenience.

[michaellanfield]

Okay it didn’t screw up this time, but the others pages footer are not transparent.

[Lely]

Hi Michael,

Upon checking, this is what you’ve added:

.x-colophon.bottom {
    line-height: 0.5;
    background-color: rgba(255,255,255,0.2); 
}

.home .x-colophon.bottom {
    line-height: 0.5;
    background-color: rgba(255,255,255,0.2); 
}

The background color is the same on both compare to what I have on the previous reply. Keeping it the same will not change anything on other pages.
If you’ve use this line CSS:

.x-colophon.bottom {
    line-height: 0.5;
    background-color: rgba(21, 179, 219, .7);/*Change this to your preferred background color*/
}

The result will be like this:

Unlike the main page, it is not advisable to make it transparent because on other pages there’s content behind the footer.

Hope this helps.

[michaellanfield]

I understand, I did it exactly like you mentioned above. I would like the footer menu to be transparent on all pages.

.x-colophon.bottom {
line-height: 0.5;
background-color: rgba(255,255,255,0.2);
}

.home .x-colophon.bottom {
line-height: 0.5;
background-color: rgba(255,255,255,0.2);
}

So I added the above code, but only the main page footer menu is transparent, not the other pages.
I am confused.

[Paul R]

Hi,

You can add this under Custom > CSS in the Customizer.

footer.x-colophon.bottom {
     background-color: transparent !important;
}

Hope that helps.

[michaellanfield]

🙂 yes it did. Thank you

[Author]

Posts