Created
February 10, 2016 00:01
-
-
Save MuseMetrics/3a79712b8e921da0db2a to your computer and use it in GitHub Desktop.
(Genesis WordPress) Custom Recipe Cards
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- | |
These custom recipe cards are meant to be | |
used mainly in posts about food recipes. | |
They would typically follow the other content | |
of the post. In order to use this recipe card, | |
you must copy and past the HTML into the text | |
editor of the WordPress post. It will not | |
display properly if this is pasted in the | |
visual editor. The CSS can be pasted directly | |
in the style.css at the end of the page. | |
--> | |
<div class="recipe"> | |
<h3>Tomato Basil Fusilli Salad | <span class="serve">Serves: 4</span></h3> | |
<div class="time-slots"> | |
<div class="recipe-time"> | |
<div class="recipe-heading">Prep Time</div> | |
<div class="recipe-count">20 Mins</div> | |
</div> | |
<div class="recipe-time"> | |
<div class="recipe-heading">Cook Time</div> | |
<div class="recipe-count">30 Mins</div> | |
</div> | |
<div class="recipe-time"> | |
<div class="recipe-heading">Total Time</div> | |
<div class="recipe-count">50 Mins</div> | |
</div> | |
</div> | |
<h4>Ingredients</h4> | |
<ul> | |
<li>3 Sliced Tomatoes</li> | |
<li>2 Tbsp Olive Oil</li> | |
<li>1 Sprig Basil</li> | |
<li>2 Tsp Vinaigrette</li> | |
<li>2 Cups Fusilli</li> | |
</ul> | |
<h4>Instructions</h4> | |
<ol> | |
<li>Curabitur rhoncus nisi vehicula, suscipit purus vel, pulvinar tellus.</li> | |
<li>Nunc orci magna, aliquet eget sodales in, suscipit eu tellus.</li> | |
<li>Proin vitae dui vitae massa laoreet rutrum ut lobortis libero.</li> | |
<li>Mauris ornare odio sit amet leo semper, rhoncus tincidunt lacus tristique.</li> | |
<li>Pellentesque urna risus, feugiat et malesuada a, eleifend vel mauris.</li> | |
</ol> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
These custom recipe cards are meant to be | |
used mainly in posts about food recipes. | |
They would typically follow the other content | |
of the post. In order to use this recipe card, | |
you must copy and past the HTML into the text | |
editor of the WordPress post. It will not | |
display properly if this is pasted in the | |
visual editor. The CSS can be pasted directly | |
in the style.css at the end of the page. | |
*/ | |
/* ## Recipe Cards | |
--------------------------------------------- */ | |
/*Wrapper Div Class for Entire Recipe Card*/ | |
.recipe { | |
padding: 5px; | |
padding-bottom: 5px; | |
margin-bottom: 10px; | |
background: #FFCDD2; | |
} | |
/*Wrapper Div Class for 3 Time Slots*/ | |
.time-slots { | |
margin-bottom: 10px; | |
} | |
/*Time Slots, 3 Column Layout*/ | |
.recipe-time { | |
border-top: 1px dashed #666; | |
width: 33%; | |
text-align: center; | |
float: left; | |
font-weight: bold; | |
} | |
/*Middle Time Slot Borders*/ | |
.recipe-time:nth-of-type(2) { | |
border-right: 1px dashed #666; | |
border-left: 1px dashed #666; | |
} | |
/*Recipe Title*/ | |
.recipe h3 { | |
padding: 5px; | |
} | |
/*Ingredients and Instructions*/ | |
.recipe h4 { | |
padding: 5px 5px 2px; | |
} | |
/*Serve Count Span*/ | |
.serve { | |
font-size: .75em; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment