Dynamic CSS Tip

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
Gen-ik
DevNet Resident
Posts: 1059
Joined: Mon Aug 12, 2002 7:08 pm
Location: London. UK.

Dynamic CSS Tip

Post by Gen-ik »

If you don't already know this you might find it useful at some point.

You can use .php files in place of .css files in your webpage.

Code: Select all

<head>
<link href="myStyle.php" type="text/css" rel="stylesheet">
</head>
If you are brave enough you can then allow members of your site to customise the style. I normally use a SESSION array for this.

Code: Select all

$_SESSION&#1111;"style"]&#1111;"linkColor"] = "ff0000";
$_SESSION&#1111;"style"]&#1111;"linkSize"] = "12px";
... and so on.

By doing that you can get your stylesheet to render depending on the _SESSION variables. Here's an example myStyle.php file.....

Code: Select all

body &#123; background-color:#ffffff; &#125;

a:link &#123; color:#<? echo $_SESSION&#1111;"style"]&#1111;"linkColor"] ?> ; font-size:<? echo $_SESSION&#1111;"style"]&#1111;"linkSize"] ?> ; &#125;
Might come in useful for the more creative PHP'ers out there 8)


You can also do the same with with .js files....

Code: Select all

<head>
<script language="JavaScript" src="myScript.php"></script>
</head>
User avatar
nigma
DevNet Resident
Posts: 1094
Joined: Sat Jan 25, 2003 1:49 am

Post by nigma »

If you use PHP do you have to refresh the page? I am thinking yes, but not 100% sure of my guesstimate.
m3rajk
DevNet Resident
Posts: 1191
Joined: Mon Jun 02, 2003 3:37 pm

Post by m3rajk »

yes. it has to be called with it, you cannot set it dynamically (unless there's a javascript for it that i don't know)
part of my site includes a blog system. css is adjustable by the user in the entry page. kept as part of the entry data in the db. this ai a page begining function i have for calling a blog entry

Code: Select all

function bgnblogpg($title, $css){ # called on blog display pages
  $ims=cookies('update'); # update cookies and get ims
  head(); # headers to stop caching
  echo <<<END
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>FindYourDesire.com -- $title</title>
    <meta name="Author" content="Pages coded by Josh Perlmutter for Desired Creations LLC">
    <meta name="Author" content="Graphics created by ? for Desired Creations LLC">
    <meta name="Author" content="Smileys created by ? for Desired Creations LLC">
     <style type="text/css">
      @import url(textStyle.css);
$css
    </style>
  </head>
  <body>

END;
  if(count($ims)){ # if there's any ims
    dispims($ims); # display them
  }
}
first i import the stylesheet i use using a different style of importing (it works in mozilla. it's a standard that netscape 4.x came out before it became standard, and was never added to 4.x but has been in netscape since 6.0 mozilla for a while and ie since 5.0. i beleive opera has had it since 7 and galeon also uses it, although i haven't tested in galeon or opera) then i use the css they entered.

note: the style of importing i use must have a fully validated html starting at http:// otherwise it looks in the folder that the script calling it is in, i'm not sure it will allow sub folders. one of the things i read when loking at it was that it "works only in the same folder and the page calling it or with full urls") genick's way will definitely handle something like "css/css.for.some.page.css" and possibly "www.somedomain.com/some/path/to/the/desired.css"
Gen-ik
DevNet Resident
Posts: 1059
Joined: Mon Aug 12, 2002 7:08 pm
Location: London. UK.

Post by Gen-ik »

nigma wrote:If you use PHP do you have to refresh the page? I am thinking yes, but not 100% sure of my guesstimate.
It works like a normal stylesheet except for the fact that some parts of it can be built from $vars. I don't really understand your question.

If you mean can you still change <element> styles using JavaScript then yes...... element.style.color="#ff0000"............ but even if you do this the style will revert to whatever is in the stylesheet when the page is refreshed if you use standard .css files or .php files for your stylesheet.
User avatar
nigma
DevNet Resident
Posts: 1094
Joined: Sat Jan 25, 2003 1:49 am

Post by nigma »

I wanted to know if you had to refresh the page to see a style change. Like you couldn't select "red" as the background color and then use PHP to change the background color to "red" without first refreshing the page.
Gen-ik
DevNet Resident
Posts: 1059
Joined: Mon Aug 12, 2002 7:08 pm
Location: London. UK.

Post by Gen-ik »

There are ways of changing the stylesheet without reloading the page but it can only be done with the Microsoft DOM object..... IE5.5+ as far as I know. Apart from that the page, like you guestimated, will need to be refreshed.

Although you could write a JS function to change the styles you want, save the changes in an JS array, and then when your happy with the changes you could use a JS link to build the URL and send the changes to PHP using window.location="style.php?blablabl" to 'store' or 'save' the style changes.
User avatar
m3mn0n
PHP Evangelist
Posts: 3548
Joined: Tue Aug 13, 2002 3:35 pm
Location: Calgary, Canada

Post by m3mn0n »

this doesnt work for me in Mozilla. =\ It seems like it doesnt recognize .php css style sheets.

I changed my styles back to .css and it works like it would in IE...
Gen-ik
DevNet Resident
Posts: 1059
Joined: Mon Aug 12, 2002 7:08 pm
Location: London. UK.

Post by Gen-ik »

Sami wrote:this doesnt work for me in Mozilla. =\ It seems like it doesnt recognize .php css style sheets.

I changed my styles back to .css and it works like it would in IE...

Well it works fine with IE and NS, and let's face it, they are the only browsers worth worrying about considering that about 99% of internet users use one or the other....... other browser users will just have to 'get with it' or miss out..... simple.
d3ad1ysp0rk
Forum Donator
Posts: 1661
Joined: Mon Oct 20, 2003 8:31 pm
Location: Maine, USA

Post by d3ad1ysp0rk »

Gen-ik wrote:
Sami wrote:this doesnt work for me in Mozilla. =\ It seems like it doesnt recognize .php css style sheets.

I changed my styles back to .css and it works like it would in IE...

Well it works fine with IE and NS, and let's face it, they are the only browsers worth worrying about considering that about 99% of internet users use one or the other....... other browser users will just have to 'get with it' or miss out..... simple.
Basically my thinking.. except I don't even code for netscape users (cuz im too lazy :D).. but i've never had issues with cross-browser problems
User avatar
JAM
DevNet Resident
Posts: 2101
Joined: Fri Aug 08, 2003 6:53 pm
Location: Sweden
Contact:

Post by JAM »

Sami wrote:this doesnt work for me in Mozilla. =\ It seems like it doesnt recognize .php css style sheets.

I changed my styles back to .css and it works like it would in IE...
Can you explain what you did when you tried this, as I'm using this daily, without problems. And I can also add that Mozilla has better css support than most other browsers so...
User avatar
m3mn0n
PHP Evangelist
Posts: 3548
Joined: Tue Aug 13, 2002 3:35 pm
Location: Calgary, Canada

Post by m3mn0n »

I had no php code in the .php files (not yet anyway) but they were standard, well formed css files and what made them work was me renaming all the files from .php to .css.

I was using a new Mozilla build too. =\
User avatar
JAM
DevNet Resident
Posts: 2101
Joined: Fri Aug 08, 2003 6:53 pm
Location: Sweden
Contact:

Post by JAM »

Aha, you kinda 'included' (link rel-style) a css file using the .php extension... Now I understood it.

I actually never tried that myself, but I never mess with file extensions due to previously bad experience...

But basicly, if you <link rel... a css file, then;

Code: Select all

<?php
session_start();                // demonstrative only
$_SESSION['td']['even'] = "ccc";// demonstrative only
$_SESSION['td']['odd'] = "dde"; // demonstrative only
echo '
<style>
td.even { background: #' . $_SESSION['td']['even'] . '; }
td.odd { background: #' . $_SESSION['td']['odd'] . '; }
</style>';

/*
<style>
td.even { background: #ccc; }
td.odd { background: #dde; }
</style>
*/
?>
...those td.even/odd will override the ones in the linked css file. Meaning, that if the user has not yet selected any preferences for those, the old default values will be in use.
Post Reply