<?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/" xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0" version="2.0">

<channel>
	<title>Tech Hive</title>
	
	<link>http://tech-hive.com</link>
	<description>Mae Paulino | Front End Developer</description>
	<lastBuildDate>Fri, 02 Oct 2009 04:55:42 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.5</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" href="http://feeds.feedburner.com/tech-hive" type="application/rss+xml" /><feedburner:emailServiceId>tech-hive</feedburner:emailServiceId><feedburner:feedburnerHostname>http://feedburner.google.com</feedburner:feedburnerHostname><atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="hub" href="http://pubsubhubbub.appspot.com" /><item>
		<title>On creating themes and going out of your comfort zone</title>
		<link>http://feedproxy.google.com/~r/tech-hive/~3/N_2hbwSaZHM/on-creating-themes-and-going-out-of-your-comfort-zone-20091002</link>
		<comments>http://tech-hive.com/reviews/cms/on-creating-themes-and-going-out-of-your-comfort-zone-20091002#comments</comments>
		<pubDate>Fri, 02 Oct 2009 04:55:42 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[CMS]]></category>
		<category><![CDATA[cms themes]]></category>
		<category><![CDATA[lifestream]]></category>
		<category><![CDATA[notes]]></category>
		<category><![CDATA[sample codes]]></category>
		<category><![CDATA[sweetcron]]></category>

		<guid isPermaLink="false">http://tech-hive.com/?p=63</guid>
		<description><![CDATA[I have always been a WordPress girl, but you have to admit that there are instances where you just have to use something that specializes in that area. 
I&#8217;ve recently overhauled Last Leaf and turned it into a lifestream. I have stopped blogging there since the start of the year and have always thought of [...]]]></description>
			<content:encoded><![CDATA[<p>I have always been a WordPress girl, but you have to admit that there are instances where you just have to use something that specializes in <em>that</em> area. </p>
<p>I&#8217;ve recently overhauled <a href="http://lastleaf.org/items/view/180/new-last-leaf">Last Leaf</a> and turned it into a lifestream. I have stopped blogging there since the start of the year and have always thought of turning it into just that but I haven&#8217;t because creating themes for another CMS seemed intimidating.</p>
<p>At first, I thought of writing my own lifestream, it should have been my way of learning more about RoR but until now, all I have in my folder is the basic install (which I have forgotten how I was able to produce) so I turned to the next best thing: <a href="http://sweetcron.com">Sweetcron</a>. It&#8217;s been months since I have looked at Sweetcron, I remember that I found it so unfriendly to customize to one&#8217;s needs before. Turns out, all I really needed was to read a <a href="http://net.tutsplus.com/misc/building-a-custom-lifestream-website-with-sweetcron/" title="Nettuts: Building a Custom Lifestream Website with Sweetcron">good documentation</a>, a lot of focus and plenty of time to test things out. It&#8217;s a pleasant exercise, and it&#8217;s something I know I&#8217;ll do again.</p>
<p>And so, with the intro done and over with, I suggest that you try and do something you haven&#8217;t tried before once in a while, if you&#8217;re not yet ready to commit full-time to something really big (RoR for me) then do some little things (like theme customizations, I think I want to try Drupal next) and so, here are the notes I made myself remember while writing Last Leaf&#8217;s theme:</p>
<ul>
<li>
<h2>Base your first theme on one of the default ones</h2>
<p>Most of the time, you already have almost everything you need in the default theme, the developers won&#8217;t include that otherwise, I think. Trying to edit the defaults also make the learning curve more enjoyable because you know you won&#8217;t just break something because it acts as your guide in the process.</p>
<p>My first WordPress theme was something based on <a href="http://www.wordpresstheme.com/themes/theme-wordpress-classic/">WordPress Classic</a>, I have little to no knowledge in CSS that time and that&#8217;s the best thing I could come up with. It helped me get familiar with the CMS&#8217; templating system (man, I sound so pretentious) as well as taught me what this CSS shenanigan is. With Sweetcron, I used the Boxy Theme. As soon as you were able to stop the nauseous feeling whenever you see a PHP snippet, you&#8217;d realize that it&#8217;s pretty straightforward. </p>
<p><img src="http://tech-hive.com/wp-content/uploads/2009/09/Picture-3.png" alt="Social Media" title="Social Media" width="160" height="110" class="alignright size-full wp-image-66" /> I had a great time styling the individual boxes, it got a little confusing after a while though, what with all those accounts, so I made a separate file for each one of them like what you can see on the image, it made _activity_feeds.php less cluttered and made isolating the problem easier.
	</li>
<li>
<h2>Experiment</h2>
<p>I wanted to get just the image within the post because I&#8217;m not planning on directing people into the single page of every items and all I really want to show sometimes are the <a href="http://lastleaf.org/items/site/google.com">interior decors</a> I love. At first I used this: <code>&lt;?php echo $item-&gt;item_data[$item-&gt;get_feed_class()]['image']['m']?&gt;</code> which is something you need to call the images you uploaded in Flickr but won&#8217;t work anywhere else. Thankfully, somewhere in the _activity_feeds.php file is <code>&lt;?php echo $item-&gt;get_image()?&gt;</code> and that&#8217;s what I used for my Tumblr and Google Reader posts.</p>
<p>However, I don&#8217;t post images there all the time so I need a way to retrieve the text if the image doesn&#8217;t exist and so, there goes the only thing I&#8217;m good at, if-else statement:</p>
<pre>
<code>&lt;?php if ($item->get_image() == ''):?&gt;
     &lt;?php //display your text here ?&gt;
&lt;?php else: ?&gt;
     &lt;?php //and this is for your photo ?&gt;
&lt;?php endif; ?&gt;</code>
</pre>
</li>
<li>
<h2>Search and then ask</h2>
<p>I would&#8217;ve probably given up on Sweetcron the second time have I not found that <a href="http://net.tutsplus.com/misc/building-a-custom-lifestream-website-with-sweetcron/" title="Nettuts: Building a Custom Lifestream Website with Sweetcron">Nettuts tutorial</a>, all you really need to do is keep your cool if you can&#8217;t find a solution to your problem. And if you can&#8217;t find the solution through searching, go to the usergroup/website of the CMS.
</li>
</ul>
<p>Sweetcron is still new and AFAIK, there&#8217;s only one <a href="http://yongfook.com" title="Yongfook, developer of Sweetcron">developer</a> so it&#8217;s understandable if there&#8217;s no documentation on the site like: is there a way to retrieve the tags I added in my starred items in Google Reader? How do I truncate the title? (&lt;?php echo word_limiter($item-&gt;get_title(), 20) ?&gt; doesn&#8217;t work <img src='http://tech-hive.com/wp-includes/images/smilies/icon_sad.gif' alt=':(' class='wp-smiley' /> ) Is it possible that I could host the images in my own server instead of relying on other sites? However, the <a href="http://groups.google.com/group/sweetcron" title="Sweetcron Google Group">community</a> behind it is very, very friendly and you&#8217;re sure to find answers you&#8217;re looking for there, unless you&#8217;re too shy to ask for it. <img src='http://tech-hive.com/wp-includes/images/smilies/icon_razz.gif' alt=':P' class='wp-smiley' /> </p>

<p><a href="http://feedads.g.doubleclick.net/~a/5i69BWrj74AIcqld06Ldmhr56sU/0/da"><img src="http://feedads.g.doubleclick.net/~a/5i69BWrj74AIcqld06Ldmhr56sU/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/5i69BWrj74AIcqld06Ldmhr56sU/1/da"><img src="http://feedads.g.doubleclick.net/~a/5i69BWrj74AIcqld06Ldmhr56sU/1/di" border="0" ismap="true"></img></a></p><img src="http://feeds.feedburner.com/~r/tech-hive/~4/N_2hbwSaZHM" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://tech-hive.com/reviews/cms/on-creating-themes-and-going-out-of-your-comfort-zone-20091002/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://tech-hive.com/reviews/cms/on-creating-themes-and-going-out-of-your-comfort-zone-20091002</feedburner:origLink></item>
		<item>
		<title>Random CSS tips and tricks</title>
		<link>http://feedproxy.google.com/~r/tech-hive/~3/_LaSFTlEUPI/random-css-tips-and-tricks-20080916</link>
		<comments>http://tech-hive.com/front-end/css/random-css-tips-and-tricks-20080916#comments</comments>
		<pubDate>Tue, 16 Sep 2008 08:45:03 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[browser incompatibility]]></category>
		<category><![CDATA[CSS tips]]></category>
		<category><![CDATA[IE]]></category>
		<category><![CDATA[sample codes]]></category>

		<guid isPermaLink="false">http://tech-hive.com/?p=10</guid>
		<description><![CDATA[I wrote (as in handwritten) this a couple of weeks ago when I was having trouble sleeping, chances are you already know these things but, for the benefit of my rusty memory, I&#8217;ll still post it here. Besides, solving these problems took me hours of frustration, so I better chronicle it.  

There are times [...]]]></description>
			<content:encoded><![CDATA[<p>I wrote (as in handwritten) this a couple of weeks ago when I was having trouble sleeping, chances are you already know these things but, for the benefit of my rusty memory, I&#8217;ll still post it here. Besides, solving these problems took me hours of frustration, so I better chronicle it. <img src='http://tech-hive.com/wp-includes/images/smilies/icon_sad.gif' alt=':(' class='wp-smiley' /> </p>
<ul>
<li>There are times when list items occupy a huge space in IE even though you&#8217;re sure that you haven&#8217;t specified excessive paddings and margins to it. Setting the list item&#8217;s <code>display</code> value to <code>inline-block</code> will solve this (I&#8217;m a little surprised that IE 6 can interpret this value because I&#8217;ve always thought that it only knows <code>block</code> and <code>inline</code>, that&#8217;s how little I think of it).
<p><code>Inline</code> doesn&#8217;t allow paddings and margins at the top and bottom area of the elements, however, it also means losing the width and layout of the element. In <code>inline-block</code>, we achieve just that, lose the excess top and bottom spaces while still being able to maintain the layout of the element. (That is, based on my understanding)</p>
<p>And in some bizarre cases, <code>inline</code> will do and yes, it will still look like it&#8217;s a block item and will just take out the excess margin, weird, yes?  I wish I have an explanation for this.</li>
<li>There are numerous times and reasons why we want to set <code>list-style</code> to <code>none</code>. What sucks is that after you&#8217;ve turned off the <code>list-style</code> to the parent list item, you&#8217;d realize that you want the bullets to show in the children element.
<p>All hell breaks lose when no matter what head-banging you do, it just won&#8217;t show up. Thankfully, <code>display: list-item</code> is there to restore the bullets and is working in IE too!</li>
<li>List items are supposed to line up neatly even when a float is used to an image before it. However, there are times when that&#8217;s not the case in, you guess it! <em>IE 6</em>. Standards-aware browsers will be solved by adding:
<pre><code>
{ overflow:hidden; list-item-position:inside; }
</code></pre>
<p>The result may be that the bullet may be a little too close to the text but at least it&#8217;s not below the list item just like in IE. The trick is to use <code>display:inline-block</code> too.</li>
<li>Not all of the CSS problems are in IE. Sometimes the great Fx 2 has some quirks too. It usually happens in the useful, albeit a little used, <em>autocomplete function</em>. What usually happens is that the autocomplete items go under the <code>div</code> elements below it.
<p>Here&#8217;s what I usually do:</p>
<p>HTML</p>
<pre><code>
&lt;div class="parent_element"&gt;
  &lt;div class="autocomplete"&gt;
    &lt;ul&gt;
      &lt;li&gt;Value here&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>
<p>CSS</p>
<pre><code>
.parent_element { position:relative; z-index:99; overflow:visible; }
</code></pre>
<p>What my understanding of this is that once the <code>z-index</code> is set, then it lifts the entire <code>div</code> and everything within it above every other element in the page therefore eliminating the problem.</li>
</ul>

<p><a href="http://feedads.g.doubleclick.net/~a/gafIaoTvzFYLLFJBZa3EQnAWo6I/0/da"><img src="http://feedads.g.doubleclick.net/~a/gafIaoTvzFYLLFJBZa3EQnAWo6I/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/gafIaoTvzFYLLFJBZa3EQnAWo6I/1/da"><img src="http://feedads.g.doubleclick.net/~a/gafIaoTvzFYLLFJBZa3EQnAWo6I/1/di" border="0" ismap="true"></img></a></p><img src="http://feeds.feedburner.com/~r/tech-hive/~4/_LaSFTlEUPI" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://tech-hive.com/front-end/css/random-css-tips-and-tricks-20080916/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://tech-hive.com/front-end/css/random-css-tips-and-tricks-20080916</feedburner:origLink></item>
		<item>
		<title>A peek at WordPress 2.7</title>
		<link>http://feedproxy.google.com/~r/tech-hive/~3/qGV8kp7JoQI/a-peek-at-wordpress-2-7-20080912</link>
		<comments>http://tech-hive.com/wordpress/overview/a-peek-at-wordpress-2-7-20080912#comments</comments>
		<pubDate>Fri, 12 Sep 2008 08:47:17 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Overview]]></category>
		<category><![CDATA[usability review]]></category>
		<category><![CDATA[WordPress update]]></category>

		<guid isPermaLink="false">http://tech-hive.com/?p=15</guid>
		<description><![CDATA[I&#8217;ve had a copy of the WordPress nightly builds since WP 2.5 RC1 went out because I want to be one of the cool kids who&#8217;s &#8220;ahead of the pack&#8221;. But it just sat there, gathering dust. I never thought of updating it until Matt Mallunweg talked about WordPress 2.7 at WordCamp. I was so [...]]]></description>
			<content:encoded><![CDATA[<p>I&#8217;ve had a copy of the WordPress nightly builds since <a href="http://www.tech-hive.com/wordpress/first-impressions-on-the-wordpress-25-rc1/">WP 2.5 RC1</a> went out because I want to be one of the cool kids who&#8217;s &ldquo;ahead of the pack&rdquo;. But it just sat there, gathering dust. I never thought of updating it until <a href="http://ma.tt">Matt Mallunweg</a> talked about WordPress 2.7 at <a href="http://www.tech-hive.com/updates/wordcamp-philippines-2008/">WordCamp</a>. I was so excited that I updated it once I got home and did not go around to testing and seeing the new features until someone in the mailing list commended the developers for the new comments thread feature.</p>
<p>One update later and I&#8217;m testing the thing locally (yay!) and so far, I say that I like it. </p>
<h3>Documentation</h3>
<p>I think they&#8217;re planning to integrate the codex to a WP install, am I right? Either that or they&#8217;re too lazy to type in the correct link, I&#8217;d like to believe that it&#8217;s the former just because that would be nice. That way I don&#8217;t have to keep on trying to remember the URI of <a href="http://codex.wordpress.org">WordPress codex</a>, so lame, believe me, I know. And don&#8217;t forget a search box! </p>
<div id="attachment_111" class="wp-caption center" style="width: 510px"><a href="http://www.tech-hive.com/wp-content/uploads/2008/09/help_link.png"><img src="http://www.tech-hive.com/wp-content/uploads/2008/09/help_link-300x89.png" alt="Help integrated in a WP Install?" title="Help integrated in a WP Install?" width="300" height="89" class="size-medium wp-image-111" /></a><p class="wp-caption-text">Help integrated in a WP Install?</p></div>
<p>Now it&#8217;s cute and all but I see a potential problem to it and that is &mdash; <em>tons of files to download/upload</em>. It seems that the 5 minute install is no longer true, it will if you don&#8217;t include the time you need to download then upload the entire thing (I&#8217;m not a big fantastico fan, sorry). But then again, maybe they are going to create a way to connect the install to the codex database? Or whatever is more appropriate name for it.</p>
<h3>Dashboard</h3>
<div id="attachment_112" class="wp-caption alignleft" style="width: 310px"><a href="http://www.tech-hive.com/wp-content/uploads/2008/09/dashboard.png"><img src="http://www.tech-hive.com/wp-content/uploads/2008/09/dashboard-300x161.png" alt="Dashboard" title="Dashboard" width="300" height="161" class="size-medium wp-image-112" /></a><p class="wp-caption-text">Dashboard</p></div> The new dashboard layout sure is clean but somehow, I kinda miss the &#8220;blogs who linked here&#8221; and &#8220;recent comments&#8221; panels. Sure, they&#8217;re filled with splogs and comments dating 2 months back but I kinda like it that way. Or maybe not.</p>
<h3 class="clear">Content</h3>
<h4>Media Library</h4>
<p>I love that you <em>don&#8217;t</em> have to go to the Write Post page just to upload a photo, &#8217;cause you know, sometimes you just <em>want</em> to upload a photo because you&#8217;re too lazy to open your FTP program. I really like the new media library (which was, no offense, kinda worthless before).</p>
<p><div id="attachment_105" class="wp-caption center" style="width: 510px"><a href="http://www.tech-hive.com/wp-content/uploads/2008/09/media_library.png"><img src="http://www.tech-hive.com/wp-content/uploads/2008/09/media_library-300x165.png" alt="Media Library Panel" title="Media Library Panel" width="300" height="165" class="size-medium wp-image-105" /></a><p class="wp-caption-text">Media Library Panel</p></div>
<p>I wonder if an upload video feature is so far-fetched. Or is it even unthinkable because the file size is so huge and why would you want to host your own videos anyway when there&#8217;s <a href="http://youtube.com">youtube</a>, <a href="http://revver.com">revver</a>, <a href="http://vimeo.com">vimeo</a> and likes now?</p>

<p><a href="http://feedads.g.doubleclick.net/~a/f6qmt9J2RmaFogJeSZkDDF-FB94/0/da"><img src="http://feedads.g.doubleclick.net/~a/f6qmt9J2RmaFogJeSZkDDF-FB94/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/f6qmt9J2RmaFogJeSZkDDF-FB94/1/da"><img src="http://feedads.g.doubleclick.net/~a/f6qmt9J2RmaFogJeSZkDDF-FB94/1/di" border="0" ismap="true"></img></a></p><img src="http://feeds.feedburner.com/~r/tech-hive/~4/qGV8kp7JoQI" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://tech-hive.com/wordpress/overview/a-peek-at-wordpress-2-7-20080912/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://tech-hive.com/wordpress/overview/a-peek-at-wordpress-2-7-20080912</feedburner:origLink></item>
		<item>
		<title>Presenting videos using WordPress</title>
		<link>http://feedproxy.google.com/~r/tech-hive/~3/4-Y0sLMUu_Q/presenting-videos-using-wordpress-20080909</link>
		<comments>http://tech-hive.com/wordpress/tutorials/presenting-videos-using-wordpress-20080909#comments</comments>
		<pubDate>Tue, 09 Sep 2008 08:54:56 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[sample codes]]></category>

		<guid isPermaLink="false">http://tech-hive.com/?p=23</guid>
		<description><![CDATA[And without using a plugin.
I thought of creating this post when I was on my way home from the recently concluded WordCamp Philippines. There was a woman who was in Karla Redor&#8217;s talk who asked on how she can host the video in her own blog and use WordPress to file it for her. She [...]]]></description>
			<content:encoded><![CDATA[<p>And without using a plugin.</p>
<p>I thought of creating this post when I was on my way home from the recently concluded <a href="http://www.tech-hive.com/updates/wordcamp-philippines-2008/">WordCamp Philippines</a>. There was a woman who was in <a href="http://rockersworld.com">Karla Redor</a>&#8217;s talk who asked on how she can host the video in her own blog and use WordPress to file it for her. She can use a <a href="http://lorelle.wordpress.com/2007/02/17/video-music-podcasts-audio-and-multimedia-wordpress-plugins/">plugin that will let her upload the videos in her blog</a> or do it the &ldquo;harder&rdquo; way. Something that I&#8217;m very fond of doing.</p>
<p>Seriously, I&#8217;m the type of person who would only resort to using plugins if:</p>
<ol>
<li>I&#8217;m lazy at the time to think of another way without using a plugin</li>
<li>My head is aching and I&#8217;m getting frustrated because it just won&#8217;t follow what I&#8217;m telling it.</li>
</ol>
<p>The reason is because I am <em>not</em> a developer and it&#8217;s really hard to be dependent on a plugin specially if that plugin is what&#8217;s keeping your blog alive. Also, if the developer of the plugin suddenly stops supporting the plugin and no one else is willing to take it up from there. What&#8217;s worse is if it&#8217;s not compatible with the newer version of WordPress. Then I will be lost.</p>
<p>So anyway, on to the &ldquo;how&rdquo;.</p>
<ol>
<li>Convert you video to a <code>.swf</code> file, you can use <a href="http://heywatch.com">Hey!Watch</a>, it has a fee though but considering how it will make your life easier, I think it&#8217;s worth it. Besides it will convert a video for $0.10 so I don&#8217;t think that&#8217;s too much.</li>
<li>Next in your code (you&#8217;d want to add this in your <code>single.php</code> page), call for the video custom field (which you&#8217;ll be adding later on). Note that this should be <strong>within</strong> <a href="http://codex.wordpress.org/The_Loop">the loop</a>. <small>Also, note that the snippet is taken from a <a href="http://wordpress.org/support/topic/196935">WordPress support forum</a> and changed to suit the topic.</small>
<pre><code>
&lt;?php $video = get_post_meta($post->ID, 'video', true); ?&gt;
&lt;?php if (!empty($video)) {;?&gt;
&lt;object type="application/x-shockwave-flash" data="&lt;?php echo $video; ?&gt;" width="400" height="300"&gt;
&lt;param name="movie" value="&lt;?php echo $video; ?&gt;" /&gt;
&lt;/object&gt;
&lt;?php }; ?&gt;
</code></pre>
<p>What does this mean? The first line sets the <code>$video</code> variable to the value of the <code>video</code> key (of the custom field). Next it checks if the <code>video</code> has a value attached to it (in that particular post). If it does, it inserts the value in the <code>data</code> and <code>value</code> properties of <code>object</code> and <code>param</code>. If the <code>video</code> doesn&#8217;t have any values then it won&#8217;t display anything.</p>
<p>This way, it saves you the time to copy and paste the entire code for the video. Now if you want the lazier way, you will have to adhere to some restrictions. For example, you can set the value of <code>data</code> and <code>value</code> to:</p>
<p>&lt;?php bloginfo(&#8217;url&#8217;) ?&gt;/videos/&lt;?php echo $video; ?&gt; </p>
<p>This means that you will only be able to upload videos within the videos folder within your root. That way, you&#8217;ll only put the filename of the video in the custom field value.
</li>
<li>Once you&#8217;ve uploaded your video to your server (within the specified folder of course), go to the admin panel of your blog and then create a post (or a page) in your custom fields area, do what&#8217;s illustrated in the image below:
<p><a href="http://www.tech-hive.com/wp-content/uploads/2008/09/picture-6.png"><img src="http://www.tech-hive.com/wp-content/uploads/2008/09/picture-6.png" alt="" title="Custom Fields" width="500" height="200" class="alignnone size-full wp-image-86" /></a></p>
<p>As you can see, I decided that I want to have another folder within my videos folder. My videos will be categorized according to shows, so the value of my video key is unang_hirit/episode_100.swf. Once published, the post&#8217;s HTML will appear like this:</p>
<pre><code>
&lt;object type="application/x-shockwave-flash" data="http://domain.com/videos/unang_hirit/episode_100.swf" width="400" height="300"&gt;
  &lt;param name="movie" value="http://domain.com/videos/unang_hirit/episode_100.swf" /&gt;
&lt;/object&gt;
</code></pre>
</li>
</ol>
<h3>Featured Video</h3>
<p>If for some reason, you want to create a section that is called the &ldquo;Featured Video&rdquo; section on your sidebar, you can call it by using the following lines of code:</p>
<pre><code>
&lt;?php query_posts('category_name=Featured Videos&#038;showposts=1'); ?&gt;
  &lt;?php while (have_posts()) : the_post(); ?&gt;
    &lt;?php $video = get_post_meta($post->ID, 'video', true); ?&gt;
    &lt;?php if (!empty($video)) {;?&gt;
    &lt;object type="application/x-shockwave-flash" data="&lt;?php echo $video; ?&gt;" width="400" height="300"&gt;
    &lt;param name="movie" value="&lt;?php echo $video; ?&gt;" /&gt;
    &lt;/object&gt;
    &lt;?php }; ?&gt;
  &lt;?php endwhile(); ?&gt;
</code></pre>
<p>If you&#8217;d notice, we recycled the code from above. The only difference is the <code>query_posts</code> tag before the loop. What the <code>query_posts</code> tag does is that it takes a single, recently added post (<code>showposts=1</code>) from a category called &ldquo;Featured Videos&rdquo;. And it&#8217;s the same business as what was discussed above.</p>
<p><strong>Further reading:</strong></p>
<ul>
<li><a href="http://codex.wordpress.org/Using_Custom_Fields">WordPress Codex: Using Custom Fields</a></li>
<li><a href="http://www.alistapart.com/articles/flashsatay">A List Apart: Embedding Flash While Supporting Standards</a></li>
<li><a href="http://codex.wordpress.org/Template_Tags/query_posts">WordPress Codex: Template Tags: query_posts</a></li>
</ul>

<p><a href="http://feedads.g.doubleclick.net/~a/WRlzBFRVwwlUlWGIpCO1P5Hx2NI/0/da"><img src="http://feedads.g.doubleclick.net/~a/WRlzBFRVwwlUlWGIpCO1P5Hx2NI/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/WRlzBFRVwwlUlWGIpCO1P5Hx2NI/1/da"><img src="http://feedads.g.doubleclick.net/~a/WRlzBFRVwwlUlWGIpCO1P5Hx2NI/1/di" border="0" ismap="true"></img></a></p><img src="http://feeds.feedburner.com/~r/tech-hive/~4/4-Y0sLMUu_Q" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://tech-hive.com/wordpress/tutorials/presenting-videos-using-wordpress-20080909/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://tech-hive.com/wordpress/tutorials/presenting-videos-using-wordpress-20080909</feedburner:origLink></item>
		<item>
		<title>min-height in IE 6</title>
		<link>http://feedproxy.google.com/~r/tech-hive/~3/J1TZf_uRYEs/min-height-in-ie-6-20080831</link>
		<comments>http://tech-hive.com/front-end/css/min-height-in-ie-6-20080831#comments</comments>
		<pubDate>Sun, 31 Aug 2008 08:53:24 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[CSS tips]]></category>
		<category><![CDATA[IE]]></category>
		<category><![CDATA[sample codes]]></category>

		<guid isPermaLink="false">http://tech-hive.com/?p=21</guid>
		<description><![CDATA[Would you look at this, while everyone has finally decided that they will be dropping support for IE 6, that&#8217;s when I decided to create a tutorial for implementing min-height for the browser. Anyway, onto the post.
We all know that the min-height property doesn&#8217;t work in IE 6. Instead, the height property acts as both [...]]]></description>
			<content:encoded><![CDATA[<p>Would you look at this, while everyone has finally decided that they will be dropping support for <code>IE 6</code>, that&#8217;s when I decided to create a tutorial for implementing <code>min-height</code> for the browser. Anyway, onto the post.</p>
<p>We all know that the <code>min-height</code> property doesn&#8217;t work in <code>IE 6</code>. Instead, the <code>height</code> property acts as both the element&#8217;s <code>height</code> and <code>min-height</code>. Its role will ultimately rely on the value of your <code>overflow</code> property.</p>
<p>If the <code>overflow</code> property is set to <code>hidden</code> then the height of the element is its <code>max-height</code>. If set on <code>visible</code>, however, then it will be its <code>min-height</code>.</p>
<h3><code>Overflow: Visible</code></h3>
<p>The element will take up the specified height and when the content of the element exceeds the height then the element will just expand vertically (or horizontally, if it needs to). You can define whether the it will expand vertically of horizontally by specifying the value for <code>overflow-y</code> (vertically) or <code>overflow-x</code> (horizontally) (your CSS document won&#8217;t validate for CSS 2.1 though, but it&#8217;s valid once tested against CSS 3).</p>
<p>So your CSS (for IE 6) will look something like this:</p>
<pre>
<code>
div.parent-element { height:300px; overflow-y:visible; overflow-x:hidden; }
</code>
</pre>
<h3>The Complexities that <code>hasLayout</code> Brings</h3>
<p>There are some instances when you have to define the <code>height</code> and <code>overflow</code> properties of an element (usually applicable to lists) to meet the demands of the <code>hasLayout</code> curse in IE. In these instances, you will have to add a bogus height and <code>overflow:hidden</code> thinking that it will not bring harm to your design.</p>
<p>That is until you wanted to add a <code>min-height</code> to the parent <code>div</code>.</p>
<p>If your bogus height is set to 1%, you element will collapse. Setting the <code>height</code> to <code>auto</code> will render your layout worse than before because that means that your element &#8220;will not have a layout&#8221; (ie, your <code>hasLayout</code> is nonexistent in IE).</p>
<p>Setting the <code>height</code> to 100%, however, will then expand your element to the height of its parent <code>div</code> (or element).</p>
<p>You can solve this dilemma by changing your <code>overflow</code> value from <code>hidden</code> to <code>visible</code> and setting the height of your element (usually, list items) to 1% just to retain the bogus height.</p>

<p><a href="http://feedads.g.doubleclick.net/~a/PeT52F_2mf9d34sqWap4yTsVT6o/0/da"><img src="http://feedads.g.doubleclick.net/~a/PeT52F_2mf9d34sqWap4yTsVT6o/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/PeT52F_2mf9d34sqWap4yTsVT6o/1/da"><img src="http://feedads.g.doubleclick.net/~a/PeT52F_2mf9d34sqWap4yTsVT6o/1/di" border="0" ismap="true"></img></a></p><img src="http://feeds.feedburner.com/~r/tech-hive/~4/J1TZf_uRYEs" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://tech-hive.com/front-end/css/min-height-in-ie-6-20080831/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://tech-hive.com/front-end/css/min-height-in-ie-6-20080831</feedburner:origLink></item>
		<item>
		<title>Lessons learned in dealing with IE 6</title>
		<link>http://feedproxy.google.com/~r/tech-hive/~3/-madzP08uAw/lessons-learned-in-dealing-with-ie-6-20080617</link>
		<comments>http://tech-hive.com/front-end/css/lessons-learned-in-dealing-with-ie-6-20080617#comments</comments>
		<pubDate>Tue, 17 Jun 2008 08:41:18 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[browser incompatibility]]></category>
		<category><![CDATA[IE]]></category>

		<guid isPermaLink="false">http://tech-hive.com/?p=8</guid>
		<description><![CDATA[I&#8217;ve been &#8220;battling&#8221; with IE for more than 3 years now and I just felt that it&#8217;s finally time to not only bash the poor beloved browser and instead pay homage to the good things that it was able to instill on me.
There is no such thing as one tweak fix all
If there&#8217;s such a [...]]]></description>
			<content:encoded><![CDATA[<p>I&#8217;ve been &ldquo;battling&rdquo; with IE for more than 3 years now and I just felt that it&#8217;s finally time to not only bash the poor <del datetime="2008-06-17T10:00:29+00:00">beloved</del> browser and instead pay homage to the good things that it was able to instill on me.</p>
<h3>There is no such thing as one tweak fix all</h3>
<p>If there&#8217;s such a thing, the guy (or girl) who was able to find that tweak would&#8217;ve been a bajillionaire by now. That or he/she&#8217;s<del datetime="2008-06-17T10:00:29+00:00">, unfortunately</del> probably a Microsoft employee by now.</p>
<h3>Patience is a virtue (and a very important skill)</h3>
<p>There was a time before when I was able to &ldquo;fix&rdquo; a specific IE bug in one of my dreams. I can&#8217;t remember what that bug was though, but I&#8217;m sure that happened, because that also happened when I was trying to play with WordPress before.</p>
<p>Anyway, I think IE is a great therapy for people who need to manage their angers. I used to be very explosive when I&#8217;m angry or when I can&#8217;t find a solution to a problematic rendering error. Sure, you can say that I matured a little but I think that if IE&#8217;s following my every whim all the time, then I don&#8217;t think I would be used to seeing any design screwed up in the <del datetime="2008-06-17T10:00:29+00:00">blasted</del> <del datetime="2008-06-17T10:00:29+00:00">beloved</del> browser.</p>
<h3>If it fixed your problem&#8230;</h3>
<p>Chances are that it opened a LOT of seemingly unrelated problems waiting to be discovered. I fixed a height problem and the next thing I know, the other elements (who are important at that!) are not showing up anymore. So be wary, be very, very wary about that hacks and fixes.</p>
<h3>With IE, anything is possible</h3>
<p>I honestly have a feeling that the Murphy&#8217;s Law was created with IE in mind, no kidding! If you think that there&#8217;s no way that any element will collapse specially if you already specified its width and height, then expect IE to crush that belief of yours.</p>
<h3>If you&#8217;re dealing with IE, it&#8217;s OK to be paranoid</h3>
<p>And check, and check, and check. There was a time when an office mate and I was checking the same site in IE, just different machines and it&#8217;s rendering differently. Seriously.</p>
<h3>If your element collapsed in IE, chances are that it doesn&#8217;t have a <code>haslayout</code></h3>
<p>And that usually means you need to add a <code>height</code> and <code>width</code> to your element and if that still did not work, add an <code>overflow:hidden</code>. Sometimes that still won&#8217;t work so you have to add a <code>display:block</code>. That usually does the trick. If you don&#8217;t want to add a specific height however, you can add <code>1%</code> or <code>100%</code> as its value, anything as long as it&#8217;s not <code>auto</code> or a pixel or <code>em</code>. Be careful though, if you add a height to its parent div, it&#8217;ll take the height of its parent.</p>
<h3>I could never stress this enough &#8212; <code>haslayout</code> is everything in IE</h3>
<p>If your element is inline, then it&#8217;s fine, but if it&#8217;s a block-level element we&#8217;re talking about, grab the <a href="http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&#038;displaylang=en">IE dev toolbar</a> and hunt for that ever-elusive <code>haslayout</code> property.</p>
<p>Sidenote: Want to run 2 IE in the same machine? Download IE 6 and then download a copy of <a href="http://tredosoft.com/IE7_standalone">IE 7 standalone</a>, yes, it&#8217;s necessary that it&#8217;s in that order and not the other way around because last time I had IE 7 as my default browser and got the IE 6 standalone, IE dev toolbar no longer worked which is one of the things that enabled me to keep my sanity back then.</p>
<h3>Before using an IE hack, check out if you can solve the problem without it.</h3>
<p> Yes, even if it drives you insane. It&#8217;s daunting, it&#8217;s scary, but it&#8217;s to be done. I hate to look at an IE6 specific stylesheet that contains more or less 100 lines of code. If it&#8217;s a problem with margins, try to see if the changes you need to do will make such a big impact to the other browsers, if it&#8217;s hardly noticeable then apply the fix in your main stylesheet. Now if we&#8217;re talking about 20-25 pixels (or more) difference then by all means, do it in a separate stylesheet.</p>
<h3>IE6 doesn&#8217;t want &lt;tr&gt; to have borders</h3>
<p>It&#8217;s annoying when I realized that. I thought the problem was that the table doesn&#8217;t have <code>haslayout</code> (how can a table not have a haslayout when it&#8217;s a block-level element by default, yes?!) that&#8217;s why the borders won&#8217;t show up. Turns out that IE doesn&#8217;t render a border when it&#8217;s in the <code>&lt;tr&gt;</code> tag, you have to add the border in the <code>&lt;td&gt;</code> tag and don&#8217;t forget to add <code>border-collapse:collapse</code> for your <code>table</code> so that the border will look continuous.</p>
<h3>Test again and again and again</h3>
<p>I told this to you before, remember? You can never be too sure with IE so you <em>must</em> be paranoid. You <em>must</em> be an OC and you must never forget to expect the worst case scenarios.</p>
<p>So there! What IE taught me so far, anyone else want to throw in some ideas too?</p>
<p>One unrelated musing, do you know that I just finally realized that this sign &lt; stands for less than and &gt; stands for greater than. It&#8217;s stupid, <strong>I know</strong> but it&#8217;s true! And guess what finally taught me this very &ldquo;complicated&rdquo; mathematical symbol. </p>
<p><strong>HTML!</strong></p>
<p>The less than (&lt;) sign&#8217;s equivalent (just in case you didn&#8217;t know) is &amp; lt; and the greater than (&gt;) sign&#8217;s equivalent is &amp; gt;. Finally, it&#8217;s out of my system.</p>

<p><a href="http://feedads.g.doubleclick.net/~a/PZ2_R2edtMB8lcWnEmvIFm8L1qQ/0/da"><img src="http://feedads.g.doubleclick.net/~a/PZ2_R2edtMB8lcWnEmvIFm8L1qQ/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/PZ2_R2edtMB8lcWnEmvIFm8L1qQ/1/da"><img src="http://feedads.g.doubleclick.net/~a/PZ2_R2edtMB8lcWnEmvIFm8L1qQ/1/di" border="0" ismap="true"></img></a></p><img src="http://feeds.feedburner.com/~r/tech-hive/~4/-madzP08uAw" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://tech-hive.com/front-end/css/lessons-learned-in-dealing-with-ie-6-20080617/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://tech-hive.com/front-end/css/lessons-learned-in-dealing-with-ie-6-20080617</feedburner:origLink></item>
		<item>
		<title>Appending the title of the post in “Read more” links for WordPress</title>
		<link>http://feedproxy.google.com/~r/tech-hive/~3/ju-q9MNkpew/appending-the-title-of-the-post-in-read-more-links-for-wordpress-20080428</link>
		<comments>http://tech-hive.com/wordpress/tutorials/appending-the-title-of-the-post-in-read-more-links-for-wordpress-20080428#comments</comments>
		<pubDate>Mon, 28 Apr 2008 08:52:38 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[sample codes]]></category>
		<category><![CDATA[usability tip]]></category>

		<guid isPermaLink="false">http://tech-hive.com/?p=18</guid>
		<description><![CDATA[One of the guidelines in usability is that you should provide only one way that will lead them to a certain action. For example, if someone sees 2 option buttons, chances are that they might think that each option button does separate tasks when in fact their functions are the same. Also, we have to [...]]]></description>
			<content:encoded><![CDATA[<p>One of the guidelines in usability is that you should <strong>provide only one way that will lead them to a certain action</strong>. For example, if someone sees 2 option buttons, chances are that they might think that each option button does separate tasks when in fact their functions are the same. Also, we have to make sure that the links are descriptive enough and if not, then we should provide a title for the link so when a user hovers over it then they&#8217;ll know where the link will take them. </p>
<p>On a similar note, accessibility advocates encourages people to use unique name for every link that we use on a page (kinda like what I was saying before only have a different reason), meaning countless &ldquo;Read more of this entry&rdquo; is not really the best practice because you&#8217;re using the same text over and over and these texts are leading the user to different pages.</p>
<p>I was looking for a way to add that in <code>&lt;?php the_content(); ?&gt;</code> tag in wordpress before but I couldn&#8217;t do it. What I did then was append the <code>the_title();</code> within <code>the_content();</code> so it looked like this &#8211;</p>
<p><code>&lt;?php the_content('Read more of ' . the_title() . ' &amp; raquo;' ?&gt;</code></p>
<p>The problem though is that it does echo the &ldquo;Read more of&rdquo; but the title is no where in sight! I was so ready to find a way to make it show by hacking away through function.php, thankfully I remembered to check <a href="http://codex.wordpress.org/Template_Tags/the_content" title="Wordpress Codex - Template Tags - the_content"><code>the_content</code> page in the codex first</a>.</p>
<p>What I should&#8217;ve done in the first place is to add parameters to the <code>the_title()</code> tag so it will show like this &#8211;</p>
<p><code>&lt;?php the_content('Read more of ' . the_title('', '', false)) ?&gt;</code></p>
<p>This follows the same parameter as the <code>the_title();</code> template tag.</p>
<blockquote>
<h3>Parameters</h3>
<p><strong>before </strong><br />
(string) Text to place before the title. Defaults to &#8221;.</p>
<p><strong>after </strong><br />
(string) Text to place after the title. Defaults to &#8221;.</p>
<p><strong>display </strong><br />
(Boolean) Display the title (TRUE) or return it for use in PHP (FALSE). Defaults to TRUE.
</p></blockquote>
<p>So you may use it like this:</p>
<p><code>&lt;?php the_content('Read more of ' . the_title('&#038;ldquo ;', '&#038;rdquo ; &#038;raquo ;', false)) ?&gt;</code></p>
<p>So it will echo as <em>Read more of &ldquo;Title of the Post&rdquo; &raquo;</em>.</p>

<p><a href="http://feedads.g.doubleclick.net/~a/l3MuJ56gpKIRmCbrte53Dm8No2Q/0/da"><img src="http://feedads.g.doubleclick.net/~a/l3MuJ56gpKIRmCbrte53Dm8No2Q/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/l3MuJ56gpKIRmCbrte53Dm8No2Q/1/da"><img src="http://feedads.g.doubleclick.net/~a/l3MuJ56gpKIRmCbrte53Dm8No2Q/1/di" border="0" ismap="true"></img></a></p><img src="http://feeds.feedburner.com/~r/tech-hive/~4/ju-q9MNkpew" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://tech-hive.com/wordpress/tutorials/appending-the-title-of-the-post-in-read-more-links-for-wordpress-20080428/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://tech-hive.com/wordpress/tutorials/appending-the-title-of-the-post-in-read-more-links-for-wordpress-20080428</feedburner:origLink></item>
		<item>
		<title>The great IE 6 Hack</title>
		<link>http://feedproxy.google.com/~r/tech-hive/~3/YOYkROYP3KY/the-great-ie-6-hack-20080422</link>
		<comments>http://tech-hive.com/front-end/css/the-great-ie-6-hack-20080422#comments</comments>
		<pubDate>Tue, 22 Apr 2008 08:45:40 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[browser incompatibility]]></category>
		<category><![CDATA[htc]]></category>
		<category><![CDATA[IE]]></category>

		<guid isPermaLink="false">http://tech-hive.com/?p=13</guid>
		<description><![CDATA[As a designer, the biggest problems that I have with IE are the PNG transparency problem and the :hover pseudo class is not working unless it&#8217;s used in the a element.
Thanks for HTC which is only understood by IE 5.5 and above browsers &#8212; I&#8217;ve found some handy &#8220;hacks&#8221; to work around these 2 limitations [...]]]></description>
			<content:encoded><![CDATA[<p>As a designer, the biggest problems that I have with IE are the PNG transparency problem and the <code>:hover</code> pseudo class is not working unless it&#8217;s used in the <code>a</code> element.</p>
<p>Thanks for <acronym title="HTML Components">HTC</acronym> which is only understood by IE 5.5 and above browsers &#8212; I&#8217;ve found some handy &ldquo;hacks&rdquo; to work around these 2 limitations on the browser designers/programmers&#8217; love to hate.</p>
<p>Note: calling it in CSS will make your CSS file invalid even though it&#8217;s a part of <a href="http://reference.sitepoint.com/css/behavior" title="Site Point CSS Reference">CSS property lists</a>, I tested it against CSS 1, 2, 2.1 and 3 (just to be sure) so&#8230; CSS valid-freaks sorry&#8230; <em><a href="http://www.w3.org/TR/1999/WD-becss-19990804" title="Behavioral Extensions to CSS -- W3C Working Draft August 1999">Maybe it remained to be just a part of the draft?</a></em> </p>
<h3>PNG Transparency</h3>
<p>I have to admit that I haven&#8217;t really looked <em>that</em> hard for PNG transparency hacks, sure you can use PNG 8 but, isn&#8217;t it just a <em>&ldquo;PNGized&rdquo;</em> GIF? Anyway, if you&#8217;re certain that you won&#8217;t be using your image on plain backgrounds and your background does not have patterns on them then PNG 8 will be a good solution.</p>
<p>So, while I was looking for a hack to make PNG work on IE 6, I came across <a href="http://www.twinhelix.com/css/iepngfix/">IE PNG Fix of Twinhelix</a> which is a good enough solution for me because it doesn&#8217;t complicate things for me and it also works on PNG backgrounds on CSS and images you have to insert into your HTML file. However, this being a &ldquo;hack&rdquo;, of course it has some limitations too.</p>
<p>The list is from the author, the ones that with emphasis are mine.</p>
<ul>
<li>Can&#8217;t help IE versions prior to 5.5, sorry.</li>
<li>Users can&#8217;t right-click-save processed PNG images, they&#8217;ll save the blank GIF file if they try that. In some cases this might be a feature, not a bug&#8230;</li>
<li>The script detects the &#8220;.png&#8221; extension in image URLs. So if you have a CGI script that generates a PNG image, you may have to rewrite parts of the script, or just cache them as PNG files somewhere. <strong>Apparently, this is also an issue in RoR, I really don&#8217;t know why but the images will still not be transparent unless you specifically call the image using the <code>&lt;img&gt;</code> tag, so say goodbye to your <code>&lt;%= image_tag("path_to_file_here") %&gt;</code> way of calling images (unless it&#8217;s a JPG or GIF of course).</strong></li>
<li>It&#8217;s most reliable on elements with non-&#8217;auto&#8217; dimensions set. So, give images and other elements width/height values; &#8216;100%&#8217;, &#8216;10em&#8217; and &#8216;200px&#8217; and so on are all OK<strong>, otherwise, you will have a heart attack once you&#8217;ve seen it in IE, it&#8217;s transparent, yes but still, it is not pretty</strong>.</li>
<li>Background PNG images can&#8217;t be tiled. This is a limitation of the IE filter.</li>
<li>Similarly, padding and borders don&#8217;t indent the PNG image. An easy fix for this is wrapping your PNG images in container <code>DIV</code>s or similar.</li>
<li>There may be about a short time as soon as the image loads when images are not transparent, before the IE filter kicks in.</li>
</ul>
<p>For it to work, all you have to do is create a blank transparent GIF file (it doesn&#8217;t matter what size it is) put the path to it in the htc file and call the htc by adding</p>
<p><code>* { behavior: url(/path_to/iepngfix.htc) }</code></p>
<p>anywhere in your CSS file. Note that you can replace * with img or whatever element you want. Then voila! PNG transparency has been achieved.</p>
<h3>Applying <code>:hover</code> pseudo class for whatever element in IE 6</h3>
<p>As I&#8217;ve said before, another shortcoming of IE 6 is that it only applies the <code>:hover</code> pseudo class on the <code>a</code> element so it&#8217;s really hard to create a hover state for menu items using the sliding door technique unless all you have to do is change the menu item&#8217;s link color. Unless you love cutting images for specific menu items or your item&#8217;s width is fixed and don&#8217;t care what it&#8217;ll look like once you have increased the font size, then I guess you need not worry about it.</p>
<p>Anyway, this time, I need not look so hard because of <a href="http://www.xs4all.nl/~peterned/csshover.html">whatever:hover</a> yey! All you have to do is put the htc file anywhere in your site, call it in your CSS using the behavior property again like so &#8211;</p>
<p><code>* { behavior: url(/path_to/csshover.htc) }</code></p>
<p>(again you can change * to whatever element you want) and voila! You can apply the <code>:hover</code> pseudo class to whatever element that you want and you can be absolutely certain that it will be reflected in IE 6. Lovely. <img src='http://tech-hive.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p>Is there a hack for IE 6 that you know? Please do share. <img src='http://tech-hive.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p><ins datetime="2008-04-28T06:21:37+00:00">Update (April 28, 2008): <a href="http://www.taintedsong.com">Joni</a> buzzed me earlier to ask if maybe adding the behavior property in a stylesheet that&#8217;s meant only for IE will make your stylesheet valid. I tried it at <a href="http://www.lastleaf.org">Last Leaf</a> and it did! So&#8230; now you can make your site valid even though you&#8217;re using htc. I can&#8217;t believe I failed to test that when I&#8217;ve been using IE conditionals for more than a year already! hehe Credit to Joni Ang, XHTML/CSS/Wordpress theme designer extraordinaire <img src='http://tech-hive.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />  Also, if you&#8217;re using wordpress and you added htc within your theme&#8217;s folder, don&#8217;t forget to add the complete path to your blank.gif and htc, otherwise, it won&#8217;t work.</ins></p>

<p><a href="http://feedads.g.doubleclick.net/~a/acPrPuiF4xtlHPUUIZBUegTzjuE/0/da"><img src="http://feedads.g.doubleclick.net/~a/acPrPuiF4xtlHPUUIZBUegTzjuE/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/acPrPuiF4xtlHPUUIZBUegTzjuE/1/da"><img src="http://feedads.g.doubleclick.net/~a/acPrPuiF4xtlHPUUIZBUegTzjuE/1/di" border="0" ismap="true"></img></a></p><img src="http://feeds.feedburner.com/~r/tech-hive/~4/YOYkROYP3KY" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://tech-hive.com/front-end/css/the-great-ie-6-hack-20080422/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://tech-hive.com/front-end/css/the-great-ie-6-hack-20080422</feedburner:origLink></item>
		<item>
		<title>The Basics of Accessibility</title>
		<link>http://feedproxy.google.com/~r/tech-hive/~3/Pw30v2fs3vk/the-basics-of-accessibility-20080406</link>
		<comments>http://tech-hive.com/advocacies/accessibility/the-basics-of-accessibility-20080406#comments</comments>
		<pubDate>Sun, 06 Apr 2008 08:37:36 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Accessibility]]></category>
		<category><![CDATA[advantages of accessibility]]></category>

		<guid isPermaLink="false">http://tech-hive.com/?p=4</guid>
		<description><![CDATA[It makes me feel a little sad whenever I see people saying that making your website accessible is such a waste of time and resources because it only deals with the blind. When, in fact, that is one of the misconceptions about accessibility.
What is Accessibility?
Just look for its root word &#8212; access. It doesn&#8217;t only [...]]]></description>
			<content:encoded><![CDATA[<p>It makes me feel a little sad whenever I see people saying that making your website accessible is such a waste of time and resources because <strong>it only deals with the blind</strong>. When, in fact, that is one of the misconceptions about accessibility.</p>
<h3>What is Accessibility?</h3>
<p>Just look for its root word &#8212; <em>access</em>. It doesn&#8217;t only mean that blinds and other visually-impaired people should be your focus when it comes to making your site accessible. It means making every people using any kind of browsers, any kind of devices to browse the web, any kind of settings on their browsers, no matter how slow or fast their connection is <strong>must be able to view your site just fine</strong>.</p>
<p>Accessibility is not only making your site well-structured that those using screen readers won&#8217;t be exasperated in using your site but also making your site accessible to:</p>
<ul>
<li>people who have problems with their visions because they are suffering from color blindness and other stuff related to it, or because of old age &#8212; the most popular</li>
<li>people using lynx or other text only browsers</li>
<li>people who don&#8217;t use mice because they are suffering from locomotive disorders</li>
<li>people who have turned off images to save loading time</li>
<li>people who have turned css off</li>
<li>people who are using PDA, their mobile phones, iPhone, iPod, PSP, etc</li>
<li>people who are using their TVs for screen</li>
<li>people who are using browsers older than I am</li>
<li>people who are on dial up</li>
<li>people who have a connection <strong>slower</strong> than a dial up</li>
<li>people who are using monitors with low screen resolution</li>
</ul>
<p>So maybe you can already understand what I&#8217;m trying to say. Accessibility is <strong>not</strong> a waste of time. Rather it is giving more than one ways to your users to see, surf and visit your site.</p>
<p>Do you know that if you&#8217;re a business owner in the United States (<a href="http://www.w3.org/WAI/Policy/" title="Policies Relating to Web Accessibility - WAI">and in some other countries as well</a>) and or someone who owns a website in that (those) area/s, you can be sued if your site is not accessible?</p>
<p>As a matter of fact, back in June 1999, the <strong>Sydney Organizing Committee for the Olympic games was sued by a single individual by the name of Bruce Maguire</strong> due to <a href="http://www.contenu.nu/socog.html" title="Reader's Guide to Sydney Olympics Accessibility Complaint">web inaccessibility</a>. To make long story short &#8212; the International Olympic Committee <strong>lost</strong> the case.</p>
<p>So despite what other people say, making your site accessible is <em>not</em> an option.</p>
<blockquote cite="url"><p>For content creators, the lesson of this case is simple: Accessibility is easy, it is <em>not</em> optional, and if you keep ignoring it you may someday find yourself in court. If an organization as powerful as a national Olympic organizing committee – with effectively unlimited resources and, on the part of its paterfamilias, the International Olympic Committee, a century-long history of exclusion and inaccessibility – can lose a case like this, other cases resting on similar legal principles are likely to prevail.</p>
<p><cite><a href="http://www.contenu.nu/socog.html">Reader&#8217;s Guide to Sydney Olympics Accessibility Complaint</a></cite></p></blockquote>
<h3>How to Make your Site Accessible</h3>
<p>The following are just simple steps in making your site accessible:</p>
<ul>
<li>Add skip links so that people who are using screen readers or who are interested in reading your content right away can skip your menu items.</li>
<li>Make sure that your background and foreground colors have enough contrast</li>
<li>Images must have <code>alt</code> attributes that describes or says what is in the image, this way, if the image did not load at all then the user will know what the image is all about</li>
<li>If the image is too complex to describe in a few words the you should provide <a href="http://www.webaim.org/techniques/images/longdesc.php" title="When to provide long descriptions">long description</a> for that</li>
<li>If the image is only there for decorative purposes then you should either put it in your stylesheet or if it can&#8217;t be helped, then make sure that your <code>alt</code> attribute be blank so that screen readers can just skip it</li>
<li>If you have a video or audio file in your site then you should provide a transcript for that for people who are too lazy to watch or listen or do not want to download the file will still be able to understand what the file is all about</li>
<li>Provide the right hierarchy for your document, it&#8217;s the same with what I said in my <a href="http://www.tech-hive.com/html/why-i-think-the-semantic-web-wont-succeed/" title="Tech Hive: Why I Think the Semantic Web Won't Succeed">last post</a> where a document should only have 1 <code>h1</code> which will be followed by <code>h2</code>(s) and then <code>h3</code> where an <code>h3</code> should never follow an <code>h1</code></li>
<li>Keep moving objects in your site at a minimum</li>
<li>Make sure that your document will still make sense even if the style sheet is not present</li>
<li>Tables should only be used if you&#8217;re presenting a tabular data</li>
<li>Optimize images so that it will not take too much time to load</li>
</ul>
<p>Those are just the simplest steps that one can do to make sure that your site is accessible, it won&#8217;t ensure 100% accessibility of your site but it&#8217;s still better than 0%, right?</p>
<p>Read more:</p>
<ul>
<li><a href="http://www.w3.org/TR/WAI-WEBCONTENT/full-checklist.html">WAI Full Checklist</a></li>
</ul>

<p><a href="http://feedads.g.doubleclick.net/~a/rVAB2JK8dbTqX5L_Y7HLRiNuJ_Y/0/da"><img src="http://feedads.g.doubleclick.net/~a/rVAB2JK8dbTqX5L_Y7HLRiNuJ_Y/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/rVAB2JK8dbTqX5L_Y7HLRiNuJ_Y/1/da"><img src="http://feedads.g.doubleclick.net/~a/rVAB2JK8dbTqX5L_Y7HLRiNuJ_Y/1/di" border="0" ismap="true"></img></a></p><img src="http://feeds.feedburner.com/~r/tech-hive/~4/Pw30v2fs3vk" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://tech-hive.com/advocacies/accessibility/the-basics-of-accessibility-20080406/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://tech-hive.com/advocacies/accessibility/the-basics-of-accessibility-20080406</feedburner:origLink></item>
		<item>
		<title>When ‘is_home()’ doesn’t work</title>
		<link>http://feedproxy.google.com/~r/tech-hive/~3/xzkPe3m8H4Y/when-is-home-doesnt-work-20080308</link>
		<comments>http://tech-hive.com/wordpress/tutorials/when-is-home-doesnt-work-20080308#comments</comments>
		<pubDate>Sat, 08 Mar 2008 08:56:55 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[sample codes]]></category>
		<category><![CDATA[usability tip]]></category>

		<guid isPermaLink="false">http://tech-hive.com/?p=25</guid>
		<description><![CDATA[You hacked your WordPress homepage because you don&#8217;t intend to make a blog out of it and then all of a sudden the very useful conditional tag &#60;?php if(is_home()) ?&#62; no longer works. It happened to me twice and for that 2 occurrences, I couldn&#8217;t find a solution until a couple of days ago.
I&#8217;m working [...]]]></description>
			<content:encoded><![CDATA[<p>You hacked your WordPress homepage because you don&#8217;t intend to make a blog out of it and then all of a sudden the very useful conditional tag <code>&lt;?php if(is_home()) ?&gt;</code> no longer works. It happened to me twice and for that 2 occurrences, I couldn&#8217;t find a solution until a couple of days ago.</p>
<p>I&#8217;m working on this project where I don&#8217;t need to show my posts anywhere aside from the category archive and single, not even in the homepage. What the client wants is that the home page should show all of the categories in the site, no matter if it&#8217;s empty or not and a certain page content must be pulled into it. Because I&#8217;m lazy in creating a page template just for that and assigning that page as the home page, I modified the main index template instead.</p>
<p>Those things are actually easy to do. All I have to do is to write this within the main index template:</p>
<p><code>&lt;?php wp_list_categories('order_by=name&#038;hide_empty=0&#038;title_li='); ?&gt;</code></p>
<p>so it&#8217;ll show all of the categories ordered by the category name whether it has posts or not. And for the page to be pulled into the main index, <code>query_post</code> is the answer:</p>
<p><code>&lt;?php query_posts('page_id=ID'); while (have_posts()) : the_post(); ?&gt;<br />
&lt;h2&gt;&lt;?php the_title(); ?&gt;&lt;/h2&gt;<br />
&lt;?php the_content(); endwhile; ?&gt;</code></p>
<p>so it&#8217;ll show the title and the contents of the page ID.</p>
<p>It worked just as expected and I was so proud of myself until the client asked that the sidebar for the home page be different from the rest of the site. That&#8217;s when I knew that the <code>is_home()</code> doesn&#8217;t work.				</p>
<p>I searched high and low for in the codex and support forum but couldn&#8217;t find anything. I can&#8217;t tell the client that I can&#8217;t fix this so I tried my hunch if it works. I&#8217;m not the type who is a big fan of plugins because I&#8217;m afraid that if the site rely heavily on plugins and and if and when that certain plugins&#8217;s developer goes AWOL, the site might go berserk due to incompatibility and all I could do was search again for a plugin that could replace it.</p>
<p>I thought that the home page is being treated by wordpress as if it&#8217;s a <em>page</em> because I did pull the contents of a page into it. Turns out that I was right!</p>
<p>When I put <code>&lt;?php if(is_page('ID')) { ?&gt;</code> in the sidebar, it worked just as I wanted it to.</p>
<p>So now, I realized that once you&#8217;ve changed the content of your main index template, know that you are also taking out it being your &#8220;home&#8221; because it will start acting like a page (if you pulled a page into it).</p>

<p><a href="http://feedads.g.doubleclick.net/~a/w3Iun3S2JEkNEAmZlOiBIQF8bzA/0/da"><img src="http://feedads.g.doubleclick.net/~a/w3Iun3S2JEkNEAmZlOiBIQF8bzA/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/w3Iun3S2JEkNEAmZlOiBIQF8bzA/1/da"><img src="http://feedads.g.doubleclick.net/~a/w3Iun3S2JEkNEAmZlOiBIQF8bzA/1/di" border="0" ismap="true"></img></a></p><img src="http://feeds.feedburner.com/~r/tech-hive/~4/xzkPe3m8H4Y" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://tech-hive.com/wordpress/tutorials/when-is-home-doesnt-work-20080308/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://tech-hive.com/wordpress/tutorials/when-is-home-doesnt-work-20080308</feedburner:origLink></item>
	</channel>
</rss>
