Support » Themes and Templates » Coraline header and featured photo question

  • Hi,
    I’m working on http://www.driftlessprairies.org and want to change the header title so that I can add italics when needed. For example, the Latin names of the insects or plants I would like to have italicized while the rest of the header not be in italics. And, if I’m not asking too many questions at one time, I would also like to change the font of the headers. You can see an example in the link below.

    Also, I would like to make the featured photo a bit “taller.” You can see a specific image by going to: http://driftlessprairies.org/wp-admin/post.php?post=1961&action=edit&message=1

    I saw a post from a year ago that said to do the following:
    #branding img {
    width:990px;
    height:400px;

    }
    Would this be the right modification for me to made? Warning — I’m not literate in CSS!

    Thanks for the help!

Viewing 11 replies - 1 through 11 (of 11 total)
  • Sorry, I provided the wrong link: http://driftlessprairies.org/?page_id=1961

    Moderator Kathryn

    (@zoonini)

    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?

    Moderator Kathryn

    (@zoonini)

    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: http://zoonini.wordpress.com/

    Here are a few more helpful articles:

    An Intro to CSS: Finding CSS Selectors

    An Intro to CSS, or How to Make Things Look Like You Like

    How to Find Your Theme’s 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 — http://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!

    Moderator Kathryn

    (@zoonini)

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

    Lepidoptera Moths Driftless Prairies Restoration in Progress

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

    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.

    Moderator Kathryn

    (@zoonini)

    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.

    Moderator Kathryn

    (@zoonini)

    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.

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Coraline header and featured photo question’ is closed to new replies.