WordPress.org

Ready to get started?Download WordPress

Forums

Coraline header and featured photo question (12 posts)

  1. Marcihess
    Member
    Posted 5 months ago #

    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!

  2. Marcihess
    Member
    Posted 5 months ago #

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

  3. 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.

  4. Marcihess
    Member
    Posted 5 months ago #

    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?

  5. 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:

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

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

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

    Good luck, and have fun with it!

  6. Marcihess
    Member
    Posted 5 months ago #

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

  7. Marcihess
    Member
    Posted 5 months ago #

    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!

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

    https://cloudup.com/cf9adNB96zA

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

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

    Nice heading - Share Tech is a cool font!

  9. Marcihess
    Member
    Posted 5 months ago #

    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.

  10. 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.

  11. Marcihess
    Member
    Posted 5 months ago #

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

  12. 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.

Reply

You must log in to post.

About this Topic