Removing Footer From every page

Perfect, thank you!! Is there a limit to how many questions I can ask you? I don’t want to take up all your time!

Haha, no, no limit. Your questions are fairly easy to answer.

Oh good, thank you so much! A couple things. I am wanting to make the button on my IG section with a black background and the centered on the instagram section. It’s kinda odd because there is no widget in this theme for IG so I have no way to customize it.

Also. I am using a short code to add specific episodes to my “featured page” and I want to change the font and the size of it. Again I asked the editor but he didn’t provide any help.. I think that’s all for now.

Thanks so much

Instagram black button with white text, centered both horizontally & vertically:

.home #content > .container:nth-child(2) .button {
   margin-right: 0;
   background-color: black;
   color: white;
}
.home #content > .container:nth-child(2) .pagination {
   margin-bottom: 1.65rem;
}

Episode titles on Featured Episodes page:

.page-id-2039 .podcast-episode h2 {
   font-size: 2.4rem;
   font-family: Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;
   color: #262626;
}

The values listed are what are currently in effect. A font-size of 2.4rem means 2.4 times whatever the default font size is, so changing it to 1.0 would mean change it to the same size as the default. Try something around 1.5rem.

If you want to change the font-family, pick something that is web safe, unless you want to install something like a Google font.

The color property is the font color.

Thank you! The CSS rule for the IG Was perfect but I think I didn’t say the right place, there is some text that says “latest from instagram” can I use that same code to center and black background that?

Also that font and size for the featured episode worked perfectly. Thank you! Is there a way to add to that code to make it have a background. Maybe not a background but a color box? At least around the media bar? If not, no worries.

Thanks again

I am also trying to hide the featured image from sepcific pages and used this css code, .page-id-38 .post-thumbnail, .page-id-41 .post-thumbnail, .page-id-10 .post-thumbnail {
display: none;
} which didn’t seem to work. I also wanted to center the page title and change that font and size but the google fonts plugin didn’t work to change that. I also tried CSS For that as well.. I guess I’m not too good at this stuff. Any advice?

• This reply was modified 5 years, 8 months ago by signedsilverlining.

Center the “Latest from Instagram” title, with black background & white text:

.home #content > .container:nth-child(2) .latest-images h3 {
   background-color: black;
   display: table;
   margin: 0 auto;
   padding: 15px 25px;
   font-size: 1.5rem;
   border-bottom: none;
}
.home #content > .container:nth-child(2) .latest-images h3,
.home #content > .container:nth-child(2) .latest-images h3 em {
   color: white;
}

Put a border around the Featured Episode, with colored background:

.podcast-episode {
   border: 1px solid #333;
   padding: 25px;
   border-radius: 5px;
   background-color: #ddd;
}

The #ddd is a light gray; change to whatever color you’d like.

If you just want to put a border around the media player instead:

.podcast-episode .podcast-episode-player {
   border: 1px solid #000;
   padding: 5px;
   border-radius: 5px;
   height: 50px;
   margin-bottom: 0;
}

I am also trying to hide the featured image from sepcific pages and used this css code, .page-id-38 .post-thumbnail, .page-id-41 .post-thumbnail, .page-id-10 .post-thumbnail {
display: none;
} which didn’t seem to work. I also wanted to center the page title and change that font and size but the google fonts plugin didn’t work to change that. I also tried CSS For that as well.. I guess I’m not too good at this stuff. Any advice?

Can you post a link to one of those pages? I couldn’t find any of them on the site.

The best way to work with CSS is to learn how to use the browser’s Inspector. On Chrome, it’s called DevTools. The inspector allows you to see what CSS rules are in effect for a particular element, so you can write your own rules which override them.

Hi! Those all worked like a charm, thank you. Is there a way to make the grey box around the featured episode only appear on the “featured episode” page, not the home page? I will look into that DevTools and see if I can do the rest of this by myself. The link for the pages with featured images are here
https://www.saltandpepperpod.signedsilverlining.com/featured-episode/
https://www.saltandpepperpod.signedsilverlining.com/subscribe/

And a couple more pages. The header image that appears full width at the top. I want to remove it on some pages but also have the image not have an overlay. I looked through the Style sheet on the editor but couldn’t find where the opacity is set for those.

Is there a way to remove that image along with the title on certain pages and change the background on others? I hope that makes sense.

Thank you!

Is there a way to make the grey box around the featured episode only appear on the “featured episode” page, not the home page?

Oops, yes, just add .page-id-2039 to the front of the CSS selector and it will only be active for that page.

OK, I think I understand what you mean by featured image. It’s the background image that’s behind the page title? You can add a rule like this:

.page-id-2039 .featured-content,
.page-id-2128 .featured-content {
   background-image: none;
   background-color: rgba(26, 26, 26, 0.5);
}

The first property will remove the image, although instead of none for the background-image, you can always put in your own image.

The rgba() funciton in the second property will set the background color, including opacity (the 0.5 means 50% opacity). You can read more about that function here.

If you want to hide the section altogether (title & image):

.page-id-2128 #featured {
   display: none;
}

Perfect! Where do I add that code for the page ID? I added it in the CSS editor right before the code you gave me, but it didn’t seem to work. I think right clicked and went to inspect but I wasn’t sure where to add it.

I used that first rule to take away the background image but it still didn’t remove that black box header. So then I used the section altogether and it didn’t seem to work. I think I would like to be able to remove that black opaque rectangle at the top, I linked it below, and then hopefully be able to remove it completely on other pages.

https://www.saltandpepperpod.signedsilverlining.com/featured-episode/
You can see that I removed the image but that black bar is still there.

Thank you!!

Okay, so I have brushed up on learning this whole coding this and it’s like a whole new magical universe that I didn’t know existed! I tried out some stuff and just changed it in the CSS selector. So I have figure out how to change the color and the opacity, but not the image or simply how to remove it.

Hi there, hope you are well! I hope you were able to help me with my instagram plugin. I am using the smash balloon plugin and want to add the shortcode to my footer. I want it just on a specific page though so I was hoping there was CSS for that. I want to put it on this page as a part of the footer.
https://www.saltandpepperpod.signedsilverlining.com/contact/

Thank you!

It looks like there’s a widget area in the footer. Are you able to see it when you go to Appearance → Widgets? Hopefully, if you see a Footer area, you can drag a Text widget over there and then enter your short code into the text widget. Once you get it in there, we can take a look and see what ID to use in a CSS rule to hide it by default and display it on just the Contact page.

If you don’t see a widget area for the footer, then it becomes a bit trickier. You would have to create a child theme, then edit a copy of your footer.php file to add the shortcode to the footer.

There is a widget area there and I have added my shortcode just now! I just didn’t know how to add it to one page.
here is the link with the new widget area.
https://www.saltandpepperpod.signedsilverlining.com/contact/?preview_id=37&preview_nonce=f33b085ea6&preview=true&_thumbnail_id=2336

Thank you!

Add these two rules to your custom CSS:

#sb_instagram {
   display: none;
}
.page-id-37 #sb_instagram {
   display: block;
}

So the first rule will hide the widget by default, and the second rule will display it only on the Contact page.