Help How do style my recipe on my blog?

Recipes use simple HTML that you can easily style using CSS (Cascading Style Sheets). If you're not familiar with editing CSS, we've provided a ready-made "skin" for you to use.

The HTML

This what Forkd automatically publishes to your blog. It forms the body of your blog post:

<div class="forkd recipe">
    <div class="description"><p></p></div>
    <dl class="attributes">
        <dt class="servings">Serves</dt>
            <dd class="servings">2</dd>
        <dt class="preparation_time">Preparation time</dt>
            <dd class="preparation_time">15m</dd>
        <dt class="cooking_time">Cooking time</dt>
            <dd class="cooking_time">15m</dd>
        <dt class="difficulty">Difficulty</dt>
            <dd class="difficulty">2</dd>
    </dl>
    <img class="hero" src=""/>
    <div class="ingredients">
        <div class="subheading">Ingredients</div>
        <ul class="ingredients">
            <li class="ingredient"></li>
            <li class="ingredient"><strong class="heading"></strong></li>
            <li class="ingredient"></li>
        </ul>
    </div>
    <div class="preparation">
        <div class="subheading">Preparation</div>
        <p></p>
    </div>
    <div class="source">
        <a href="http://fork.dev5.isotoma.com/recipe/1"><img class="badge" src="/forkd/static/images/logo_minimal_badge.gif" alt="forkd.com"/></a>
    </div>
</div>

The title of the recipe is not included above, as it will be the post's title, following the style of all your blog posts.

The CSS

Here is some sample CSS to style your recipe. It does not include font styles, as this will be picked up from your blog. View example (opens a new window).

If you know HTML and CSS, you can of course create your own CSS to style your recipe any way you like, including hiding elements you don't want to show. (The CSS above hides the number of descendants, for example.)

How do I add the CSS to my blog?

Blogger

  1. Simply copy the CSS above to the clipboard
  2. In Blogger, go to Template: Edit HTML. In the large textbox in the middle of the page, scroll down to the beginning of the CSS area (it starts with body { ). Just before that line, paste in the CSS you copied
  3. Click Save Template

Wordpress (on your own server)

  1. Simply copy the CSS above to the clipboard
  2. Find the .css file for your blog, open it in a text editor, and paste in the CSS you copied
  3. Use an FTP programme to replace the CSS file on your server

Note that on some installations Wordpress strips out the HTML attributes servings, preparation_time, cooking_time and difficulty, so they can't be styled individually.

Wordpress (hosted on Wordpress.com)

  1. Simply copy the CSS above to the clipboard
  2. Log in to your blog on Wordpress.com
  3. Click Upgrade to purchase credits to use Custom CSS on your blog
  4. If you already have Custom CSS activated, go to Presentation, Edit CSS
  5. In the large textbox in the middle of the page, paste in the CSS you copied in Step 1. (Append it to any existing CSS that may be there already)
  6. Click Preview, and if you're satisfied with how it looks, Save Changes

Note that on some installations Wordpress strips out the HTML attributes servings, preparation_time, cooking_time and difficulty, so they can't be styled individually.