<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Matthew Simo &#187; css</title>
	<atom:link href="http://matt-simo.com/tag/css/feed/" rel="self" type="application/rss+xml" />
	<link>http://matt-simo.com</link>
	<description>Front-End Designer/Developer</description>
	<lastBuildDate>Mon, 01 Feb 2010 21:51:14 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>Added &amp; Configured SimplePie for WP</title>
		<link>http://matt-simo.com/configured-simplepie-for-wp/</link>
		<comments>http://matt-simo.com/configured-simplepie-for-wp/#comments</comments>
		<pubDate>Tue, 19 May 2009 18:43:22 +0000</pubDate>
		<dc:creator>Matthew</dc:creator>
				<category><![CDATA[Tutorial]]></category>
		<category><![CDATA[code]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[php]]></category>
		<category><![CDATA[plugin]]></category>
		<category><![CDATA[SimplePie]]></category>
		<category><![CDATA[WP]]></category>

		<guid isPermaLink="false">http://matt-simo.com/?p=68</guid>
		<description><![CDATA[I started thinking&#8230; &#8220;Man, having some lame post explaining that I&#8217;m off developing and hacking WP is almost as bad as having a big fat image saying that I&#8217;m &#8216;Under Construction&#8217; (see this).&#8221; As a result, I figured loading some &#8230; <a href="http://matt-simo.com/configured-simplepie-for-wp/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>I started thinking&#8230; &#8220;Man, having some lame post explaining that I&#8217;m off developing and hacking WP is almost as bad as having a big fat image saying that I&#8217;m &#8216;Under Construction&#8217; (see <a href="http://images.google.com/images?q=under+construction&#038;oe=utf-8&#038;rls=org.mozilla:en-US:official&#038;client=firefox-a&#038;um=1&#038;ie=UTF-8&#038;ei=k_MSSq_RLYSs8QTPufT8Aw&#038;sa=X&#038;oi=image_result_group&#038;resnum=1&#038;ct=title">this</a>).&#8221;</p>
<p>As a result, I figured loading some dynamic content that tracks the latest 5 things I&#8217;m up to on the web would be far superior. </p>
<p>I was in luck. It just so happened that not too long ago I had played around with <a href="http://simplepie.org/">SimplePie</a>. The SimplePie website describes SimplePie as &#8220;a very fast and easy-to-use class, written in PHP, that puts the &#8216;simple&#8217; back into &#8216;really simple syndication&#8217;&#8221;. I used a great <a href="http://css-tricks.com/video-screencasts/55-adding-rss-content-with-simplepie/">css-tricks video tutorial</a> as a guide and decided to play around to make SimplePie track my web activity from the last week.</p>
<p>It went great. My initial exposure to working with SimplePie was quick, intuitive, and strait-forward. It took me a couple of hours to learn all I needed to know and code up what I wanted SimplePie to do for me. It should be stated that while I&#8217;m comfortable with php, I am by no means am a master or guru or even consider myself really all that experienced.</p>
<p>As a result, I was extremely pleased when I found the <a href="http://wordpress.org/extend/plugins/simplepie-plugin-for-wordpress/">SimplePie Plugin for WP</a>. I downloaded, installed and went to work. (Don&#8217;t forget to get the <a href="http://wordpress.org/extend/plugins/simplepie-core/">SimplePie Core Plugin</a>, you need it so the classes the WP plugin uses are understood!) Since I was familiar with the basic concept of how SimplePie worked it was a breeze, I coded what I needed (This time I only wanted to track the 5 most recent items.), integrated it into the theme I recently installed (Which, by the way, finding a theme that is intelligently and cleanly coded like <a href="http://jimbarraud.com/2009/03/19/manifest/">Manifest</a> is makes this go faster too. Kudos Jim!) and added some css classes to make it look pretty.</p>
<p>I put the very strait forward SimplePie code into the Header Template.</p>
<blockquote><p>
<code>  &lt;div id="simplepie"&gt;<br />
		&lt;?php<br />
		echo SimplePieWP(array(<br />
			    'http://digg.com/users/MaSimo/history.rss',<br />
    			'http://twitter.com/M_A_Simo',<br />
    			'http://feeds.pandora.com/feeds/people/simo5436/favorites.xml',<br />
    			'http://feeds.pandora.com/feeds/people/simo5436/favoriteartists.xml',<br />
    			'http://feeds.pandora.com/feeds/people/simo5436/nowplaying.xml',<br />
    			'http://delicious.com/M_A_Simo',<br />
		), array(<br />
			'items' =&gt; 5,<br />
			'cache_duration' =&gt; 1800,<br />
			'date_format' =&gt; 'M jS, g:i a'<br />
		));<br />
		?&gt;<br />
  &lt;/div&gt;</code>
</p></blockquote>
<p>I also took advantage of the template system that the WP Plugin uses and edited one of the .tmpl files that came with the plugin. After some tinkering and a little thought I came up with the following as my defined .tmpl&#8230;</p>
<blockquote>
<p><code>div id="simplepie"&gt;<br />
	{IF_ERROR_BEGIN}p class="error"&gt;{ERROR_MESSAGE}/p&gt;{IF_ERROR_END}</p>
<p>	ul&gt;<br />
	{ITEM_LOOP_BEGIN}<br />
	li&gt;<br />
		p class="title"&gt;strong&gt;&lt;img src="{ITEM_PARENT_FAVICON}" alt="{ITEM_PARENT_TITLE}" title="{ITEM_PARENT_TITLE}" /&gt; a href="{ITEM_PARENT_PERMALINK}"&gt;{ITEM_PARENT_TITLE}/a&gt;/strong&gt;/p&gt;<br />
		br /&gt;<br />
		p class="simplepie_content"&gt;a href="{ITEM_PERMALINK}"&gt;{ITEM_DESCRIPTION}/a&gt;/p&gt;<br />
		p class="date"&gt;{ITEM_DATE}/p&gt;<br />
	/li&gt;<br />
		br class="clear" /&gt;<br />
	{ITEM_LOOP_END}<br />
	/ul&gt;<br />
/div&gt;</code>
</p></blockquote>
<blockquote><p><strong>**See Note In Commets RE: Above Code**</strong></p></blockquote>
<p>Great, I got SimplePie to parse the feeds I wanted and embed it into WP where I wanted, but now I needed to make a few .css classes so it would match the look of my current theme. I whipped up the following, still a bit dirty and rough, I&#8217;ll be the first to admit.</p>
<blockquote><p>
<code>#simplepie{<br />
  margin-top: 10px;<br />
  margin-bottom: 70px;<br />
}<br />
#simplepie ul{<br />
  margin 0 auto;<br />
  background: #FBFBFB;<br />
  border-top: 1px solid #EAEAEA;<br />
  border-bottom: 1px solid #EAEAEA;<br />
}<br />
#simplepie li{<br />
  padding: 5px 5px 0px 5px;<br />
  display:block;<br />
  font-size:1.5em;<br />
  border-bottom: 1px solid #EAEAEA;<br />
}<br />
#simplepie p.simplepie_content{<br />
  text-align: left;<br />
  display: block;<br />
  padding: 0 10px 10px;<br />
}<br />
#simplepie p.date {<br />
  display: block;<br />
  font-size: .7em;<br />
  margin-bottom: 10px;<br />
}<br />
#simplepie li:last-child{<br />
  border-bottom: none;<br />
}<br />
br.clear {<br />
  clear:both;<br />
  display: block;<br />
  height: 0;<br />
}</code>
</p></blockquote>
<p>Almost there! Now I just edited a few already made classes that controlled the links how I liked and made them target the html that the .tmpl rendered as the SimplePie Plugin parsed my code.</p>
<blockquote><p>
<code>#mainNav, #simplepie a:link,<br />
#mainNav, #simplepie a:visited{<br />
  color: #999;<br />
}<br />
#mainNav, #simplepie a:hover,<br />
#mainNav, #simplepie a:active{<br />
  text-decoration: underline;<br />
  color: #2E301C;<br />
}</code>
</p></blockquote>
<p>Viola! The result??? Well, you should be seeing it, just above the post area. Simple, strait-forward, &#038; I hope it keeps you at least cursorily entertained while I&#8217;m working on my theme.  </p>
]]></content:encoded>
			<wfw:commentRss>http://matt-simo.com/configured-simplepie-for-wp/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

