How do I call on a seperate stylesheet for these pages? Any other ideas?

[sparkdigital]

Hi,

I'm creating a new wb website with a number of topics. Each topic will be a parent page with several child pages. What I would like to do is create one template for the whole website but have a different body background image per topic (and thus for all pages in that topic).

I'm thinking of creating an additional stylesheet per topic linking to the specific background image, overriding the general one.

Does anyone have any idea how I could call on that stylesheet from the page in wb admin? Or could a small script look for the topic (equals folder name) and look for the stylesheet depending on that? Or can we have some kind of nested templates like in Dreamweaver?

I know I could create a template for each topic but don't fancy updating them all if I want to make some minor alteration...

I hope my ramblings make sense, please let me know if I need to explain a bit more.

Thanks!

Konrad

[kweitzel]

a "switch case" statement is what you are looking for ... put it into the head where you load the stylesheets and load the additional stylesheet based either on the page_id (does not change) or the page_title.

cheers

Klaus

[sparkdigital]

Thanks Klaus! I googled "switch case statement php css" and found a few pages but I'm afraid it's going over my head! Could anyone point me in the right direction? If not I'll get a progrfamer to look into it for me. Anyone volunteering? 

Ta,

Konrad

[pixeldiva]

hi - add this in the head where you normally link your style sheet:
<link href="<?php echo TEMPLATE_DIR; ?>/<?php

     if(PAGE_TITLE == 'Welcome')
    {
        echo 'welcomestyle.css';
        }
    else
        {
        echo 'defaultstyle.css';
        }
?>" rel="stylesheet" type="text/css" media="screen" />

just add more if(PAGE_TITLE == 'xxxxxx') statements with the appropriate style for each page.

Hope that helps,
Pixel Diva

[sparkdigital]

Fab - that's great! Is there any way to replace if(PAGE_TITLE == 'Welcome') with something relating to the folder / directory /parentpage the page in in / under?

Thanks!

Konrad

[BerndJM]

Hi Konrad,

if I understand you right, you're looking for the "root-parent" of a page.
Done a similar thing with grafical headlines for the pages.
Give this a try:

Code:

<?php
// get the root_parent depending on the page_id
$q_parent = $database->query("SELECT * FROM ".TABLE_PREFIX."pages WHERE page_id = '".PAGE_ID."'");
$d_parent = $q_parent->fetchRow();
$parent = $d_parent['root_parent'];
?>

Now $parent contents the number of the root parent
and you can deal with a switch statement like this:

Code:

<?php
switch($parent) {
    case 1 :    //do what ever you want for root_parent 1
            break;
    case 2 :    //do what ever you want for root_parent 2
            break;
    case 3:    //do what ever you want for root_parent 2
            break;
    // and so on ...
    default :    // add here a default action if the_root parent is another then the defined ones
}
?>

Hope that helps

Regards Bernd

[kweitzel]

And here maybe a bit more userfriendly:

Code:

if (file_exists TEMPLATE_DIR.'/'PAGE_ID.'.css') {
   echo 'Dein Stylesheet hier';
}

This code should load a CSS File whcih has the name of the current page_id and resides in the current template directory. if no file is found, no file is loaded. Call this after the normal CSS call and you are set.

Of cause you can also use the page name, but remember, the name can change, the ID does not change. Also you can combine this with the root_parent idea as well.
cheers

Klaus

[sparkdigital]

Hi Bernd / Klaus,

Thanks very much for your inpput - I'll get cracking with this next week and let you know how I got on.

Thanks,

Konrad

[marathoner]

@Klaus

Great concept! Your example is missing a few brackets and a period so I made a few changes. Here is a working example for those interested:

Code:

if (file_exists(TEMPLATE_DIR.'/'.PAGE_ID.'.css')) {
   echo '<link href="'.TEMPLATE_DIR.'/'.PAGE_ID.'.css rel="stylesheet" type="text/css" />';
}

This same concept could also be used for any page specific javascript.

[kweitzel]

Yeah ... you are right ... I am usually just posting "Pseudocode" ...

Bute this kind of concept if for my really unexperienced users ... if they create a page and forget something, this always makes them happy, because the site is still working and they have those kind of cool features.

I do the same with contentblocks, exept that I define a "global" block to be used as fallback in case they forget

cheers

Klaus

[sparkdigital]

Hi all,

Thanks again for your help. Marathoner & Klaus, I now have the following code in the head instead of my usual link to screen.css:

Code:

<?php
if (file_exists (TEMPLATE_DIR.'/'.PAGE_ID.'.css')) {
   echo '<link href="'.TEMPLATE_DIR.'/'.PAGE_ID.'.css" rel="stylesheet" type="text/css" />';
}
else { echo '<link href="'.TEMPLATE_DIR.'/screen.css" rel="stylesheet" type="text/css" />';
}
?>

But unfortunately this always displays the screen.css file. For example, I now have a file named 5.css in the correct template directory but when visiting page with id=5, it still shows the default screen. What am I doing wrong? Sorry, I'm a real php newbie...

BTW - Marathoner, I added a " behind

Code:

.TEMPLATE_DIR.'/'.PAGE_ID.'.css

, is this correct?

When I get this working I will try to integrate Bernd's code (step 2!)...

Pixeldiva, thanks for your code - this worked first time but it would involve changing the .index.php file every time I added a new page so if I can make it a bit easier then that would be great...!

Looking forward to your responses!

Konrad

[Ruud]

Hi Konrad, (and @marathoner, @Klaus)

You cannot test on the variable TEMPLATE_DIR.
This represents the HTTP location of your template.

Just modify the "file_exists" like this example. (using your own template name)

Code:

<?php
    if (file_exists (WB_PATH.'/templates/mytemplate/'.PAGE_ID.'.css')) {
           echo '<link href="'.TEMPLATE_DIR.'/'.PAGE_ID.'.css" rel="stylesheet" type="text/css" />';
    } else { 
        echo '<link href="'.TEMPLATE_DIR.'/style.css" rel="stylesheet" type="text/css" />';
    }
?>

Don't forget your browser cache can also be in the way here. Use shift-F5 to reload the page if it does not show the first time (as with all CSS modifications).

Groet,

Ruud

[sparkdigital]

Couldn't wait (I am soooooooooo impatient!) so I kept searching the forum and found this thread:

http://www.websitebaker2.org/forum/index.php/topic,9284.0.html

Here I discovered the ! in the file_exists and now it works fine... Go to www.engeland-vakantieland.nl and click on 'vervoer' for an example (site under construction).

Bernd (or anyone else!) could you maybe help me with integrating your solution so it will look for the root_parent?

Thanks v much,

Konrad

[sparkdigital]

Think I got it... this seems to work:

Code:

<link href="<?php echo TEMPLATE_DIR; ?>/screen.css" rel="stylesheet" type="text/css" media="screen" />
<?php
// get the root_parent depending on the page_id
$q_parent = $database->query("SELECT * FROM ".TABLE_PREFIX."pages WHERE page_id = '".PAGE_ID."'");
$d_parent = $q_parent->fetchRow();
$parent = $d_parent['root_parent'];
?>
<?php
if (!file_exists (TEMPLATE_DIR.'/'.PAGE_ID.'.css')) {
   echo '<link href="'.TEMPLATE_DIR.'/'.PAGE_ID.'.css" rel="stylesheet" type="text/css" />';
}
if (!file_exists (TEMPLATE_DIR.'/'.$parent.'.css')) {
   echo '<link href="'.TEMPLATE_DIR.'/'.$parent.'.css" rel="stylesheet" type="text/css" />';
}
?>

Any comments?

Thanks again for all your help.

Konrad

[Ruud]

Ok, what happens now.. (have a look in your pages sourcecode)

You do a test on !file_exists (meaning if the file does not exist).
Because you still test on the TEMPLATE_DIR this is true for every page!

Every page now loads screen.css (i assume you did not do that line in the "else" part)
Every page also tries to load a PAGE_ID.css.
Missing CSS files are not giving errors (unless you view with FireBug or something similar).

Now you will have errors on all pages, and 2 stylesheets (will give problems on some browers) for page "vervoer".

I would go for the fix I gave in my last post.

Ruud

[Ruud]

Try this instead of what you just showed:

Code:

<?php
$css = TEMPLATE_DIR.'/screen.css';                 // Set the default CSS for all pages to screen.css

// get the root_parent depending on the page_id
$q_parent = $database->query("SELECT * FROM ".TABLE_PREFIX."pages WHERE page_id = '".PAGE_ID."'");
$d_parent = $q_parent->fetchRow();
$parent = $d_parent['root_parent'];

if (file_exists (WB_PATH.'/templates/vakeng/'.PAGE_ID.'.css')) {              // If there is a CSS with the page number use that instead of the default CSS
  $css = TEMPLATE_DIR.'/'.PAGE_ID.'.css';
} else if (file_exists (WB_PATH.'/templates/vakeng/'.$parent.'.css')) {      // If there is no CSS for this page, try to see if the parent has its own CSS
  $css = TEMPLATE_DIR.'/'.$parent.'.css';
}
?>
<link href="<?php echo $css; ?>" rel="stylesheet" type="text/css" media="screen" />

I tested this on my testserver and it works fine.

Ruud

[sparkdigital]

Works a treat, thanks Ruud!

Konrad

[sparkdigital]

I've started using this one on my other site www.romanticretreat s.co.uk and it seems to work fine apart from the 'look to see if the parent has its own style sheet'.

I copied it exactly from the original so can't thing what I've done wrong. An example is:

http://www.romanticretreats.co.uk/romantic-cottages/midshires.php Correct!
http://www.romanticretreats.co.uk/romantic-cottages/midshires/suffolk.php incorrect - back to default!

Any ideas?

Ta,

Konrad

[Stefek]

Hello Guys.

I wonder WHY you are trying to load diffrent CSS File every time.
I think it would be more ease if you make a different class to your body and then you can put the different body class declarations inside one css file:

Code:

### CSS ###
body .this_1 { your image1}
body .this_2 { your image2}
body .this_3 { your image3}

Code:

### index.php
<body class="this_<?php tell him which class this should result in the output ?>">

Sorry, I'm no coder, but maybe this makes some sense to you. And I'm sure with the snippets above you can work it out.

Best Regards,
Stefek

[Ruud]

It is loading your "fallback" screen.css. This means both test for the other templates fail.

Code:

if (file_exists (WB_PATH.'/templates/vakeng/'.PAGE_ID.'.css')) {             
  ....
} else if (file_exists (WB_PATH.'/templates/vakeng/'.$parent.'.css')) {
  ....
}

The "parent" template is there. (can see it on the parent page) So the 2nd test must be wrong.
Your numbered templates are in /templates/romantic/css/. Does that line say:

} else if (file_exists (WB_PATH.'/templates/romantic/css/'.$parent.'.css')) {

@Stefek
That could work but it doesn't have a fallback built in.
When using the (parent)page_id, you need to change the css or your site will not have an image at all.
You cannot test from PHP if the class is available in the CSS.

Ruud

[Stefek]

@Stefek
That could work but it doesn't have a fallback built in.
When using the (parent)page_id, you need to change the css or your site will not have an image at all.
You cannot test from PHP if the class is available in the CSS.

I got it.
But what if you do something like:

<body class="this_<?php with your code inside ?>"

and then in the CSS something like

body {background image allways this}
body .this_1 {background image cover with this_1}
body .this_2 {background image cover with this_2}
etc.

Best Regards,
Stefek

[Ruud]

I got it too.. That should work..

It might be that very old browsers interpret this wrongly, but if you use such browser the complete Internet will look different. 

Ruud

[Stefek]

Hello again.

I come back with the "real code".

This is theexample I worked out:

Code:

<?php
// get the root_parent depending on the page_id
###  put this inside your head section (befor the closing </head> ###
$q_parent = $database->query("SELECT * FROM ".TABLE_PREFIX."pages WHERE page_id = '".PAGE_ID."'");
$d_parent = $q_parent->fetchRow();
$parent = $d_parent['root_parent'];
?>

Code:

<?php
###  this is your body tag ###
<body class="parent_<?php echo $parent ?>">

Code:

<?php
### and this is your css ###
body {    background-color: blue}
body.parent_1  { background-color: red}
body.parent_5  { background-color: yellow}
body.parent_10  { background-color: green}

For me this worked.
Could be that I missed something.

But if you do it this way you will save a lot of time (no need to handle different files in order to change just one background image).

I hope this is working for you.

Regards,
Stefek

[sparkdigital]

Thanks Ruud,

Here's my code:

Code:

<?php
$css = TEMPLATE_DIR.'/css/screen.css';                 // Set the default CSS for all pages to screen.css

// get the root_parent depending on the page_id
$q_parent = $database->query("SELECT * FROM ".TABLE_PREFIX."pages WHERE page_id = '".PAGE_ID."'");
$d_parent = $q_parent->fetchRow();
$parent = $d_parent['root_parent'];

if (file_exists (WB_PATH.'/templates/romantic/css/'.PAGE_ID.'.css')) {              // If there is a CSS with the page number use that instead of the default CSS
  $css = TEMPLATE_DIR.'/css/'.PAGE_ID.'.css';
} else if (file_exists (WB_PATH.'/templates/romantic/css/'.$parent.'.css')) {      // If there is no CSS for this page, try to see if the parent has its own CSS
  $css = TEMPLATE_DIR.'/css/'.$parent.'.css';
}
?>
<link href="<?php echo $css; ?>" rel="stylesheet" type="text/css" media="screen" />

Hope you can find out what I've done wrong - it's a shame not to having working properly!

Thanks,

Konrad

[kweitzel]

try replacing the part:

Code:

WB_PATH.'/templates/romantic/css/'.PAGE_ID.'.css'

with

Code:

TEMPLATE_DIR.'/css/'.PAGE_ID.'.css'

Assuming that the folder css does exist.

cheers

Klaus