Jetpack Recipe

  • Author
    Posts
  • #77347

    grahammeigh
    Member

    I hate the way Jetpack Recipe changes the recipe font and adds a notepad background.

    I can see how to change the recipe font but how do I remove the image background?

    The blog I need help with is dairydiarychat.co.uk.

    #77516

    angelatcrist
    Member

    Hi there,

    Thanks for reaching out. I’m not seeing the recipe notepad look on your site did you figure out how to remove it?

    If not, please send me a link to where you are still seeing this.

    Thanks,
    Angela

    #77522

    grahammeigh
    Member

    Hi

    Yes thanks I have been given the code to remove the background.

    The final problem is the recipe title which is too small. It seems to be H3 can that be changed?

    While I am wishing for the moon! In addition to servings, time and difficulty we have calories and fat can these be added to the smaller type below the title?

    #77570

    angelatcrist
    Member

    Hi, here’s the code you will want to change, we included three areas to ensure you could get the look you wanted.

    for the title
    .wf-active h1 { font-size: 2.5em; }

    this is for the h3 text below pic:
    .wf-active h3 { font-size: 1.1em; }

    and smaller font for recipes
    .p {font-size: 90%;}

    Regarding adding more items to the recipes, please check this doc: https://en.support.wordpress.com/recipes/.

    Let me know if you have any other questions!
    Have a great weekend!
    Angela

    #77579

    grahammeigh
    Member

    Thanks Angela

    Can you take a quick look at http://dairydiarychat.co.uk

    The recipe font is larger than the general post font. How do II rectify that?

    #77625

    angelatcrist
    Member

    Hi there!

    I’m not seeing a difference there. Perhaps I missing it, can you send me a link to an example.

    Thanks,
    Angela

    #77626

    grahammeigh
    Member

    Hi Angela

    http://dairydiarychat.co.uk

    Please view the screen-shot which highlights the problem at http://takeastepbeyond.co.uk/download/Screen-Shot.png

    #77656

    angelatcrist
    Member

    Ok here you go:

    You can place:
    .p {font-size: 17px;}

    and that will make recipe and blog font size the same. Or you can change the number to the size you want it to be.

    Let me know if you have any other questions.
    Have a great weekend!
    Angela

    #77657

    grahammeigh
    Member

    Hi Angela

    Thanks for that. I have successfully changed the font to 16px but failed to change the line height of 26px to match that of the blog 23px.

    This is what I have added…

    .jetpack-recipe, .p {
    font-size: 16px;
    line-height: 23px;
    }

    #77663

    angelatcrist
    Member

    Here’s what you will want to add:

    .jetpack-recipe, .p {
    font-size: 16px;
    line-height: 23px;
    }
    
    .p {
    font-size: 16px;
    line-height: 23px;
    }

    Let me know if you have any other questions!
    Angela

    #77665

    grahammeigh
    Member

    Hi Angela

    Strange things are happening.

    When I added the code the blog font changed to 17 px with a line height of 25px!

    #77668

    angelatcrist
    Member

    Try this:

    .jetpack-recipe, .p {
    font-size: 16px !important;
    line-height: 23px !important;
    } 
    
    .p {
    font-size: 16px !important;
    line-height: 23px !important;
    }

    These links will be helpful if you need any other CSS help:
    https://en.support.wordpress.com/custom-design/css-basics/ https://en.support.wordpress.com/custom-design/custom-css/ https://en.support.wordpress.com/custom-design/editing-css/

    Have a great night!
    Angela

The topic ‘Jetpack Recipe’ is closed to new replies.