Perfect! So if I want to add it to another page, I just add that latter rule with a different page id?
Just add another selector to the same rule. If you wanted to make it also display on the Subscribe page, for example, you’d modify that second rule to look like this:
.page-id-37 #sb_instagram,
.page-id-2128 #sb_instagram {
display: block;
}
The first selector is for the Contact page, the second is for the Subscribe page, with each selector being separated by a comma.
Okay perfect, thank you! I was hoping maybe you could refer me to a podcast player that can be played at the top of every page but the home page (added to the header and was able to scroll with the page? I have seen other sites with it but am not sure if I needed to code it into the theme. I figured you would know the best direction for this!
Thanks!
I don’t know of any audio player that you’d be able to insert into the header. I think you’d have to create a child theme as I mentioned in an earlier post and add the code for an audio player in the header.php file.
Hi! Please let me know if you want me to start a different convo on the forum so someone else can help me haha. I was doing research and couldn’t find it but I was wondering if there was a way to hide the h3 title on a specific page? I want to remove the “don’t miss our weekly episodes, subscribe now” on just this page
http://www.saltandpepperpod.signedsilverlining.com/contact/
But when I went to inspect and checked out the CSS for it, but don’t seem to know how to just “delete” on a specific page?
Thank you!
If you look for the <body> tag at the top of each page, you’ll see the page ID class. For example, on the Contact page, the class is page-id-37, so you can use that class to write rules that only affect that page:
.page-id-37 h3 {
display: none;
}
You want to do a search either in the inspector or in the view source to make sure that there are no other <h3> tags on that page that you might inadvertently hide. If there does happen to be more than one, then you would add another qualifier to make sure the right one gets hidden. For example, the <h3> tag that you wanted hidden is in the footer, so you could change the rule to this to make sure that only the <h3> tag in the footer is hidden:
.page-id-37 #footer h3 {
display: none;
}
Or, because you can see that the <h3> element has a class called widget-title assigned to it, you could also make the selector like this:
.page-id-37 h3.widget-title {
display: none;
}
Hi thank you very much. That worked perfectly! I had one more question for you. On my “about us” page there is an image embedded into the background that scrolls with the page. I have figured out how to change the image with HTML but there is no where in the CSS or HTML that defines the height of the photo. I want it smaller. IS there a way to do this?
Here is a link. It is the glitter background.
http://www.saltandpepperpod.signedsilverlining.com/about/
Thank you!
You’re welcome.
Add this rule:
.page-id-36 .wp-block-cover {
min-height: 430px;
}
The 430px is the current height, so just adjust it to fit your needs.
You can also add one or more media queries after that rule so that you can make that height even smaller on a cell phone. That way, the gap won’t appear so large.
@media (max-width: 767px) {
.page-id-36 .wp-block-cover {
min-height: 130px;
}
}
Awesome, thank you so much! In the future if I can’t find something in the Inspect/element, where would I find the code?
It would be really hard to track something without the inspector because there could be many different files to examine, depending upon whether the rule pertained to something in the theme or in a plugin. Most themes will have a style.css file where most of the rules will be found, but they can also have additional stylesheets as well. One thing you can do is a view source on the page and look for any file with a .css extension, but then you’d have to manually scan through the file and see if you can pick out the rule which pertains to the element that you’re concerned about.
In the inspector, if you don’t seem to be able to find the exact rule right away, scroll the right pane down and you may see other rules which are pertinent. You can also try inspecting either a child or parent element of the one you’re looking at.
Hello! Me again. I am almost done with my other site but I was hoping you could help me with something I couldn’t find in the inspector. On my contact page https://www.oliviacorin.com/wp-admin/customize.php?url=https%3A%2F%2Fwww.oliviacorin.com%2F
I have the H1 heading that says “contact me” and then an h4 heading that says “by olivia corin”. I want to make the h1 heading bigger but I can’t figure out how to make it bigger than 36px. I was also wanting to make it a little bit more opaque. Can you help me with that?
Thank you!
When I look at the source code for that heading, I see this:
<h1><span style="font-size: 36pt;">Contact Me</span></h1>
The <span> tag has what’s known as an inline style that defines the font size for whatever is inside the tag. So there are a few things you can do:
- Go and edit the page, and change the font size in the <span> tag to the size that you want.
- Inline styles, as a rule, should be avoided, mostly because, as you’ve seen, it is very difficult to change by adding a CSS rule to a style sheet. So another option is to go and edit the page and remove the <span> and </span> tags, and then you’ll be able to add a CSS rule that alters the font size.
- What makes the inline style difficult to change with a CSS rule (though not impossible) is that inline styles have the highest specificity. Specificity is what determines which rules take precedence over another. You can read more about it here. But generally you can override an inline style by using the !important clause on the property you’re trying to override. For example, you can add a rule like this:
.page-id-9584 .entry-content h1 span {
font-size: 72px !important;
}
Just be judicious in how you use the !important clause. Many developers use it as a crutch because they can’t figure out the right selectors to give their rule a high enough specificity, but in general, the !important clause should only be used to override an inline style (as in this case). The problem with overusing !important is that it can lead to problems with overriding it in other CSS rules when it unintentionally affects elements that now you’re trying to change.
As far as the opacity goes, I think you just want to make the font color darker, right? The rule which sets the current color is this one:
.accent-text h1,
.front-page .accent-text h1 {
color: #bababa;
}
So you can add a rule like this:
.entry-content .accent-text h1 {
color: #333;
}
Hi there!
Thanks so much for getting back to me with such a thorough answer. After you showed me how to inspect my pages more I have been able to learn and changes things little by little. Nothing crazy, but sometimes I do run into an issue where it will change on the inspect side but not when I actually add it in the CSS customizer. With that being said, that’s good to know about the !important; rule. So thank you for that!
I had one question for you. My site speed is TERRIBLE and I was going to use a service that I pay about $150 dollars for them to speed up my site. I have used it for other sites and they are great but it got me thinking about how it would be good to know the basics of doing this myself. For maintenance and all that stuff. Anyway, do you recommend any articles, services, or anything like that that would be good for site speed? Or would it be more time efficient to just pay someone?
Thanks again for all your wisdom! It’s been extremely helpful.
Hey there, me again! on my home page https://www.oliviacorin.com/ on the first opt-in you see after the main image, has the word “subscribe” to the left. It is small and I want the text bigger. I tried to add the CSS code and even added “!imporant” to the rule but it still wouldn’t change. Could I get advice on that?
Thank you!
