CSS to hide the footer on blog page?

[mkmommy]

Hello,

Could someone please let me know how to hide the footer on our blog index page? I’ve tried several things that just haven’t worked. The page ID is 78, Here is the URL.

http://www.littlesammyboy.com/videos/

I’m also wondering how we can make the menu and header the same as we have it on the other pages on the site? Right now, it extends across the page and we don’t want that. We accidentally used a full width subtheme, but now that we’ve got it tweaked to be almost how we want it, I don’t want to change subthemes and mess everything up. I’m sure there must be a way to add some custom CSS code to make the header and menu the same as our other pages.

Again, the site is http://www.littlesammyboy.com and the page where we need the header and menu changed is http://www.littlesammyboy.com/videos/

Any help would be appreciated. Thank you!

Nikki Brown

[scrambler]

First Please DO NOT Auto play a video, this is Supremely annoying and sure to kick most user out of your site immediately. My 2 cents  🙂

1- To hide the footer:

First make sure you have installed the Xtreme The support plugin as most of the options are in there.

Second make sure the blog page is not set as a default wordpress blog page as this renders all weaver options inactive on that page. Go to Settings > Reading. Front page should be set to static, but NOTHING should be selected in the post page drop down list (showing –select–)

Then go to your page editing page and select the “Hide entire Footer” option box.

2- Header on the video page.

I don’t know how much of the custom CSS comes from the sub theme and how much comes from your working around it, but you have restricted the width of the header and other areas on other pages with a set of rules like below.

.page-id-49 #wrapper{max-width: 100%;background: transparent;}
.page-id-49 #header{width:80%;margin-left:auto;margin-right:auto;}
.page-id-49 #container{width:80%;margin-left:auto;margin-right:85px;background: transparent;}
.page-id-49 #colophon{width:80%;margin-left:auto;margin-right:auto;}
.page-id-49 #content{background: transparent;}

but there is no such rule on the video page (unless you had put these rules but they were not working because of the wordpress default blog)

So the questions are:

• Did you put these rules in yourself in each page?
• If so why did not you put these in the video page (or did you but they are not working)?
• Did you choose to use width 80% instead of a max-width:xxxxpx  which would be better because right now the fact you used 80% means you are wasting 20% of the width on mobile.

This whole thing seems very convoluted, probably because you chose a subtheme with a full width design you did not want. Su theme do all their styling with existing options and custom CSS, so we can correct the subtheme without having to change to a different one.

What I am seeing is that there is a rule that sets the wrapper to a very large size (#wrapper{max-width:9999px;}) That was probably added by the sub theme, either in Main options > Fonts & Custom > Custom CSS Rule box, or in Main Options > Wrapper Area > Wrapper Area BG CSS+ box,  to make the site full width.

If you did not want the site full width, you could simply remove that rule and put the width you actually want in Main Options > Wrapping Areas > Wrapper Area > Theme width box.

Of course then you need to remove all the per page rules limiting the various areas.

Note: you have some invalid CSS in your site like

#wrapper {background-color:rgb (34, 34, 34);}

there is an invalid space after rgb that renders the rule inactive 

[mkmommy]

Thank you for the response. I’ll look at it later and get back to you with additional questions.

Nikki B.

[Author]

Posts