Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 18
  1. #1
    Senior Member mossoi's Avatar
    Join Date
    Apr 2003
    Location
    Englandshire, United Kingdomsville y'all!
    Posts
    1,111
    Member #
    1206
    Liked
    1 times
    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.

  2.  

  3. #2
    Senior Member mossoi's Avatar
    Join Date
    Apr 2003
    Location
    Englandshire, United Kingdomsville y'all!
    Posts
    1,111
    Member #
    1206
    Liked
    1 times
    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).

  4. #3
    Senior Member mossoi's Avatar
    Join Date
    Apr 2003
    Location
    Englandshire, United Kingdomsville y'all!
    Posts
    1,111
    Member #
    1206
    Liked
    1 times
    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>

  5. #4
    Senior Member mossoi's Avatar
    Join Date
    Apr 2003
    Location
    Englandshire, United Kingdomsville y'all!
    Posts
    1,111
    Member #
    1206
    Liked
    1 times
    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>

  6. #5
    Senior Member mossoi's Avatar
    Join Date
    Apr 2003
    Location
    Englandshire, United Kingdomsville y'all!
    Posts
    1,111
    Member #
    1206
    Liked
    1 times
    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.

  7. #6
    WDF Staff Wired's Avatar
    Join Date
    Apr 2003
    Posts
    7,656
    Member #
    1234
    Liked
    137 times
    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)?
    The Rules
    Was another WDF member's post helpful? Click the like button below the post.

    Admin at houseofhelp.com

  8. #7
    Senior Member mossoi's Avatar
    Join Date
    Apr 2003
    Location
    Englandshire, United Kingdomsville y'all!
    Posts
    1,111
    Member #
    1206
    Liked
    1 times
    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!

  9. #8
    WDF Staff Wired's Avatar
    Join Date
    Apr 2003
    Posts
    7,656
    Member #
    1234
    Liked
    137 times
    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+
    The Rules
    Was another WDF member's post helpful? Click the like button below the post.

    Admin at houseofhelp.com

  10. #9
    Senior Member
    Join Date
    Jun 2003
    Location
    Australia
    Posts
    735
    Member #
    1935
    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..

  11. #10
    Senior Member mossoi's Avatar
    Join Date
    Apr 2003
    Location
    Englandshire, United Kingdomsville y'all!
    Posts
    1,111
    Member #
    1206
    Liked
    1 times
    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.


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:49 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com