<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="http://feeds.feedburner.com/~d/styles/rss2full.xsl" type="text/xsl" media="screen"?><?xml-stylesheet href="http://feeds.feedburner.com/~d/styles/itemcontent.css" type="text/css" media="screen"?><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:creativeCommons="http://backend.userland.com/creativeCommonsRssModule" xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0" version="2.0">

<channel>
	<title>CSS-Tricks</title>
	
	<link>http://css-tricks.com</link>
	<description>Tips, Tricks, and Techniques on using Cascading Style Sheets.</description>
	<pubDate>Wed, 03 Dec 2008 14:42:42 +0000</pubDate>
	<generator>http://wordpress.org/?v=2.6.5</generator>
	<language>en</language>
			<creativeCommons:license>http://creativecommons.org/licenses/by/2.0/</creativeCommons:license><image><link>http://css-tricks.com</link><url>http://css-tricks.com/images/header.gif</url><title>CSS-Tricks</title></image><atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="self" href="http://feeds.feedburner.com/CssTricks" type="application/rss+xml" /><feedburner:emailServiceId>1026108</feedburner:emailServiceId><feedburner:feedburnerHostname>http://www.feedburner.com</feedburner:feedburnerHostname><item>
		<title>Building an Animated Cartoon Robot with jQuery</title>
		<link>http://feeds.feedburner.com/~r/CssTricks/~3/473664593/</link>
		<comments>http://css-tricks.com/jquery-robot/#comments</comments>
		<pubDate>Wed, 03 Dec 2008 12:45:29 +0000</pubDate>
		<dc:creator>Anthony Calzadilla</dc:creator>
		
		<category><![CDATA[Quick Tip / Trick]]></category>

		<guid isPermaLink="false">http://css-tricks.com/?p=1660</guid>
		<description><![CDATA[Why?
Aside from being a fun exercise, what purpose does something like this have?  None that&#8217;s plainly obvious.  Its about as useful as a miniature ship in a bottle.  Yet it does have an underlying purpose.  It could inspire someone to look beyond the perceived constraints of web designers and developers. 
View [...]]]></description>
			<content:encoded><![CDATA[<h3>Why?</h3>
<p>Aside from being a fun exercise, what purpose does something like this have?  None that&#8217;s plainly obvious.  Its about as useful as a miniature ship in a bottle.  Yet it does have an underlying purpose.  It could inspire someone to look beyond the perceived constraints of web designers and developers. </p>
<p><a href="http://robot.anthonycalzadilla.com/" class="button">View Demo</a></p>
<p>&nbsp;</p>
<h3>Overview</h3>
<p>This project was created by layering several empty divs over each other with transparent PNGs as background images. </p>
<p>The backgrounds were animated at different speeds using a jQuery plug-in by Alexander Farkas. This effect simulates a faux 3-D animated background dubbed the “parallax effect” originating from old-school side scrolling video games.  </p>
<p>The robot is comprised similarly to the background animation scene by layering several DIVs together to create the different robot pieces.  The final step, was animating the robot with some jQuery. </p>
<p><img src="http://css-tricks.com/wp-content/csstricks-uploads/image-architecture.jpg" width="570" height="291" alt="" title="" /></p>
<p><span id="more-1660"></span></p>
<h3>The Markup</h3>
<pre><code class="html">&lt;div id="wrapper"&gt;

  &lt;div id="cloud-01"&gt;
  &lt;div id="cloud-02"&gt;
  &lt;div id="mountains-03"&gt;
  &lt;div id="ground"&gt;

  &lt;div id="full-robot"&gt;
    &lt;div id="branding"&gt;&lt;h1&gt;Robot Head.&lt;/h1&gt;&lt;/div&gt;
    &lt;div id="content"&gt;&lt;p&gt; Robot Chest.&lt;/p&gt;&lt;/div&gt;
    &lt;div id="sec-content"&gt;&lt;p&gt; Robot Pelvis.&lt;/p&gt;&lt;/div&gt;
    &lt;div id="footer"&gt;&lt;p&gt; Robot Legs.&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;

  &lt;/div&gt;<!-- end ground -->
  &lt;/div&gt;<!-- end mountain-03 -->
  &lt;/div&gt;<!-- end cloud-02 -->
  &lt;/div&gt;<!-- end cloud-01 -->

&lt;/div&gt;<!-- end wrapper --></code></pre>
<p>The structure of the divs closely resembles our diagram. None of the DIVs has the width attribute specified so they will expand to fill the size of any browser window they are displayed on. <strong>NOTE:</strong> All the images that make the background scenery parallax effect are 9999px wide. Well beyond the width of any computer display or television in common use. We’ll use CSS to place the background images exactly where we want within each particular div.</p>
<h3>The Style</h3>
<p>The CSS for this project is just as simple as the markup.</p>
<pre><code>h1, p { position: absolute; left: -9999px; }

div {position: relative;}

#wrapper { background: #bedfe4 url(../images/sun.png) no-repeat left -30px; border: 5px solid #402309;}

#cloud-01 { background: url(../images/clouds-01.png) no-repeat left -100px; }                                                         

#cloud-02 {	background: url(../images/clouds-02.png) no-repeat left top; }

#mountains-03 { background: url(../images/mountain-03.png) no-repeat left bottom; }

#ground { background: url(../images/ground-05.png) no-repeat left bottom; }

#full-robot { width: 271px; }

#branding {
	background: url(../images/robot-head.png) no-repeat center top;
	width: 271px;
	height: 253px;
	z-index: 4;
	}

#content {
	background: url(../images/robot-torso.png) no-repeat center top;
	width: 271px;
	height: 164px;
	z-index: 3;
	margin-top: -65px;
	}

#sec-content {
	background: url(../images/robot-hips.png) no-repeat center top;
	width: 271px;
	height: 124px;
	z-index: 2;
	margin-top: -90px;
	}

#footer {
	background: url('../images/robot-legs.png') no-repeat center top;
	width: 271px;
	height: 244px;
	z-index: 1;
	margin-top: -90px;
	}</code></pre>
<p>Absolute positioning is used to pull any header or paragraph text 9999px to the left of the screen. Then we declare every DIV in the page position: relative. By making all the DIVs position: relative;, we now have the ability to the use the z-index property to reverse the natural stacking order of the robot DIVs.</p>
<h3>The jQuery JavaScript</h3>
<p>Disclaimer: The original script to animate the robot was horrid. The good folks at <a href="http://codingcyb.org/main/index.php?pv=robot">coding cyborg</a> were kind enough to clean it up and re-write it.</p>
<pre><code class="javascript">$(document).ready(function(){
$('#cloud-01').css({backgroundPosition: '0 -80px'});
$('#cloud-02').css({backgroundPosition: '0 -30px'});
$('#mountains-03').css({backgroundPosition: '0 50px'});
$('#trees-04').css({backgroundPosition: '0 50px'});
$('#ground').css({backgroundPosition: 'left bottom'});
$('#branding').css({backgroundPosition: 'center 0'});
$('#content').css({backgroundPosition: 'center 0'});
$('#sec-content').css({backgroundPosition: 'center 0'});
$('#footer').css({backgroundPosition: 'center 0'});
$('#wrapper').css({overflow: "hidden"});

	$('#klicker').click(function(){
		$('#cloud-01').animate({backgroundPosition: '(-500px -80px)'}, 20000);
		$('#cloud-02').animate({backgroundPosition: '(-625px -30px)'}, 20000);
		$('#mountains-03').animate({backgroundPosition: '(-2500px 50px)'}, 20000);
		$('#ground').animate({backgroundPosition: '(-5000px bottom)'}, 20000);

	startHim();

	$("#full-robot").animate({left:"50%",marginLeft:"-150px"}, 2000);
	setTimeout("leaveScreen()",15000);
	});

});

var num = 1;

function startHim(){
	num++;
	$("#sec-content").animate({top:"-=5px"},150).animate({top:"+=5px"},150);
	$("#content,#branding").animate({top:"-="+num+"px"},150).animate({top:"+="+num+"px"},150);
	if(num&lt;4){
		setTimeout("startHim()",300);
	} else {
		setTimeout("bounceHim()",300);
	}
}

function bounceHim(){
	$("#sec-content,#branding").animate({top:"-=4px"},150).animate({top:"+=4px"},150);
		$("#content").animate({top:"-=8px"},150).animate({top:"+=8px"},150);
	setTimeout("bounceHim()",300);
}

function leaveScreen(){
	$("#full-robot").animate({left:"100%",marginLeft:"0px"}, 2000);
}</code></pre>
<p>We begin by re-affirming the original background position of all the images. </p>
<p>Upon clicking the <strong>‘#klicker’</strong> div, a function tells jQuery to animate the backgrounds from their current position all the way to the coordinates specified for each div. By separating all the different image layers into different DIVs we can animate the background elements at different speeds. Moving the elements at different speeds gives an illusion of a 3rd dimension. We move the elements in the background at a much slower rate than the elements in the foreground. Notice on this animation that the speed of the clouds in the background is slower than the speed of the mountains. And the mountains are slower than the ground which is the fastest of all. Finally after firing off all these commands to get the background moving the <strong>‘#klicker’</strong> function calls on the <strong>‘startHim()’</strong> function.</p>
<p>The <strong>‘startHim()’</strong> function, you guessed it right, starts our robot. It begins his little bounce and gets him moving to the center of the #wrapper div. The <strong>‘startHim()’</strong> function calls on the <strong>‘bounceHim()’</strong> function. And then it keeps looping.</p>
<p>We need to make the robot seem like it was bouncing on a rough desert rode. To achieve that bouncy irregular effect we’ll use the <strong>‘bounceHim()’</strong> function. It targets the separate robot DIVs and ‘bounces’ them 5px up and then 5px down. That wont be enough though, all the different pieces of the robot bouncing at the same rate looks too stiff. We need to make it look a bit more random and interesting. So we’ll take the div that makes the chest portion of the robot and move it at a different rate than the head and pelvis pieces. We’ll ‘bounce’ the chest part at 8px up and 8px down. This gives the robot a nice off-beat bouncy effect.</p>
<p>The <strong>‘leaveScreen()’</strong> function is the last function called. After 15 seconds (15000) it moves the robot 100% percent to the left of the screen which consequently moves the robot off to the right of the screen.</p>
<p><em><a href="http://www.anthonycalzadilla.com/">Anthony Calzadilla</a> is an independent web designer based out of Miami, FL. USA.</em></p>
<h3>Note from Chris</h3>
<p>I think this is an extremely cool experiment. I&#8217;d say for most users, the end result is indistinguishable from Flash. Yet, the advantages over Flash are enormous. Each piece of the animation is separate and can be altered/replaced easily. Tweaks to the animation style can be done with numbers within the JavaScript file itself as opposed to having to alter an original Flash document and re-export/upload an entire new version.
<p><a href="http://statushq.com"><img src="http://css-tricks.com/images/status-468.jpg" alt="Status: Lightweight Group Communication" /></a></p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~f/CssTricks?a=pSxIO"><img src="http://feeds.feedburner.com/~f/CssTricks?i=pSxIO" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CssTricks?a=tNNTo"><img src="http://feeds.feedburner.com/~f/CssTricks?i=tNNTo" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CssTricks?a=2F5Io"><img src="http://feeds.feedburner.com/~f/CssTricks?i=2F5Io" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/CssTricks/~4/473664593" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://css-tricks.com/jquery-robot/feed/</wfw:commentRss>
		<feedburner:awareness>http://api.feedburner.com/awareness/1.0/GetItemData?uri=CssTricks&amp;itemurl=http%3A%2F%2Fcss-tricks.com%2Fjquery-robot%2F</feedburner:awareness><feedburner:origLink>http://css-tricks.com/jquery-robot/</feedburner:origLink></item>
		<item>
		<title>Links of Interest</title>
		<link>http://feeds.feedburner.com/~r/CssTricks/~3/472527105/</link>
		<comments>http://css-tricks.com/links-of-interest-57/#comments</comments>
		<pubDate>Tue, 02 Dec 2008 12:45:22 +0000</pubDate>
		<dc:creator>Chris Coyier</dc:creator>
		
		<category><![CDATA[Quick Tip / Trick]]></category>

		<guid isPermaLink="false">http://css-tricks.com/?p=1456</guid>
		<description><![CDATA[Double Background Effect with CSS

Soh Tanaka tackles a CSS layout problem that probably many have you have run into. The idea is double backgrounds, that is, having a centered design where the left side has a repeating design and the right site has a different repeating design.
&#160;
New Wufoo Features
Most of you probably know I&#8217;m a [...]]]></description>
			<content:encoded><![CDATA[<h3>Double Background Effect with CSS</h3>
<p><img src="http://css-tricks.com/wp-content/csstricks-uploads/repeatingbg.jpg" width="570" height="95" alt="" title="" /><br />
Soh Tanaka tackles a CSS layout problem that probably many have you have run into. The idea is <a href="http://www.sohtanaka.com/web-design/achieving-double-background-effect-with-css/">double backgrounds</a>, that is, having a centered design where the left side has a repeating design and the right site has a <strong>different</strong> repeating design.</p>
<p>&nbsp;</p>
<h3>New Wufoo Features</h3>
<p>Most of you probably know I&#8217;m a big fan of Wufoo, the web service for building forms. (If you don&#8217;t, I have an <a href="http://css-tricks.com/video-screencasts/28-using-wufoo-for-web-forms/">intro video here</a>). In the last few weeks they have rolled out a bunch of new awesome features. They&#8217;ve <a href="http://wufoo.com/2008/11/18/hey-likert-welcome-to-the-party/">added Likerts</a> (you know, &#8220;Strongly Agree, No Opinion, Mildly Disagree&#8230;&#8221;). They&#8217;ve made it easy to <a href="http://wufoo.com/2008/11/18/multiple-choice-field-upgrades/">add fill-in-the-blank</a> &#8220;Other&#8221; fields to multiple choice questions, and they&#8217;ve seriously <a href="http://wufoo.com/2008/11/18/getting-more-hardware-and-more-hardcore/">upgraded their hardware</a>. Go Wufoo!</p>
<p>&nbsp;</p>
<h3>Lorem2</h3>
<p><a href="http://lorem2.com/">Lorem2</a> is &#8220;<em>an all-around better Lorem experience.</em>&#8221; Just what is always needed: short paragraphs, long paragraphs, short list items, and long list items.</p>
<p>&nbsp;</p>
<h3>The CSS Gallery List</h3>
<p>I once did a CSS Gallery Roundup, but I&#8217;m not even going to link to it because it sucks compared to <a href="http://www.thecssgallerylist.com/">The CSS Gallery List</a>. Not only is this a great list of all the zillion galleries out there, but there are quick links to the submission pages as well as an innovative and really cool system for auto-submitting your page to a wide variety of them automatically ($3).</p>
<p><span id="more-1456"></span></p>
<h3>SimplePie Basics</h3>
<p>David shows us the basics of using SimplePie with a tutorial on <a href="http://scriptandstyle.com/add-the-script-style-feed-to-your-website">How To Add the Script &#038; Style Feed to Your Website</a>.
<p><a href="http://statushq.com"><img src="http://css-tricks.com/images/status-468.jpg" alt="Status: Lightweight Group Communication" /></a></p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~f/CssTricks?a=y6J4O"><img src="http://feeds.feedburner.com/~f/CssTricks?i=y6J4O" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CssTricks?a=Hu6Xo"><img src="http://feeds.feedburner.com/~f/CssTricks?i=Hu6Xo" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CssTricks?a=h4CRo"><img src="http://feeds.feedburner.com/~f/CssTricks?i=h4CRo" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/CssTricks/~4/472527105" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://css-tricks.com/links-of-interest-57/feed/</wfw:commentRss>
		<feedburner:awareness>http://api.feedburner.com/awareness/1.0/GetItemData?uri=CssTricks&amp;itemurl=http%3A%2F%2Fcss-tricks.com%2Flinks-of-interest-57%2F</feedburner:awareness><feedburner:origLink>http://css-tricks.com/links-of-interest-57/</feedburner:origLink></item>
		<item>
		<title>Creating Tabs That Behave</title>
		<link>http://feeds.feedburner.com/~r/CssTricks/~3/471354062/</link>
		<comments>http://css-tricks.com/upward-growing-tabs/#comments</comments>
		<pubDate>Mon, 01 Dec 2008 12:45:39 +0000</pubDate>
		<dc:creator>Chris Coyier</dc:creator>
		
		<category><![CDATA[Quick Tip / Trick]]></category>

		<guid isPermaLink="false">http://css-tricks.com/?p=1654</guid>
		<description><![CDATA[When creating navigational tabs that use real web text, some positioning issues may arise when that text is resized. The natural flow of a web page when text is resized is to push down. This can push your main content area down and/or force the tabs into that area. Using some smart CSS, we can [...]]]></description>
			<content:encoded><![CDATA[<p>When creating navigational tabs that use real web text, some positioning issues may arise when that text is resized. The natural flow of a web page when text is resized is to push down. This can push your main content area down and/or force the tabs into that area. Using some smart CSS, we can fix this issue by creating tabs that <strong>grow upward</strong> when text is resized.</p>
<h3>Bad Example</h3>
<p><img src="http://css-tricks.com/wp-content/csstricks-uploads/badtabs.jpg" width="570" height="316" alt="" title="" /></p>
<p><a href="http://css-tricks.com/examples/GrowTabsUpward/bad.html" class="button">View Bad Example</a></p>
<p>In this example of bad tab behavior, when text is resized the tabs grow downward and push into the main content area. </p>
<p>One solution could be to have the tabs push down the main content area as they grow. In this example that may be fine, but that may be unacceptable for a more image-based design or for folks nervous about losing content below the &#8220;fold&#8221;.</p>
<h3>Good Example</h3>
<p><img src="http://css-tricks.com/wp-content/csstricks-uploads/goodtabs.jpg" width="570" height="350" alt="" title="" /></p>
<p><a href="http://css-tricks.com/examples/GrowTabsUpward/good.html" class="button">View Good Example</a></p>
<p>In our good example, the main content area stays put. The tabs grow upward and the rest of the text grows downward as usual.</p>
<h3>The Trick</h3>
<p>The meat of the trick is using two nested block level elements. The outside block controls the positioning. We need to lock to the top of the main content, so the outside block needs <strong>top: 0;</strong>. The inside block then sticks to the bottom of the outside block with absolute positioning. By setting a fixed bottom value, <strong>bottom: 0;</strong>, the menu items have no where to grow but up.</p>
<p>Menu markup:</p>
<pre><code>&lt;div id="nav"&gt;
	&lt;ul&gt;
		&lt;li&gt;&lt;a href="#"&gt;Tab 4&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href="#"&gt;Tab 3&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href="#"&gt;Tab 2&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href="#"&gt;Tab 1&lt;/a&gt;&lt;/li&gt;
	&lt;/ul&gt;
&lt;/div&gt;</code></pre>
<p>Code purists will notice right away the common folly of wrapping an unordered list in a div unnecessarily. In our case though, it is very necessary, and we need both of those block level elements for our trick.</p>
<p>CSS for the two blocks:</p>
<pre><code>#nav	 {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 0;
}
#nav ul {
   position: absolute;
   bottom: 0;
   right: 0;
}</code></pre>
<p>Here is a visual:</p>
<p><img src="http://css-tricks.com/wp-content/csstricks-uploads/tabsposition.jpg" width="570" height="316" alt="" title="" /></p>
<h3>Note</h3>
<p>This is becoming less and less of an issue as more browsers are <a href="http://www.mezzoblue.com/archives/2008/10/07/zoom/">using full zoom</a> instead of straight text resizing. But still, it&#8217;s just good responsible design at this time.</p>
<p><a href="http://statushq.com"><img src="http://css-tricks.com/images/status-468.jpg" alt="Status: Lightweight Group Communication" /></a></p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~f/CssTricks?a=m7hNO"><img src="http://feeds.feedburner.com/~f/CssTricks?i=m7hNO" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CssTricks?a=2EbPo"><img src="http://feeds.feedburner.com/~f/CssTricks?i=2EbPo" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CssTricks?a=WYXeo"><img src="http://feeds.feedburner.com/~f/CssTricks?i=WYXeo" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/CssTricks/~4/471354062" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://css-tricks.com/upward-growing-tabs/feed/</wfw:commentRss>
		<feedburner:awareness>http://api.feedburner.com/awareness/1.0/GetItemData?uri=CssTricks&amp;itemurl=http%3A%2F%2Fcss-tricks.com%2Fupward-growing-tabs%2F</feedburner:awareness><feedburner:origLink>http://css-tricks.com/upward-growing-tabs/</feedburner:origLink></item>
		<item>
		<title>Prevent iPhone Text Enlargement</title>
		<link>http://feeds.feedburner.com/~r/CssTricks/~3/468443780/</link>
		<comments>http://css-tricks.com/prevent-iphone-text-enlargement/#comments</comments>
		<pubDate>Fri, 28 Nov 2008 12:45:28 +0000</pubDate>
		<dc:creator>Chris Coyier</dc:creator>
		
		<category><![CDATA[Quick Tip / Trick]]></category>

		<guid isPermaLink="false">http://css-tricks.com/?p=1479</guid>
		<description><![CDATA[
The iPhone has a funny way of bumping up the text size on websites when viewing them fairly far &#8220;zoomed out&#8221;. This can be wonderful, as it can help the text be readable while seeing more of the website. It can also be unexpected, undesirable, and break otherwise perfect layouts.
To prevent this on your site, [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://css-tricks.com/wp-content/csstricks-uploads/iphone-text-enlarge.jpg" width="513" height="484" alt="" title="" /></p>
<p>The iPhone has a funny way of bumping up the text size on websites when viewing them fairly far &#8220;zoomed out&#8221;. This can be wonderful, as it can help the text be readable while seeing more of the website. It can also be unexpected, undesirable, and break otherwise perfect layouts.</p>
<p>To prevent this on your site, you can use this:</p>
<pre><code>-webkit-text-size-adjust: none;</code></pre>
<p>Apply it selectively, or directly to the body to prevent resizing everywhere.</p>
<p>Thanks to Ed Brandt for sending in this trick. It fixed a problem on <a href="http://www.brandtdesignstudio.com/">Ed&#8217;s site</a> of some text wrapping in the footer when it shouldn&#8217;t.
<p><a href="http://statushq.com"><img src="http://css-tricks.com/images/status-468.jpg" alt="Status: Lightweight Group Communication" /></a></p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~f/CssTricks?a=SpXzN"><img src="http://feeds.feedburner.com/~f/CssTricks?i=SpXzN" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CssTricks?a=p8Ivn"><img src="http://feeds.feedburner.com/~f/CssTricks?i=p8Ivn" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CssTricks?a=aoH8n"><img src="http://feeds.feedburner.com/~f/CssTricks?i=aoH8n" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/CssTricks/~4/468443780" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://css-tricks.com/prevent-iphone-text-enlargement/feed/</wfw:commentRss>
		<feedburner:awareness>http://api.feedburner.com/awareness/1.0/GetItemData?uri=CssTricks&amp;itemurl=http%3A%2F%2Fcss-tricks.com%2Fprevent-iphone-text-enlargement%2F</feedburner:awareness><feedburner:origLink>http://css-tricks.com/prevent-iphone-text-enlargement/</feedburner:origLink></item>
		<item>
		<title>New Screencast: Hodgepodge of WordPress Tricks</title>
		<link>http://feeds.feedburner.com/~r/CssTricks/~3/467556386/</link>
		<comments>http://css-tricks.com/new-screencast-hodgepodge-of-wordpress-tricks/#comments</comments>
		<pubDate>Thu, 27 Nov 2008 10:45:59 +0000</pubDate>
		<dc:creator>Chris Coyier</dc:creator>
		
		<category><![CDATA[Quick Tip / Trick]]></category>

		<guid isPermaLink="false">http://css-tricks.com/?p=1650</guid>
		<description><![CDATA[It’s WordPress Week here at CSS-Tricks, so I wanted to so a WordPress-themed screencast and cover a lot of mini-tips that haven’t made it into previous WordPress screencasts. See the post page for a complete list of tips covered.

Happy Thanksgiving everyone!

]]></description>
			<content:encoded><![CDATA[<blockquote><p>It’s WordPress Week here at CSS-Tricks, so I wanted to so a WordPress-themed screencast and cover a lot of mini-tips that haven’t made it into previous WordPress screencasts. See the post page for a complete list of tips covered.</p></blockquote>
<p><a href="http://css-tricks.com/video-screencasts/44-hodgepodge-of-wordpress-tricks/"><img src="http://css-tricks.com/wp-content/csstricks-uploads/screencast-44-thumb.jpg" width="249" height="154" alt="" title="" /></a></p>
<p>Happy Thanksgiving everyone!
<p><a href="http://statushq.com"><img src="http://css-tricks.com/images/status-468.jpg" alt="Status: Lightweight Group Communication" /></a></p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~f/CssTricks?a=MOF4N"><img src="http://feeds.feedburner.com/~f/CssTricks?i=MOF4N" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CssTricks?a=X2Y6n"><img src="http://feeds.feedburner.com/~f/CssTricks?i=X2Y6n" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CssTricks?a=ZX11n"><img src="http://feeds.feedburner.com/~f/CssTricks?i=ZX11n" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/CssTricks/~4/467556386" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://css-tricks.com/new-screencast-hodgepodge-of-wordpress-tricks/feed/</wfw:commentRss>
		<feedburner:awareness>http://api.feedburner.com/awareness/1.0/GetItemData?uri=CssTricks&amp;itemurl=http%3A%2F%2Fcss-tricks.com%2Fnew-screencast-hodgepodge-of-wordpress-tricks%2F</feedburner:awareness><feedburner:origLink>http://css-tricks.com/new-screencast-hodgepodge-of-wordpress-tricks/</feedburner:origLink></item>
		<item>
		<title>The Very First Steps After a Fresh WordPress Install</title>
		<link>http://feeds.feedburner.com/~r/CssTricks/~3/466212037/</link>
		<comments>http://css-tricks.com/first-steps-after-wordpress-instal/#comments</comments>
		<pubDate>Wed, 26 Nov 2008 11:45:17 +0000</pubDate>
		<dc:creator>Chris Coyier</dc:creator>
		
		<category><![CDATA[Quick Tip / Trick]]></category>

		<guid isPermaLink="false">http://css-tricks.com/?p=1530</guid>
		<description><![CDATA[
So you have WordPress installed! Congratulations! Now what? I find myself installing WordPress quite often, so I&#8217;ll share with you my &#8220;first steps&#8221; after a fresh install to get WordPress set up to my liking. This involves changing settings, resetting the theme, and some universally useful plugins.
At the time of this writing, WordPress 2.6.5 was [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://css-tricks.com/wp-content/csstricks-uploads/wordpressbaby.jpg" width="570" height="306" alt="" title="" /></p>
<p>So you have WordPress installed! Congratulations! Now what? I find myself installing WordPress quite often, so I&#8217;ll share with you my &#8220;first steps&#8221; after a fresh install to get WordPress set up to my liking. This involves changing settings, resetting the theme, and some universally useful plugins.</p>
<p>At the time of this writing, <a href="http://wordpress.org/development/2008/11/wordpress-265/">WordPress 2.6.5</a> was just released. You know, &#8220;for future reference&#8221;.</p>
<p><span id="more-1530"></span></p>
<h3>User Management</h3>
<h4>Remove the default &#8220;admin&#8221; account</h4>
<p>I don&#8217;t feel comfortable leaving an account in WordPress with a name that every single other WordPress blog in the world started with, even if it does have a secure password. Go under <strong>Users</strong> and add a new account with Administrator level privileges. Then <em>Log Out</em> and log back in with the new account.</p>
<p>Now you can go back under Users and delete the default &#8220;admin&#8221; account. The default &#8220;Hello World&#8221; post has &#8220;admin&#8221; as its author, so you&#8217;ll be warned when deleting that user and asked what you would like to do with that post. Might as well just re-attribute it to your new user.</p>
<p><img src="http://css-tricks.com/wp-content/csstricks-uploads/users.jpg" width="570" height="374" alt="" title="" /></p>
<h4>Add your authors</h4>
<p>If you are going to be having multiple authors or multiple administrators with access to the back end of WordPress, you might as well get them set up now.</p>
<h4>Turn Visual Editor off</h4>
<p>This is just a personal preference, but I mention it now because it is a part of User management. Each user has an option for using the Visual Editor or not. I personally hate the Visual Editor, as switching back and forth between Visual and Code view can screw stuff up, especially if you do stuff like embed YouTube videos or add source code to posts.</p>
<h3>Settings</h3>
<p>Now is the time to go through the <strong>Settings</strong> area and set things to your liking. Most of it is purely subjective like your Tagline, how you want dates formatted, and your Time Zone. But there are some <strong>absolutely vital</strong> things to get set correctly in here right away.</p>
<h4>Permalinks</h4>
<p>This setting is the most vital of them all in my opinion. Choose a permalink setting that you like and that you don&#8217;t see your self changing&#8230;. ever. The last thing you want to do is decide six months down the road that you don&#8217;t like http://yourdomain.com/?p=345 anymore and change it. It&#8217;s not catastrophic anymore, as WordPress is now smart enough to resolve to the correct place, but it&#8217;s not going to help your Google juice.</p>
<p><img src="http://css-tricks.com/wp-content/csstricks-uploads/permalink.jpg" width="570" height="374" alt="" title="" /></p>
<p>Remember that you can control the &#8220;slug&#8221; of your posts as you are writing them as well. I believe it&#8217;s generally a good idea to keep them short and to the point.</p>
<h4>RSS Settings</h4>
<p>You&#8217;d have to be nuts to not offer RSS at all on your blog, but you do have some important choices to make. Personally, I leave the it at the default of showing <strong>10 posts</strong> with <strong>full content</strong>. But others can have different opinions on this, especially new clients who can have opinions like &#8220;if they want to read our content they can come to the site&#8221;. This becomes important after that first article, so now is the time to decide about RSS. (<a href="http://www.problogger.net/archives/2008/11/14/are-rss-subscribers-worthwhile-if-they-dont-visit-your-blog/">good read on this</a>).</p>
<p>While we are on RSS, right away you should &#8220;burn your feed&#8221; with <a href="http://www.feedburner.com/">FeedBurner</a>. It may feel kind of weird at first having people subscribe to an address that isn&#8217;t local to your server, but the advantages outweigh any problems. It&#8217;s about the best you are going to get for getting analytical data (like how many subscribers you have) for your RSS feed. Plus you&#8217;ll be able to offer email subscriptions, track post popularity, and the feed page itself makes it easy for people to subscribe in their feed reader of choice.</p>
<p><img src="http://css-tricks.com/wp-content/csstricks-uploads/feedburner.jpg" width="570" height="268" alt="" title="" /></p>
<h4>Comments</h4>
<p>All goes well, you&#8217;ll start attracting commenters right away! It is good to make some decisions on this right off the bat. Do people have to register first? Are all comments held for modification first? Can people comment if they have had a successful comment first?</p>
<p>You should also be aware that comment spam on WordPress is <strong>epidemic</strong>. Fortunately, you barely have to worry about it because WordPress ships with the Akismet plugin which does a pretty fantastic job of stopping spam. You&#8217;ll need to activate it from the <strong>Plugins</strong> area. You&#8217;ll then need to enter your WordPress API key to activate it, which you get from signing up for a WordPress.com account. I signed up for mine ages ago, and have used the same API key for every WordPress blog I&#8217;ve ever installed.</p>
<p><img src="http://css-tricks.com/wp-content/csstricks-uploads/askismet.jpg" width="570" height="374" alt="" title="" /></p>
<h3>Plugins</h3>
<p>Plugins are largely dependent on the blog and it&#8217;s needs, but there are a few I like to install on every single blog.</p>
<h4>Clean Notifications</h4>
<p>The default email notifications for WordPress are kinda fugly. The <a href="http://www.mikeindustries.com/blog/clean-notifications">clean notifications plugin</a> makes them a lot nicer and friendlier. Or you could use something like <a href="http://www.intensedebate.com/">IntenseDebate</a> and handle comments that way.</p>
<h4>IImage Browser</h4>
<p>I absolutely hate the media uploading stuff built into WordPress. Half the time it doesn&#8217;t work and when it does it&#8217;s slow and annoying. For one thing it applies a bunch of class names to images when you insert them into posts. I didn&#8217;t ask for that, and I can&#8217;t turn it off. Booo. I use the <a href="http://wordpress.org/extend/plugins/iimage-browser/">IImage Browser</a> plugin on all my blogs for an image library. It&#8217;s absolutely the ugliest thing ever but it works great.</p>
<h4>FeedBurner FeedSmith</h4>
<p>Now that you are up and running on on FeedBurner, you might as well use the <a href="http://www.google.com/support/feedburner/bin/answer.py?answer=78483&#038;topic=13252">FeedBurner FeedSmith plugin</a> to make sure that <strong>all</strong> your subscribers are getting the feed from there. That way you&#8217;ll have as accurate as statistics as possible and if someone has trouble with the feed, you won&#8217;t have to think about which feed it is that&#8217;s having trouble.</p>
<h4>Google Sitemap Generator</h4>
<p>Completely painless, requires no upkeep. Install the <a href="http://wordpress.org/extend/plugins/google-sitemap-generator/">Google Sitemap plugin</a> once and forever you&#8217;ll have a nice Google-compliant sitemap so that you can rest assured Google is crawing the entirety of your site.</p>
<h4>No WWW</h4>
<p>They say it&#8217;s good for SEO to pick either www.yoursite.com or yoursite.com and stick with it. I personally prefer the no-www version. The <a href="http://wordpress.org/extend/plugins/no-www/">no-www plugin</a> enforces that preference.</p>
<h4>Honorable Mentions</h4>
<p>I personally really like the <a href="http://wordpress.org/extend/plugins/wordpress-automatic-upgrade/">WordPress Automatic Upgrade</a> plugin, which has helped me keep my WordPress version up to date on all of my blogs painlessly. I&#8217;m not going to generically recommend it because I&#8217;ve heard of problems with this and having a plugin manage your core upgrade scares some people.</p>
<p>Some folks swear by the <a href="http://wordpress.org/extend/plugins/wp-super-cache/">WP Super Cache</a> plugin. I am probably in the ballpark where it would have helped me some days if I had it, but I have literally attempted to install this 3 or 4 times in the life of CSS-Tricks and it has borked something (usually the RSS feed) and despite LOTS of troubleshooting efforts could not get it to work. We also tried it on Script &#038; Style and it ended up borking something. So&#8230; buyer beware on that one.</p>
<p>Oh yeah, and I remove Hello Dolly =)</p>
<h3>Theme</h3>
<p>No matter what the final plan for the theme is, it is definitely not leaving the default theme in place. I&#8217;ve seen that big blue rounded rectangle more times than I care to. If you are going to be theming from scratch, do yourself a favor and download <a href="http://elliotjaystocks.com/blog/archive/2008/starkers-for-wordpress-262/">Starkers</a> (blank WordPress theme), rename the folder to what you&#8217;d like your theme to be named, upload it, and activate it. </p>
<h3>Add Analytics</h3>
<p>We&#8217;ve already covered adding FeedBurner to track RSS reader data, but we need something for real web traffic data. WordPress makes it awesomely easy to add tracking code to pages since every single page within WordPress is built dynamically and uses the <em>header.php</em> and <em>footer.php</em> file. I personally use Google Analytics (<a href="http://css-tricks.com/video-screencasts/31-introduction-to-google-analytics/">introduction here</a>).  So I add a profile to my account, get the code, and chuck it in <em>footer.php</em>.</p>
<p>&nbsp;</p>
<p>Of course all this stuff is my personal preference, but I feel it&#8217;s pretty solid advice. Do you have anything to add, or a system all of your own?
<p><a href="http://statushq.com"><img src="http://css-tricks.com/images/status-468.jpg" alt="Status: Lightweight Group Communication" /></a></p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~f/CssTricks?a=jdv5N"><img src="http://feeds.feedburner.com/~f/CssTricks?i=jdv5N" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CssTricks?a=jGLpn"><img src="http://feeds.feedburner.com/~f/CssTricks?i=jGLpn" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CssTricks?a=1GChn"><img src="http://feeds.feedburner.com/~f/CssTricks?i=1GChn" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/CssTricks/~4/466212037" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://css-tricks.com/first-steps-after-wordpress-instal/feed/</wfw:commentRss>
		<feedburner:awareness>http://api.feedburner.com/awareness/1.0/GetItemData?uri=CssTricks&amp;itemurl=http%3A%2F%2Fcss-tricks.com%2Ffirst-steps-after-wordpress-instal%2F</feedburner:awareness><feedburner:origLink>http://css-tricks.com/first-steps-after-wordpress-instal/</feedburner:origLink></item>
		<item>
		<title>Links of Interest</title>
		<link>http://feeds.feedburner.com/~r/CssTricks/~3/465058047/</link>
		<comments>http://css-tricks.com/links-of-interest-56/#comments</comments>
		<pubDate>Tue, 25 Nov 2008 11:45:08 +0000</pubDate>
		<dc:creator>Chris Coyier</dc:creator>
		
		<category><![CDATA[Quick Tip / Trick]]></category>

		<guid isPermaLink="false">http://css-tricks.com/?p=1572</guid>
		<description><![CDATA[This weeks Links of Interest post is WordPress-themed, like the rest of this week =)
Web Designer Wall Series
Nick La is in the midst of a series on working with WordPress. So far he has done Installing WordPress Locally, Building Custom WordPress Theme and Exporting and Importing WordPress. 
Fully Valid, SEO-Friendly Social Media Links for WordPress
One [...]]]></description>
			<content:encoded><![CDATA[<p>This weeks Links of Interest post is WordPress-themed, like the <a href="http://css-tricks.com/its-wordpress-week/">rest of this week</a> =)</p>
<h3>Web Designer Wall Series</h3>
<p>Nick La is in the midst of a series on working with WordPress. So far he has done <a href="http://www.webdesignerwall.com/tutorials/installing-wordpress-locally/">Installing WordPress Locally</a>, <a href="http://www.webdesignerwall.com/tutorials/building-custom-wordpress-theme/">Building Custom WordPress Theme</a> and <a href="http://www.webdesignerwall.com/tutorials/exporting-and-importing-wordpress/">Exporting and Importing WordPress</a>. </p>
<h3>Fully Valid, SEO-Friendly Social Media Links for WordPress</h3>
<p>One of the things that will always get ya when validating is un-encoded characters in URLs. This is particularly epidemic in social bookmarking links where you are passing a bunch of information over to the service in the URL itself. Jeff Starr does one of his characteristically thorough posts on <a href="http://perishablepress.com/press/2008/11/23/fully-valid-seo-friendly-social-media-links-for-wordpress/">cleaning up your social media links</a>. I really wish IntenseDebate would <a href="http://getsatisfaction.com/intensedebate/topics/invalid_amperstands_in_urls_cause_failure_of_xhtml_validity_tests">fix this problem</a>. Since switching, my pages no longer validate soley because of the un-encoded URLs.</p>
<p><span id="more-1572"></span></p>
<h3>Using JavaScript Libraries in Your WordPress Themes</h3>
<p>One thing you definitely want to stay away from when creating a new theme is hard-linking to a JavaScript library. Reason being, plugins also have the ability to load libraries and if you add one of those down the road you might end up loading redundant libraries. WordPress provides a function for loading libraries with some extra smarts to prevent this. Here is an <a href="http://www.lost-in-code.com/platforms/wordpress/wordpress-using-javascript-libraries-with-your-plugin-or-theme/">article about this</a> and the <a href="http://codex.wordpress.org/Function_Reference/wp_enqueue_script">official documentation</a>.</p>
<h3>Most Wanted WordPress Hacks</h3>
<p>Noupe has out 2 out of 3 planned articles on &#8216;Most Wanted WordPress Hacks&#8217;. <a href="http://www.noupe.com/wordpress/most-desired-wordpress-hacks-11-common-requests-and-fixes.html">Part One</a> / <a href="http://www.noupe.com/wordpress/most-wanted-wordpress-hacks-11-new-requests.html">Part Two</a>.  Lots of good stuff in there for expanding your WordPress bag-o-tricks.</p>
<p><a href="http://statushq.com"><img src="http://css-tricks.com/images/status-468.jpg" alt="Status: Lightweight Group Communication" /></a></p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~f/CssTricks?a=K8ISN"><img src="http://feeds.feedburner.com/~f/CssTricks?i=K8ISN" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CssTricks?a=nYAmn"><img src="http://feeds.feedburner.com/~f/CssTricks?i=nYAmn" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CssTricks?a=Ikbpn"><img src="http://feeds.feedburner.com/~f/CssTricks?i=Ikbpn" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/CssTricks/~4/465058047" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://css-tricks.com/links-of-interest-56/feed/</wfw:commentRss>
		<feedburner:awareness>http://api.feedburner.com/awareness/1.0/GetItemData?uri=CssTricks&amp;itemurl=http%3A%2F%2Fcss-tricks.com%2Flinks-of-interest-56%2F</feedburner:awareness><feedburner:origLink>http://css-tricks.com/links-of-interest-56/</feedburner:origLink></item>
		<item>
		<title>What to Ask a New Client Wanting a WordPress Theme</title>
		<link>http://feeds.feedburner.com/~r/CssTricks/~3/463918892/</link>
		<comments>http://css-tricks.com/what-to-ask-a-new-client-wanting-a-wordpress-theme/#comments</comments>
		<pubDate>Mon, 24 Nov 2008 12:45:12 +0000</pubDate>
		<dc:creator>Chris Coyier</dc:creator>
		
		<category><![CDATA[Quick Tip / Trick]]></category>

		<guid isPermaLink="false">http://css-tricks.com/?p=1417</guid>
		<description><![CDATA[
[original photo]
With any new client, before you start choosing technologies, you should be finding out more about them. What they are all about, why they need a website, and what the goals of that site are. But if you are past that stage and it becomes clear that they need a blog, and that blog [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://css-tricks.com/wp-content/csstricks-uploads/wordpressclients.jpg" alt="" title="" /></p>
<p>[<a href="http://flickr.com/photos/paulmoody/2038524305/">original photo</a>]</p>
<p>With any new client, before you start choosing technologies, you should be finding out more about them. What they are all about, why they need a website, and what the goals of that site are. But if you are past that stage and it becomes clear that they need a blog, and that blog will be powered by WordPress, here is a list of things you should ask to get started (in no particular order).</p>
<p><span id="more-1417"></span></p>
<ul>
<li><strong>Will there be multiple authors? Should the site clearly be displaying author info?</strong><br />
Some blogs like to promote the authors of the content, other blogs are more anonymous. WordPress has a little section for adding Biographical Info for each registered user. There is a PHP function for pulling that text, which is great for creating little &#8220;About the Author&#8221; sections. There is also a <a href="http://wordpress.org/extend/plugins/user-photo/">plugin for adding photos</a> for each user.</li>
<li><strong>Are there multiple styles of blog posts, like longer feature posts and shorter quick posts?</strong><br />
On most blogs, every post is treated about the same. But that doesn&#8217;t have to be the case necessarily. It is possible to have different styles of posts. It&#8217;s good to know the plan of what type of content the owners of the blog intend to be publishing.</li>
<li><strong>What other kind of content will be on the site?</strong><br />
Sideblog? Contact page? Blogroll? Photo Gallery? There are plugins to handle all this stuff. Remember that just because it&#8217;s a blog doesn&#8217;t limit the site to <strong>only</strong> being a blog.</li>
<li><strong>Does the site need to accommodate for advertising? What type? Sizes?</strong><br />
This is a big one! You don&#8217;t want to get along in your design process only to find out you need a 768&#215;90 banner stuck in there somewhere. There are lots of possible common sizes you may need to accommodate like 125&#215;125, 300&#215;250, 160&#215;600, etc. Knowing this upfront will allow you to design around them and make them a part of the design.</li>
<li><strong>Do you plan to use categories? tags? both?</strong><br />
Many blogs categorize their posts into categories. It can help users browsing archives or who may only be interested in certain topics. You can put serious emphasis on this, or ignore it completely. Again it is a good idea to get a feel for what the client intends to be writing about so you can envision together how it can be organized. Tags are similar to categories but it is more common with tags to apply several on each post to identify sub topics.</li>
<li><strong>How do you want to handle archives?</strong><br />
There are lots of ways to allow visitors to browse past articles in WordPress. Category and tag pages are one form of this, but WordPress offers archives by date and by author as well. There are also plugins for more robust archives. How many options do you want to provide visitors?</li>
<li><strong>How do you want to handle search?</strong><br />
WordPress has built-in search, but its generally regarded as pretty poor. Many blogs use Google Site Search which often does a better job of displaying results. There is also a variety of third-party search solutions out there. The search results page is a very important page. Might as well make a decision and get that designed properly right away.</li>
<li><strong>Are you going to be presenting source code in the posts?</strong><br />
There are a variety of ways to handle source code in posts, including JavaScript library plugins and WordPress plugins. They all have a little different requirements so finding the right way to handle it from day-one is important. </li>
<li><strong>Are there any other blogs that you really like?</strong><br />
Clients are notorious for not being able to explain exactly what they want. But if they know they want a blog, chances are they already have some favorites. By asking about other blogs they admire, you may be able to incorporate some ideas from those blogs and impress them.</li>
</ul>
<p>Have I about covered the basics? What other questions would you ask a client wanting a new WordPress theme?
<p><a href="http://statushq.com"><img src="http://css-tricks.com/images/status-468.jpg" alt="Status: Lightweight Group Communication" /></a></p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~f/CssTricks?a=IhErN"><img src="http://feeds.feedburner.com/~f/CssTricks?i=IhErN" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CssTricks?a=crCwn"><img src="http://feeds.feedburner.com/~f/CssTricks?i=crCwn" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CssTricks?a=IUq3n"><img src="http://feeds.feedburner.com/~f/CssTricks?i=IUq3n" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/CssTricks/~4/463918892" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://css-tricks.com/what-to-ask-a-new-client-wanting-a-wordpress-theme/feed/</wfw:commentRss>
		<feedburner:awareness>http://api.feedburner.com/awareness/1.0/GetItemData?uri=CssTricks&amp;itemurl=http%3A%2F%2Fcss-tricks.com%2Fwhat-to-ask-a-new-client-wanting-a-wordpress-theme%2F</feedburner:awareness><feedburner:origLink>http://css-tricks.com/what-to-ask-a-new-client-wanting-a-wordpress-theme/</feedburner:origLink></item>
		<item>
		<title>It’s WordPress Week!</title>
		<link>http://feeds.feedburner.com/~r/CssTricks/~3/463022271/</link>
		<comments>http://css-tricks.com/its-wordpress-week/#comments</comments>
		<pubDate>Sun, 23 Nov 2008 18:03:40 +0000</pubDate>
		<dc:creator>Chris Coyier</dc:creator>
		
		<category><![CDATA[Quick Tip / Trick]]></category>

		<guid isPermaLink="false">http://css-tricks.com/?p=1563</guid>
		<description><![CDATA[
I&#8217;ve been working with WordPress a lot lately. The redesign around has had me moving lots of stuff inside WordPress and using it more and more like a real CMS (video on this). At work lately we&#8217;ve been doing a ton of WordPress sites and it&#8217;s just all up in my mind right now. So&#8230; [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://css-tricks.com/wp-content/csstricks-uploads/wpweek.jpg" width="570" height="200" alt="" title="" /></p>
<p>I&#8217;ve been working with WordPress a lot lately. The redesign around has had me moving lots of stuff inside WordPress and using it more and more like a real CMS (<a href="http://css-tricks.com/video-screencasts/41-wordpress-as-a-cms/">video on this</a>). At work lately we&#8217;ve been doing a ton of WordPress sites and it&#8217;s just all up in my mind right now. So&#8230; to get it all out of my system, this upcoming week on CSS-Tricks is going to be <strong>WordPress Week</strong>! The theory here is to get it all out in one concentrated week and then return to our regularly scheduled programming.</p>
<p>Here is the plan:</p>
<ul>
<li><strong>Monday:</strong> What to Ask a New Client Wanting a WordPress Theme</li>
<li><strong>Tuesday:</strong> Links of Interest (WordPress Edition)</li>
<li><strong>Wednesday: </strong> The Very First Steps After a Fresh WordPress Install</li>
<li><strong>Thursday:</strong> Screencast - Hodgepodge of WordPress Tricks (Woohoo! Thanksgiving!)</li>
<li><strong>Friday:</strong> Uhm&#8230; I&#8217;ll think of something. I may expand on something from the video.</li>
</ul>
<p><a href="http://statushq.com"><img src="http://css-tricks.com/images/status-468.jpg" alt="Status: Lightweight Group Communication" /></a></p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~f/CssTricks?a=9eDNN"><img src="http://feeds.feedburner.com/~f/CssTricks?i=9eDNN" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CssTricks?a=wreLn"><img src="http://feeds.feedburner.com/~f/CssTricks?i=wreLn" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CssTricks?a=7ZTUn"><img src="http://feeds.feedburner.com/~f/CssTricks?i=7ZTUn" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/CssTricks/~4/463022271" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://css-tricks.com/its-wordpress-week/feed/</wfw:commentRss>
		<feedburner:awareness>http://api.feedburner.com/awareness/1.0/GetItemData?uri=CssTricks&amp;itemurl=http%3A%2F%2Fcss-tricks.com%2Fits-wordpress-week%2F</feedburner:awareness><feedburner:origLink>http://css-tricks.com/its-wordpress-week/</feedburner:origLink></item>
		<item>
		<title>Thoughts on IntenseDebate So Far</title>
		<link>http://feeds.feedburner.com/~r/CssTricks/~3/460802329/</link>
		<comments>http://css-tricks.com/thoughts-on-intensedebate-so-far/#comments</comments>
		<pubDate>Fri, 21 Nov 2008 12:44:21 +0000</pubDate>
		<dc:creator>Chris Coyier</dc:creator>
		
		<category><![CDATA[Quick Tip / Trick]]></category>

		<guid isPermaLink="false">http://css-tricks.com/?p=1491</guid>
		<description><![CDATA[
I&#8217;ve been using IntenseDebate on CSS-Tricks for a little over a week now and a lot of thoughts on it have been stirring around in my head so I thought I&#8217;d try to organize them and share.
What is IntenseDebate?
IntenseDebate is a service to enhance the traditional comment system on blogs. I&#8217;ll get into more specifics [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://css-tricks.com/wp-content/csstricks-uploads/ID2.jpg" width="570" height="169" alt="" title="" /></p>
<p>I&#8217;ve been using <a href="http://intensedebate.com/">IntenseDebate</a> on CSS-Tricks for a little over a week now and a lot of thoughts on it have been stirring around in my head so I thought I&#8217;d try to organize them and share.</p>
<h4>What is IntenseDebate?</h4>
<p>IntenseDebate is a service to enhance the traditional comment system on blogs. I&#8217;ll get into more specifics about what those enhancements are later. The important idea is that it isn&#8217;t a <strong>replacement</strong> comment system, it just <strong>works with</strong> your existing comment system to add new features. It should be noted that IntenseDebate isn&#8217;t the only kid on the block. The main competition is the very similar <a href="http://disqus.com/">DISQUS</a>.</p>
<p><span id="more-1491"></span></p>
<h4>Why did I choose to start using it?</h4>
<p>IntenseDebate was purchased by <a href="http://automattic.com/">Automattic</a>, the company behind WordPress. That means a lot to me. Now that they are behind this, I think it will really gain steam and become a widely used system. I am also excited about many of the features, which again, I&#8217;ll get into in a minute.</p>
<h4>What are the technologies involved?</h4>
<p>I&#8217;m using WordPress, so installing it was mearly installing their WordPress Plugin, which was a snap. They are also currently supporting Blogger, TypePad, and Tumblr. No matter what you use, IntenseDebate needs JavaScript to work. That being said, with JavaScript disabled on your site, it will simply revert to the regular comment system. But never fear, the new 2.0 version of their plugin keeps your database and your IntenseDebate account in sync. This means JavaScript or no, everyone sees the same comments***.</p>
<p><small>*** - I&#8217;m finding this to be <em>mostly</em> true. I have a few posts where I can see some serious discrepancies in number of comments between my database and what is on IntenseDebate. To check, load page normally, then load without JavaScript and compare.</small></p>
<h4>How hard is it to install?</h4>
<p>Not hard at all. Like I said, just like installing any other plugin. You then set up an account on IntenseDebate and do your initial sync. I had a little trouble getting that first sync to go through in full for my entire archive of comments, but it&#8217;s all good now. The whole process is really quite easy, if you are interested in checking it out, I encourage you to just go for it and install it. Very little risk.</p>
<p style="background: #ccc; padding: 10px; border: 1px solid #666">
IMPORTANT NOTE:<br />
I want to make sure everyone understands that just because I&#8217;m using IntenseDebate, doesn&#8217;t mean you need an account to comment. It&#8217;s totally optional. If you aren&#8217;t interested, that&#8217;s cool, you can comment just as you did before the exact same way.
</p>
<h3>Features I Like</h3>
<p>It&#8217;s really just a few key features that make IntenseDebate so appealing for me.</p>
<h4>Threaded Discussions</h4>
<p>I wasn&#8217;t sure I cared for threaded comments at first and now I feel like it would be really hard to go back. I love it. It makes discussions so much more readable and useful. This feature alone provides significant value for everyone.</p>
<p><img src="http://css-tricks.com/wp-content/csstricks-uploads/threaded.jpg" width="440" height="425" alt="" title="" /></p>
<h4>Maintaining Your Identity</h4>
<p>If you choose to open account on IntenseDebate, your identity as a commenter follows you from to blog to blog. This means you don&#8217;t have to enter all that information (name, email, URL) on every comment you make. I used to allow people to register on CSS-Tricks just for this reason, but that was local only to this blog. This is much better.</p>
<p><img src="http://css-tricks.com/wp-content/csstricks-uploads/loggedin.jpg" width="440" height="182" alt="" title="" /></p>
<p>Typically the best chance you get to explain who you are on a comment is to link your name back to your URL. With IntenseDebate, your profile comes along for the ride.</p>
<p><img src="http://css-tricks.com/wp-content/csstricks-uploads/promote.jpg" width="440" height="182" alt="" title="" /></p>
<p>From your IntenseDebate dashboard, you can follow conversations you are a part of, which is also quite nice.</p>
<h4>Email functionality</h4>
<p>You get email notifications of new comments as usual, but you get some extra functionality. To delete a comment, you can literally just reply to the email with the text &#8220;delete&#8221;. Even cooler, you can reply directly to the comment by just replying to the email.</p>
<h4>Voting</h4>
<p>Trolls aren&#8217;t a big problem here on CSS-Tricks, but occasionally a meanie slips through. I enjoy giving the whole community the power to thumbs up or thumbs down comments to reward excellent insightful comments and punish rude behavior.</p>
<h3>Things I Don&#8217;t Like</h3>
<p>For all that positive stuff, there are some serious concerns that need to be taken into consideration. I&#8217;m sure many of these things are being worked on by the team, but that doesn&#8217;t help us right now&#8230;</p>
<h4>No HTML parsing of comments</h4>
<p>This is the biggest problem for me right now. Remember how I used to have that WMD editor bar above the comment textarea? That made it easier for people to post code snippets and mark them with proper &lt;code&gt; tags, amongst other things. Now those code tags look like this in the comments:</p>
<p><img src="http://css-tricks.com/wp-content/csstricks-uploads/code.jpg" width="585" height="242" alt="" title="" /></p>
<p>Bummer. Not only can you see the code tag, but it doesn&#8217;t restyle the code with a nice code-looking monospace font like it used to.</p>
<h4>Limited ability to control style</h4>
<p>You can, of course, exert CSS control, but the folks at IntenseDebate are recommending against it at this point. That is because the markup may change and bork your CSS changes. I think they realize people really need this now though, so they do have a <a href="http://www.intensedebate.com/cssDocumentation">CSS style guide available</a>. Personally I&#8217;ve done a little bit, but not too much.</p>
<p>What you can&#8217;t do, and I wager your probably will never be able to do, is get your hands on the actual markup. I sat down and really wrestled with it to see if I could force me old comment layout (which I really liked) onto IntenseDebate. I found it too cumbersome and gave up (for now). I&#8217;m hoping their upcoming changes to markup will be a little more semantic and easier to deal with. </p>
<p><img src="http://css-tricks.com/wp-content/csstricks-uploads/whine.jpg" width="552" height="242" alt="" title="" /></p>
<p><strong>One more little thing</strong>&#8230; People&#8217;s avatars/gravatars are coming across really fuzzy and artifcated. I guess it&#8217;s a bug they are working on.</p>
<h3>Other things of note</h3>
<h4>WordPress 2.7 will have threaded comments anyway</h4>
<p>Word on the street is that WordPress 2.7 is going to have a threaded commenting system built in. If that feature is the only reason you are interested, you may want to just wait for that.</p>
<h4>What do you think?</h4>
<p>So those are my thoughts&#8230; but I&#8217;m mostly interested in what you all think. Do you like it? Hate it? Don&#8217;t care? I&#8217;m leaning toward liking it, but I&#8217;d love to see all these negatives get turned around. I think if it gets a bit better, I&#8217;ll roll it out on <a href="http://scriptandstyle.com/">Script &#038; Style</a> and <a href="http://chriscoyier.net/">my personal homepage</a>.</p>
<p><a href="http://statushq.com"><img src="http://css-tricks.com/images/status-468.jpg" alt="Status: Lightweight Group Communication" /></a></p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~f/CssTricks?a=bj1gN"><img src="http://feeds.feedburner.com/~f/CssTricks?i=bj1gN" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CssTricks?a=aYmhn"><img src="http://feeds.feedburner.com/~f/CssTricks?i=aYmhn" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CssTricks?a=zs0En"><img src="http://feeds.feedburner.com/~f/CssTricks?i=zs0En" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/CssTricks/~4/460802329" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://css-tricks.com/thoughts-on-intensedebate-so-far/feed/</wfw:commentRss>
		<feedburner:awareness>http://api.feedburner.com/awareness/1.0/GetItemData?uri=CssTricks&amp;itemurl=http%3A%2F%2Fcss-tricks.com%2Fthoughts-on-intensedebate-so-far%2F</feedburner:awareness><feedburner:origLink>http://css-tricks.com/thoughts-on-intensedebate-so-far/</feedburner:origLink></item>
	<feedburner:awareness>http://api.feedburner.com/awareness/1.0/GetFeedData?uri=CssTricks</feedburner:awareness></channel>
</rss>
