Here’s how I do it for my EE sites:
1. Create a new template group called embeds and a new template within that group called header. The path to your header is now embeds/header.
2. Within your weblog template, replace your existing header area with the following tag:
{embed="embeds/header"}
3. Test your template to make sure the header is properly embedded (i.e., no broken layout or extra/missing div tags).
4. You can now pass in any variables you want. So, if you want to load a separate stylesheet, you can do something like this:
First, in your weblog template:
{embed="embeds/header" the_css_file="blue"}
Then, in your embeds/header template:
...doctype declaration, etc...
<head>
<link rel="stylesheet" type="text/css" href="{stylesheet=home/style_{embed:the_css_file}}" />
<title>...</title>
</head>
Here’s what’s happening:
- In your weblog template, when you call the embedded header template, you are also passing in the variable the_css_file (which you can name anything you want) and giving it a value of blue.
- In your embedded header template, the value you passed in from the weblog template (in this case, blue) is inserted. In the example above, the stylesheet home/style_blue would be loaded.
You may want to have a conditional that checks to see if an embedded variable is being passed; if not, load a default stylesheet. Something like this:
<link rel="stylesheet" type="text/css" href="{stylesheet=home/style_{if embed:the_css_file}{embed:the_css_file}{if:else}default{/if}}" />
I haven’t tested this, but it should work.
All that being said, I don’t think it’s a good idea to load a separate stylesheet for each weblog entry. What if you have dozens or hundreds of entries? That’s a lot of load on the server, even if the stylesheets are small. It’s quicker and better to load a master stylesheet, cache it once, and then use different CSS rules within your master stylesheet to control the display of each weblog entry.
To do this, you could follow the same steps above, but instead embed your variable in the <body> tag. Something like:
<body id="{embed:the_body_id}">
Then, within your CSS file, create different sets of rules to control how each weblog entry is displayed.
