ThemeShaper Forums » Thematic

[closed]

customizing post

(5 posts)
  • Started 9 years ago by mlou
  • Latest reply from mlou
  • This topic is resolved
  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 9 years ago #
  2. Hi,

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

    Chris

    Posted 9 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 9 years ago #
  4. 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 9 years ago #
  5. mlou
    Member

    This works great, thanks.

    Posted 9 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.