Color changing system

[doddsey_65]

I have a system on my forum where the admin can change the colors of certain elements. Take the divs with and id of header for example. They can change the color of these and the value is added to the database. Then in my initialize file which is always called with every page, i set the color for the headers to the database value:

 

$color['headers'] = $row['headers'];

 

but then i have to go to every header div and add

 

<div id="header" style="color:'.$color['headers'].'";>

 

this means doing this for every header div and i dont just allow them to change the font color, but also background color and borders.

Would there be a better way of doing this without adding these variables to the style attr of the element? when i view the code in firebug there are alot of style attr with all of these variables and it makes the code look a mess, and also makes it tedious work to add these variables to every element.

 

Thanks

 

[cssfreakie]

what i would do is instead of using inline style assign a class name.

store a classname + code in a database.

 

for instance a table properties

classname    code    value

color              1        red

color              2        blue

 

in php you could than say:

<h2 class="$classname">

than a class outputted could look like color1 or color2

 

By storing also the value of the class you could print a style tag block to output css.

<style type="text/css">
<?php
//echo classnames + values like
.color1{color:red;}
?>

</style>

Anyway i would rather use an external stylesheet for this.

can't you use a file open read write thing for admins?

 

 

Hope the above made a little sense, off to bed, sleepy as hell

 

[kenrbnsn]

If you don't mind using a little bit of Javascript, you can do this in a few lines of jQuery. Put these lines at the just before the </head> tag:

<script type="text/javascript">
    google.load("jquery", "1.6.1", {uncompressed:true});
</script>
<script type="text/javascript">
$(document).ready(function() {
            $('.div_class_to_change').css('color','<?php echo $color['headers']; ?>');  // change all divs with class 'div_class_to_change' to the color defined
            $('#div_id_to_change').css('color','<?php echo $color['headers']; ?>');  // change all divs with id 'div_id_to_change' to the color defined
         });
</script>

 

Ken