Based on the example you posted, you could hide it through CSS with
.single #optin {
display: none;
}
..that’s if your site has the same classes and ID.
#optin is right for the form, but when I entered that into the custom CSS for the landing page it didn’t work.
I can send you copy of the preview page source code if that would help.
Sorry, Nate. I think I misunderstood.
The code above would work for single post pages.
The best way to find how to hide what you want to hide is to fire up your inspector and select the element. That should give you the right class for what you want to hide.
If you’re trying to hide something that has the same class/ID on multiple pages, but only want to hide it on certain pages, the easy recipe is usually to look at the differences between the body classes of the pages you want to show it on and the pages you want to hide it on.
For example, the CSS above was to really hide any block with an ID of #optin and any page that has a class of .single (in this case, one of the body’s classes).
Quick tip: The rules are “As many instances of a class as you want. Only a single instance of an ID per page.”
No need to be sorry. I am so far out in left field with this so I really appreciate the help.
I found the code for the specific page through the inspector, and its:
<div class=”entry-content”><div id=”optin”>
Now what should should I replace the .single with?
._____ #optin {
display: none;
}
Thanks for your help, I know this is pretty basic stuff.
You’ll need to replace that with the body’s class/ID. As an example, on one of my sites pages, I get this:
<body class="page page-id-9 page-template-default logged-in admin-bar no-customize-support">
So, if that was your page, you’d need to .page-id-9 out of it to make:
.page-id-9 #optin {
display: none;
}
That definitely makes sense but the code shows on top of the page. I entered it with the following body class:
<body class=”single single-landing_page postid-966 logged-in full-width-content”>
So I entered:
.postid-966 #optin {
display: none;
}
Here is the beginning code for the optin box which you already have but maybe you cn see where I’m screwing up.
<div class=”entry-content”><div id=”optin”>
If what you’ve posted is right then this will work.
.postid-966 #optin {
display: none;
}
If that isn’t working, then there’s something else going on that you haven’t told us about yet. I have looked on your home page, and I cannot see a link that goes to a page with an ID of 966, so how about you give us the actual URL of the page that you are trying to hide this on and I’ll see if I can see what you are doing wrong.
Yea, it didn’t work.
It was actually for a page that hadn’t been published and was in the process of being drafted.
I went ahead and published per your instructions so you can see what I’m doing wrong. The link is below:
http://www.nateanglin.com/fitness-for-entrepreneurs/
That’s weird.
When I go to the page and add…
.postid-966 #optin {
display: none;
}
…in my inspector. All’s well.
The problem that you have is that you didn’t add that snippet inside a <style> tag. What you’ve got now iw:
<style type="text/css" media="screen">.socialize-floating { margin-left: -105px; }</style>
.postid-966 #optin {
display: none;
}
What it needs to be is:
<style type="text/css" media="screen">.socialize-floating { margin-left: -105px; }
.postid-966 #optin {
display: none;
}</style>
You can either do it that way or add it to your style.css stylesheet (without the tags). Both ways will work. 🙂
