Hello there, I would like to give my user's the ability to change the background of my forum. I have this .js script:

function change_it() {
    
  if (document.getElementById && document.createTextNode) {
      
    var new_color = "";
    var color_sel = document.getElementById("change_bg").value;
    color_sel *= 1;
    
    switch (color_sel) {
      case 0 : window.alert("Per favore seleziona un colore."); return false;
      case 1 : new_color = "#FFFF00"; break;
      case 2 : new_color = "#3333FF"; break; 
      case 3 : new_color = "#009900"; break;
    }
    
    document.body.style.backgroundColor= new_color;
    return false;
    
  }
}

And this HTML code:

<!-- Bg Color Switcher -->
<form action="#" onsubmit="return change_it();">
<select name="change_bg" id="change_bg">
<option selected="selected" value="0">Color:</option>
<option value="1">Yellow</option>
<option value="2">Blue</option>
<option value="3">Green</option>
</select> 
<input type="submit" value="Cambia!" />
</form>
<script type="text/javascript" src="clientscript/bgcolor_switcher.js"></script>
<!-- ### -->

And it works.. but just for the page they are browsing. When they click on another link, they enter a thread or something else, the background return the default one. So, my question is.. is there a way I can set a cookies reminder in order to save the selected backgorund for 30 days, for example.. ? Thank you.

http://www.elated.com/articles/javascript-and-cookies/

I can't understand how to make it to work. I have tried this:

function writeCookie( )
{
        var name = document.change_bg.selection.value;
        document.cookie = "coloreBg=" + name;
}

function change_it() {
    
  if (document.getElementById && document.createTextNode) {
      
    var new_color = "";
    var color_sel = document.getElementById("change_bg").value;
    color_sel *= 1;
    
    switch (color_sel) {
      case 0 : window.alert("Per favore seleziona un colore."); return false;
      case 1 : new_color = "#FFFF00"; break;
      case 2 : new_color = "#3333FF"; break; 
      case 3 : new_color = "#009900"; break;
    }
    
    document.body.style.backgroundColor= new_color;
    return false;
    
  }
}

function readCookie( )
{
        if (document.cookie != "") //make sure the cookie exists
        {
                var coloreBg = document.cookie.split("=")[1]; //Get the value from the name=value pair
                document.write ("Hello, " + coloreBg);
        }
}

.. with this HTML code:

<!-- Bg Color Switcher -->
<form action="#" name="change_bg" onsubmit="return change_it();" onClick="setCookie('bgcolor',''selection, +30)">
<select name="change_bg" id="change_bg">
<option selected="selected" value="0">Seleziona un Colore</option>
<option value="1">Yellow</option>
<option value="2">Blue</option>
<option value="3">Green</option>
</select> 
<input type="submit" name="selection" value="Cambia!" />
</form>
<script type="text/javascript" src="clientscript/bgcolor_switcher.js"></script>
<!-- ### -->

But nothing. Can you please help me?

Well if I were you, I would do it with php. Less code. And, in my view, much simpler. Here is the code. Put this on any page where you want the dynamic background applied:

PHP Code:

<?php 
if($_SESSION['color'] == '#FFFF00') { //if it's yellow
    echo "<style type=\"text/css\">body {background: #FFFF00;}</style>";
}
if($_SESSION['color'] == '#3333FF') { //if it's blue
    echo "<style type=\"text/css\">body {background: #3333FF;}</style>";
}
if($_SESSION['color'] == '#009900') { //if it's green
    echo "<style type=\"text/css\">body {background: #009900;}</style>";
}
if( empty($_SESSION) ) { //if there is no set background
    //nothing here!
}
?>

Put this on the page where the user sets their background color: (along with the code above, of course)

PHP Code:

<?php
$color = $_POST['change_bg'];
if($_POST['submit']){
    echo "<style type=\"text/css\">body {background: ".$color.";}</style> Per favore seleziona un colore.";
    $_SESSION['color'] = $color;
}
?>
<form method="post">
<select name="change_bg">
<option selected="selected" value="#FFFFFF">None</option>
<option value="#FFFF00">Yellow</option>
<option value="#3333FF">Blue</option>
<option value="#009900">Green</option>
</select> 
<input type="submit" value="Cambia!" name="submit" />
</form>

And in every page you want it to work, put the code

PHP Code:

<?php session_start(); ?>

at the top before any code. If you're using a premade forum, it may already have that.

Ask if you have any questions!
- Steve

Thank you very much, stevej. In my vBulletin forum I have added the PHP code on a plugin:

PHP Code:

session_start();  

if($_SESSION['color'] == '#FFFF00') { //if it's yellow 
    echo "<style type=\"text/css\">body {background: #FFFF00;}</style>"; 
} 
if($_SESSION['color'] == '#3333FF') { //if it's blue 
    echo "<style type=\"text/css\">body {background: #3333FF;}</style>"; 
} 
if($_SESSION['color'] == '#009900') { //if it's green 
    echo "<style type=\"text/css\">body {background: #009900;}</style>"; 
} 
if( empty($_SESSION) ) { //if there is no set background 
    //nothing here! 
} 

$color = $_POST['change_bg']; 
if($_POST['submit']){ 
    echo "<style type=\"text/css\">body {background: ".$color.";}</style>"; 
    $_SESSION['color'] = $color; 
} 


And in the header template I have added this:

<form method="post">
<select name="change_bg">
<option selected="selected" value="#FFFFFF">None</option>
<option value="#FFFF00">Yellow</option>
<option value="#3333FF">Blue</option>
<option value="#009900">Green</option>
</select> 
<input type="submit" value="Cambia!" name="submit" />
</form>

But.. it doesn't work. When I select a colour and I click "Change".. it reload the page but it is still the same. Here you can see yourself:

http://community.dakoom.com/index.php

Ok... If I were you, I would do this:
Put this code in the very very top, before any html, even before the doctype declaration. Probably in the header file. (You are using includes on the forum theme, right?)

PHP Code:

 <?php session_start(); ?>

Then make a plugin with this next code I'll give you: doesn't matter where, but you should put it after you link to the external style sheet.

PHP Code:

<?php
if($_SESSION['color'] == '#FFFF00') { //if it's yellow 
    echo "<style type=\"text/css\">body {background: #FFFF00;}</style>"; 
} 
if($_SESSION['color'] == '#3333FF') { //if it's blue 
    echo "<style type=\"text/css\">body {background: #3333FF;}</style>"; 
} 
if($_SESSION['color'] == '#009900') { //if it's green 
    echo "<style type=\"text/css\">body {background: #009900;}</style>"; 
} 
if( empty($_SESSION) ) { //if there is no set background 
    //nothing here! 
} 
?>

Once you've done that, you have established the whole cookie system. This next code is the form code. It too, should come after the link to the external stylesheet. And it should go together. Just for the sake of simplicity.

PHP Code:

<?php
$color = $_POST['change_bg'];
if($_POST['submit']){
    echo "<style type=\"text/css\">body {background: ".$color.";}</style> Per favore seleziona un colore.";
    $_SESSION['color'] = $color;
}
?>
<form method="post">
<select name="change_bg">
<option selected="selected" value="#FFFFFF">None</option>
<option value="#FFFF00">Yellow</option>
<option value="#3333FF">Blue</option>
<option value="#009900">Green</option>
</select> 
<input type="submit" value="Cambia!" name="submit" />
</form>

Hopefully that will work. You probably aren't at liberty to do this, but it would probably help if I could see the whole unrendered php page.

- Steve

My problem is that on vBulletin I can't use PHP code on templates, so I can: 1) include them via .php files, 2) include them as plugins. This for the form part wich includes that part of php code.

Ok then, you may have to split it into two plugins... one with the session_start function put at the top before any code, and one with the rest of the code put in after the style information has been given. That is very important. I haven't ever used vBulletin before, so I'm sorry if so if my advice is a no-brainer.

- Steve

I will try. Really thanks stevej, again.

Now it works! Just one problem: when the browser is closed, the cookies gone away. And would be great to let them remain for.. mhh, 30 days? Or something like this.

Oh, another question. Do you think is possible to put there a script that open a colours panel, so users can select a really personalized colour and not the ones I have chose?

Doh! I'm such an idiot... Turns out I've been giving you a code that uses sessions this whole time. Not cookies. Oh well, I now have you a new code. It uses cookies, so that they will not expire if the user closes the browser. And, you don't have to use that annoying session_start script at the top. You can get rid of it now. I haven't implemented a color rack, but have made it so that you don't need to start a whole new 'if' function whenever you want to add a new color. So with that being said, here is the code to replace the code that decides whether the user has a cookie or not:

PHP Code:

<?php
if(isset($_COOKIE['color'])) { //if user has cookie
    $setcolor = $_COOKIE['color']; 
    echo "<style type=\"text/css\">body {background:".$setcolor.";}</style>"; 
} 
else {
    //do nothing.
}
?>

Fortunately, you do not have to change any of the html form, or anything like that. Just some of the php that goes with the form. Change your old form php to this:

PHP Code:

<?php
$color = $_POST['change_bg']; //takes the values of the options
if($_POST['submit']){ //if our button is clicked
    echo "<style type=\"text/css\">body {background: ".$color.";}</style> Per favore seleziona un colore.";
    setcookie("color", $color); //set the cookie
}
?>

And I'm pretty sure you'll be good to go. I'll try to figure out a color rack, though know that will be very complicated.

- Steve

Mhh.. now I am including these files:

bgcolor_selection.php:

PHP Code:

<?php
if($_SESSION['color'] == '#000000') { //nero 
    echo "<style type=\"text/css\">body {background: #000000;}</style>"; 
} 
if($_SESSION['color'] == '#FF0000') { //rosso
    echo "<style type=\"text/css\">body {background: #FF0000;}</style>"; 
} 
if($_SESSION['color'] == '#00FF00') { //verde
    echo "<style type=\"text/css\">body {background: #00FF00;}</style>"; 
} 
if($_SESSION['color'] == '#0000FF') { //blu
    echo "<style type=\"text/css\">body {background: #0000FF;}</style>"; 
} 
if($_SESSION['color'] == '#FFFF00') { //giallo
    echo "<style type=\"text/css\">body {background: #FFFF00;}</style>"; 
} 
if($_SESSION['color'] == '#00FFFF') { //azzurro
    echo "<style type=\"text/css\">body {background: #00FFFF;}</style>"; 
} 
if($_SESSION['color'] == '#800080') { //viola
    echo "<style type=\"text/css\">body {background: #800080;}</style>"; 
} 
if($_SESSION['color'] == '#C0C0C0') { //grigio
    echo "<style type=\"text/css\">body {background: #C0C0C0;}</style>"; 
} 
if($_SESSION['color'] == '#333333') { //grigio scuro
    echo "<style type=\"text/css\">body {background: #333333;}</style>"; 
} 
if( empty($_SESSION) ) { //if there is no set background 
    //nothing here! 
} 
?>

session_start.php:

   <?php session_start(); ?>

before_form.php:

PHP Code:

<?php
$color = $_POST['change_bg'];
if($_POST['submit']){
    echo "<style type=\"text/css\">body {background: ".$color.";}</style>";
    $_SESSION['color'] = $color;
}
?>

Then.. I change my before_form.php file with the code you have provided in the second box. And I'll delete the session_start.php. But.. where do I put the first code you have written?

And, how would be more simple for me to add more colours?

You replace bgcolor_selection.php with this:

PHP Code:

 <?php
if(isset($_COOKIE['color'])) { //if user has cookie
    $setcolor = $_COOKIE['color']; 
    echo "<style type=\"text/css\">body {background:".$setcolor.";}</style>"; 
} 
else {
    //do nothing.
}
?>

And will work no matter how many different colors you want to have! It's completely dynamic.

- Steve

Thank you Steve!

Love this code, just what I needed help with, is there any way someone could tell me how to set it up using image links to change the bg colour instead of drop down text links in a form?

Any help would be much appreaciated