<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" media="screen" href="/~d/styles/rss2full.xsl"?><?xml-stylesheet type="text/css" media="screen" href="http://feeds.feedburner.com/~d/styles/itemcontent.css"?><rss 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/" version="2.0">

<channel>
	<title>Spanned Fish</title>
	
	<link>http://spannedfish.com</link>
	<description>a webdev' notebook</description>
	<lastBuildDate>Wed, 07 Apr 2010 17:18:22 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="self" type="application/rss+xml" href="http://feeds.feedburner.com/SpannedFish" /><feedburner:info xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0" uri="spannedfish" /><atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="hub" href="http://pubsubhubbub.appspot.com/" /><item>
		<title>Hide dotted border around links with css</title>
		<link>http://spannedfish.com/css/hide-dotted-border-around-links-with-css/</link>
		<comments>http://spannedfish.com/css/hide-dotted-border-around-links-with-css/#comments</comments>
		<pubDate>Wed, 07 Apr 2010 17:17:49 +0000</pubDate>
		<dc:creator>&lt;breadcrumbs&gt;</dc:creator>
				<category><![CDATA[CSS]]></category>

		<guid isPermaLink="false">http://spannedfish.com/?p=116</guid>
		<description><![CDATA[One of the forgotten css rules is the one that allow to delete the dotted border that is present around links. Because it&#8217;s ugly for sure, I always want to, but because it&#8217;s not so visible, I always forget. I won&#8217;t anymore from now  
here is the tip :

a &#123;
outline: 0;
&#125;

]]></description>
			<content:encoded><![CDATA[<p>One of the forgotten css rules is the one that allow to delete the dotted border that is present around links. Because it&#8217;s ugly for sure, I always want to, but because it&#8217;s not so visible, I always forget. I won&#8217;t anymore from now <img src='http://spannedfish.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p>here is the tip :</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;">a <span style="color: #00AA00;">&#123;</span>
<span style="color: #000000; font-weight: bold;">outline</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://spannedfish.com/css/hide-dotted-border-around-links-with-css/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>CSS and this annoying 0 0 0 0 order</title>
		<link>http://spannedfish.com/css/css-and-this-annoying-0-0-0-0-order/</link>
		<comments>http://spannedfish.com/css/css-and-this-annoying-0-0-0-0-order/#comments</comments>
		<pubDate>Sat, 27 Mar 2010 13:30:58 +0000</pubDate>
		<dc:creator>&lt;breadcrumbs&gt;</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[productivity]]></category>

		<guid isPermaLink="false">http://spannedfish.com/?p=101</guid>
		<description><![CDATA[Every single time I&#8217;m using the shortening method for:

margin-top: 10px;
margin-bottom: 5px;
margin-left: 3px;
margin-right: 30px;

transformed into

margin : 10px 30px 5px 3px;

 
I can&#8217;t remember the order of these items. So I have to go and look over the web to find it. Boring and time wasting. So, last time it happend, I decided to do something I&#8217;ve should [...]]]></description>
			<content:encoded><![CDATA[<p>Every single time I&#8217;m using the shortening method for:</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">margin-top</span><span style="color: #00AA00;">:</span> <span style="color: #933;">10px</span><span style="color: #00AA00;">;</span>
<span style="color: #000000; font-weight: bold;">margin-bottom</span><span style="color: #00AA00;">:</span> <span style="color: #933;">5px</span><span style="color: #00AA00;">;</span>
<span style="color: #000000; font-weight: bold;">margin-left</span><span style="color: #00AA00;">:</span> <span style="color: #933;">3px</span><span style="color: #00AA00;">;</span>
<span style="color: #000000; font-weight: bold;">margin-right</span><span style="color: #00AA00;">:</span> <span style="color: #933;">30px</span><span style="color: #00AA00;">;</span></pre></div></div>

<p>transformed into</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">margin</span> <span style="color: #00AA00;">:</span> <span style="color: #933;">10px</span> <span style="color: #933;">30px</span> <span style="color: #933;">5px</span> <span style="color: #933;">3px</span><span style="color: #00AA00;">;</span></pre></div></div>

<p> <br />
I can&#8217;t remember the order of these items. So I have to go and look over the web to find it. Boring and time wasting. So, last time it happend, I decided to do something I&#8217;ve should have done a long time ago. I tried to find some logic into the shortened method. And without any surprise, there is one. And the very simple way to remember it, it to think about a clock.<br />
 <br />
<a href="http://spannedfish.com/wp-content/uploads/2010/03/clock.jpg"><img class="size-full wp-image-104 aligncenter" title="clock" src="http://spannedfish.com/wp-content/uploads/2010/03/clock.jpg" alt="" width="400" height="400" /></a></p>
<p>Yes, you just have to think in this very easy way. And as a non native developer, I know some web designers that would be very happy to know this little tip.</p>
<p>Here is the order if you want to copy/paste it:</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span> <span style="color: #000000; font-weight: bold;">top</span> <span style="color: #000000; font-weight: bold;">right</span> <span style="color: #000000; font-weight: bold;">bottom</span> <span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">;</span></pre></div></div>

<p> </p>
]]></content:encoded>
			<wfw:commentRss>http://spannedfish.com/css/css-and-this-annoying-0-0-0-0-order/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>How to shorten the comment_author() output on Wordpress</title>
		<link>http://spannedfish.com/wordpress/how-to-shorten-the-comment_author-output-on-wordpress/</link>
		<comments>http://spannedfish.com/wordpress/how-to-shorten-the-comment_author-output-on-wordpress/#comments</comments>
		<pubDate>Sat, 20 Feb 2010 14:10:51 +0000</pubDate>
		<dc:creator>&lt;breadcrumbs&gt;</dc:creator>
				<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[php]]></category>

		<guid isPermaLink="false">http://spannedfish.com/?p=81</guid>
		<description><![CDATA[I have recently made a theme for a friend&#8217;s blog that don&#8217;t like to have long user pseudo or trackback title in comments. If the comment_author () output is too long, some part of the text overflows the div box. Even if it can be fixed through CSS, I thought &#8211; and because it&#8217;s not [...]]]></description>
			<content:encoded><![CDATA[<p>I have recently made a theme for a friend&#8217;s blog that don&#8217;t like to have long user pseudo or trackback title in comments. If the comment_author () output is too long, some part of the text overflows the div box. Even if it can be fixed through CSS, I thought &#8211; and because it&#8217;s not a good thing to modify core files in wordpress &#8211; I needed to create a special function to achieve my friend&#8217;s goal. Here&#8217;s how to do so :</p>
<p>So, we just have to modify the comment_author() function (which is located in wp-include/comment-template.php  line 47) and set up a new function that we will call comment_author_short(). We will insert in the function file of your theme. By doing so you&#8217;ll avoid to see this function disappearing after your next wordpress update. Now, the code.</p>
<h3>Initial function :</h3>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">function</span> comment_author<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
<span style="color: #000088;">$author</span> <span style="color: #339933;">=</span> apply_filters<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'comment_author'</span><span style="color: #339933;">,</span> get_comment_author<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #b1b100;">echo</span> <span style="color: #000088;">$author</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<h3>New function</h3>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">function</span> comment_author_short<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
<span style="color: #000088;">$author</span> <span style="color: #339933;">=</span> apply_filters<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'comment_author'</span><span style="color: #339933;">,</span> get_comment_author<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000088;">$chaine</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$author</span><span style="color: #339933;">;</span>
<span style="color: #000088;">$max</span><span style="color: #339933;">=</span><span style="color: #cc66cc;">35</span><span style="color: #339933;">;</span>
<span style="color: #b1b100;">if</span><span style="color: #009900;">&#40;</span><span style="color: #990000;">strlen</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$chaine</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">&amp;</span>gt<span style="color: #339933;">;=</span><span style="color: #000088;">$max</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span><span style="color: #000088;">$chaine</span><span style="color: #339933;">=</span><span style="color: #990000;">substr</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$chaine</span><span style="color: #339933;">,</span><span style="color: #cc66cc;">0</span><span style="color: #339933;">,</span><span style="color: #000088;">$max</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000088;">$espace</span><span style="color: #339933;">=</span><span style="color: #990000;">strrpos</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$chaine</span><span style="color: #339933;">,</span><span style="color: #0000ff;">&quot; &quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000088;">$chaine</span><span style="color: #339933;">=</span><span style="color: #990000;">substr</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$chaine</span><span style="color: #339933;">,</span><span style="color: #cc66cc;">0</span><span style="color: #339933;">,</span><span style="color: #000088;">$espace</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">.</span><span style="color: #0000ff;">&quot;...&quot;</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span>
<span style="color: #b1b100;">echo</span> <span style="color: #000088;">$chaine</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>Because I&#8217;m not a native developer, I&#8217;ve no problem to explain that this code snippet shorten the output, echos the the shorten string (here chaîne, in french), and that you can change the maximum value by modifying the <code>$max</code> value (here, 35 characters), but I won&#8217;t explain the details.</p>
<p>Then, we just have to modify the file comments.php (or different file in your Wordpress theme folder that deals with comments template). To do so, search for the comment_author() function (via ctrl+f on windows) and add &#8220;_short&#8221; to its end. It must look like that :</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">echo</span> comment_author_short<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span></pre></div></div>

<p>And so, you will be able to have clean trackbacks in your comments, and avoid people letting comments with a long name. I will probably make a little Wordpress plugin in order to make it simple for people that prefer not to enter inside Wordpress&#8217;s code.</p>
<p>source of the shortening snippet : <a href="http://www.phpscripts-fr.net/portions/portion.php?id=28">Php scripts (fr)</a></p>
]]></content:encoded>
			<wfw:commentRss>http://spannedfish.com/wordpress/how-to-shorten-the-comment_author-output-on-wordpress/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Clickable CSS Background</title>
		<link>http://spannedfish.com/css/clickable-css-background/</link>
		<comments>http://spannedfish.com/css/clickable-css-background/#comments</comments>
		<pubDate>Tue, 25 Aug 2009 15:48:35 +0000</pubDate>
		<dc:creator>&lt;breadcrumbs&gt;</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[background]]></category>
		<category><![CDATA[clickable]]></category>

		<guid isPermaLink="false">http://spannedfish.com/?p=11</guid>
		<description><![CDATA[Everytime that I design a website, I have to use clickable images. The simpler, very simpler way is to do as presented below :

&#60;a href=&#34;http://spannedfish.com/&#34;&#62;&#60;img src=&#34;logo.gif&#34;/&#62;&#60;/a&#62;

But this solution is not very accessible. If the user disable image rendering, he will see nor the logo nor alternative text.
So we&#8217;ll use a trick found at Haacked that [...]]]></description>
			<content:encoded><![CDATA[<p>Everytime that I design a website, I have to use clickable images. The simpler, very simpler way is to do as presented below :</p>

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;http://spannedfish.com/&quot;</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">img</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;logo.gif&quot;</span><span style="color: #66cc66;">/</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;</span></pre></div></div>

<p>But this solution is not very accessible. If the user disable image rendering, he will see nor the logo nor alternative text.</p>
<p>So we&#8217;ll use a trick found at <a href="http://haacked.com/archive/2006/01/13/ClickableBackgroundImagesViaCSS.aspx">Haacked</a> that I&#8217;ve just modified and used for one of my blogs. The aim is to use a <strong>W3C XHTML 1.0 Strict</strong> valid code that will allow a css background to be clickable. Here is the code you should have in your html page :</p>

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;header&quot;</span>&gt;</span>
        <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;http://spannedfish.com/&quot;</span>&gt;</span>
        <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">span</span>&gt;</span>Alternative Text<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">span</span>&gt;</span>
        <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span></pre></div></div>

<p>There is the CSS code to include in your style sheet</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;"><span style="color: #cc00cc;">#header</span>
<span style="color: #00AA00;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">url</span><span style="color: #00AA00;">&#40;</span><span style="color: #ff0000; font-style: italic;">logo.gif</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span> <span style="color: #933;">180px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span> <span style="color: #933;">135px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">position</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">relative</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
&nbsp;
<span style="color: #cc00cc;">#header</span> a
<span style="color: #00AA00;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">position</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">absolute</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">top</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span> <span style="color: #933;">180px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span> <span style="color: #933;">135px</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
&nbsp;
<span style="color: #cc00cc;">#header</span> a span
<span style="color: #00AA00;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">display</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">none</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></div></div>

<p>The width and height in the CSS must correspond to your image size. Note that the position attribute, as well as the margins can be changed.</p>
]]></content:encoded>
			<wfw:commentRss>http://spannedfish.com/css/clickable-css-background/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Hello  !</title>
		<link>http://spannedfish.com/the-blog/hello-world/</link>
		<comments>http://spannedfish.com/the-blog/hello-world/#comments</comments>
		<pubDate>Tue, 25 Aug 2009 08:24:34 +0000</pubDate>
		<dc:creator>&lt;breadcrumbs&gt;</dc:creator>
				<category><![CDATA[The blog]]></category>

		<guid isPermaLink="false">http://spannedfish.com/?p=1</guid>
		<description><![CDATA[&#60;span&#62; Fish &#60;/span&#62;

]]></description>
			<content:encoded><![CDATA[<p style="text-align: center;">&lt;span&gt; Fish &lt;/span&gt;</p>
<p style="text-align: center;">
]]></content:encoded>
			<wfw:commentRss>http://spannedfish.com/the-blog/hello-world/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

