31 May 2011

Removing the pipe header and "Powered by Y! Pipes" footer notice

When you output the results of your Yahoo Pipe somewhere, what you publish is called a "Badge". There is only one problem with using the "Badge" option. Yahoo places the name of the pipe as a header above the badge and a backlink to their site and the footer text: "Powered by Y! Pipes" just underneath it.

In some cases that just breaks the design of the site.

So how do you remove the header and that "Powered By Y! Pipes" footer from your Yahoo Pipes Badge?


Simply add this to your CSS stylesheet or XML template:


/* Yahoo! Pipes */

/* controls the footer */
div.pipesstyle div.ybf {
height: 0px;
}

/* controls the footer text in the pipe */
div.pipesstyle div.ybad { 
display: none;
height: 0px; 
}

/* controls the pipes logo in the footer */
div.pipesstyle a.yba { 
display: none;
height: 0px;  
}

And in the widget, badge, or page, surround the the javascript code of the badge with this div:


<div class="pipesstyle ybad">
<script src="http://l.yimg.com/a/i/us/pps/TYPE_OF_BADGE_GOES_HERE.js">
{
     "pipe_id":"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", //pipe id here.
     "hideHeader" : "true",         //add this and set it to true.
}
</script></div>

2 comments:

  1. Very useful for me .
    I hv implemented this at my blog http://blogillu1.blogspot.in/p/blog-page_22.html
    thank you

    ReplyDelete
  2. Maybe because I'm using the current version of Pipes, I had to tweak the code a bit.


    ReplyDelete