Skinning webpages using PHP

[RichL]

Does anyone know of/if a PHP "Skinning" program is avaliable? I have just finished a new design and would love to add the feature so that guests can choose a skin..which a cookie would then remember that skin and display the same site colours when they return (hopefully ;)). Can anyone help me with this? I would try and write it all out, but i dont know where to start and i also dont have much time until i put up my new design.

If anyone knows where i can find a script like this- PLEASE tell me about it!

[Pecos]

At 7/24/01 05:52 PM, RichL wrote: Does anyone know of/if a PHP "Skinning" program is avaliable? I have just finished a new design and would love to add the feature so that guests can choose a skin..which a cookie would then remember that skin and display the same site colours when they return (hopefully ;)). Can anyone help me with this? I would try and write it all out, but i dont know where to start and i also dont have much time until i put up my new design.

If anyone knows where i can find a script like this- PLEASE tell me about it!

I got a better idea for ya.. instead of using server-size stuff to do this, stick to CSS and JavaScript. Cascading Style Sheets will give you different "skins" and use JavaScript to set and check cookies. JavaScript can then write out the html using the write() command.

Look it up, this stuff is really interesting and will work much cooler than using PHP or any other server-side scripting.

Check some CSS and JavaScript tutorials/guides. If you're completely clueless, come back and I'll elaborate.

[RichL]

Please elaborate! If you know of any "pre mades" please give me the info- im in desperate need of a quick fix, although i would prefer to write it myself- i just dont have the spare time.

Thanks, any help you can give is very much appreciated.

[Pecos]

At 7/25/01 01:52 PM, RichL wrote: Please elaborate! If you know of any "pre mades" please give me the info- im in desperate need of a quick fix, although i would prefer to write it myself- i just dont have the spare time.

Thanks, any help you can give is very much appreciated.

Ok, here's a sample cookie script using JavaScript:
// get cookie
var username = getCookie('css_file');
// set cookie
setCookie('css_file', 'file2.css', time_variable);

Here's how you write HTML using JavaScript:

document.write('Hello World!');

And here's how you reference a CSS file:

[link rel='stylesheet' type='text/css' href='file_name.css']

// Only these brackets [ have to be replaced by '<' in the above line. And you'd have to stick that line in the header of the html page.

So in the html's BODY tag you'd have to call onload='javascript:checkCookie();'

then in the checkCookie() function, read the cookie and determine which .css file you need to reference. Once you have your CSS file, you can write out that link line with document.write().

In fact, you don't even have to use the write() function. Once you have the CSS file name you want to use, you can forward to another HTML page (using javascript's document.href='nextHTMLPage.html?css_file=file2.css') and in nextHTMLPage.html you'd also need an OnLoad event handler in the BODY tag to using javascript to determine the string of the address that comes after the '?' character - that being 'css_file=file2.css' and then you'd be able to use that name to to link to that CSS file.

I hope you're not completely confused.

[RichL]

Ok, here's a sample cookie script using JavaScript:
// get cookie
var username = getCookie('css_file');
// set cookie
setCookie('css_file', 'file2.css', time_variable);

Here's how you write HTML using JavaScript:

document.write('Hello World!');


And here's how you reference a CSS file:

[link rel='stylesheet' type='text/css' href='file_name.css']

// Only these brackets [ have to be replaced by '<' in the above line. And you'd have to stick that line in the header of the html page.

So in the html's BODY tag you'd have to call onload='javascript:checkCookie();'

then in the checkCookie() function, read the cookie and determine which .css file you need to reference. Once you have your CSS file, you can write out that link line with document.write().

In fact, you don't even have to use the write() function. Once you have the CSS file name you want to use, you can forward to another HTML page (using javascript's document.href='nextHTMLPage.html?css_file=file2.css') and in nextHTMLPage.html you'd also need an OnLoad event handler in the BODY tag to using javascript to determine the string of the address that comes after the '?' character - that being 'css_file=file2.css' and then you'd be able to use that name to to link to that CSS file.

I hope you're not completely confused.

Its not really the case of me being confused- i just dont have enough time to put it all together. I know exactly what you mean- and what your saying would actually be alot easier to produce and to use than PHP. but it WOULD take quite some time to do.

With PHP..could i use an include file..say its called "darkblue.inc.php" and it contains:

//?
$bgcolor="#000080"
$tdcolor="#004080"
$text="#0080ff"
?//

I then include it on index.php, and inside index.php i have:

body bgcolor="$bgcolor" text="$text" ..then further down td color="$tdcolor"

ETC. Would that work? Would the index file call up on darkblue.inc.php, read those variables and place the variables into the index file? If that would work i could create several different includes (lightblue.inc..darkred.inc..etc) and allow people to choose them..or is this alotmore difficult than JS and CSS?

[Pecos]

Ok, well I'm not sure how to do it in PHP, but I'm guessing it's possible. I would use CSS and JS only because it's a much more efficient solution. But it's up to you.

[aladinsane]

At 7/25/01 08:03 PM, MassiveBit wrote: Ok, well I'm not sure how to do it in PHP, but I'm guessing it's possible. I would use CSS and JS only because it's a much more efficient solution. But it's up to you.

I agree, it's probably better to use a client-side solution rather than PHP. It's bad practice to use PHP includes for everything because they are such a drain on server resources even though it might seem the easiest way.

Using the JS/CSS way is doing efffectively the same thing that you want to do but using the visitor's computer rather than your server which is better all round.

[RichL]

I agree, it's probably better to use a client-side solution rather than PHP. It's bad practice to use PHP includes for everything because they are such a drain on server resources even though it might seem the easiest way.

Using the JS/CSS way is doing efffectively the same thing that you want to do but using the visitor's computer rather than your server which is better all round.

Ok, if i were to try it with JS and CSS could you give me some help? I am fine and dandy with CSS scripts..the only problem for me is how..someone would e.g. click a link saying "DarkBlue Theme" and it would then set a cookie instructing the page to load "DarkBlue.css". I should be able to do all the rest myself- i have yet to learn about cookies ;).

[Pecos]

At 7/26/01 07:35 AM, RichL wrote: Ok, if i were to try it with JS and CSS could you give me some help? I am fine and dandy with CSS scripts..the only problem for me is how..someone would e.g. click a link saying "DarkBlue Theme" and it would then set a cookie instructing the page to load "DarkBlue.css". I should be able to do all the rest myself- i have yet to learn about cookies ;).

Sure, for starters.. when someone clicks on "set theme" link on the html page call a JS function using OnClick="setTheme('DarkBlue');"

Then in setTheme(theme) function set the cookie like so:
setCookie('css_file', 'file2.css', time_variable);

where css_file is your variable name, DarkBlue.css is your CSS file name (the variable value), and time_variable is the current time (I think). There are different parameters you can set I think.. as in how long you want the cookie to live on the client's side. You'll have to look it up in some JS cookie tutorial - just do a search of "javascript setCookie."

Then use Javascript to forward a use to another page, but add ?DarkBlue to the end of the URL. That way when it goes to "nextPage.html?DarkBlue" you can retrieve the URL string and parse through it to determine what's on the right side of the "?".

If the cookie is already set, then you'd just retreive the css file name from the cookie like so:

var theme_file = getCookie('css_file');

Where css_file is your variable name. Then theme_file holds your file name.. and just concatonate it with ".css"

[RichL]

Sure, for starters.. when someone clicks on "set theme" link on the html page call a JS function using OnClick="setTheme('DarkBlue');"

Then in setTheme(theme) function set the cookie like so:
setCookie('css_file', 'file2.css', time_variable);

where css_file is your variable name, DarkBlue.css is your CSS file name (the variable value), and time_variable is the current time (I think). There are different parameters you can set I think.. as in how long you want the cookie to live on the client's side. You'll have to look it up in some JS cookie tutorial - just do a search of "javascript setCookie."

Then use Javascript to forward a use to another page, but add ?DarkBlue to the end of the URL. That way when it goes to "nextPage.html?DarkBlue" you can retrieve the URL string and parse through it to determine what's on the right side of the "?".

If the cookie is already set, then you'd just retreive the css file name from the cookie like so:

var theme_file = getCookie('css_file');

Where css_file is your variable name. Then theme_file holds your file name.. and just concatonate it with ".css"

Ok, i was following well at first..but you lost me :(.
I would have a link e.g. this: \ a href=javascript:OnClick="setTheme('DarkBlue');" //, when clicked, javascript searches the HEAD section of the page for: the "setTheme" variable..which then processes it and stores a cookie on the user system. When done- could i not have another link saying "Refresh"..they then refresh the page and see their selected theme? If its not too much of a chore, could you write out the HEAD area of it for say two themes..DarkBlue.css and LightBlue.css? e.g.=
//HEAD
//script language="JavaScript"//
processing stuff
//script//
\HEAD

As i have very little expericence with JS it is hard for me to put it all together :(.

[Pecos]

At 7/26/01 11:33 AM, RichL wrote: Ok, i was following well at first..but you lost me :(.
I would have a link e.g. this: a href=javascript:OnClick="setTheme('DarkBlue');" //, when clicked, javascript searches the HEAD section of the page for: the "setTheme" variable..which then processes it and stores a cookie on the user system. When done- could i not have another link saying "Refresh"..they then refresh the page and see their selected theme? If its not too much of a chore, could you write out the HEAD area of it for say two themes..DarkBlue.css and LightBlue.css? e.g.=
//HEAD
//script language="JavaScript"//
processing stuff
//script//
HEAD

As i have very little expericence with JS it is hard for me to put it all together :(.

Having another linke Refresh is very akward. Why should I user do the extra work? Make your script do it instead.

Anyway, here's the basic script part (you'll have to clean it up and do some error detection):

\script language="JavaScript"\
function setTheme(theme) {
setCookie("theme_name", theme, TIME_VARIABLE);
forward = "nextPage.html?" + theme + ".css";;
document.location.href = forward;
}

function getTheme() {
theme = getCookie("theme_name");
forward = "nextPage.html?" + theme + ".css";
document.location.href = forward;
}
\/script\

That's it for me. Anymore general questions should be answered by reading the tutorials. I won't be spending anymore time holding your hand through this.