Following the massive earthquake that hit Japan on March 11th 2011, I wanted to help the people that had been affected in some way by this tragedy. As I have been running an information site for travellers to Niseko, I thought the best way to reach as many people as I could would be to add a notice asking them to make a donation to the tsunami relief fund via globalgiving.org.

To do this I planned on using the Hello Bar that I had seen on other websites for various things. After signing up and then being informed that there was a waiting period. I waited for a day before I decided to make one myself, below is the code that was used.

 

CSS For My Donation Bar

Add the following to your css file.

/* Donation Bar Style*/
#donation_bar_container {
  width:100%;
}
.donation_bar_in {
  text-align: center;
  font-size: 14px;
  padding-top: 8px;
  padding-bottom: 8px;
  background: #ec8830;
  display:block;
  border-bottom-color: #FFFFFF;
  border-bottom-style: solid;
  border-bottom-width: 3px;
}
.donation_bar_in a {
  color:#FFF;
}
.donation_bar_in a:hover {
  color:#333;
}
/* END - Donation Bar Style */

Create The Function For Your Donation Bar

// My Donation Bar
function donation_bar() {
?>
  <div id="donation_bar_container">
    <div class="donation_bar_in">
      Please help the victims of the Japan earthquake &amp; tsunami by making a donation. Please visit ? <a rel="nofollow" target="_blank" href="http://www.globalgiving.org/projects/japan-earthquake-tsunami-relief/" title="Global Giving - Japan Earthquake &amp; Tsunami Relief Fund">Global Giving</a>
    </div><!-- ENDS .donation_bar_in-->
  </div><!-- ENDS #donation_bar_container -->
<?php
}
add_action('thesis_hook_before_html','donation_bar');

Please note that at the time I was running Thesis (version 1.X) and it has the perfect hook to leverage for this task, the thesis_before_html hook. If you are not running Thesis, you can still achieve this, but you will need to investigate your theme to see if there is a pre defined hook that you can use, or make your own custom hook for your hello/denotion bar.

Leave a Reply

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

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>