PDA

View Full Version : Make a Dynamic Stylesheet

mossoi
August 31 '03, 09:14 PM
Skills needed: HTML, ASP, CSS
Difficulty: Intermediate
Assumptions: That you have established a connection to a database and can assign table data to variables. Also that you have built a form that allows visitors to add and edit data to their profile.

Intro

JavaScript is great for directing a browser to specific stylesheet depending on screen resolution, browser version and so on but what if you want to change the style of the site dynamically depending on your visitors preferences?

You can create several stylesheets and include a different one for each option. This works for sites that use skins where the entire stylesheet is different for each choice but doesn't work if you want to give the visitor the ability to change each element independently - unless you want to make hundreds of CSS files!

In steps server side scripting. This will allow you to dynamically change the style based on a database of user preferences.

NOTE: This is all in ASP but you can use PHP in exactly the same way.
mossoi
August 31 '03, 09:15 PM
The Users Table

My example table contains the following column titles for each user with the associated data (generated from the profile form):

dbName, dbFontSize, dbTextColor, dbBgColor (I always preceed my labels with db, str or frm so that I know what datatype it is and to avoid accidentally using a reserved variable name).
mossoi
August 31 '03, 09:16 PM
the Stylesheet (style.asp)

Don't make this a CSS file otherwise you're ASP code won't be executed. You don't need the <html>, <head> , <body> as this is going to be a server side include.

<%
'Start script to define variables
[CODE TO ESTABLISH THE DATABASE CONNECTION AND DECLARE VARIABLES]

'Get the username
strName = Request.Cookies("user")("name") 'I use a cookie for this, use whatever you want to assign the variable
'Set Defaults if not logged in
If strName = "" then
strFontSize = "x-small"
strTextColor = "blue"
strBgColor = "yellow"
End If
'Set the connection
Set RS = Server.CreateObject ("ADODB.Recordset")
RS.Open "SELECT * FROM users WHERE dbName = '" & strName & "' " , DB
'Set Defaults if not logged in
If RS.BOF and RS.EOF Then
strFontSize = "x-small"
strTextColor = "blue"
strBgColor = "yellow"
Else
'Define the variables needed
strFontSize = RS.Fields("dbFontSize")
strTextColor = RS.Fields("dbTextColor")
strBgColor = RS.Fields("dbBgColor")
End If
'End of script to define variables
%>

<style>
body
{
background-Color: <%=strBgColor%> ;
color: <%=strTextColor%> ;
font-Size: <%=strFontSize%> ;
}
h1
{
font-size: larger;
}
</style>
mossoi
August 31 '03, 09:17 PM
The Page To Display

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Dynamic CSS Page</title>
</head>

<body>
<!-- #include File="style.asp" -->
<h1>Dynamic CSS Page</h1>
<p>This page will have the visitors selected color settings and font size.</p>
<%
[CLEAN UP DATABASE CONNECTIONS]
%>
</body>
</html>
mossoi
August 31 '03, 09:18 PM
Conclusion

That's it! You can have as many different preferences available to the visitor as you want, you just need to expand the database and stylesheet however you like. Notice that the style sheet will always make the h1 tag one size bigger than the normal font size to maintain the integrity of your design.

One word of warning - it's advisable to use radio buttons in the members profile form so that you control the data that is inserted into the style sheet.
Wired
August 31 '03, 10:32 PM
Wouldn't mind seeing a live example and/or a PHP version :) So basically it'll dynamically change based upon the user's resolution (or some other variable)?
mossoi
August 31 '03, 10:36 PM
I'll have a live version up tomorrow.

Not so much on a user's resolution but on a preference selected by a user.

eg. "I'd like big text on a green background, right-aligned with pictures of gorilla's in every TD" selected via a form.

PHP is out of the question for a couple of months. Gotta finish my MCSE before I learn that!
Wired
August 31 '03, 10:46 PM
Oooohhhhhh. Could you have it be based upon a variable set by a java script that finds out your resolution though? MCSE? OUCH! Still gotta take A+, N+, S+
buntine
September 1 '03, 12:24 AM
this method is good for the time being;) i think it will be very handy in the future when we can make dynamic CCS without having to resort to other languages..
mossoi
September 1 '03, 05:24 AM
You can include a JavaScript to check for resolution and have that assign specific variables just as you would in a normal CSS/HTML page.
justlivyalife
September 1 '03, 09:01 AM
Any way to tdo that without knowledge of ASP at all??

I'm just lookin around at options for my new site...
mossoi
September 1 '03, 09:08 AM
You can replace the ASP code for the PHP equivalent although I don't know the specifics of how to do it.

The tutorial is really just an example of what you can do with stylesheets if you start to look at them as normal pages that can have more functionality than just CSS. Anything you can do in a normal page you can do to a stylesheet.
justlivyalife
September 1 '03, 09:09 AM
Thanks for the speedy reply. I didn't really read the posts so I suppose I was confused -I read them after i posted and now I am clear.
dotcommakers
December 26 '03, 08:26 AM
i need help to build such dynamic css in php
Wired
December 26 '03, 10:13 AM
Well that's what this tutorial is for. What is your specific question that is related to this tutorial?
dotcommakers
December 26 '03, 10:19 AM
he show here tutorial for asp

i want help in PHP
mossoi
December 26 '03, 10:56 AM
I'll try to put something together in the next few days but the main drive of the tutorial is to show how you can use variables within a stylesheet regardless of which server side language is used to generate them - the ASP isn't the most important aspect and can easily be replaced with PHP if you know how to assign variables.

I'll try to post something shortly.
dotcommakers
December 26 '03, 11:12 AM
ok thanks