WebsiteBaker Community Forum

WebsiteBaker Support (2.8.x) => Droplets & Snippets => Topic started by: Argos on January 10, 2011, 12:12:12 AM

Title: Snippet: include stylesheet based on page ID or parent ID
Post by: Argos on January 10, 2011, 12:12:12 AM

Normally you use different templates if you need different layouts for different pages, but if the only difference between the templates is in the CSS, you can also use stylesheets specifically for certain page ID's or parent ID's. So a kind of conditional stylesheets using php. I needed this and I thought others may find it handy to know. This is especially useful for already existing pages, and not for new ones, as you need to know the page ID's  :-)

Say you have 1 default stylesheet, and a few alternative versions. You can just put the differences with the default one in the alternative versions, and call them after the default one. Then the alternative ones will override the default one as you know. So instead of

Code: [Select]

<link rel="stylesheet" type="text/css" href="<?php echo TEMPLATE_DIR; ?>/screen.css"></link>
<link rel="stylesheet" type="text/css" href="<?php echo TEMPLATE_DIR; ?>/print.css"></link>
you can put something like this in your template:

Code: [Select]

<link rel="stylesheet" type="text/css" href="<?php echo TEMPLATE_DIR; ?>/screen.css"></link>
<?php
if (PAGE_ID==2||PARENT==2) { 
echo(&#39;<link rel="stylesheet" type="text/css" href="&#39;.TEMPLATE_DIR.&#39;/orange.css"></link>&#39;);
}
elseif (PAGE_ID==3||PARENT==3||PAGE_ID==4||PARENT==4) { 
echo(&#39;<link rel="stylesheet" type="text/css" href="&#39;.TEMPLATE_DIR.&#39;/blue.css"></link>&#39;);
}
elseif (PAGE_ID==5||PARENT==5||PAGE_ID==6||PARENT==6) { 
echo(&#39;<link rel="stylesheet" type="text/css" href="&#39;.TEMPLATE_DIR.&#39;/green.css"></link>&#39;);
}
?>
<link rel="stylesheet" type="text/css" href="<?php echo TEMPLATE_DIR; ?>/print.css"></link>
So the page with ID 2 and all its children will use orange.css. The page with ID's 3 or 4 and all their children will use blue.css, etc. Of course you can choose either parent page or child pages or both, or use other php conditions. Works like a charm  :-D

Title: Re: Snippet: include stylesheet based on page ID or parent ID
Post by: PurpleEdge on January 10, 2011, 01:44:56 AM

Why not extend it even further by making your code a droplet, then you can update the droplet whenever you need to without changing the template?

Title: Re: Snippet: include stylesheet based on page ID or parent ID
Post by: Argos on January 11, 2011, 02:24:01 AM

Quote from: PurpleEdge on January 10, 2011, 01:44:56 AM

Why not extend it even further by making your code a droplet, then you can update the droplet whenever you need to without changing the template?

I'm no coder, I don't know how to make a droplet out of this... This snippet is about the best I can do regarding php  :roll: