Pledge Drive

Our original progress meter example used a template that was pure CSS colors. The new one (in the sidebar currently), uses two small gifs as CSS background images instead of background colors. I really like the improved look and it was a minor change to the snippet used to create the meter. Alicia is creating some even more fun graphics and snippets (she inspired me to post this example so she and other could start building from it. Below is the snippet for the new one.

Eventually, I would like to establish a gallery or garden of snippets that people can choose from. In that case, we will have to name each one so that they can be listed in drop-down, combo boxes (I like saying that). I’d like to christen the first one with a classic name and for a classic vlogger. This is the “Schlomo Simpleton” (sans the example descriptive text below the meter).

<style>
.pd2_progress {font-family: arial;
  font-size: 12pt;
  font-weight: bold;
  margin: 5px 20px 0 0;
  padding: 10px;
  text-align: center;
  width: 50px;
  color: white;
  background-color: #c7c9f3;
  border: thick solid #9d9fca;}
.money, .percentage, .contributions {padding: 3px;}
.meter {height: 200px;}
.money:before {content: "$";}
.percentage:after {content: "%";}
.contributions:after {content: " gifts";}
.remaining {min-height: %percentremaining%%;
  background:
    url(/wp-content/plugins/pledgedrive2/images/blue_v.gif);}
.achived {min-height: %percentraised%%;
  background:
    url(/wp-content/plugins/pledgedrive2/images/green_v.gif);}
</style>
<center>
<div class="pd2_progress">
  <div class="money">%goal%</div>
  <div class="meter">
    <div class="remaining">&nbsp;</div>
    <div class="achieved">&nbsp;</div>
  </div>
  <div class="percentage">%percentraised%</div>
  <div class="money">%amountraised%</div>
  <div class="contributions">%contributions%</div>
</div>
</center>

Rules for customizing snippets:

• Change anything except the names of the %variables%.
• It’s ok to use the %variables% in both HTML content and CSS styles.
• Ok to move CSS to your own stylesheet as long as it has no %variables% in it.
• %variables% are only replaced in snippets inside Pledge Drive 2 Progress Meter widgets.

Thanks to tipClique Counter Bar (GPL) for the background graphics.

This entry was posted on Saturday, January 19th, 2008 at 7:26 pm and is filed under PledgeDrive2, Plugins, Progress Meter, Widgets. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.