<?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>Scriptionary Blog &#187; wordpress</title>
	<atom:link href="http://blog.scriptionary.com/tag/wordpress/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.scriptionary.com</link>
	<description>The informal yet informational sub-site</description>
	<lastBuildDate>Fri, 19 Feb 2010 16:21:55 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Wordpress Livetr Theme Addon</title>
		<link>http://blog.scriptionary.com/2008/04/28/wordpress-livetr-theme-addon/</link>
		<comments>http://blog.scriptionary.com/2008/04/28/wordpress-livetr-theme-addon/#comments</comments>
		<pubDate>Mon, 28 Apr 2008 17:26:29 +0000</pubDate>
		<dc:creator>Eddy Luten</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[gravatar]]></category>
		<category><![CDATA[livetr]]></category>
		<category><![CDATA[theme]]></category>
		<category><![CDATA[wordpress]]></category>

		<guid isPermaLink="false">http://blog.scriptionary.com/2008/04/28/wordpress-livetr-theme-addon/</guid>
		<description><![CDATA[If you use the extended version of the Livetr Theme (the one with Gravatars), you might have noticed that the Gravatars don&#8217;t quite look so nice since they&#8217;re compressed into a smaller image size. Below follows a JavaScript snippet which you could use to make the Gravatar pop out of the page when hovered over.
Screenshot:


Code:
Open [...]]]></description>
			<content:encoded><![CDATA[<p>If you use the extended version of the <a href="http://www.livetr.org/livetr-theme/">Livetr Theme</a> (the one with Gravatars), you might have noticed that the Gravatars don&#8217;t quite look so nice since they&#8217;re compressed into a smaller image size. Below follows a JavaScript snippet which you could use to make the Gravatar <em>pop out</em> of the page when hovered over.</p>
<h2>Screenshot:</h2>
<p><img src="http://blog.scriptionary.com/wp-content/uploads/2008/04/pop-out.png" alt="Example Pop-Out" title="pop-out" width="251" height="159" class="alignnone size-full wp-image-15" /><br />
<span id="more-14"></span></p>
<h2>Code:</h2>
<p>Open up <strong>comments.php</strong> in the <code>wp-content/themes/livetr-theme-11/</code> directory and paste the following between the </p>
<pre style="width: 90%; overflow: auto; border: 1px solid silver;">&lt;?php if ($comments) : ?&gt;</pre>
<p>and</p>
<pre style="width: 90%; overflow: auto; border: 1px solid silver;">&lt;h3 id="respond"&gt;Comments:&lt;/h3&gt;</pre>
<p>lines to read the following block of code:</p>
<pre style="width: 100%; height: 300px; overflow: auto; border: 1px solid silver;">
&lt;script type="text/javascript"&gt;

var mouseX;
var mouseY;
var visible = false;
var curElem = false;

var IE = document.all ? true : false;
if (!IE) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = getMouseXY;

document.write('&lt;div id=&quot;gravatarBox&quot; style=&quot;position:absolute; background-color: #FFF; border: 1px solid silver; left:0px;top:0px;width:85px;height:85px;display:none;&quot;&gt;&lt;/div&gt;');

function toggleVis(hovElement, display)
{
	elem = document.getElementById('gravatarBox');
	if (display == true)
	{
		if (!visible)
		{
			elem.style.display = 'block';
			elem.style.backgroundImage = 'url(' + hovElement.src + ')';
			elem.style.backgroundPosition = 'center center';
			elem.style.backgroundRepeat = 'no-repeat';
			visible = true;
			curElem = elem;
		}
	}
	else
	{
		elem.style.display = 'none';
		elem.style.backgroundImage = '';
		visible = false;
		curElem = false;
	}
}

function getMouseXY(e)
{
  if (IE)
  {
    mouseX = event.clientX + document.body.scrollLeft;
    mouseY = event.clientY + document.body.scrollTop;
  }
  else
  {
    mouseX = e.pageX;
    mouseY = e.pageY;
  }

  // catch possible negative values in NS4
  if (mouseX &lt; 0) mouseX = 0;
  if (mouseY &lt; 0) mouseY = 0;

	if ( visible == true &amp;&amp; curElem != false )
	{
		curElem.style.left = (mouseX + 5) + 'px';
		curElem.style.top = (mouseY - 85) + 'px';
	}

  return true;
}

&lt;/script&gt;
</pre>
<p>Now find and change:</p>
<pre style="width: 90%; overflow: auto; border: 1px solid silver;">&lt;img src=&quot;&lt;?php gravatar() ?&gt;&amp;default=&lt;?php bloginfo('home'); ?&gt;/wp-content/themes/livetr/images/blank_gravatar.gif&quot; class=&quot;gravatar&quot; align=&quot;left&quot; /></pre>
<p>To:</p>
<pre style="width: 90%; overflow: auto; border: 1px solid silver;">&lt;img onmouseover=&quot;toggleVis(this, true);&quot; onmouseout=&quot;toggleVis(this, false);&quot; src=&quot;&lt;?php gravatar() ?&gt;&amp;default=&lt;?php bloginfo('home'); ?&gt;/wp-content/themes/livetr/images/blank_gravatar.gif&quot; class=&quot;gravatar&quot; align=&quot;left&quot; /&gt;</pre>
<h2>Notes:</h2>
<p>I don&#8217;t claim that the code above will work on all browsers, I&#8217;ve tested it on Firefox 2.0.0.13 and Internet Explorer 7. You might have to change some things around to make it compatible with other themes and the style I&#8217;ve attached to the <code>&lt;div&gt;</code> if you want it to look good with your theme. Also, I&#8217;ve just finished this snippet so it might need some optimization (it&#8217;s quite hack-ish): my forte is not JavaScript/DOM.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.scriptionary.com/2008/04/28/wordpress-livetr-theme-addon/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
