<?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>Poiesis Web Development</title>
	<atom:link href="http://www.poiesis.co.za/index.php/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.poiesis.co.za</link>
	<description>Because IT matters</description>
	<lastBuildDate>Thu, 18 Aug 2011 16:35:47 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1.4</generator>
		<item>
		<title>Adding a short code for Adsense insertion into your post</title>
		<link>http://www.poiesis.co.za/index.php/2009/08/adding-an-adsense-short-code/</link>
		<comments>http://www.poiesis.co.za/index.php/2009/08/adding-an-adsense-short-code/#comments</comments>
		<pubDate>Tue, 18 Aug 2009 13:13:15 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[WordPress]]></category>
		<category><![CDATA[functions.php]]></category>
		<category><![CDATA[Google Adsense]]></category>
		<category><![CDATA[is_single()]]></category>

		<guid isPermaLink="false">http://www.poiesis.co.za/?p=122</guid>
		<description><![CDATA[In our last post we looked at hard coding your Google Adsense code to the loop in your index page. That will display Adsense on your home page and your archive pages. In this post we&#8217;ll look at creating a short code to place adsense in your posts on the fly without having to copy [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://www.poiesis.co.za/wp-content/uploads/2009/06/wordpress-150x150.gif" alt="WordPress" title="WordPress" width="150" height="150" class="alignleft size-thumbnail wp-image-70" />In our last post we looked at hard coding your Google Adsense code to the loop in your index page. That will display Adsense on your home page and your archive pages. In this post we&#8217;ll look at creating a short code to place adsense in your posts on the fly without having to copy and paste your Adsense code. This requires us to add a function and a short code to the <code>functions.php</code> page of your theme.</p>
<p>Don&#8217;t worry, it&#8217;s not complicated at all. Just open your <code>functions.php</code> file in your theme&#8217;s folder and scroll to the bottom of the file. Here we&#8217;ll add the following code:</p>
<p><span id="more-122"></span><code>function adsense( $code ) {<br />
&nbsp; &nbsp; $code = '<br />
&nbsp; &nbsp; &nbsp; &nbsp; Your adsense code<br />
&nbsp; &nbsp; ';<br />
return $code;<br />
}<br />
add_shortcode( 'myAds', 'adsense' );</code></p>
<p>Just insert you adsense code in place of the line: <code>Your adsense code</code>, save the file and upload it to your server. Now, when you&#8217;re writing a post, you can just type the <code>[myAds]</code> short code where ever you want your Adsense to appear.</p>
<p>A word of warning though, you might want to put the short code after the read more quick tag (<code>&lt;!--more--&gt;</code>) or it will show up in the loop and you might end up have more than the permitted number of ads on a page! Alternatively, you can use the <code>is_single()</code> conditional tag in the function to ensure that the Adsense code is only inserted when the single post is viewed, and not when it&#8217;s in the loop. </p>
<p>Just replace the code above with the following code:</p>
<p><code>function adsense( $code ) {<br />
&nbsp; &nbsp; if ( ! is_single() ) {<br />
&nbsp; &nbsp; &nbsp; &nbsp; $code = ' ';<br />
&nbsp; &nbsp; } else {<br />
&nbsp; &nbsp; &nbsp; &nbsp; $code = '<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Your adsense code<br />
&nbsp; &nbsp; &nbsp; &nbsp; ';<br />
&nbsp; &nbsp; }<br />
&nbsp; &nbsp; return $code;<br />
}<br />
add_shortcode( 'myAds', 'adsense' );</code></p>
]]></content:encoded>
			<wfw:commentRss>http://www.poiesis.co.za/index.php/2009/08/adding-an-adsense-short-code/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Adding Adsense code to your blog</title>
		<link>http://www.poiesis.co.za/index.php/2009/08/adding-adsense-code-to-your-blog/</link>
		<comments>http://www.poiesis.co.za/index.php/2009/08/adding-adsense-code-to-your-blog/#comments</comments>
		<pubDate>Sat, 08 Aug 2009 15:41:48 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[WordPress]]></category>
		<category><![CDATA[$wp_query->post_count]]></category>
		<category><![CDATA[Google Adsense]]></category>
		<category><![CDATA[have_posts()]]></category>
		<category><![CDATA[index.php]]></category>
		<category><![CDATA[the loop]]></category>

		<guid isPermaLink="false">http://www.poiesis.co.za/?p=113</guid>
		<description><![CDATA[There are a number of plugins you can use to add Google Adsense to your blog. Unfortunately, most of them have very little flexibility when it comes to the positioning of the ads. But fret not; there are a few hacks you can use to hard code the Adsense code to your blog. These hacks [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://www.poiesis.co.za/wp-content/uploads/2009/06/wordpress-150x150.gif" alt="WordPress" title="WordPress" width="150" height="150" class="alignleft size-thumbnail wp-image-70" />There are a number of plugins you can use to add Google Adsense to your blog. Unfortunately, most of them have very little flexibility when it comes to the positioning of the ads. But fret not; there are a few hacks you can use to hard code the Adsense code to your blog. These hacks are applied to your theme.</p>
<p>The obvious place to have your Adsense is on your home page. In this post, we&#8217;ll look at inserting Adsense on your hope page. This would be in the loop in the <code>index.php</code> page. As you can guess, it will also be applied to other pages that use the loop, namely the various archives pages.</p>
<p>Let&#8217;s begin:</p>
<p>Open the <code>index.php</code> file of your theme and find the line <code>&lt;?php if ( have_posts() ) : ?&gt;</code> and add the following just <strong>before</strong> this line:</p>
<p><code>&lt;?php<br />
&nbsp; &nbsp; $postnum = 1;<br />
&nbsp; &nbsp; $showadsense1 = <em>n1</em>;<br />
&nbsp; &nbsp; $showadsense2 = <em>n2</em>;<br />
&nbsp; &nbsp; $showadsense3 = <em>n3</em>;<br />
?&gt;</code></p>
<p>Just change <em>n1</em>, <em>n2</em>, and <em>n3</em> to whatever posts you want the Adsense to appear after. So if you want it to appear after the 1st, 4th and 8th posts, just change it to 1, 4 and 8 respectively. Also, if you only want one Adsense unit in the loop, discard the lines: <code>$showadsense2 = n2;</code> and <code>$showadsense3 = n3;</code>.</p>
<p><span id="more-113"></span>Next, scroll down to the line <code>&lt;?php endwhile; ?&gt;</code> and add the following code just <strong>before</strong> it:</p>
<p><code>&lt;?php if ($postnum == $showadsense1) {<br />
&nbsp; &nbsp; echo '<br />
&nbsp; &nbsp; &nbsp; &nbsp; Your adsense code<br />
&nbsp; &nbsp; ';<br />
} ?&gt;</p>
<p>&lt;?php if ($postnum == $showadsense2) {<br />
&nbsp; &nbsp; echo '<br />
&nbsp; &nbsp; &nbsp; &nbsp; Your adsense code<br />
&nbsp; &nbsp; ';<br />
} ?&gt;</p>
<p>&lt;?php if ($postnum == $showadsense3) {<br />
&nbsp; &nbsp; echo '<br />
&nbsp; &nbsp; &nbsp; &nbsp; Your adsense code<br />
&nbsp; &nbsp; ';<br />
} ?&gt;</p>
<p>&lt;?php $postnum++; ?&gt;</code></p>
<p>Obviously, you need to replace <code>Your adsense code</code> with your adsense code. If you only want one Adsense unit, discard the second and third bits of php code.</p>
<p>That&#8217;s it, just upload the altered <code>index.php</code> page to your theme folder and your Adsense will be enabled. </p>
<p>Maybe you don&#8217;t want Adsense to appear on archives pages that have only one post as that might look MFAish? Not a problem, just show Adsense from the second post onward. Alternatively, you can filter out archive pages that have a post count of 1 by using <code>$wp_query->post_count</code> in the first bit of php code that inserts your Adsense code. In other words, you&#8217;d replace the code that you inserted before the line <code>&lt;?php endwhile; ?&gt;</code> with the following:</p>
<p><code>&lt;?php if ($postnum == $showadsense1) {<br />
<strong>&nbsp; &nbsp; if (($wp_query->post_count) == 1) {<br />
&nbsp; &nbsp; &nbsp; &nbsp; echo ' ' ; }<br />
&nbsp; &nbsp; else {<br />
&nbsp; &nbsp; &nbsp; &nbsp; echo '<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Your adsense code<br />
&nbsp; &nbsp; &nbsp; &nbsp; ';<br />
&nbsp; &nbsp; }</strong><br />
} ?&gt;</p>
<p>&lt;?php if ($postnum == $showadsense2) {<br />
&nbsp; &nbsp; echo '<br />
&nbsp; &nbsp; &nbsp; &nbsp; Your adsense code<br />
&nbsp; &nbsp; ';<br />
} ?&gt;</p>
<p>&lg;?php if ($postnum == $showadsense3) {<br />
&nbsp; &nbsp; echo '<br />
&nbsp; &nbsp; &nbsp; &nbsp; Your adsense code<br />
&nbsp; &nbsp; ';<br />
} ?&gt;</p>
<p>&lt;?php $postnum++; ?&gt;</code></p>
<p>There&#8217;s no need to alter the second and third iterations of the Adsense code as these won&#8217;t appear anyway if there&#8217;s only one post.</p>
<p>In our next post we&#8217;ll look at creating a short code to insert Adsense in your posts.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.poiesis.co.za/index.php/2009/08/adding-adsense-code-to-your-blog/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Automatically Changing the Copyright Year in Your Footer</title>
		<link>http://www.poiesis.co.za/index.php/2009/06/automatically-changing-the-copyright-year-in-your-footer/</link>
		<comments>http://www.poiesis.co.za/index.php/2009/06/automatically-changing-the-copyright-year-in-your-footer/#comments</comments>
		<pubDate>Sun, 28 Jun 2009 20:35:56 +0000</pubDate>
		<dc:creator>Brent</dc:creator>
				<category><![CDATA[PHP]]></category>
		<category><![CDATA[WordPress]]></category>
		<category><![CDATA[date()]]></category>
		<category><![CDATA[footer.php]]></category>

		<guid isPermaLink="false">http://www.poiesis.co.za/?p=97</guid>
		<description><![CDATA[Most WordPress themes have a copyright notice in the footer like the one we use: © Copyright 2003-2009 Poiesis Web Development. The copyright notice is fine for the first year, however, it needs to be updated every January, or your blog begins to look old and unprofessional. Maybe you&#8217;re growing weary of having to open [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.poiesis.co.za/index.php/category/php/"><img src="http://www.poiesis.co.za/wp-content/uploads/2009/06/php.gif" alt="PHP" title="" width="150" height="150" class="alignleft size-full wp-image-99" /></a>Most WordPress themes have a copyright notice in the footer like the one we use: © Copyright 2003-2009 <a href="http://www.poiesis.co.za/">Poiesis Web Development</a>. The copyright notice is fine for the first year, however, it needs to be updated every January, or your blog begins to look old and unprofessional. Maybe you&#8217;re growing weary of having to open the footer.php file to manually change the copyright year every January. Well, since WordPress is based on PHP, there&#8217;s a simple solution called the PHP <code>date()</code> function.</p>
<h2>The <code>date()</code> function</h2>
<p>The PHP <code>date()</code> function returns the current timestamp as a string that can be formatted to displayed particular elements of the timestamp, such as the day, the time, the year, etc. In this post we&#8217;re interested in the year and there are two PHP format for year: <code>'Y'</code>, which represents the full year, as in 2009, and <code>'y'</code>, which represents the last two digits of the year, as in 09. The format that we use in the four digit format (<code>'Y'</code>).</p>
<p><span id="more-97"></span><br />
<h2>Implementing the <code>date()</code> function</h2>
<p>The copyright notice is in the footer.php file of your theme, so you&#8217;ll need to open that in a text editor, such as Notepad. Locate the copyright notice and replace it with the following code:</p>
<p><code>&amp;copy; Copyright 2006-&lt;?php echo date('Y'); ?&gt; &lt;a href="&lt;?php bloginfo('siteurl'); ?&gt;"&gt;&lt;?php bloginfo('name'); ?>&lt;/a&gt;</code></p>
<p>Just change 2006 to the year that you started your blog.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.poiesis.co.za/index.php/2009/06/automatically-changing-the-copyright-year-in-your-footer/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Displaying an External RSS Feed on Your Blog</title>
		<link>http://www.poiesis.co.za/index.php/2009/06/displaying-an-external-rss-feed-on-your-blog/</link>
		<comments>http://www.poiesis.co.za/index.php/2009/06/displaying-an-external-rss-feed-on-your-blog/#comments</comments>
		<pubDate>Tue, 16 Jun 2009 21:07:04 +0000</pubDate>
		<dc:creator>Brent</dc:creator>
				<category><![CDATA[WordPress]]></category>
		<category><![CDATA[rss.php]]></category>
		<category><![CDATA[wp_rss]]></category>

		<guid isPermaLink="false">http://www.poiesis.co.za/?p=81</guid>
		<description><![CDATA[RSS feeds are quite handy. You subscribe to a feed that can be read using an RSS reader, such as Google Reader; and they can be displayed in e-mail applications, such as Microsoft Outlook 2007 and later. But they can also be displayed on your blog! How? You might ask? Well, it&#8217;s really simple. Just [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.poiesis.co.za/index.php/2009/06/displaying-an-external-rss-feed-on-your-blog/"><img src="http://www.poiesis.co.za/wp-content/uploads/2009/06/rss.jpg" alt="Display RSS Feed" title="" width="150" height="150" class="alignleft size-full wp-image-83" /></a>RSS feeds are quite handy. You subscribe to a feed that can be read using an RSS reader, such as Google Reader; and they can be displayed in e-mail applications, such as Microsoft Outlook 2007 and later. But they can also be displayed on your blog!</p>
<p>How? You might ask? Well, it&#8217;s really simple. Just copy the following code and include it in the .php file of the page in your <a href="http://www.poiesis.co.za/index.php/category/wordpress-themes/">WordPress theme</a> where you want the RSS feed to be displayed.</p>
<p><code>&lt;?php include_once(ABSPATH . WPINC . '/rss.php');<br />
wp_rss('http://feeds.feedburner.com/PoiesisWebDev', 3); ?&gt;</code></p>
<p>This could be your theme&#8217;s sidebar, footer or a page template.</p>
<p><span id="more-81"></span>First line includes the <strong>rss.php</strong> file, which is a part of WordPress core and allows us to use the <code>wp_rss()</code> function, which appears in line 2. This function takes two parameters: the url of the RSS feed, and the number of RSS entries to be displayed.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.poiesis.co.za/index.php/2009/06/displaying-an-external-rss-feed-on-your-blog/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Double index.php problem</title>
		<link>http://www.poiesis.co.za/index.php/2009/06/double-indexphp-problem/</link>
		<comments>http://www.poiesis.co.za/index.php/2009/06/double-indexphp-problem/#comments</comments>
		<pubDate>Fri, 12 Jun 2009 21:00:48 +0000</pubDate>
		<dc:creator>Brent</dc:creator>
				<category><![CDATA[WordPress]]></category>
		<category><![CDATA[double index.php]]></category>
		<category><![CDATA[posts_nav_link]]></category>

		<guid isPermaLink="false">http://www.poiesis.co.za/?p=60</guid>
		<description><![CDATA[We&#8217;ve recently upgraded our WordPress installation to WordPress 2.8 and realized just why I hate upgrading WordPress! On the 2.7.1 version the NEXT POSTS / PREVIOUS POSTS link at the bottom of the page worked perfectly, but after the upgrade it pointed erroneously to http://www.poiesis.co.za/index.php/Index.php/page/2/. I&#8217;m sure you can see the problem there: the double [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://www.poiesis.co.za/wp-content/uploads/2009/06/wordpress-150x150.gif" alt="WordPress" title="WordPress" width="150" height="150" class="alignleft size-thumbnail wp-image-70" />We&#8217;ve recently upgraded our WordPress installation to WordPress 2.8 and realized just why I hate upgrading WordPress! On the 2.7.1 version the NEXT POSTS / PREVIOUS POSTS link at the bottom of the page worked perfectly, but after the upgrade it pointed erroneously to <code>http://www.poiesis.co.za/index.php/Index.php/page/2/</code>. I&#8217;m sure you can see the problem there: the double index.php in the URL! The solution to the problem is simple: open the formatting.php in wp-includes and add the following line in the <code>function clean_url</code> after the <code>if ('' == $url) return $url;</code> statement:</p>
<p><code>$url = str_replace('index.php/Index.php','index.php',$url);</code></p>
<p><span id="more-60"></span>The only problem is you need to remember to add the line again every time you upgrade WordPress.</p>
<p><strong>UPDATE:</strong><br />
The <code>function clean_url</code> has been replaced with <code>function esc_url</code>. It is at line 2220 in WordPress version 3.0.4.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.poiesis.co.za/index.php/2009/06/double-indexphp-problem/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Next-Previous link not showing?</title>
		<link>http://www.poiesis.co.za/index.php/2009/06/next-previous-link-not-showing/</link>
		<comments>http://www.poiesis.co.za/index.php/2009/06/next-previous-link-not-showing/#comments</comments>
		<pubDate>Sun, 07 Jun 2009 18:24:13 +0000</pubDate>
		<dc:creator>Brent</dc:creator>
				<category><![CDATA[WordPress]]></category>
		<category><![CDATA[posts_nav_link]]></category>
		<category><![CDATA[the loop]]></category>

		<guid isPermaLink="false">http://www.poiesis.co.za/?p=65</guid>
		<description><![CDATA[We&#8217;ve received a few queries about the next/previous link in our WordPress themes from people wanting to know how to implement it in their themes. Well, the answer is simply insert the posts_nav_link() template tag into the php files of your theme that has the if ( have_posts() ) : while ( have_posts() ) loop. [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://www.poiesis.co.za/wp-content/uploads/2009/06/wordpress-150x150.gif" alt="WordPress" title="WordPress" width="150" height="150" class="alignleft size-thumbnail wp-image-70" />We&#8217;ve received a few queries about the next/previous link in our <a href="http://www.poiesis.co.za/index.php/category/wordpress-themes/">WordPress themes</a> from people wanting to know how to implement it in their themes. Well, the answer is simply insert the <code>posts_nav_link()</code> template tag into the <code>php </code>files of your theme that has the <code>if ( have_posts() ) : while ( have_posts() )</code> loop. These files include index.php and archive.php. When you use the <code>posts_nav_link()</code> tag the next/previous links are generated automatically when required. However, the tag only works for pages of posts.</p>
<p><span id="more-65"></span><br />
<h2>So where do you insert the <code>posts_nav_link()</code> tag?</h2>
<p>You insert it after the loop. In other words, after the <code>&lt;php? endif; &gt;</code> towards the bottom of the file.</p>
<p>If you want to find out more about the <code>posts_nav_link()</code> tag visit the following WordPress pages:</p>
<ul>
<li>http://codex.wordpress.org/Template_Tags/posts_nav_link</li>
<li>http://codex.wordpress.org/Next_and_Previous_Links</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.poiesis.co.za/index.php/2009/06/next-previous-link-not-showing/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>CSS Stylesheets</title>
		<link>http://www.poiesis.co.za/index.php/2009/05/css-stylesheets/</link>
		<comments>http://www.poiesis.co.za/index.php/2009/05/css-stylesheets/#comments</comments>
		<pubDate>Wed, 27 May 2009 23:19:23 +0000</pubDate>
		<dc:creator>Brent</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[browser support]]></category>
		<category><![CDATA[FireFox]]></category>
		<category><![CDATA[Google Chrome]]></category>
		<category><![CDATA[Internet Explorer]]></category>
		<category><![CDATA[Opera]]></category>
		<category><![CDATA[Safari]]></category>
		<category><![CDATA[web design]]></category>

		<guid isPermaLink="false">http://www.poiesis.co.za/?p=49</guid>
		<description><![CDATA[A cascading style sheet or CSS allows you to separate the presentation and content of your web sites, with your content contained in your (X)HTML files and your presentation defined in a CSS. The CSS can be an internal stylesheet defined in the head element of your html file, an external file referenced in the [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.poiesis.co.za/index.php/category/css/"><img src="http://www.poiesis.co.za/wp-content/uploads/2009/05/CSS.jpg" alt="CSS" title="CSS" width="150" height="150" class="alignleft size-full wp-image-86" /></a>A cascading style sheet or CSS allows you to separate the presentation and content of your web sites, with your content contained in your (X)HTML files and your presentation defined in a CSS. The CSS can be an internal stylesheet defined in the <code>head</code> element of your html file, an external file referenced in the <code>head</code> element, or an inline style defined in an html element.</p>
<h3>The Internal Stylesheet</h3>
<p>If you use a CSS style in the <code>header</code> element you need to enclose it in a <code>style</code> element, as in:</p>
<p><code>&lt;head&gt;</code><br />
<code>&lt;title&gt;<em>Your Page Title</em>&lt;title&gt;</code><br />
<code>&lt;style type="text/css"&gt;</code><br />
<code style="margin-left:10px;"><em>CSS Content</em></code><br />
<code>&lt;/style&gt;</code><br />
<code>&lt;/head&gt;</code></p>
<p><span id="more-49"></span>The CSS styles defined in the <code>head</code> element will be applied only to that page, which means you need to define CSS styles for each page, and you need to update each page when you change your design.</p>
<h3>The External Stylesheet</h3>
<p>An external CSS stylesheet exists in a separate <em>.css</em> file and is referenced by a <code>link</code> in the <code>header</code> element, as in:</p>
<p><code>&lt;head&gt;</code><br />
<code>&lt;title&gt;Your Page Title&lt;title&gt;</code><br />
<code>&lt;link rel="stylesheet" type="text/css" href="<em>path to stylesheet.css</em>" &gt;</code><br />
<code>&lt;/head&gt;</code></p>
<p>or it can be imported into the page in the <code>header</code> element, as in:</p>
<p><code>&lt;head&gt;</code><br />
<code>&lt;title&gt;Your Page Title&lt;title&gt;</code><br />
<code>&lt;style type="text/css"&gt;@import url(<em>path to stylesheet.css</em>)&lt;/style&gt;</code><br />
<code>&lt;/head&gt;</code></p>
<p>The external CSS stylesheet can also reference other external stylesheets by simply using <code>@import "<em>path to stylesheet.css</em>"</code>. The styles from the imported stylesheet will be inserted where the <code>@import "<em>path to stylesheet.css</em>"</code> line is located. This is important to remember as subsequent styles that use the same <strong>selector</strong> name or the same <strong>class</strong> name will override previously declared styles.</p>
<p>The major advantage of having an external .<em>css</em> stylesheet lies in the fact that you only need to make changes to the external CSS stylesheet when you change your web site design and those changes will be implemented on all pages that reference the external stylesheet. This improves web site maintenance and flexibility, while reducing <code>html</code> file size and reducing bandwith usage.</p>
<h3>Inline Styles</h3>
<p>Finally, inline styles are placed directly in the element that you want to style using the CSS syntax <code><em>property</em></code>: <code><em>value</em></code>. For example, <code>&lt;div style="background-color: red;"&lt; will give the div a red background color. This defeats the purpose of CSS and makes the maintenance of a web site more complicated.</p>
<h3>Cascading Stylesheets</h3>
<p>It is possible to use all three type of CSS stylesheets on one page, and you can reference more than one stylesheet in your <code>head</code> element. In this event the various CSS styles and stylesheets will cascade into one, with the styles in CSS stylesheet that is loaded last overriding the styles is CSS stylesheet that were loaded first. As the content of an <code>html</code> file, and the content of a .<em>css</em> file, is read and loaded sequentially from top to bottom, inline styles will override CSS stylesheets defined or linked in the <code>head</code> element; and if the reference to the external CSS stylesheet in the <code>head</code> element is placed below the internal stylesheet, the external stylesheet will override the internal style sheet. But this only applies to duplicate styles.</p>
<h3>Browser Support</h3>
<p>One major disadvantage of using CSS stylesheets is the varying support that the different browsers offer. Currently, the major browsers are Internet Explorer 6, Internet Explorer 7, Internet Explorer 8, Mozilla Firefox 2, Mozilla Firefox 3, Safari, Google Chrome, Opera 9.6 and Opera 10. Testing your web site design and layout against all these browsers can become tedious! More on browser quirks later.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.poiesis.co.za/index.php/2009/05/css-stylesheets/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>CSS Background Properties</title>
		<link>http://www.poiesis.co.za/index.php/2009/05/css-background-properties/</link>
		<comments>http://www.poiesis.co.za/index.php/2009/05/css-background-properties/#comments</comments>
		<pubDate>Tue, 26 May 2009 19:53:44 +0000</pubDate>
		<dc:creator>Brent</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[background-attachment]]></category>
		<category><![CDATA[background-color]]></category>
		<category><![CDATA[background-image]]></category>
		<category><![CDATA[background-position]]></category>
		<category><![CDATA[background-repeat]]></category>
		<category><![CDATA[web design]]></category>

		<guid isPermaLink="false">http://www.poiesis.co.za/?p=31</guid>
		<description><![CDATA[Now that our first WordPress Theme is done, we can start discussing designing your own site. When designing your site, the first thing you need to consider your layout and your background. With CSS these can be two separate things with your background being your page and your layout being your divs that you place [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.poiesis.co.za/index.php/category/css/"><img src="http://www.poiesis.co.za/wp-content/uploads/2009/05/CSS.jpg" alt="CSS" title="CSS" width="150" height="150" class="alignleft size-full wp-image-86" /></a>Now that <a href="http://www.poiesis.co.za/index.php/2009/05/simply-smart/">our first WordPress Theme</a> is done, we can start discussing designing your own site. When designing your site, the first thing you need to consider your layout and your background. With <strong>CSS</strong> these can be two separate things with your background being your page and your layout being your <code>div</code>s that you place and position over the page. Background properties can also be applied to your divs, but then they will be restricted to the divs that contain them. In this tutorial we&#8217;ll look at the background properties that can go in the <code>body</code> element of your <em>stylesheet.css</em> file.</p>
<h3>Backgrounds Colors</h3>
<p><span id="more-31"></span>The most common item in the <code>body</code> element is the background, which can be a solid color, an image, or both. Let&#8217;s look a common <code>background</code> property, namely <code>background-color</code>. This sets the color for the entire page and can be either one of 17 standard color names or the <strong>RGB value</strong> of the color in hexadecimal notation.</p>
<p>The 17 standard color names are:</p>
<div style="margin-left:9px;float:left;background-color:transparent;height:10px;width:10px;border:solid 1px #ccc;"></div>
<div style="margin-top:-3px;margin-left:30px;">transparent</div>
<div style="margin-left:9px;float:left;background-color:aqua;height:10px;width:10px;border:solid 1px #ccc;"></div>
<div style="margin-top:-3px;margin-left:30px;">aqua</div>
<div style="margin-left:9px;float:left;background-color:black;height:10px;width:10px;border:solid 1px #ccc;"></div>
<div style="margin-top:-3px;margin-left:30px;">black</div>
<div style="margin-left:9px;float:left;background-color:blue;height:10px;width:10px;border:solid 1px #ccc;"></div>
<div style="margin-top:-3px;margin-left:30px;">blue</div>
<div style="margin-left:9px;float:left;background-color:fuchsia;height:10px;width:10px;border:solid 1px #ccc;"></div>
<div style="margin-top:-3px;margin-left:30px;">fuchsia</div>
<div style="margin-left:9px;float:left;background-color:gray;height:10px;width:10px;border:solid 1px #ccc;"></div>
<div style="margin-top:-3px;margin-left:30px;">gray</div>
<div style="margin-left:9px;float:left;background-color:green;height:10px;width:10px;border:solid 1px #ccc;"></div>
<div style="margin-top:-3px;margin-left:30px;">green</div>
<div style="margin-left:9px;float:left;background-color:lime;height:10px;width:10px;border:solid 1px #ccc;"></div>
<div style="margin-top:-3px;margin-left:30px;">lime</div>
<div style="margin-left:9px;float:left;background-color:maroon;height:10px;width:10px;border:solid 1px #ccc;"></div>
<div style="margin-top:-3px;margin-left:30px;">maroon</div>
<div style="margin-left:9px;float:left;background-color:navy;height:10px;width:10px;border:solid 1px #ccc;"></div>
<div style="margin-top:-3px;margin-left:30px;">navy</div>
<div style="margin-left:9px;float:left;background-color:olive;height:10px;width:10px;border:solid 1px #ccc;"></div>
<div style="margin-top:-3px;margin-left:30px;">olive</div>
<div style="margin-left:9px;float:left;background-color:purple;height:10px;width:10px;border:solid 1px #ccc;"></div>
<div style="margin-top:-3px;margin-left:30px;">purple</div>
<div style="margin-left:9px;float:left;background-color:red;height:10px;width:10px;border:solid 1px #ccc;"></div>
<div style="margin-top:-3px;margin-left:30px;">red</div>
<div style="margin-left:9px;float:left;background-color:silver;height:10px;width:10px;border:solid 1px #ccc;"></div>
<div style="margin-top:-3px;margin-left:30px;">silver</div>
<div style="margin-left:9px;float:left;background-color:teal;height:10px;width:10px;border:solid 1px #ccc;"></div>
<div style="margin-top:-3px;margin-left:30px;">teal</div>
<div style="margin-left:9px;float:left;background-color:white;height:10px;width:10px;border:solid 1px #ccc;"></div>
<div style="margin-top:-3px;margin-left:30px;">white</div>
<div style="margin-left:9px;float:left;background-color:yellow;height:10px;width:10px;border:solid 1px #ccc;"></div>
<div style="margin-top:-3px;margin-left:30px;">yellow</div>
<p>These colors can be used as in <code> background-color: red;</code> to set the page color to red, or <code> background-color: blue;</code> to set the color to blue. The default color is set to transparent and will show whatever is below the current element, in this case it will show the background color of the browser, which is white by default, but can be set to another color by the user. Therefore, you should always specify a background color for your page.</p>
<p>Alternatively, you could set the page color by using the RGB values in hexadecimal notation preceded by a &#8216;<code>#</code>&#8216; as in <code>background-color: #ffffff;</code> for white or <code>background-color: #000000;</code> for black. These values use the six-digit RGB notation (<code>#rrggbb</code>). If the two-digit values for Red are the same, and the two-digit values for Green are the same, and the two-digit values for Blue are the same, as in <code>background-color: #0066cc;</code> for example, then the six-digit RGB notation can be abbreviated to the three-digit RGB notation (<code>#rgb</code>) as in <code>background-color: #06c;</code>. However, you cannot abbreviate the RGB notation if any of the three RGB color pairings have differing values. Thus, <code>background-color: #0066cf;</code> cannot be abbreviated to <code>background-color: #06cf;</code> as this has four digits. Only three or six digits are permitted.</p>
<h3>Background Image</h3>
<p>Another common background property is <code>background-image</code>, which uses the <code>url()</code> keyword to specify the path to the image as in <code>background-image: url(images/myImage.bmp)</code> for a relative path or <code>background-image: url(http://poiesis.co.za/css/images/myImage.bmp)</code> for a fixed path. But things really become interesting when using <code>background-image</code> with other <code>background </code> elements such as <code>background-position</code>, <code>background-repeat</code>, and <code>background-attachment</code>.</p>
<h4>Background-repeat</h4>
<p>The <code>background-repeat</code> property controls the repetition of the background image. This can be one of four values:</p>
<ul>
<li><code>repeat</code>, which is the default and repeats (tiles) the image both vertically and horizontally</li>
<li><code>no-repeat</code>, which does not repeat (tile) the image and results in a single background image</li>
<li><code>repeat-x</code>, which repeats (tiles) the image horizontally along the x-axis</li>
<li><code>repeat-y</code>, which default and repeats (tiles) the image vertically along the y-axis</li>
</ul>
<h4>Background-position</h4>
<p>The <code>background-position</code> property controls the horizontal and vertical positioning of the background image. This can two values; one for the <strong>horizontal position</strong> and another for the <strong>vertical position</strong>, and can be specified as values keywords, percentages or units, such as pixels or ems.</p>
<p>The keywords values are top, left, center, right and bottom and can be combined as follows:</p>
<ul>
<li><code>top left</code></li>
<li><code>top center</code></li>
<li><code>top right</code></li>
<li><code>center left</code></li>
<li><code>center center</code></li>
<li><code>center right</code></li>
<li><code>bottom left</code></li>
<li><code>bottom center</code></li>
<li><code>bottom right</code></li>
</ul>
<p>
The default values are <code>center center</code>, thus if one or more of the values are not specified, center is used. For example <code>background-position: top;</code> is the same as <code>background-position: top center;</code> and if no <code>background-position</code> is specified, <code>background-position: center center;</code> is used.</p>
<p>When a percentages are specified, they specify the position of the image in relation to the screen resolution or size of the browser window. This is useful for a liquid design. If only one value is provided, as in <code>background-position: 25%;</code> this value is read as the horizontal position and the vertical passion defaults to <code>50%</code>. However, the horizontal and vertical positions are taken from the top left corner so 0% 0% places the top left corner of the image against the top left corner of the browser window, and 100% 100% places the bottom right corner of the image against the bottom right corner of the window.</p>
<p>Units can be used to specify the exact positioning of the image from the left and top margins of the page. Thus, <code>background-position: 20px 25px;</code> places the top left edge corner of the images 20 pixels in from the left margin of the pages and 25 pixels in from the top margin. As with using percentages to specify the horizontal and vertical values; if only one value is provided, as in <code>background-position: 20px;</code> this value is read as the horizontal position and the vertical passion defaults to <code>50%</code>.</p>
<h4>Background-attachment</h4>
<p>Finally, the <code>background-attachment</code> property controls the scrolling behavior of the background images, allowing the background image to either scroll with the page or to remain static with the content scrolling over the background. As you can imagine, this property can be either <code>scroll</code>, which is the default setting and allows the background to scroll with the page content, or <code>fixed</code>, which causes the background to remain static while the page content scrolls over it.</p>
<h4>Putting it all together</h4>
<p>All four background properties can be combined into a single property using the format:</p>
<p><code>background-color background-image background-repeat background-attachment background-position</code></p>
<p>Thus, the <strong>CSS</strong> code:</p>
<p><code>background-color: aqua;<br />
background-image: url(Images/myImage.gif);<br />
background-repeat: no-repeat;<br />
background-attachment: fixed;<br />
background-position: top center;</code></p>
<p>can be replaced with the single <code>background</code> property as follows:</p>
<p><code>background: aqua url(Images/myImage.gif) no-repeat fixed top center;</code></p>
]]></content:encoded>
			<wfw:commentRss>http://www.poiesis.co.za/index.php/2009/05/css-background-properties/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Simply Smart</title>
		<link>http://www.poiesis.co.za/index.php/2009/05/simply-smart/</link>
		<comments>http://www.poiesis.co.za/index.php/2009/05/simply-smart/#comments</comments>
		<pubDate>Mon, 25 May 2009 13:46:45 +0000</pubDate>
		<dc:creator>Brent</dc:creator>
				<category><![CDATA[WordPress]]></category>
		<category><![CDATA[WordPress Themes]]></category>
		<category><![CDATA[automotive themes]]></category>
		<category><![CDATA[dark themes]]></category>

		<guid isPermaLink="false">http://www.poiesis.co.za/?p=10</guid>
		<description><![CDATA[Our First WordPress Theme Our first WordPress theme, which we&#8217;re calling the Simply Smart, is coming along nicely. It&#8217;s a dark red, two-column theme with a fixed width of 1024 pixels designed for an automotive weblogs and is sponsored by custom-car.us. It uses a solid background, with an automotive image in the header (of a [...]]]></description>
			<content:encoded><![CDATA[<h2>Our First WordPress Theme</h2>
<p><a href="http://www.poiesis.co.za/index.php/2009/05/simply-smart/"><img src="http://www.poiesis.co.za/wp-content/uploads/2009/05/screenshot.png" alt="Simply Smart WordPress Theme" title="Simply Smart WordPress Theme" width="300" height="220" class="alignleft size-full wp-image-11" /></a>Our first WordPress theme, which we&#8217;re calling the <strong>Simply Smart</strong>, is coming along nicely. It&#8217;s a dark red, two-column theme with a fixed width of 1024 pixels designed for an automotive weblogs and is sponsored by <a href="http://www.custom-car.us/" rel="nofollow">custom-car.us</a>. It uses a solid background, with an automotive image in the header (of a Smart Car Roadster, hence the &#8220;Smart&#8221; bit in the name), and a simple (hence the &#8220;Simple&#8221; bit in the name) two-column layout with a widget-ready side column on the right. It also supports an Author&#8217;s Archive page, which is ideal for blogs with multiple authors, like this blog (I guess we&#8217;ll be implementing it here too then).</p>
<p><span id="more-10"></span>We&#8217;ve sorted out a subdomain for the themes and theme demos. The subdomain is here: <a href="http://www.poiesis.co.za/wp-themes/index.php">WordPress Themes</a></p>
<p><a href="http://www.poiesis.co.za/wp-themes/Simply%20Smart.zip">Download</a> &bull; <a href="http://www.poiesis.co.za/wp-themes/index.php?wptheme=Simply%20Smart">Live Demo</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.poiesis.co.za/index.php/2009/05/simply-smart/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>There&#8217;s nothing like a recession!</title>
		<link>http://www.poiesis.co.za/index.php/2009/05/theres-nothing-like-a-recession/</link>
		<comments>http://www.poiesis.co.za/index.php/2009/05/theres-nothing-like-a-recession/#comments</comments>
		<pubDate>Wed, 20 May 2009 15:35:28 +0000</pubDate>
		<dc:creator>Brent</dc:creator>
				<category><![CDATA[General]]></category>
		<category><![CDATA[web design]]></category>
		<category><![CDATA[web development]]></category>

		<guid isPermaLink="false">http://www.poiesis.co.za/?p=8</guid>
		<description><![CDATA[There&#8217;s nothing like a recession to get you back on track &#8230; Many years ago I was tasked with creating and maintaining a website for our department at campus. The result was my first website (co-incidentally, it was a table-based layout, the year being 1999 and Y2K being all the rage). From there the idea [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.poiesis.co.za/index.php/2009/05/theres-nothing-like-a-recession/need-a-job/" rel="attachment wp-att-103"><img src="http://www.poiesis.co.za/wp-content/uploads/2009/05/need-a-job-150x150.jpg" alt="I Need A Job!" title="" width="150" height="150" class="alignleft size-thumbnail wp-image-103" /></a>There&#8217;s nothing like a recession to get you back on track &#8230; Many years ago I was tasked with creating and maintaining a website for our department at campus. The result was my first website (co-incidentally, it was a table-based layout, the year being 1999 and Y2K being all the rage). From there the idea of earning some income by doing some web development on the side emerged and poiesis.co.za was registered. Unfortunately, or fortunately, a lucrative job intervened and poiesis.co.za was put on the backburner. It became a small personal website for a while and then a personal collection of bookmarks. In the mean time I developed a couple of content websites as a hobby.</p>
<p><span id="more-8"></span>And then came the credit crunch, and that means get extra income! So here we are again &#8230; back to web development, but with a little help from a chap named Raoul. We&#8217;ve migrated the site to a new host, and have quite a bit of content to finalize and upload, including a good couple of Word Press templates. Most of our content is derived from learning about web development, particularly CSS and table-less design, ASP.NET and PHP, and backend database development using Microsoft Access, Microsoft SQL and MySQL.</p>
<p>So watch this space if you&#8217;re looking to get into web development.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.poiesis.co.za/index.php/2009/05/theres-nothing-like-a-recession/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

