.post blockquote {Mine is very simple for a reason. (Not that I don't want wild and wonderful...it just would confuse my readers.) My blockquote is actually a design element that gently separates areas of code from the blog post it's self. That way my readers can see the code that needs to be copied at a glance...no guessing needed. I picked a soft color because codes can make you crazy, and tranquil blue is my way of offsetting any craziness!
margin:1em 20px;
}
.post blockquote p {
margin:.75em 0;
}
blockquote {
background:#EFEFF7;
}
One of my favorite blockquotes is with a big chunky quotation mark. I found this fun little blockquote in a theme designed by Fauxzen at Blogger Templates.
Here is the code that you paste into your CSS style sheet (between <head> and </head>):blockquote {
background-position:-10px -7px;
border: 1px dashed #FFC600;
margin: 20px 10;
padding: 0 20px 0 50px;
background: url("QuoteImage.URL") 5% no-repeat #FFF8DD;
}
<-- This is the image you will need. Right click it then save to your desktop. Upload it to your webhost. I use Ripway. After uploading, put the URL in the above code.Here is one more. I use it on Buttermilk Clouds. It is simple in a fancy way. I'm changing the color here so you can see a variety. The great thing about this blockquote is you don't need an image to save and upload. It is all done with smoke and mirrors!
Once again, here is the code that you paste into your CSS style sheet (between <head> and </head>):blockquote{If you want a different color, find one on this fantastic color chart then put that color code in place of #DC143C in the code above.
background-color: transparent;
border-top: 3px double #DC143C;
border-bottom: 3px double #DC143C;
padding: 5px;
font-style: oblique;
font-size: 1em;
margin-left: 5%;
margin-right: 5%;
}
I'm going to stop for now. But, this is really fun, so I will probably do more of this type of thing in the future. Especially if I see much interest in it. Let me know!
Update: 1/16/07 I forgot to mention that you should replace the old blockquote code in the CSS style sheet with the new code in this post.
No comments:
Post a Comment