Author Topic: Snippet: include stylesheet based on page ID or parent ID  (Read 5811 times)

Offline Argos

  • Posts: 2542
  • Gender: Male
    • Argos Media
Snippet: include stylesheet based on page ID or parent ID
« 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
« Last Edit: January 11, 2011, 02:24:32 AM by Argos »
Jurgen Nijhuis
Argos Media
Heiloo, The Netherlands
----------------------------------------------------------------
Please don't request personal support, use the forums!

Offline PurpleEdge

  • Posts: 231
  • Gender: Male
    • the northern beaches
Re: Snippet: include stylesheet based on page ID or parent ID
« Reply #1 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?
« Last Edit: January 11, 2011, 02:24:47 AM by Argos »

Offline Argos

  • Posts: 2542
  • Gender: Male
    • Argos Media
Re: Snippet: include stylesheet based on page ID or parent ID
« Reply #2 on: January 11, 2011, 02:24:01 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:
Jurgen Nijhuis
Argos Media
Heiloo, The Netherlands
----------------------------------------------------------------
Please don't request personal support, use the forums!