通过Web界面对CSS文件进行永久更改？

Question

http://www.vector.safwanmanpower.com/

I'm developing a website package,this website package will be given to third party companies so if third party companies want to change background color,font face in css to change this I have created a webpage where all this css property are specified and in textbox they will select background color,font face values and this changes should effect in css file after submitting the changes.

My aim behind is this companies can make changes through webpage interface i don't want them to find css code and change the values their to make the work easy.

Answer 1

The idea sounds good, but it will probably be a bit of work, and beyond 1 single answer. But this is how I would approach it.

Have a database storing the current selectors, properties, and values.

Such as :

selector | property | value
---------+----------+----------
div      | color    | #FFFFFF
div      | float    | left

etc, etc...

On a user submitting a change, do the following things

1 - Update the row in the database, for example if I, the user, changes the div to #440044, then update the row so it reads as such:

selector | property | value
---------+----------+----------
div      | color    | #440044
div      | float    | left

2 - Using PHP (or your choice of server side language) pull the contents of the database, organising by selector, using a mySQL query along the lines of:

$query = 'SELECT * FROM css ORDER BY selector';

3 - Loop through these values, grouping them into an array of arrays like this:

$css_array = array();
foreach($rows as $row) {
    if( ! array_key_exists($row['selector'], $css_array)) {
        $css_array[$row['selector']] = array();
    }
    // push each value onto the sub array
    $css_array[$row['selector']][] = $row['property'] . ':' . $row['value'];

}

This will leave you with an array of arrays - each sub array representing an element of the css

array(
    'div' => array(
        'color:#440044',
        'float:left'
    ),
    'h1' => array(
        'font-size:16px'
    )
);

4 - Using this array, and the implode method, create a massive string, like:

foreach($css_array as $key => $value) {
    $s .= key . '{';
    $s .= implode(';\n', $value);
    $s .= key . '}';
}

5 - This should leave you with a string that looks like a normal css sheet. Write this to a file called style.css or similar using the fopen, etc functions in PHP.

Answer 2

You will need a little php script, assuming you added the php tag because that's your language of choice.

This script will have to open the appropriate css file, search for the relevant part to change, change it and write the changed file to disk. You could use a regex Statement to find the relevant class & property of the css file.