• I have several questions about modifying this theme. I am not familiar with CSS but am able to follow directions. I’m working on https://www.driftlessprairies.org

    1) How do I change the size of the featured image? In this example, the antennae are cut off the moth: https://driftlessprairies.org/?page_id=1961

    2) How do I make certain but not all words in a header italicized? I want to be able to have the scientific names in italics but the common names non-italicized

    3) How do I change the font for headers? I’d like something a bit more compact width wise, not necessarily heighth wise.

    Thanks a bunch for all your help!

Viewing 6 replies - 1 through 6 (of 6 total)
  • Moderator Kathryn Presner

    (@zoonini)

    Hi there, let me see if I can help. I’ll answer your questions separately and out of order. ??

    2) How do I make certain but not all words in a header italicized? I want to be able to have the scientific names in italics but the common names non-italicized

    Unfortunately this isn’t possible, because any HTML or CSS added to a page or post title would be stripped out. A not-ideal workaround could be to use all-caps instead of italics, since this wouldn’t require any code.

    Thread Starter Marcihess

    (@marcihess)

    Bummer! Thanks for letting me know! Unfortunately, I didn’t think the first post went thru so I made another post. Sorry for the duplication.

    Moderator Kathryn Presner

    (@zoonini)

    3) How do I change the font for headers? I’d like something a bit more compact width wise, not necessarily heighth wise.

    There are a few different ways to change the heading above each post or page.

    The first way is to modify the CSS and use a web-standard font – that is a font that a user is likely to have already installed, which will allow them to view the heading as you intended.

    For example, something like this:

    h1.entry-title {
    font-family: "Arial Narrow", "Helvetica Narrow", Arial, Helvetica, sans-serif;
    }

    A visitor would need to have one of those fonts installed on their machine. If they didn’t have the first one, the browser would look for the second in the list, and so on.

    Here’s resource with some common web-safe fonts:

    https://cssfontstack.com/

    An easy way to add custom CSS like this is to and activate Jetpack’s Custom CSS module, since you’re already using Jetpack. You’ll then add any custom CSS in a special CSS editor, under Appearance > Edit CSS. This way, your CSS won’t be overwritten when you update the theme.

    Here are some helpful resources for learning about how to customize your CSS:

    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/

    Moderator Kathryn Presner

    (@zoonini)

    Another way to choose from a wider range of fonts – beyond web-safe fonts – would be to use a Google fonts plugin and follow its instructions.

    Those plugins let you use a font from Google’s free font directory in your site and there are lots to choose from in the plugin repository:

    https://www.ads-software.com/plugins/search.php?q=google+fonts

    Each plugin comes with its own guide and support forum.

    Moderator Kathryn Presner

    (@zoonini)

    1) How do I change the size of the featured image? In this example, the antennae are cut off the moth: https://driftlessprairies.org/?page_id=1961

    I’ll answer this one over in your other post since you included more details there.

    Thread Starter Marcihess

    (@marcihess)

    So much to learn. Thanks for the links.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Coraline modifications’ is closed to new replies.