css alternativo

fustick · #1 (**permalink**) 10/05/2014, 05:53

Estoy haciendo una web en php con pestañas y demas y una pequeñas administracion para el cliente.
Lo que quiero hacer es que desde el panel de administracion se seleccione un estilo css u otro, lo que diferencia uno de otro es el color (uno con tema azul otro rojo, etc...)

se puede hacer que cada usuario que entre elija el color que quiere para sus visitas pero lo que quiero es que desde esa administracion se marque el color que va a tener la web completa.
La verdad es que ando un poc perdido en este tema, haber si podeis echarme una mano.
Gracias y un saludo.

patilanz · #2 (**permalink**) 10/05/2014, 07:43

Puedes guardar los estilos de un color u otro en distintos archivos y cargarlos y borrarlos con javascript.

Saludos

Italico76 · #3 (**permalink**) 10/05/2014, 12:01

Código Javascript:

Ver original<html>
<head>
    <link href="estilo1.css" rel="stylesheet" type="text/css" id="linkestilos"/>
    
    <script language="JavaScript">
        function cambiarEstilo()
        {
            estilo = estilo+1;
            if (estilo==3){         
                estilo=1;
                link.href = 'estilo1.css'
            }else{              
                link = document.getElementById('linkestilos');
                link.href = 'estilo2.css'               
            }           
        }
        
        function al_cargar(){
            estilo=1;
        }
    </script>
    
</head>
<body onload="al_cargar();">
    <p class="especial">Este párrafo debería tener texto especial verde</p>
    <p><input type="button" name="Submit" value="Cambiar estilo" onclick="cambiarEstilo()"/></p>
</body>
</html>

Código CSS:

Ver original/* estilo1.css */
 
p.especial {
color : green;
border: solid red;
}

Código CSS:

Ver original/* estilo2.css */
p.especial {
color : blue;
border: solid yellow;
}

-----

La version mas compacta:

Código Javascript:

Ver original<html>
<head>
    <link href="estilo1.css" rel="stylesheet" type="text/css" id="linkestilos"/>
    
    <script language="JavaScript">
        function cambiarEstilo()
        {
            estilo = document.getElementById('linkestilos');            
            
            if (estilo.getAttribute('href')=='estilo1.css')                 
                estilo.setAttribute('href','estilo2.css');
            else
                estilo.setAttribute('href','estilo1.css');          
            
        }       
    </script>
    
</head>
<body onload="al_cargar();">
    <p class="especial">Este párrafo debería tener texto especial verde</p>
    <p><input type="button" name="Submit" value="Cambiar estilo" onclick="cambiarEstilo()"/></p>
</body>
</html>

Con los mismos estilos