Using eye-catching and informative graphics with excellent content is key to any good web page design – especially for a nonprofit relying on donations.

This was exactly the goal of my latest project that I had the privilege of being a part of. The project was initiated by the Sound of Life to aid their Fall “Life-a-thon”. During these 3 days, listeners to the radio station and viewers of the website were encouraged to become monthly supporters or give a one-time gift.

Graphic Designer, Jeralyn Tiernan, created an excellent design concept for me to work with.

My goal in the project was to convert her design into a functioning webpage that could be updated as the donations came in. The sliders needed to “slide” automatically and the dollar amounts and percentages needed to also be constantly updated.

[expand title=”Click here to see the more technical elements (HTML, CSS, PHP and WordPress integration.)”]

Below is the HTML and PHP. I put this in a separate php file and included it on the page that I wanted it to show on.

      <div class="lifeathon-container">
        <div class="lifeathon-header">
        </div>

          <div class="lifeathon-contact-bar">
            <ul>
              <li class="left">To Give By Phone 800-724-8518</li>

              <li class="right">2013 Fall <strong>LIFE</strong>A<strong>THON</strong></li>
            </ul>
            <div class="clear"></div>
          </div>

        <div class="lifeathon-content-container">
          <div class="lifeathon-content">
            <div class="clickorcall"><a href="https://interland3.donorperfect.net/weblink/weblink.aspx?name=soundoflife&id=1"><img  src="lifeathon-clicktogive.png"></a></div>
            


            <ul class="lifeathon-thermometers">
              <li class="text">
                <div class="words">
                  New Partners for Life — <font color="#b51c21"></font>
                </div>
              </li>

              <li class="thermometer">
                <div class="mercury" style="width:%"></div>
              </li>
              <li class="sofar">so far: $ (%)</li>
            </ul>

            <div class="lifeathon-our-goal">
            	<strong>Our Goal:</strong><br>
				100 NEW PFL's<br>at 30+ a month. <div class="goal-amount">$</div>
            </div><br>
            

            <div class="clear"></div>

			<div class="clickorcall"><img src="lifeathon-orcall.png"></div>

            <ul class="lifeathon-thermometers">
              <li class="text">
                <div class="words">
                  Single Gifts Needed
                </div>
              </li>

              <li class="thermometer">
                <div class="mercury" style="width:%"></div>
              </li>
              <li class="sofar">so far: $ (%)</li>
            </ul>

            <div class="lifeathon-our-goal">
              <strong>Our Goal:</strong><br>
              <div class="goal-amount">$</div>
            </div>
            <div class="clear"></div>
          </div>

          <div class="lifeathon-grand-total">
            Grand Total Received/Pledged: $
          </div>

          <div class="lifeathon-footer">
            <img class="needamiracle" src="lifeathon-needamiracle.png">
            <p class="footertext">A BIG thank you to all of our partners. Our mission is “to connect people with the positive message of Jesus Christ”. You’re helping to bring <strong><em>Real Life</em></strong> and <strong><em>Real Change</em></strong> by giving to the Sound of Life! <strong><em>We can’t do it without you!</em></strong></p>
			<img class="realliferealchange" src="lifeathon-realliferealchange.png">
          </div>
        </div>
      </div>
  <div class="clear"></div>

And here is the CSS for the design.

/* Fundraising Thermometer */
/* http://www.suenovotny.com/blog/2011/03/dynamic-thermometer-with-css-and-php.php for source code */

.thermometer {
	background-color: #fff;
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
	height: 34px;
  }
.mercury {
	position: relative;
	background-color: #075295; 
	height:100%;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 0px;
    border-top-right-radius: 10px; 
    max-width: 100%; 
  }


/* End Fundraising Thermometer */

/* Lifeathon Landing Page */

span.collapseomatic {
	font-size: 1.5em;
	color: black;
	position: relative;
	top: 2px;
	font-family: "Rokkitt";
	}

.lifeathon-container {
	padding-right: 15px;
	}

.lifeathon-header {
	padding-right: 0px;
	background: url("lifeathon-header.jpg") no-repeat;
	height: 175px;
	display: block;
	overflow: hidden;
	}

.lifeathon-contact-bar {
	background-color: #035295;
	color: #fff;
	text-transform: uppercase;
	padding: 5px 14px 4px 14px;
	height: 25px;
	font-size: 1.2em;
	font-weight: 100;
	letter-spacing: 0.3em;
	}

.lifeathon-contact-bar ul {
	list-style: none;
	margin-top: 2px;
	}

.lifeathon-contact-bar li {
	margin-left: 0px;
	}

.lifeathon-contact-bar li.left {
	float: left;
	}

.lifeathon-contact-bar li.right {
	float: right;
	}


.lifeathon-content-container {
	min-height: 450px;
	background: #ddeeff; /* Old browsers */
	background: -moz-linear-gradient(top,  #ddeeff 0%, #8da8bf 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ddeeff), color-stop(100%,#8da8bf)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ddeeff 0%,#8da8bf 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ddeeff 0%,#8da8bf 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ddeeff 0%,#8da8bf 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #ddeeff 0%,#8da8bf 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ddeeff', endColorstr='#8da8bf',GradientType=0 ); /* IE6-9 */
	}


.lifeathon-content {
	padding: 10px;
	}

.clickorcall {
	float: left;
	padding: 20px 0px 20px 30px;
	width: 175px;
	}

ul.lifeathon-thermometers {
	list-style: none;
	float: left;
	margin-right: 30px;
	margin-top: 36px;
	}

ul.lifeathon-thermometers li {
	width: 450px;
	}

ul.lifeathon-thermometers li.text {
	background-color: #fff;
	margin-bottom: 5px;
	font-size: 1.5em;
	font-weight: 700;
	padding: 5px 0 5px 0;
	}

ul.lifeathon-thermometers li.text .words {
	padding: 2px 0px 0px 8px;
	color: black;
	}

ul.lifeathon-thermometers li.sofar {
	text-align: right;
	color: #b51c21;
	font-size: 1.2em;
	font-weight: 700;
	}

.lifeathon-our-goal {
	color: #b51c21;
	font-size: 1.2em;
	padding: 30px 20px 0 0;
	}

.lifeathon-our-goal .goal-amount {
	color: #0e3a5d;
	font-size: 1.3em;
	font-weight: 700;
	}

.lifeathon-grand-total {
	background-color: #b51c21;
	color: #fff;
	text-align: center;
	font-style: italic;
	font-size: 1.5em;
	font-weight: 100;
	padding: 15px 0px 15px 0px;
	margin: 0 0 10px 0;
	}

.lifeathon-footer {
	height: 100px;
	}

.lifeathon-footer img.needamiracle {
	padding: 5px 0 0 20px;
	float: left;
	width: 160px;
	}

.lifeathon-footer p.footertext {
	float: left;
	width: 505px;
	padding: 5px 20px 0 20px;
	text-align: justify;
	font-size: 1.2em;
	color: #0e3a5d;
	}

.lifeathon-footer img.realliferealchange {
	padding: 17px 0 0 0;
	width: 165px;
	}	

/* End Lifeathon Landing Page */

Something that I did not show here is the integration with the WordPress backend. I was able to integrate it so that an administrator can login to the WordPress backend and update the slider numbers. Below is the actual PHP showing the defined parameters according to my edits to the theme options page.

And here’s a screenshot of the theme options page with my additions. I simply added a tab to the existing Inkthemes Theme Options page.

[/expand]