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.

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

Create The Function For Your Donation Bar

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

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>

This site uses Akismet to reduce spam. Learn how your comment data is processed.