Modificar CSS

SUPERDIEGI · #1 (**permalink**) 08/02/2013, 14:05

Hola, tengo que hacer una practica. Se trata de un Blog.

Lo tengo todo mas o menos pensado, pero tengo un problema.
Nos han pedido que el administrador del Blog pueda cambiar los colores, tipos de letra, etc. cosas simples.

La proxima vez que visite la pagina tiene que tener el CSS elegido anteriormente.

Como pasa en Wordpress y Blogger, que puedes cambiar la tematica del CSS.

No se como hacerlo. Los lenguajes que se (mas o menos, jeje) orientado a la Web son HTML, CSS, Javascript y PHP.

He buscado, pero no he encontrado nada. No se si hacer varios CSS, o uno e ir modificandolo.(Esto no se si se puede hacer)

Gracias y salu2

JaexJuegoscom · #2 (**permalink**) 08/02/2013, 16:35

Hola, la verdad no he manejado nunca un blog, pero si es parecido a la web podrías ir cambiando de color así:

HTML:

Código:

<html>
<head>
</head>
<body>
<div id="miDiv" class="azul" style="background-color: blue; width: 200px; height: 200px">
<a onClick="cambiar ('green')">Click para cambiar a verde</a><br>
<a onClick="cambiar ('yellow')">Click para cambiar a amarillo</a>
</div>
</body>
</html>

JavaScript:

Código:

function cambiar (color) {
document.getElementById("miDiv").style.backgroundColor=color;
}

ArturoGallegos · #3 (**permalink**) 08/02/2013, 19:23

Que CMS usas? en blogger no sabría como hacerlo pero en wordpress es bastante simple, solo tienes que crear un panel de administración donde cambie los colores y guardar las variables en la base de datos.
Después con PHP consultas estas variables y creas un archivo CSS dinamicamente cada vez que se guarden cambios, o bien puedes utilizar el propio php para imprimir el CSS en cada pagina cuando el usuario visite el sitio.

mira un ejemplo sencillo de como crear un archivo CSS con PHP para guardar las opciones seleccionadas en wordpress es:

Código PHP:

Ver originalif(isset($_POST["BusinessBlue01_Slideshow_BGColor"])){
    $Slideshow_height = $_POST["BusinessBlue01_Slideshow_height"].'px';
    $Slideshow_BGColor = '#'.$_POST["BusinessBlue01_Slideshow_BGColor"];
    $Slideshow_title = '#'.$_POST["BusinessBlue01_Slideshow_titlecolor"];
    $Slideshow_txt = '#'.$_POST["BusinessBlue01_Slideshow_txtcolor"];
    if($Slideshow_BGColor!=''){
        $archivo = fopen(TEMPLATEPATH . '/custom-css.css', 'w');
    fwrite($archivo, '.menu li:hover,.menu li.current_page_item{background:'.$Slideshow_BGColor.' url(img/menu-sel.png) bottom center;}#slidetop{background:'.$Slideshow_BGColor.';}#slidetop>ul{height:'.$Slideshow_height.';background:'.$Slideshow_BGColor.' url(img/bg-slide.png) no-repeat;}#slidetop>ul li{color:'.$Slideshow_txt.'}#slidetop h2{color:'.$Slideshow_title.'}');
    }
    else{
        $archivo = fopen(TEMPLATEPATH . '/custom-css.css', 'w');
    fwrite($archivo, '');
    }
    
}

y ya después desde el theme simplemente mandas llamar a dicho archivo CSS

SUPERDIEGI · #4 (**permalink**) 10/02/2013, 06:08

Cita:

Iniciado por JaexJuegoscom

Hola, la verdad no he manejado nunca un blog, pero si es parecido a la web podrías ir cambiando de color así:

HTML:

Código:

<html>
<head>
</head>
<body>
<div id="miDiv" class="azul" style="background-color: blue; width: 200px; height: 200px">
<a onClick="cambiar ('green')">Click para cambiar a verde</a><br>
<a onClick="cambiar ('yellow')">Click para cambiar a amarillo</a>
</div>
</body>
</html>

JavaScript:

Código:

function cambiar (color) {
document.getElementById("miDiv").style.backgroundColor=color;
}

Esto no me vale, porque si cierra el navegador los cambios no se mantienen.

Gracias de todas formas

SUPERDIEGI · #5 (**permalink**) 10/02/2013, 06:11

Cita:

Iniciado por ArturoGallegos

Que CMS usas? en blogger no sabría como hacerlo pero en wordpress es bastante simple, solo tienes que crear un panel de administración donde cambie los colores y guardar las variables en la base de datos.
Después con PHP consultas estas variables y creas un archivo CSS dinamicamente cada vez que se guarden cambios, o bien puedes utilizar el propio php para imprimir el CSS en cada pagina cuando el usuario visite el sitio.

mira un ejemplo sencillo de como crear un archivo CSS con PHP para guardar las opciones seleccionadas en wordpress es:

Código PHP:

Ver originalif(isset($_POST["BusinessBlue01_Slideshow_BGColor"])){
    $Slideshow_height = $_POST["BusinessBlue01_Slideshow_height"].'px';
    $Slideshow_BGColor = '#'.$_POST["BusinessBlue01_Slideshow_BGColor"];
    $Slideshow_title = '#'.$_POST["BusinessBlue01_Slideshow_titlecolor"];
    $Slideshow_txt = '#'.$_POST["BusinessBlue01_Slideshow_txtcolor"];
    if($Slideshow_BGColor!=''){
        $archivo = fopen(TEMPLATEPATH . '/custom-css.css', 'w');
    fwrite($archivo, '.menu li:hover,.menu li.current_page_item{background:'.$Slideshow_BGColor.' url(img/menu-sel.png) bottom center;}#slidetop{background:'.$Slideshow_BGColor.';}#slidetop>ul{height:'.$Slideshow_height.';background:'.$Slideshow_BGColor.' url(img/bg-slide.png) no-repeat;}#slidetop>ul li{color:'.$Slideshow_txt.'}#slidetop h2{color:'.$Slideshow_title.'}');
    }
    else{
        $archivo = fopen(TEMPLATEPATH . '/custom-css.css', 'w');
    fwrite($archivo, '');
    }
    
}

y ya después desde el theme simplemente mandas llamar a dicho archivo CSS

No uso ningun CMS, es mas, no se ni lo que significa.

Es una practica de clase, tenemos que escribir todo el codigo a mano, (no vale ni blogger, ni wordpress, etc.).

Voy a probar lo que me dices, haber si lo consigo.

Gracias

ArturoGallegos · #6 (**permalink**) 10/02/2013, 12:40

Vale veo que estas aprendiendo y quizás no sabes mucho PHP.... el código que expuse es valido para usarse en cualquier formulario siempre y cuando el archivo que procese los datos sea un php.

si te fijas lo único que hace es tomar las variables enviadas por post (tu puedes usar get si lo prefieres) y generar un archivo CSS con estos valores... ya solo tienes que vincularlo desde tu sitio.

O igual si estos cambios tienen que ser a nivel usuario puedes usar una cookie para guardar los cambios que haga el visitante y solo le afectaran a el y no a todos tus usuarios.