Home
  Logo search
 
home Templates Tools

Style your Blog/News Headlines Widget

Once you have built the code for your headlines widget, you can see how the output of RSS content generated by BB-Tools can be customized by applying different style sheets. Each part of the feed has an identifier, allowing you to add styles to the box containing the feeds, the title, the item display, and the date posting text. A few sample styles are provided here; you can also modify the CSS templates below to creater your own styles!

Try on a Style Sheet

URL Enter the web address for the RSS Feed to "stylize"; if you do not have one handy, you can use the one below from Blogger Buster.

Style Selector
These are but a few style varieties to sample which are generally styled to fit within the sidebars of blog templates. You are welcome to modify these styles or create your own. If you have a snazzy, prettier version, please send it our way. For a blank slate, select the "none/template" style.

Using a Style Sheet

You will need to incorporate the CSS code or linkage in your own blog templates (or HTML files if you insert the widget into your static web pages).

If your blog template features an integral style sheet (eg: Blogger), you should add this code to the style section of your blog:

If your blog features an external style sheet (eg: Wordpress), you can either add this code to your existing style sheet, or create a new style sheet for the widget styling and add the link to this stylesheet somewhere between the <head> and </head> tags like this: 

<link rel="stylesheet" href="style/myfeed.css" media="all">
The url in this code should be the exact location of your hosted style sheet.

If you feature the headlines widget on a static web site, you can use one of the two methods highlighted below:

  1. Insert the CSS directly into the HTML for the page that will display the feed. This methods is best for sites that only are displaying the feed on one or a few pages. Use the form below to find the style you desire, copy the CSS, and paste it somewhere into the <HEAD>...</HEAD> of your HTML file that contains the headlines widget code, surrounded by the <style>...</style> tags shown below. 
    <style type="text/css"  media="all">

<!--  this is where you paste the CSS provided by the form below -->

</style>
  2. Link to an external style sheet. This method is best if you will be using the feeds on multiple pages, as the CSS is stored externally, and thus allows you to change the output display of many pages by editing a single file. Just copy the CSS provided by the form below, and paste it into a new text file. Save it as something called "myfeed.css". Think smart about where you decided to store this file, as other HTML pages that call it need to define a correct path to the file. Many web sites just create a top level directory named style and store all style sheet files in this directory.

    Regardless, to connect the HTML file that contains the Headlines Widget code to an external style sheet, insert this line into the <HEAD>...</HEAD> of your HTML. 
    <link rel="stylesheet" href="style/myfeed.css" media="all">
    Remember again that the value of href= must be a correct relative path (or a full valid URL such as http://www.blah.com/style/myfeed.css) from the HTML file to the CSS file.

CSS classes

This sketch represents the CSS classes created by the Headlines Widget.

For any RSS 2.0 feeds with podcast enclosures, the headlines widget will provide a Play XXX link, where "XXX" is the extension of the media file, e.g. "mp3", "m4a", etc. The styles applied are modeled after Well Styled's Inline Buttons method. 

<div class="pod-play-box">
<a class="pod-play" href="podcastURL"><em>Play</em><span> File</span></a>
</div>

Custom colors may be achieved by editing appropriate foreground and background colors from the base styles (emphasized below):

.pod-play {
   _width:12em;
   margin: 0 0.2em; padding: 0.1em 0; _padding:0;
   
   white-space:nowrap;
   text-decoration: none;
   vertical-align:middle;
   background: #fb6;
   color: black;
   }
.pod-play em {
   _width:1em; _cursor:hand;
   font-style: normal;
   margin:0; padding: 0.1em 0.5em;
   background: white;
   color: #222;  
   }
.pod-play span {
   _width:1em; _cursor:hand;
   margin:0; padding: 0.1em 0.5em 0.1em 0.3em;
   }
.pod-play:hover {
   background: #666;
   color: white;  
   }
.pod-play:hover em {
   background: black;
   color: white  
   }

Advanced: Two Styles in One Page

If you have more than one feed displayed per page, you can assign different styles to each display. You will need a solid understanding of CSS and inheritance to get this to work!.

By supplying a value for CSS Custom Class in the build form you can now create different top level classes. The value passed will create a CSS class named rss-box-XXXX where XXXX is this value. This implies that you may have to define more specific classes for the other classes listed above, or use the top level rss-box-XXXX classes to say define a different background color.