Customizing your Google Reader clips with CSS…

After you have a functional Google Reader clip working on your site, you can further customize your Google Reader by editing your CSS page so that your clip will sit seamless with the design of your site.

Google Reader clips is basically a script that has certain elements in it to write to your page when it’s loaded. If those elements are specified in your CSS file, the script will feed off your stylesheet.

Google Reader uses the following items within their script to create the layout and style of your clip.

  • The entire script is located in a div with a class of “reader-publisher-module”.
  • The title in the script uses an <H3>.
  • The list is unordered.
  • Each item is a list item.
  • The item is an anchor with a class of “i”.
  • If the item’s source is enabled, each source is in a div with a class of “s”.
  • The footer is located in a div with a class of “f”.

Everyone is going to have a different site and stylesheet, so I can’t really tell you exactly what to put in your CSS file to match your site’s style. If you know what you are doing, then great. If you are not too sure of what to do, here’s a tip… back up your CSS file before you make any changes or additions. Then visit this site and this site to learn how to use CSS.

Feel free to contact me for more information if you have a question about adding these items to your CSS file.

You may also like...

Leave a Reply

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