Creating a Dynamic PHP/CSS Page (newbie design question)

[coolcat]

Hi Folks,

My goal: is to have a template form to control css styles, where the  
user fills out choices in a template form page and the results might  
get stored in a MysQL prefs table.

But I guess you can't have php mixed with .CSS page ... so is the  
best way to do this like: ...?

- set a a normal mystyle.css style sheet with no php but with all  
possible choices

- then - on the css prefs form page you might have choices like:

fontsize = small or med or big etc. then you might store the 'actual'  
css name (on the real css style sheet) associated with the choice like :
style = "HEADER1" or whatever based on the choice


then let's say I have a page:

mypage.php

that links to a css style sheet:

mystyle.css

- then the php page might use it like:

class = "<?php echo $thischoice; ?>" for "HEADER1"

Q: Is that the best way to setup dynamic css choices using php?

Any comments would be appreciated - dave


Thanks,
cool@...






--
PHP General Mailing List (http://www.php.net/)
To unsubscribe, visit: http://www.php.net/unsub.php

[Ashley Sheridan-3]

On Thu, 2009-11-05 at 08:06 -0800, cool@... wrote:

> Hi Folks,
>
> My goal: is to have a template form to control css styles, where the  
> user fills out choices in a template form page and the results might  
> get stored in a MysQL prefs table.
>
> But I guess you can't have php mixed with .CSS page ... so is the  
> best way to do this like: ...?
>
> - set a a normal mystyle.css style sheet with no php but with all  
> possible choices
>
> - then - on the css prefs form page you might have choices like:
>
> fontsize = small or med or big etc. then you might store the 'actual'  
> css name (on the real css style sheet) associated with the choice like :
> style = "HEADER1" or whatever based on the choice
>
>
> then let's say I have a page:
>
> mypage.php
>
> that links to a css style sheet:
>
> mystyle.css
>
> - then the php page might use it like:
>
> class = "<?php echo $thischoice; ?>" for "HEADER1"
>
> Q: Is that the best way to setup dynamic css choices using php?
>
> Any comments would be appreciated - dave
>
>
> Thanks,
> cool@...
>
>
>
>
>
>

You can point your stylesheet link to a PHP file like this: <link
type="stylesheet" href="css.php" type="text/css">

and then in your PHP script, make sure you set your output header type
to text/css like so:

header("Content-Type: text/css");

That way, your PHP script can output exactly what CSS you require.

Thanks,
Ash
http://www.ashleysheridan.co.uk

[Shawn McKenzie]

cool@... wrote:

> Hi Folks,
>
> My goal: is to have a template form to control css styles, where the
> user fills out choices in a template form page and the results might get
> stored in a MysQL prefs table.
>
> But I guess you can't have php mixed with .CSS page ... so is the best
> way to do this like: ...?
>
> - set a a normal mystyle.css style sheet with no php but with all
> possible choices
>
> - then - on the css prefs form page you might have choices like:
>
> fontsize = small or med or big etc. then you might store the 'actual'
> css name (on the real css style sheet) associated with the choice like :
> style = "HEADER1" or whatever based on the choice
>
>
> then let's say I have a page:
>
> mypage.php
>
> that links to a css style sheet:
>
> mystyle.css
>
> - then the php page might use it like:
>
> class = "<?php echo $thischoice; ?>" for "HEADER1"
>
> Q: Is that the best way to setup dynamic css choices using php?
>
> Any comments would be appreciated - dave
>
>
> Thanks,
> cool@...
>

Maybe setup your table like this:

selector style value
-------------------------------------
HEADER1 font-size small
HEADER1 color black
etc...

Then have a PHP page (user_styles.php) that queries the DB for the
styles and echoes them:

$result = query("SELECT * from user_styles WHERE userid = $userid");

while($row = fetch_assoc($result)) {
    echo $row['selector']." { ".$row['style'].": ".$row['value']." }\n";
}

Then just link the PHP page as a stylesheet in your HTML:

<link rel="stylesheet" href="user_styles.php" type="text/css" />



--
Thanks!
-Shawn
http://www.spidean.com

--
PHP General Mailing List (http://www.php.net/)
To unsubscribe, visit: http://www.php.net/unsub.php

[Shawn McKenzie]

Shawn McKenzie wrote:

> cool@... wrote:
>> Hi Folks,
>>
>> My goal: is to have a template form to control css styles, where the
>> user fills out choices in a template form page and the results might get
>> stored in a MysQL prefs table.
>>
>> But I guess you can't have php mixed with .CSS page ... so is the best
>> way to do this like: ...?
>>
>> - set a a normal mystyle.css style sheet with no php but with all
>> possible choices
>>
>> - then - on the css prefs form page you might have choices like:
>>
>> fontsize = small or med or big etc. then you might store the 'actual'
>> css name (on the real css style sheet) associated with the choice like :
>> style = "HEADER1" or whatever based on the choice
>>
>>
>> then let's say I have a page:
>>
>> mypage.php
>>
>> that links to a css style sheet:
>>
>> mystyle.css
>>
>> - then the php page might use it like:
>>
>> class = "<?php echo $thischoice; ?>" for "HEADER1"
>>
>> Q: Is that the best way to setup dynamic css choices using php?
>>
>> Any comments would be appreciated - dave
>>
>>
>> Thanks,
>> cool@...
>>
>
> Maybe setup your table like this:
>
> selector style value
> -------------------------------------
> HEADER1 font-size small
> HEADER1 color black
> etc...
>
> Then have a PHP page (user_styles.php) that queries the DB for the
> styles and echoes them:
>
> $result = query("SELECT * from user_styles WHERE userid = $userid");
>
> while($row = fetch_assoc($result)) {
>     echo $row['selector']." { ".$row['style'].": ".$row['value']." }\n";
> }
>
> Then just link the PHP page as a stylesheet in your HTML:
>
> <link rel="stylesheet" href="user_styles.php" type="text/css" />
>
>
>

Obviously you'd also want the userid and most likely a PK in the table
also :-)

id userid selector style value
-----------------------------------------------------

And also probably what Ash said:

header("Content-Type: text/css");

--
Thanks!
-Shawn
http://www.spidean.com

--
PHP General Mailing List (http://www.php.net/)
To unsubscribe, visit: http://www.php.net/unsub.php

[Andrew Ballard]

On Thu, Nov 5, 2009 at 11:31 AM, Shawn McKenzie <nospam@...> wrote:
> Maybe setup your table like this:
>
> selector        style           value
> -------------------------------------
> HEADER1         font-size       small
> HEADER1         color           black
> etc...

If you do this, you'll probably want to add a sequence number column
to ensure that your directives are output in the correct order in
consideration of CSS inheritance rules.

Andrew

--
PHP General Mailing List (http://www.php.net/)
To unsubscribe, visit: http://www.php.net/unsub.php

[tedd-2]

At 8:06 AM -0800 11/5/09, cool@... wrote:
>But I guess you can't have php mixed with .CSS page


Not so grasshopper.

Try this:

http://sperling.com/examples/pcss/

These values can be pulled from a database.

Cheers,

tedd

--
-------
http://sperling.com  http://ancientstones.com  http://earthstones.com

--
PHP General Mailing List (http://www.php.net/)
To unsubscribe, visit: http://www.php.net/unsub.php

[coolcat]

SORRY FOR THE EXTRA 2 BAD pre SENDS (accident...)


Thank for all the help!

Getting there... as a baby step - I'm trying this:

(part of this is from - http://sperling.com/examples/pcss/)

1 - I created this style sheet page called css.php with these contents:

================

.test1 {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        color: #0099FF;
        font-size: 18px;
}

<?php
header("Content-type: text/css");
$color = "green";        // <--- define the variable
echo <<<CSS
/* --- start of css --- */
.title-text
        {
        color: $color;  /* <--- use the variable */
        font-weight: bold;
        font-size: 1.2em;
        text-align: left;
        }
/* --- end of css --- */
CSS;
?>

-------------------------

2 - I created this test page called testcss.php with these contents:

PROBLEM: the 'test1' style shows up - but the 'title-text' doesn't  
seem to work
btw: even added this : media="screen" from demo ....
How do I get it to show up?

======



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

<link href="css.php" rel="stylesheet" type="text/css" media="screen" />
</head>

<body >
<p>test <span class="test1">this</span></p>

<p class="title-text">and this</p>
</body>
</html>


===================


Thanks,
cool@...






--
PHP General Mailing List (http://www.php.net/)
To unsubscribe, visit: http://www.php.net/unsub.php

[Shawn McKenzie]

cool@... wrote:

> SORRY FOR THE EXTRA 2 BAD pre SENDS (accident...)
>
>
> Thank for all the help!
>
> Getting there... as a baby step - I'm trying this:
>
> (part of this is from - http://sperling.com/examples/pcss/)
>
> 1 - I created this style sheet page called css.php with these contents:
>
> ================
>
> .test1 {
>     font-family: Verdana, Arial, Helvetica, sans-serif;
>     color: #0099FF;
>     font-size: 18px;
> }
>
> <?php
> header("Content-type: text/css");
> $color = "green";        // <--- define the variable
> echo <<<CSS
> /* --- start of css --- */
> .title-text
>     {
>     color: $color;  /* <--- use the variable */
>     font-weight: bold;
>     font-size: 1.2em;
>     text-align: left;
>     }
> /* --- end of css --- */
> CSS;
> ?>
>
> -------------------------
>
> 2 - I created this test page called testcss.php with these contents:
>
> PROBLEM: the 'test1' style shows up - but the 'title-text' doesn't seem
> to work
> btw: even added this : media="screen" from demo ....
> How do I get it to show up?
>
> ======
>
>
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
> <html xmlns="http://www.w3.org/1999/xhtml">
> <head>
> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
> <title>Untitled Document</title>
>
> <link href="css.php" rel="stylesheet" type="text/css" media="screen" />
> </head>
>
> <body >
> <p>test <span class="test1">this</span></p>
>
> <p class="title-text">and this</p>
> </body>
> </html>
>
>
> ===================
>
>
> Thanks,
> cool@...

You need to do the header() before anything else.


--
Thanks!
-Shawn
http://www.spidean.com

--
PHP General Mailing List (http://www.php.net/)
To unsubscribe, visit: http://www.php.net/unsub.php

[Ashley Sheridan-3]

On Thu, 2009-11-05 at 14:13 -0600, Shawn McKenzie wrote:

> cool@... wrote:
> > SORRY FOR THE EXTRA 2 BAD pre SENDS (accident...)
> >
> >
> > Thank for all the help!
> >
> > Getting there... as a baby step - I'm trying this:
> >
> > (part of this is from - http://sperling.com/examples/pcss/)
> >
> > 1 - I created this style sheet page called css.php with these contents:
> >
> > ================
> >
> > .test1 {
> >     font-family: Verdana, Arial, Helvetica, sans-serif;
> >     color: #0099FF;
> >     font-size: 18px;
> > }
> >
> > <?php
> > header("Content-type: text/css");
> > $color = "green";        // <--- define the variable
> > echo <<<CSS
> > /* --- start of css --- */
> > .title-text
> >     {
> >     color: $color;  /* <--- use the variable */
> >     font-weight: bold;
> >     font-size: 1.2em;
> >     text-align: left;
> >     }
> > /* --- end of css --- */
> > CSS;
> > ?>
> >
> > -------------------------
> >
> > 2 - I created this test page called testcss.php with these contents:
> >
> > PROBLEM: the 'test1' style shows up - but the 'title-text' doesn't seem
> > to work
> > btw: even added this : media="screen" from demo ....
> > How do I get it to show up?
> >
> > ======
> >
> >
> >
> > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
> > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
> > <html xmlns="http://www.w3.org/1999/xhtml">
> > <head>
> > <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
> > <title>Untitled Document</title>
> >
> > <link href="css.php" rel="stylesheet" type="text/css" media="screen" />
> > </head>
> >
> > <body >
> > <p>test <span class="test1">this</span></p>
> >
> > <p class="title-text">and this</p>
> > </body>
> > </html>
> >
> >
> > ===================
> >
> >
> > Thanks,
> > cool@...
>
> You need to do the header() before anything else.
>
>
> --
> Thanks!
> -Shawn
> http://www.spidean.com
>

Like I mentioned in my first reply to this, you need to set the content
type of the output in css.php:

header("Content-Type: text/css");

That way, the server sends down the right headers to the agent that is
requesting the CSS. By default, PHP outputs a content type of text/html,
and your browser thinks it got HTML instead of CSS so does nothing.

Thanks,
Ash
http://www.ashleysheridan.co.uk

[tedd-2]

At 8:16 PM +0000 11/5/09, Ashley Sheridan wrote:
>On Thu, 2009-11-05 at 14:13 -0600, Shawn McKenzie wrote:
>
>  > > Getting there... as a baby step - I'm trying this:
>>  >
>  > > (part of this is from - http://sperling.com/examples/pcss/)
>
>  >
>  > You need to do the header() before anything else.


I'm not ragging on you Ashley, but what he needs to do is follow the
directions as outlined in my example.

I really find it frustrating when I take the time to make things as
simple as possible and then have people who don't want to take the
time to understand what's being presented to them.

He could have his entire problem solved if he would only read and
follow the documentation instead of throwing stuff together as if it
will somehow work.

This reminds me of my first memory when I was two years old. You see,
I had a wagon and I wanted it to run like cars do. I knew that my
wagon didn't have what it took to make it run, so I started throwing
stuff into it in the hopes that somehow everything would come
together and the wagon would automagically run.

Well... it didn't run!

So, I stopped trying to solve things that way when I was two. I'm
just surprised how long it takes others to discover that simple fact.

Cheers,

tedd

--
-------
http://sperling.com  http://ancientstones.com  http://earthstones.com

--
PHP General Mailing List (http://www.php.net/)
To unsubscribe, visit: http://www.php.net/unsub.php