<?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>Programming Thematic 4 You &#187; CSS</title>
	<atom:link href="http://programming.thematic4you.com/tag/css/feed/" rel="self" type="application/rss+xml" />
	<link>http://programming.thematic4you.com</link>
	<description>Code Snippets and more ...</description>
	<lastBuildDate>Wed, 20 Oct 2010 10:24:00 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	
		<item>
		<title>How to use a different layout for a certain page?</title>
		<link>http://programming.thematic4you.com/2010/01/how-to-use-a-different-layout-for-a-certain-page/</link>
		<comments>http://programming.thematic4you.com/2010/01/how-to-use-a-different-layout-for-a-certain-page/#comments</comments>
		<pubDate>Mon, 11 Jan 2010 14:17:07 +0000</pubDate>
		<dc:creator>Chris</dc:creator>
				<category><![CDATA[Layout]]></category>
		<category><![CDATA[0.9.5.x]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[different layouts]]></category>

		<guid isPermaLink="false">http://programming.thematic4you.com/?p=6</guid>
		<description><![CDATA[Today I'll show you how to setup your home / frontpage to use a 3 columns fixed layout and all other pages using a 2 colums, sidebar on the right fixed layout.

The major requirement for this and all other code snippets: You have to use a child theme!]]></description>
			<content:encoded><![CDATA[<p>Today I&#8217;ll show you how to setup your home / frontpage to use a 3 columns fixed layout and all other pages using a 2 colums, sidebar on the right fixed layout.</p>
<p>The major requirement for this and all other code snippets: You have to use a child theme!<span id="more-6"></span></p>
<p>We start with our style.css, responsible for the 2c-r-fixed layout. It should contain the following code:</p>
<pre class="brush: css; title: ; notranslate">/* Reset browser defaults */
@import url('../thematic/library/styles/reset.css');

/* Apply basic typography styles */
@import url('../thematic/library/styles/typography.css');

/* Apply a basic layout */
@import url('../thematic/library/layouts/2c-r-fixed.css');

/* Apply basic image styles */
@import url('../thematic/library/styles/images.css');

/* Apply default theme styles and colors */
/* It's better to actually copy over default.css into this file (or link to a copy in your child theme) if you're going to do anything outrageous */
@import url('../thematic/library/styles/default.css');

/* Prepare theme for plugins */
@import url('../thematic/library/styles/plugins.css');</pre>
<p>Please make sure that you don&#8217;t import the original thematic/style.css.</p>
<p>Now we need to create your style-home.css. Copy style.css to style-home.css. Once the file is created you need to change the line responsible for the layout. Change it from 2c-r-fixed to 3c-fixed.  Your style-home.css should now contain the following code:</p>
<pre class="brush: css; title: ; notranslate">/* Reset browser defaults */
@import url('../thematic/library/styles/reset.css');

/* Apply basic typography styles */
@import url('../thematic/library/styles/typography.css');

/* Apply a basic layout */
@import url('../thematic/library/layouts/3c-fixed.css');

/* Apply basic image styles */
@import url('../thematic/library/styles/images.css');

/* Apply default theme styles and colors */
/* It's better to actually copy over default.css into this file (or link to a copy in your child theme) if you're going to do anything outrageous */
@import url('../thematic/library/styles/default.css');

/* Prepare theme for plugins */
@import url('../thematic/library/styles/plugins.css');</pre>
<p>Now that we have defined two different layouts, we need to define where the different styles should be used. For this we edit the functions.php in your child theme&#8217;s directory and add the following code:</p>
<pre class="brush: php; title: ; notranslate">// filter thematic_create_stylesheet to implement your own stylesheets
function my_stylesheet($content) {
	// We test if we're on home or on your frontpage
  if (is_home() || is_front_page()) {
  	// yes, we are .. now let's load the 3c-fixed layout
		$content = &quot;\t&quot;;
		$content .= &quot;&lt;link rel=\&quot;stylesheet\&quot; type=\&quot;text/css\&quot; href=\&quot;&quot;;
		$content .= get_bloginfo('stylesheet_directory') . &quot;/style-home.css&quot;;
		$content .= &quot;\&quot; /&gt;&quot;;
		$content .= &quot;\n\n&quot;;
  } else {
  	// we are not .. let's load the 2c-r-fixed layout
		$content = &quot;\t&quot;;
		$content .= &quot;&lt;link rel=\&quot;stylesheet\&quot; type=\&quot;text/css\&quot; href=\&quot;&quot;;
		$content .= get_bloginfo('stylesheet_directory') . &quot;/style.css&quot;;
		$content .= &quot;\&quot; /&gt;&quot;;
		$content .= &quot;\n\n&quot;;
	}
		// $content will be handed back to thematic_create_stylesheet
    return $content;
}
// connect the filter to thematic_create_stylesheet
add_filter ('thematic_create_stylesheet', 'my_stylesheet');</pre>
<p>That&#8217;s it. Now your blog is using two different layouts.</p>
<p>One last note about further modifications of your stylesheets. Modifications that are related to the 2c-r-fixed layout or the 3c-fixed layout need to be done either in style.css or style-home.css. Do not modify the original files in the Thematic directory. Modifications that are related to both layouts need to be done in style.css <strong>and</strong> in style-home.css.</p>
<p>You can modify the conditions in my_stylesheet() to your needs &#8230; more details about <a title="WordPress - Conditional Tags" href="http://codex.wordpress.org/Conditional_Tags" target="_self">Conditional Tags</a>.</p>
<p>Tested with<a title="Thematic, A WordPress Theme Framework" href="http://themeshaper.com/thematic/"> Thematic 0.9</a> and a basic child theme.</p>
<p>Please use the <a title="ThemeShaper Forums" href="http://themeshaper.com/forums/">ThemeShaper Forums</a> for any further questions.</p>
]]></content:encoded>
			<wfw:commentRss>http://programming.thematic4you.com/2010/01/how-to-use-a-different-layout-for-a-certain-page/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
	</channel>
</rss>

