One of the neat things about Google Reader is that I can "share" articles that I think other folks might find interesting (my shared stuff). In fact, there's even an option to easily add a list of shared items to a site that's very simple to setup. If you're reading this article via a feed, just pop over to my blog home and you'll see this in action in the sidebar.
By default, it is very "blah" looking. You can choose from a handful of preset color schemes, assign a title and pick how many items you want to show. Get your javascript snippets, copy / paste and done. Easy, but blah.
This evening I decided that I wanted my clips here to actually match my blog theme, not one of the preset schemes. With a bit of work and sleuthing I believe I've done just that. And since I'm a sharer... well, here's how I did it.
Keep in mind that all sites/themes/stylesheets are different. How my stuff is laid out probably won't match yours. But hopefully this will give some ideas.
I started by clearing the title and selecting "None" for the color scheme. The javascript code is provided there, so just select it and copy it to the clipboard.
I title my sidebar stuff with h2 elements, so in my sidebar theme file, I added a block that looks like this:
After poking around, I realized that that javascript bits render all the html in a div with a class of reader-publisher-module. The unordered list tag appears to be "classless" and the list items are in a class named i (which I didn't use).
My sidebar lists are styled to not look like traditional lists. Making the list of shared articles match turned out to be very easy. For instance, my unordered lists in the sidebar have this style:
-
ul.contentright {
-
font-size: 0.75em;
-
background-color:#fafafa;
-
border-top: 1px solid #C2C2C2;
-
list-style-type: none;
-
margin: 1.5em 0px;
-
padding:0px;
-
}
-
-
ul.contentright li {
-
border-bottom: 1px solid #C2C2C2;
-
list-style-type: none;
-
margin: 0px;
-
padding: 0.5em;
-
}
All I had to do was change those two selectors to
-
ul.contentright, .reader-publisher-module> ul
and
-
ul.contentright li, .reader-publisher-module> ul> li
and I was pretty much done. Just had to touch up the links a bit.
Two things made this very easy: Firefox and the Web Developer Extension. Curious about code placed on your page by a javascript function? Viewing Page source just shows the javascript in the script tags... that's not real helpful! However, select just the portion that was rendered, right click and choose "View Selection Source." Now you're seeing more info! Combine that with Web Developer's "View Style Information" option and you're set.
How did I do, do the shared articles blend in better now?
Possibly Related posts:
April 2nd, 2007 
Tags: 
[...] Design. Daran kann man aber etwas ändern: Solo Technology beschreibt in seinem Artikel “Styling Google Reader Clips on Your Site” wie man in wenigen Schritten das Design des “Clips” an die eigenen [...]
[...] April post did I think would get more attention? Styling Google Reader Clips on Your Site. It is among the lowest viewed posts that I published in April. Totally surprised [...]
Thanks for a great post – it helped me alot! Just one more question about further customization:
My blog is in Icelandic and I was wondering whether it would be possible to change the default “read more” and “from” (item source) to some other text?
Any help would be greatly appreciated.