...

View Full Version : How to Dynamically Load CSS file?



dealmaker
12-09-2005, 05:18 AM
Hi,
My page consists of 3 different PHP files with their own template file. One is header, then body, then footer. Header and footer generally stay the same in every page, but the body one change. I want to load different CSS file for different body php/template files. But how? Can I load CSS file outside head tag?

Many thanks.

kalloo
12-09-2005, 05:46 AM
do u want the body css to load randomly? then you will have to make an array of css and print that variable randomly. this is more related to sripting in php. you post this in some php forum, they can even give the code to be used.

http://www.codingforums.com/forumdisplay.php?f=6

dealmaker
12-09-2005, 06:02 AM
not randomly, for examples, I have different php files for the body. e.g. first.php, second.php, third.php. I want to use first.css, second.css, third.css accordingly.


do u want the body css to load randomly? then you will have to make an array of css and print that variable randomly. this is more related to sripting in php. you post this in some php forum, they can even give the code to be used.

http://www.codingforums.com/forumdisplay.php?f=6

kalloo
12-09-2005, 06:39 AM
ok, its almost same. but you will have send a variable from first.php, second and third.

here is the code (i hope i can put the php code in this section. if not i request the moderator to delete this, but dont kick me out of this forum)

I suggest you to write or get a better code from PHP (http://www.codingforums.com/forumdisplay.php?f=6) section for the same.

<?php
// Define array.
$cssFile = array('css1.css', 'css1.css', 'css2.css');

// use the variable sent from first.php. for example $css=1 and print that here.

echo '<link rel="stylesheet" type="text/css" href="' . $cssFile[$css] . '" />';
?>

dealmaker
12-09-2005, 06:39 PM
I can do that inside the <head> tag of html? I thought that the <link> tag can only be used inside the <head> tag.


ok, its almost same. but you will have send a variable from first.php, second and third.

here is the code (i hope i can put the php code in this section. if not i request the moderator to delete this, but dont kick me out of this forum)

I suggest you to write or get a better code from PHP (http://www.codingforums.com/forumdisplay.php?f=6) section for the same.

<?php
// Define array.
$cssFile = array('css1.css', 'css1.css', 'css2.css');

// use the variable sent from first.php. for example $css=1 and print that here.

echo '<link rel="stylesheet" type="text/css" href="' . $cssFile[$css] . '" />';
?>

Bill Posters
12-10-2005, 09:05 AM
Rather than providing separate css files, how about setting all the permutations within a single stylesheet?

It should be possible for you to set a dynamic id or class attribute for the body element (possibly from a random list if that's what you're after), so you should also be able to set up the possible permutations in your stylesheet.
Setting a dynamic, section id for the body can be useful in pre-setting page-specific style declarations within a single, main stylesheet.

e.g.

css:


body#home #content {
background: #f00;
}

body#work #content {
background: #fcf;
}

body#contact #content {
background: #fc3;
}

markup:

<body id="home">


<div id="content">



Anyhoo, just another way to skin that cat. ;)

dealmaker
12-10-2005, 06:03 PM
I guess the main question is whether I can use php to change the css file dynamically inside the HEAD tag? Can HEAD tag handle php code?

The reason I need to load css files dynamically is that each of my webpage has 3 section, header, body and footer in 3 different php files and 3 different templates. Header and footer virtually stay the same for all webpages, but the body changes. Some has tables, some don't, some has forms, some dont'. If I include all the styles of all these elements, it will be a huge css file for a body that has only one of those elements. So I think it's a waste.

bazz
12-11-2005, 04:53 PM
I have the a similar set up in my site: standard head, no footer and variable body, depending on what the purpose of the page is, though writtne in perl, not php.

I have five different layouts so I used a variable div id. I take a parameter which is included in the link to the specific page, which outputs the body data, so that the appropriate one is loaded from the css file.

My CSS is quite long (probably a bit verbose), but I am sure when I amend part of it, that those changes will apply only to the file I want and not, accidentally, to any other. It is quite easy to maintain.

If you want I can post the css as it is, I thnk, sufficuently comented out, to show you what I mean.


Bazz

dealmaker
12-11-2005, 06:36 PM
thanks. I think I need to know your mechanism to load css, I don't need to see what's inside the css.


I have the a similar set up in my site: standard head, no footer and variable body, depending on what the purpose of the page is, though writtne in perl, not php.

I have five different layouts so I used a variable div id. I take a parameter which is included in the link to the specific page, which outputs the body data, so that the appropriate one is loaded from the css file.

My CSS is quite long (probably a bit verbose), but I am sure when I amend part of it, that those changes will apply only to the file I want and not, accidentally, to any other. It is quite easy to maintain.

If you want I can post the css as it is, I thnk, sufficuently comented out, to show you what I mean.


Bazz

bazz
12-12-2005, 11:51 AM
hi
in three scenarios, I am showing you how the div id is established and the way that I have done the css



where the subject is add_client:

<div id="$variableName">
<table>
<tr>
<td></td>
</tr>
</table>

The css would be
#add_client table {
}

#add_client table td {
}

#add_client table tr th {
}

#add_client table td {

}

#add_client table input {

}

#add_client table td select {
}




where the subject is control_panel_index_pages, another page would have a totally different appearance simply from the css:



<div id=$variable">
<table>
<tr>
<td></td>
</tr>
</table>

#control_panel_index_pages table {

}

#control_panel_index_pages table th {

}

#control_panel_index_pages table td {

}



and another with definition lists:

[code]
<div id="$variable">
<dl>
<dt></dt>
<dd></dd>
<dd class="price"></dd>
<dl>

again, the css would be

/*------------ Definition lists css ----------------------------*/

#control_panel_index_pages dl {

}

#control_panel_index_pages dl dt {
}

#control_panel_index_pages dl dt h4 {
}

#control_panel_index_pages dl dd ul {
}

#control_panel_index_pages dl dd ul li
{

}

#control_panel_index_pages dl dd ul li a:link, #control_panel_index_pages dl dd ul li a:visited, #control_panel_index_pages dl dd ul li a:active {

}


#control_panel_index_pages dl dd ul li a:visited {

}

#control_panel_index_pages dl dd ul li a:hover {
}



I don't know how you would do it in php but, in perl,

my $variable = $query->param ('action');

If that's not enough just holler :)

Bazz

just holler, basically, means shout for more help.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum