Coraline header and featured photo question

Sorry, I provided the wrong link: https://driftlessprairies.org/?page_id=1961

Hi there, something like this should work – you may need to add !important before the semi-colon to make sure it takes effect, because of the way CSS inheritance works.

#branding img {
    height: 400px !important;
}

Put this into your Jetpack CSS Editor – as I suggested yesterday – under Appearance. Keep in mind that you’ll need to upload new images at 400px high for this to work, otherwise your existing images will look stretched.

Let me know how it goes!

p.s. I answered your italics question in your other thread.

Thanks. I’ll have some time to work on this tomorrow. I’m a bit nervous about working in CSS as it will be my first time! Is this something that I will pick up as I go along or are they books that explain it clearly and in a way I could teach myself?

CSS is such an amazing thing – personally, I find it exciting to see how CSS can change a site to look exactly how you want it to! The great thing about using the Jetpack CSS editor is if something doesn’t look right, all you have to do is remove the CSS from the editor and your site will be back to how it was before you made the change.

There are lots of good CSS resources out there – I list a bunch of them here toward the bottom: https://zoonini.wordpress.com/

Here are a few more helpful articles:

https://dailypost.wordpress.com/2013/07/25/css-selectors/

https://dailypost.wordpress.com/2013/06/21/css-intro/

https://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

Good luck, and have fun with it!

Thanks for all the help!! I’m working on this today!

Bummer. I resized the feature image and added it back but it isn’t showing up. I copied and pasted the code you suggested above into the CSS editor of Jetpack. I got a warning signal that stated “Be careful when using !important declarations”

Here’s the page that it’s not showing up on — https://driftlessprairies.org/?page_id=1961

You’ll notice that I was able to change the header font — at least I hope that shows up for you. Next step will be to change the size. Now, I’m struggling to figure out how to change the title font. I’m working thru the links you gave to me. I’m hopeful I’ll figure this out before the weekend’s over!!!

Thanks so much for your help, for the links, and the suggestions of the CSS edit in Jetpack!

Hi there, I’m seeing a larger feature image on the link you gave above. This is what I see:

Do you see something different? Have you tried refreshing your page and clearing your browser’s cache?

https://en.support.wordpress.com/browser-issues/

Nice heading – Share Tech is a cool font!

The picture is larger because this is the header image. I haven’t been successful in getting the feature image changed. I’m still working on it though. What I want is to have a moth pic on the moth pages, a butterfly on the butterfly pages, etc.

Thanks for your comment on the heading font. I do like Share Tech. I made Arial Narrow the 2nd option.

I realize this will take longer than this weekend for me to accomplish!!! Thanks a bunch for your help.

I may be misunderstanding what you’re after, but the way Coraline works is it takes the featured image you’ve uploaded to a post, and if it meets certain size requirements, it uses that featured image as the header image on the post.

So if you want an image of a moth on this page in addition to the current header photo, you can just add it in the body of the post by clicking the Add Media button.

I’m wanting the moth to be the featured image, replacing the header. And I want to do this on a variety of pages.

OK, gotcha. You should be able to do that by uploading the moth image as the featured image on that page. It’ll need to be at least 990 pixels wide, and 400px high if you’ve made that CSS tweak earlier.

If you’re still having trouble, let me know.