CSS that displays when it feels like it

[firefly91]

So i've set up user profiles on one of my sites to enable users to add custom colours and change the background. Only thing is the CSS only shows up sometimes on Firefox and in IE it doesn't even appear in the source code :icon_confused: Anyway here's the PHP used to generate the CSS code:

<?php

$result1 = mysql_query("SELECT * FROM user_css WHERE loginname='$loginname'");

if((mysql_num_rows($result1) != 0) && ($_GET['page'] == "profile")){

        while($row1 = mysql_fetch_array($result1)){

                echo'<style type="text/css">

                fieldset{

                        color: '.$row1['text'].';
                        border-color: '.$row1['fieldset'].';

                }

                legend{

                        color: '.$row1['legend'].';

                }

                strong, h1{

                        color: '.$row1['strong'].';

                }
                
                h1{
                
                        border-color: '.$row1['strong'].';
                        
                }

                .user_css{

                        background-color: '.$row1['back_col'].';
                        background-image: url('.$row1['back_img'].');
                        background-position: '.$row1['back_pos'].';
                        background-repeat: '.$row1['back_rep'].';

                }

                </style>';

        }

}
                
?>

Thanks

[FlashCreations]

Do the values in MySQL have a # before the color hex (or if it's rgb, is there a rgb( ) surrounding the pair of numbers)?

[firefly91]

Thanks for the reply. If the user entered a # in the input box then.. yes. Would that be a problem?

[FlashCreations]

Yes, it could be. I would suggest a static color picker (Most users don't know about hex's) or a backend system that checks a color before it is placed in the database. This way you can ensure that a color is always displayed (Because the user could have entered some color followed by a semicolon and some more css. The user could have even inserted javascript with this loose input system. This is a horrible XSS Vulnerability.)

[firefly91]

I could ensure that nothing other than numbers are entered into the database that would solve the "#" character problem and also prevent additional css and possibly js being entered. By the way the sites aimed at web developers so... hopefully the know what hex codes are ;)

[FlashCreations]

Alright, so if the site is targeted towards web developers then you can allow them to enter hex codes. Just make sure that the entered codes are uniform. If the user doesn't put a # at the beginning, put one there for them. If the hex is in shorthand (#F60), elongate it (#FF6600). If there are missing numbers (or letters... #F9), put zeros to fill the empty space (#F90000).

[pclfw]

What happens if the user doesn't fill in all of the options?

Are there defaults for every possible CSS value?

Is the input validated for the difference between "#FFFFFF" and "WHITE"? Both of these are valid CSS color options.

**I DO NOT KNOW HOW YOU OBTAIN YOUR USER INPUT**
But [:-)]

I think I would have provided drop down boxes with a list of allowed entries and defaults. This makes client side validation much easier and simplifies the DB CRUD commands and CSS generation.

You would also know that each user CSS data record would be complete too.

[FlashCreations]

Drop-down boxes would certainly seem easier. A word of warning with them. Still validate their values (maybe check it against a valid array), because Firefox addons like Firebug can easily alter their values, which, would not be devastating since the changes only affect them, but still would be a security vulnerability.

You can still allow the user to pick his or her own colors. You just need to think of all of the possibilities and prevent them from being a problem. You already have done some of this and I would suggest it. A looser input is more user friendly...Allowing the user to enter white of #FFF or #FFFFFF or rgb(0,0,0) ensures that all of your bases are covered.

For this loose format you can use Regexes to find if the input matches all of the types you accept. If the field is blank or has an unrecognized type, just send it back with an error message and have the user try again (Best to do this with JavaScript instead of PHP. I've cussed out many website for making me fill out a really long form from scratch because the CAPTCHA is illegible!)

[diafol]

How about a visual colourpicker (e.g. with jQuery):

http://www.eyecon.ro/colorpicker/

once colour set, up to you how you store the info.

[firefly91]

I think I would have provided drop down boxes with a list of allowed entries and defaults. This makes client side validation much easier and simplifies the DB CRUD commands and CSS generation.

That sounds like the best idea right now. I could have a drop down box where each option is a colour block. There would still need to be some sort of validation there in case the user had an addon like FlashCreations said.

How about a visual colourpicker (e.g. with jQuery):

http://www.eyecon.ro/colorpicker/

once colour set, up to you how you store the info.

I was considering implementing a colour picker but I might just stick with the dropdown box idea for now and only use safe colours.

[FlashCreations]

Well, good luck with whichever solution you chose. If the problem with the colors still persists, try viewing the source of the page and copying the CSS into a CSS validator. If it doesn't check out, you can post back here and we'll help you fix it.