since i’ve been posting more recipes,

i have been asked a handful of times how to make that cute little box around recipes.

so i’m just going to give you the hot tip on this one.

it makes me happy every time i do it.

lots of you actual food bloggers have widgets and things on wordpress that make this real easy,
it practically does all the hard stuff for you, and often has places to print recipe and all that good stuff…

if you don’t, this code will work no matter what you’re on. just be sure it goes in the right place…

so, once you have written the post, and your recipe looks how you want it with spaces/formatting…etc., switch over to your html view {in the post, not your template},
and find your title to your recipe.
{or whatever you want to put in a box}
like this:

then find the last “closed” tag before it. a closed tag, will have the “/” before it. in this case </div> is the most recent. why? cause this is a formatting tag. if you place your code before it, it will mess with your formatting. {cause things to be large, or bolded..etc. whatever the formatting is set to there in your code.}

place the following code just AFTER that closing tag:

–>

and at the end of your recipe, post this code:


<br /></blockquote>
until this code is entered, it might give you an error message telling you your code is invalid. cause it is, until we close it with that end code.

now go check your compose view again. if you did it right, you’ll have a box around your recipe and it will be centered pretty in the middle! if it’s there, but your formatting is now screwy, you can fix most of that now, except for spacing. text style, size, & color can be changed without moving your box.

if you ruined it big time and put it in the wrong place {i’ve done this multiple times}, you can always select all of the text there in your box and click the “unformat” button in compose view. it’s the little T with an x by it. {this removes formatting so it will look clean again in html view and you can start over.}

changes:

the background-color: this is the color of the inside of your box. you can shade in your box any color you’d like. don’t know how to find colors? go to colorpicker.com and grab the code of the color you want!

border: the px is the thickness, if you want a thinner line, go for 1px, or larger, go for 3px…etc. i have my line dashed, but you can put “solid” or “dotted” or “double” here. play around until you like it. the color goes right after this and is the color of your line, again, go ahead and change that all you want too! 

extra tip: change the text color of your recipe. if you want to have the text of this box all one color, and different from the rest of your blog post, add <span style=”color: #444444;”> to the end of the first code, and an extra </span> to the beginning of the second code. then obviously, change that color to whatever you want….