One Response to “Bonus: How To Style Yahoo Pipes With CSS”

1. 

   J.F. March 8, 2011 at 6:27 pm #

   Follow the directions and it works like a charm. The maker of this style should include it on Yahoo’s documentation.

   This is by far the best piece of a Yahoo Pipes style guide I’ve seen. Here’s how I styled mine.

   {“pipe_id” : “d74af026e4ecad8053789c271688fed3″,”_btype”:”list”,
   “width” : “250px”,
   “height” : “480px”,
   “backgroundColor” : “#1c2b33″,
   “color” : “#FFF”,
   “hideHeader” : “true”,
   “hideFooter” : “true”,
   “descriptionColor” : “#c7c7c7″,
   “evenBackgroundColor” : “#1c2b33″,
   “oddBackgroundColor” : “#1c2b33″,
   “headerBackgroundColor” : “#1c2b33″,
   “border” : “1px solid #506371″,
   “containerPadding” : “7px”,
   }

   /*
   Yahoo Pipes CSS Style Sheet For RSS Badges
   Author: Pipes Tutorial
   Version: 1.0
   Learn how to use Yahoo Pipes with the Pipes Tutorial at:
   http://pipestutorial.com
   */

   /* Loading screen for the Yahoo Pipe*/

   /* the loading screen (what shows up before a pipe has loaded) */
   div.pipesstyle div.PBajaxwait {
   position: relative; /* controls the position of the loading screen */
   display: block; /* controls how the loading screen displays */
   width: 100%; /* width of the loading screen */
   height: 100%; /* height of the loading screen */
   margin-top: -0; /* margin around the loading screen */
   background: #eee url(‘http://l.yimg.com/us.yimg.com/i/us/pps/logo_ani_1.gif’) 50% 50% no-repeat; /* the animiated gif and background color that displays while the pipe is loading */
   opacity: 0.75; /* opacity of the loading screen */
   filter: alpha(opacity=75); /* controls special effects for text. only works in IE */
   }

   /* Body of the Yahoo Pipe */

   /* the body of your Pipe */
   div.pipesstyle {
   position: undefined; /* controls the position of the pipe in relation to its normal position */
   width: 250px; /* controls the width of the entire pipe – I set it to 250px */
   height: 470px; /* only adjusts the height surrounding the pipe (in Firefox 3.6.10). (doesn’t get rid of scrollbar). the height issue is buggy depending on the browser you use. use inline styling to override. */
   background-color: #1c2b33; /* the two strips above and below the pipe */
   font-family:Arial, Helvetica, sans-serif; /* choose the font for your pipe */
   margin: 20px 0px 20px 0px; /* adjust the margin surrounding the pipe */
   padding: 0px; /* adjust the padding surrounding the pipe */
   }

   /* h3 Header for the Pipe */

   /* controls the title of the pipe – This has been overridden by in-line styling I put in the javascript tags*/
   div.pipesstyle h3.ybh {
   margin: 0; /* margin around the pipe title */
   padding: 0; /* padding around the pipe title */
   font-weight: bold; /* font weight of the pipe title */
   background-color: undefined; /* color behind the pipe title */
   }

   /* controls the hyperlink for the pipe title (will only display if your pipe is published) */
   div.pipesstyle a.ybt {
   font-weight: bold; /* font weight of the hyperlink for the pipe title */
   color: undefined; /* color of the hyperlink for the pipe title */
   }

   /* Content of the Yahoo Pipe */

   /* behind the scenes, placeholder for your entire pipe */
   div.pipesstyle div.ybx {
   visibility: hidden; /* controls the visibility of the pipes placeholder */
   background-color: #1c2b33; /* controls the color behind the pipes results */
   margin: 10px 5px 7px 10px; /* margin around the pipes placeholder */
   padding: 0; /* padding around the pipes placeholder */
   position: relative; /* position of the pipes placeholder */
   }

   /* controls all of the pipe text */
   div.pipesstyle div.pipesText {
   zoom: 0; /* magnification of the pipe text – I set it to zero with no effect*/
   margin-left: 0px; /* margin surrounding the pipe text */
   color: #c7c7c7; /* color of the pipe text */
   }

   /* controls all unordered lists in the pipe */
   div.pipesstyle ul {
   display: block; /* controls how unordered lists in the pipe are displayed */
   overflow: hidden; /* controls what happens if an unordered list overflows outside the margins */
   position: relative; /* position of an unordered list */
   width: 300000px; /* width of the unordered list */
   z-index: 2; /* z-index of the unordered list */
   padding: 0; /* padding around the unordered list */
   margin: auto; /* margin around the unordered list */
   }

   /* controls all links in the pipe */
   div.pipesstyle a {
   cursor: hand; /* controls the cursor type when hovering over a link in the pipe */
   text-decoration: none; /* text decoration for all links in the pipe */
   color: #01a0f4; /* color of all links in the pipe */
   }

   /* Results of the Yahoo Pipe */

   /* controls the result’s title */
   div.pipesstyle div.pipesImgdescription div.pipesTitle {
   font-family: Arial, Helvetica, sans-serif;
   font-size:15px; /* font size of the result’s title */
   font-weight:bold; /* font weight of the result’s title */
   line-height:15px;
   letter-spacing:normal;
   text-align:left;
   font-style:normal;
   font-variant:normal;
   color:#01a0f4;
   text-decoration:none;
   text-transform:none;
   padding-bottom: 3px; /* padding for the bottom of the result’s title */
   width: 100%; /* width of the title. if decreased, the title will be pushed onto the next line */
   }

   /* controls the descriptions in your pipe */
   div.pipesstyle div.pipesImgdescription {
   display: block; /* how the pipe results are displayed */
   width: 100%; /* adjust the width of the results within the pipe */
   height: 100%; /* doesn’t work, but width does */
   color: #c7c7c7; /* font color for the descriptions */
   }

   /* font size for the description */
   div.pipesstyle div.pipesImgdescription div.pipesDescription {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 14px; /* font size for the description */
   line-height:15px;
   letter-spacing:normal;
   text-align:left;
   font-style:normal;
   font-variant:normal;

   }

   /* padding of results within the pipe */
   div.pipesstyle div.pipesHolder {
   padding: 5px 5px 10px 5px /* padding of results within the pipe */
   }

   /* controls the results of the pipe */
   div.pipesstyle div.ybr {
   position: relative; /* controls the position of the results */
   display: block; /* controls how the results are displayed */
   font-size: 14px; /* font size for result titles and descriptions in the results*/
   margin: 3px 0 0 0; /* margin between the pipes title and the results of the pipe */
   padding: 0pt; /* padding between the results and the edge of the pipe placeholder */
   width: 100%; /* controls the width of the entire pipe */
   height: 100%; /* doesn’t seem to work. (doesn’t get rid of scrollbar). use inline styling to override */
   overflow: auto; /* controls the overflow of the results */
   overflow-x: hidden; /* controls the width of the results if they go outside the pipe */
   }

   /* background color of odd results */
   div.pipesstyle div.ybr li.ybi.odd {
   background-color: #1c2b33; /* background color of odd results */
   }

   /* controls the individual results */
   div.pipesstyle div.ybr li.ybi {
   background-color: #1c2b33; /* background color of even results */
   margin: 0; /* margin around each result */
   padding: 5px 5px 0px 0px; /* padding around each result */
   list-style: none; /* controls the list style of each result */
   list-style-position: outside; /* controls the list style position of each result */
   overflow: hidden; /* controls what happens if a result overflows outside the margins */
   text-indent: 0; /* indents the result title and first line of the description */
   }

   /* Images in the Yahoo Pipe */

   /* controls the image thumbnail placeholder */
   div.pipesstyle div.pipesImgdescription div.pipesThumbnail {
   position: relative; /* position of the image thumbnail */
   float: left; /* placement of the image thumbnail */
   margin-bottom: 3px; /* margin below the image thumbnail */
   }

   /* controls the image thumbnail */
   div.pipesstyle div.pipesImgdescription div.pipesThumbnail img {
   position: static; /* position of the image thumbnail */
   width: 50px; /* width of the image thumbnail */
   height: 50px; /* height of the image thumbnail */
   border: 1px solid #eee; /* border around the image thumbnail */
   }

   /* controls the placeholder surrounding all small thumnails at the bottom of a result */
   div.pipesstyle ul.pipesSmallthumb {
   margin: 10px 0 0; /* margin between the small thumbnails and description */
   padding: 0; /* padding between the small thumbnails and description */
   width: auto; /* width that the small thumbnails should span */
   }

   /* controls the placeholders for individual small thumbnails at the bottom of a result */
   div.pipesstyle ul.pipesSmallthumb li {
   border: 1px solid #eee; /* border around the small thumbnail */
   display: block; /* position of the small thumbnail placeholder */
   float: left; /* placement of the small thumbnail */
   height: 32px; /* height of the small thumbnail placeholder */
   list-style-image: none; /* controls what happens if the small thumbnail can’t be displayed */
   list-style-position: outside; /* controls the display of the list marker */
   list-style-type: none; /* controls the type of list marker */
   overflow: hidden; /* controls what happens if there are too many small thumbnails */
   padding: 2px; /* padding around the small thumbmail placeholder */
   width: 32px; /* width of the small thumbnail placeholder */
   }

   /* controls the small thumbnails at the bottom of a result */
   div.pipesstyle ul.pipesSmallthumb li a img {
   height: 32px; /* height of the small thumbnail */
   width: 32px; /* width of the small thumbnail */
   cursor: pointer; /* controls the cursor type when hovering over a small thumbnail */
   border: 0px; /* border on the inside of the small thumbnail */
   position: static; /* position of the small thumbnail */
   left: inherit; /* left edge of the small thumbnail in relation to the pipe */
   right: inherit; /* right edge of the small thumbnail in relation to the pipe */
   }

   /* the color of the border when you hover over a small thumbnail */
   div.pipesstyle ul.pipesSmallthumb li:hover {
   border: 1px solid #999; /* the color of the border when you hover over a small thumbnail */
   }

   /* Footer of the Yahoo Pipe */

   /* controls the footer */
   div.pipesstyle div.ybf {
   display: none; /* controls how the footer is displayed */
   width: 100%; /* width of the footer */
   background-color: #1c2b33; /* controls the footer background color */
   height: 0px; /* height of the footer */
   margin: 0; /* margin around the footer */
   padding: 0; /* padding around the footer */
   position: relative; /* position of the footer */
   }

   /* controls the footer text in the pipe */
   div.pipesstyle div.ybad {
   display: inline; /* controls how the footer displays */
   height: 0px; /* height of the footer */
   font-size: 0px; /* font size of the footer */
   font-weight: bold; /* weight of the footer text */
   line-height: 0px; /* line height of the footer */
   color: inherit; /* controls the color of the footer text */
   }

   /* controls the pipes logo in the footer */
   div.pipesstyle a.yba {
   background: transparent url(”) 0 0 no-repeat; /* the pipes logo background image – you could put a trident inside the ” include the full URL */
   _background-image: url(”); /* the pipes logo – you could put a trident inside the ” include the full URL*/
   float: left; /* placement of the pipes logo */
   height: 16px; /* height surrounding the pipes logo */
   margin: 3px 0 0 3px; /* margin around the pipes logo */
   width: 0px; /* width around the pipes logo */
   }

   /* “Y! Pipes” in the footer */
   div.pipesstyle a.ybaa {
   color: #1c2b33; /* controls the color of “Y! Pipes” */
   text-decoration: none; /* controls the text decoration for “Y! Pipes” */
   }

   /* the little “TM” (trademark symbol) after “Powered by Y! Pipes” in the footer */
   div.pipesstyle sup.ybas {
   font-size: 0px; /* font size for the trademark symbol */
   color: #1c2b33; /* controls the color of the trademark symbol */
   }

   /* controls “Get This” in the footer (will only display if your pipe is published) */
   div.pipesstyle a.gt {
   position: absolute; /* position of “Get This” */
   height: 16px; /* height surrounding “Get This” */
   display: inline; /* controls how “Get This” is displayed */
   color: inherit; /* color of “Get This” */
   font-size: 9px; /* font size of “Get This” */
   font-weight: bold; /* font weight of “Get This” */
   line-height: 22px; /* line height of “Get This” */
   right: 12px; /* right edge of “Get This” in relation to the next element */
   cursor: pointer; /* controls the cursor type when hovering over “Get This” */
   text-decoration: underline; /* controls the font decoration for “Get This” */
   }

   /* Controls the “>>” after “Get This” in the footer (will only display if your pipe is published) */
   div.pipesstyle div.gts {
   position: absolute; /* controls the position of “>>” */
   height: 16px; /* controls the height around “>>” */
   display: inline; /* controls how “>>” will be displayed */
   color: inherit; /* color of “>>” */
   font-size: 12px; /* font size of “>” */
   font-weight: bold; /* font weight for “>>” */
   line-height: 20px; /* line height around “>>” */
   right: 2px; /* right edge of “>>” in relation to the next element */
   cursor: none; /* controls the cursor type when hovering over “>>” */
   text-decoration: none; /* controls the text decoration for “>>” */
   }

   Reply

Leave a Reply