Decorating Blockquotes

Now I have one of those pretty quote decorations in my quotes on this wiki.

  1. The decoration is an image.
  2. I used mspaint to capture a large quote mark. I used Engravers MT.
  3. I then used paint.net to rotate and flip it, crop it, and then make the white background transparent. As advised in the paint.net forums, I used the magic want tool, capture the background and then “cut” it out.  The file needs to be a transparency supporting format for this to work.

    quote

  4. I uploaded the file to my web server.
  5. I then used the WordPress CSS editor to add the following code,
.entry blockquote { background: #EEE url("http://davelevy.info/TOKENS/OQuote_GreyTransparent.png") no-repeat; }

As you can see, the background rule takes two arguments, a base colour and the image, the rune required is the no-repeat key word. It also benefits from the definition of some padding rules. In my case,

     padding-left: 16px; padding-top: 16px;

and now onto fixing the code tag.

Related Posts

  • Snipsnap and the ‘html’ macro One of the add on features contributed  by the community to the snipsnap project was an […]
  • Snipsnap Themes Snipsnap offered multiple look and feels and for the advanced CSS coder, offered many […]
  • Planet (Venus) Themes (CSS) I use Sam Ruby's Planet Venus. The package comes with two themes, I have always rather […]
  • ERP Obviously ERP has been around a while, in my researches, I came across these two open […]
  • Disqus This is page contains complex html i.e. javascript, the page must only be edited as […]

One thought on “Decorating Blockquotes

Leave a Reply

Your email address will not be published. Required fields are marked *