Recipe CSS help needed

• 

  foodandlivingcoach · Member · Dec 10, 2016 at 7:58 pm

  • Copy link
  • Add topic to favorites

  My old theme gave my recipes a nice border and background, but my new theme shows them very simply. Could you suggest what css I might add to my site to make this recipe:

  https://foodandlivingcoach.com/2016/11/16/what-am-i-going-to-make/

  Look more like this recipe?https://homegrownkate.com/2016/11/18/berry-chia-jam/

  The blog I need help with is: (visible only to logged in users)

• 

  seasonschangecc · Member · Dec 10, 2016 at 9:50 pm

  • Copy link

  If you are a Premium or Business subscriber at WordPress.com, then you can add custom CSS in the Customizer editor (specifically the Custom Design area). https://en.support.wordpress.com/custom-design/editing-css/

  You should be able to add the following into the CSS Override to give your recipes a border and background:

  .jetpack-recipe ul, .jetpack-recipe ol {
      list-style-position: inside;
  }
  
  .jetpack-recipe {
      background-color: #f0f6f3;
      border-color: #52846f;
      border: 1px solid;
      border-radius: 1px;
      clear: both;
      margin: 1.5em 1%;
      padding: 1% 2%;
  }

• 

  foodandlivingcoach · Member · Dec 11, 2016 at 12:38 am

  • Copy link

  I just can’t say Thank You enough.
  You definitely made my day!
  Thank you…thank you…

• 

  seasonschangecc · Member · Dec 11, 2016 at 1:00 am

  • Copy link

  I’m so happy to help! I accidentally left something out. Please add the following instead:

  .entry-content .jetpack-recipe ul, .entry-content .jetpack-recipe ol {
      list-style-position: inside;
  }
  .entry-content .jetpack-recipe {
  	background-color: #f0f6f3;
      border-color: #52846f;
      border: 1px solid;
      border-radius: 1px;
      clear: both;
      margin: 1.5em 1%;
      padding: 1% 2%;
  }

• 

  foodandlivingcoach · Member · Dec 11, 2016 at 3:25 am

  • Copy link

  That looks wonderful. Woohoo!!!

  A few more questions, now that it’s the new way, is it possible to:

  1. have a smaller picture on the recipe with the “Description” to the side of the picture
  2. add a line between the title of the recipe and everything else
  3. add a sub-heading that I can use to describe GF, DF, etc. (similar to the Time & Difficulty subheadings) when a recipe is gluten free, egg free, and/or other stuff?
  4. change the background to a different color or mild pattern

  Also, I can’t seem to figure out how to eliminate the excess space at the bottom where I added the “recipe by…” I currently have it opened as a separate [recipe-notes] and it doesn’t have extra space above/below. Is there another way I should do it

  Here’s an example of what it looks like currently with changes: https://foodandlivingcoach.com/2016/11/16/what-am-i-going-to-make/

  Here’s an example of what I’m going toward: https://homegrownkate.com/2016/02/11/marinated-halloumi-beetroot-salad/#more-3384

  Thank you.

• 

  justjennifer · Member · Dec 11, 2016 at 6:08 am

  • Copy link

  Although it looks like @seasonschangecc has you covered, I’m just adding that you also have the option of using the recipe shortcode https://en.support.wordpress.com/recipes/

• 

  foodandlivingcoach · Member · Dec 13, 2016 at 12:05 am

  • Copy link

  Thanks to both of you.