7 {{ upvoteCount | shortNum }}
7 {{ upvoteCount | shortNum }}

A question about designing a template page for some recipes

by Aduley
6 replies
  • WEB DESIGN
    • |
Hello all,

I have been thinking about how to design a page template for use when I write a new post with a recipe at the end. I am simply wondering if there is a way to add something to the stylesheet that I can call up at a certain point on the page. All I am looking for is a different background color for the ingredients and instructions section. Kind of like this site: Roasted Tomatillo Chicken Enchilada Casserole - Pinch of Yum

You can see what I mean at the end of the post. It has a square gray background where the ingredients are posted.

To sum it up, should I make a template that uses inline styling, or would I be able to make a change to the stylesheet itself and create a new class? I'm by no means great at CSS but I understand enough to tinker around and make some changes.

Thank you in advance.
#designing #page #question #recipes #template
  • Profile picture of the author mattjabz
    In order to effectively create an ingredients/instruction section, create a div and assign a class to it. The class can be named anything.

    Example:

    <div class="instructions">
    Instructions/Ingredients written here
    </div>

    In CSS you would need to do something similar to this:

    .instructions{
    font-family: Arial;
    font-size: 12px;
    width: 400px;
    height:auto;
    padding: 10px;
    background-color: #555555;
    color: #000000;
    }

    If the instructions/ingredients already has a class or id assigned to it, create a new class and you would need to copy the properties from the other class and put it into the class you just made. After you would just need to change background colour, you can use ColorPicker.com - Quick Online Color Picker Tool to find the right colour code.

    For consistency, I wouldn't use inline html in this situation especially if you're going to make hundreds of recipes.
    {{ DiscussionBoard.errors[9612978].message }}
    • Profile picture of the author Aduley
      Thank you for your response mattjabz. I was hoping you would say I shouldn't do the inline styling for the html, it seems there could be better ways of doing things.

      I assume this:

      <div class="instructions">
      Instructions/Ingredients written here
      </div>

      goes on the page or post itself? And only the instance of the .instructions class inside the div should get the CSS styling right?
      {{ DiscussionBoard.errors[9613299].message }}
  • Profile picture of the author mattjabz
    The "<div class="instructions">Instructions/Ingredients written here</div>" should be inside the body tag. And yes the .instructions should get CSS styling.
    {{ DiscussionBoard.errors[9614207].message }}
    • Profile picture of the author Aduley
      Thanks again mattjabz, I was thinking along those lines I just didn't know how to call the styling up. But I see it's when you use the div and the class=.

      That was a huge help, hopefully I will get this right.
      {{ DiscussionBoard.errors[9615402].message }}
  • Profile picture of the author mattjabz
    No problem. If you have any problems using HTML/CSS let me know.
    {{ DiscussionBoard.errors[9615443].message }}
    • Profile picture of the author Aduley
      That worked beautifully. I have to say thank you again. I will probably have another question tomorrow about maybe adding some buttons like a print button so they can print the recipe. I have done some research on that and it sounds like it could be kind of complicated as far as getting the formatting right so the browser only prints the recipe and not everything else on the page.

      We'll so though, I don't know if know enough to make that work.
      {{ DiscussionBoard.errors[9615682].message }}

Trending Topics