Aporte Personaliza el color de tu pagina

ricardo_tu · #1 (**permalink**) 25/03/2011, 23:53

Saludos, después de servirme de la información del foro creí adecuado aportar con un grano de arena.
Este breve script es un "invento" mio (palabra de boy scout)
Una forma muy sencilla de cambiar el color de la pagina a gusto del usuario. Es una combinación de estilos css, formulario y PHP.
He aquí el código:

Código HTML:

<!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=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
<!--
<?php
$az = $_POST['az'];
$ne= $_POST['ne'];
$plo= $_POST['plo'];
$ver= $_POST['ver'];
$color= "#FF0000;";
if ($az != ""){ $color = $az;}
if ($ne != ""){ $color = $ne;}
if ($plo != ""){ $color = $plo;}
if ($ver != ""){ $color = $ver;}
echo "$color;";
?>
body {
	background-color: #000000;
}
body {
	background-color: <?php echo "$color;"; ?>
}
-->
</style></head>

<body>

<table width="120" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="30" bgcolor="#0000FF"><form id="form4" name="form4" method="post" action="">
      <input name="az" type="hidden" id="az" value="#0000FF" /><input type="image" name="Submit2" value="Enviar" src="colores/az.gif" />
    </form>
    </td>
    <td width="30" bgcolor="#000000"><form id="form3" name="form3" method="post" action="">
      <input name="ne" type="hidden" id="ne" value="#000000" />
    <input type="image" name="Submit2" value="Enviar" src="colores/ne.gif" /></form>
    </td>
    <td width="30" bgcolor="#333333"><form id="form2" name="form2" method="post" action="">
      <input name="plo" type="hidden" id="plo" value="#333333" />
    <input type="image" name="Submit2" value="Enviar" src="colores/plo.gif" /></form>
    </td>
    <td width="30" bgcolor="#006633"><form id="form1" name="form1" method="post" action="">
      <input name="ver" type="hidden" id="ver" value="#006633" />
    <input type="image" name="Submit2" value="Enviar" src="colores/ver.gif" /></form>
    </td>
  </tr>
</table>
<br />
</body>
</html>

Explicando, se trata de cuatro form en cuatro celdas de color, un hidden q indica el código del color y un botón submit con imagen en cada uno de los form.
Adicionalmente se requieren unos archivos gif de 30x20 pix (en este caso) o del tamaño q se desee para dar el color a los submit.
Cuando se envía un formulario los datos son recogidos por Post tal como se ve en el código, luego con unos if logro determinar cual es el color que se ha enviado y hago un echo para que el background color tome el valor de $color.
Es es todo.
Gracias por su atención.

abimaelrc · #2 (**permalink**) 26/03/2011, 11:13

En estos casos te recomiendo que mejor uses javascript, porque estás haciendo una petición que si la persona quiere refrescar la pantalla le va a molestar porque tiene que enviar la petición nuevamente o usar el método de GET.

Con javascript

Código HTML:

Ver original<!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=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
</head>
 
<body>
 
<table width="120" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="30" bgcolor="#0000FF"><a href="javascript: document.body.style.backgroundColor='#0000ff'">Azul</a></td>
    <td width="30" bgcolor="#ff0000"><a href="javascript: document.body.style.backgroundColor='#ff0000'">Rojo</a></td>
    <td width="30" bgcolor="#00ff00"><a href="javascript: document.body.style.backgroundColor='#00ff00'">Verde</a></td>
    <td width="30" bgcolor="#ffffff"><a href="javascript: document.body.style.backgroundColor='#ffffff'">Blanco</a></td>
    <td width="30" bgcolor="#000000"><a href="javascript: document.body.style.backgroundColor='#000000'">Negro</a></td>
  </tr>
</table>
<br />
</body>
</html>

con el método de GET

Código PHP:

Ver original<!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=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<style>
body{
    background-color: #<?php echo array_key_exists('color', $_GET) ? $_GET['color'] : 'ffffff'; ?>
}
</style>
</head>
 
<body>
 
<table width="120" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="30" bgcolor="#0000FF"><a href="?color=0000ff">Azul</a></td>
    <td width="30" bgcolor="#ff0000"><a href="?color=ff0000">Rojo</a></td>
    <td width="30" bgcolor="#00ff00"><a href="?color=00ff00">Verde</a></td>
    <td width="30" bgcolor="#ffffff"><a href="?color=ffffff">Blanco</a></td>
    <td width="30" bgcolor="#000000"><a href="?color=000000">Negro</a></td>
  </tr>
</table>
<br />
</body>
</html>

ricardo_tu · #3 (**permalink**) 26/03/2011, 12:04

EXCELENTE!! Esa es la idea, que de un granito de arena se forme un cerro y luego una montaña....

(Entre paréntesis, al refrescar no se pierde el color elegido).