ThemeShaper Forums

Help In Shaping WordPress Themes

Register or log in:

Username:
Password:

Remember me

ThemeShaper Forums » Thematic

1. 

   mlou
   Member

   I would like to create a recipe format for our food blog. Somewhat similar to the recipe format of this site: la tartine gourmande

   Posted 14 years ago #
2. 

   Chris
   Moderator

   Hi,

   that's a nice blog .. but .. what's your question?

   Chris

   Posted 14 years ago #
3. 

   mlou
   Member

   My question is, how can I format my recipes in a similar way, with a different colored background, smaller or different font, etc? As in, the actual recipe card part of the blog post. Here's another example of what I mean. Sorry, I'm quite new to this, so I don't know where to begin.

   Posted 14 years ago #
4. 

   Manuel
   Member

   You put your recipe inside a div and give it a related class name, this way you can style the box which will contain your recipe:
   

   <div class="recipe">
       Put your recipe here
   </div>

   “Put your recipe here” could be something like this:

   Put the recipes title in a heading (h3 or h4) lower in hierarchy than your post title and possible sub headings. Put the cooking steps inside a unordered list (ul) and the actual steps into list items (li). This would look like this:
   

   <ul> <h3>Recipe for hot water</h3>
       <li>Get some cold water</li>
       <li>Put the cold water on a stove</li>
       <li>Heat the water up until it is hot</li>
       <li>Serve the hot water while it is still hot</li>
   </ul>

   These two steps combined result in this:

   <div class="recipe">
       <ul> <h3>Recipe for hot water</h3>
           <li>Get some cold water</li>
           <li>Put the cold water on a stove</li>
           <li>Heat the water up until it is hot</li>
           <li>Serve the hot water while it is still hot</li>
   </ul>

   Now add some recipe-styling to your stylesheet:

   .recipe {
       background:violet;
       font-size:0.75em;
       line-height:1.5em;
       color:aqua;
   }
   
   .recipe ul {
       padding: 2em;
       padding-top: 0;
   }
   
   .recipe li {
       border-bottom: 1px dotted silver;
       padding: 0.2em;
   }

   Result looks like this: http://img30.imageshack.us/img30/1321/bild1mj.th.png

   Hope you come up with other recipes though. :D

   Posted 14 years ago #
5. 

   mlou
   Member

   This works great, thanks.

   Posted 14 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.