Se puede crear un menú de opciones, y se aplican estilos CSS?

Rapaig · #1 (**permalink**) 02/12/2008, 03:12

Hola

He estado buscando la manera de crear algo en HTML, que me permita aplicar un estilo CSS.

La idea es inicialmente, Que mediante un código HTML se pueda aplicar cierto estilo CSS. (Tengo una hoja de estilos, estilo.CSS)

Ejemplo:

Opción1: Sin fondo.

Aplicar tal CSS sin fondo.

Opción2: Con fondo.

Aplicar tal CSS Con fondo.

Así la gente que visita el foro, puede optar sacar o no el fondo que se está aplicando mediante estilos CSS.

Saludos
Iván

Rapaig · #2 (**permalink**) 02/12/2008, 13:12

Tercera pregunta que hago. Y nada... Tan complicado soy en redactar :(

Saludos
Iván

Raulmmmm · #3 (**permalink**) 02/12/2008, 13:46

Quizá era porque ni se hace con HTML ni con CSS: se hace con Javascript o PHP.

A mí también me pasaba eso, no te preocupes

.

Bueno, al grano, lo más fácil es hacerlo con Javascript, así:
Pon esto entre <head> y </head>:

Código HTML:

<script type="text/javascript">
function cambiarfondo(){
document.body.style.background = 'url(fondo2.jpg)'
}
</script>

Cambia fondo2.jpg por el fondo que quieras.

Y esto en el body:

Código HTML:

<a href="#" onclick="cambiarfondo()">fa</a>

kseso? · #4 (**permalink**) 02/12/2008, 13:49

Ivan, tampoco te impacientes.
Mira a ver si puedes adaptar este código de Mikmoro a lo que deseas.
Creo recordar que tenía otro ejemplo para el cambio de color al body, pero ahora no lo he encontrado. Si recuerdo, te pondré el enlace.

Un saludo

viste, en un momento 2

No vi tu respuesta, Raul

safe · #5 (**permalink**) 02/12/2008, 14:08

La verdad es que si esta bastante mal explicado el tema. Igual se puede hacer, pero lo que necesitas es preguntar en el foro de javascript.
Saludos, FS

Rapaig · #6 (**permalink**) 02/12/2008, 18:20

Hola Gracias por responder.

Raúl, tu solución es la que me parece más cómoda.

La sección de la web que quiero cambiar es la que corresponde una parte de todo la web...

En la hoja de estilos CSS, trabaja con el siguiente código.

ul.forums
{
background-color: none;
background-image: url('fondo.jpg') ;
background-repeat: repeat-y
}

Traté de adecuarlo a tu función, pero no me resulta.

Cómo lo puedo hacer?

kseso? · #7 (**permalink**) 02/12/2008, 18:40

Rapaig, precisamente es lo que hace Mikmoro con css en la página que te enlacé. Que por cierto, había un error en el enlace (no advertido pero ya corregido)

Rapaig · #8 (**permalink**) 02/12/2008, 18:46

Cita:

Iniciado por kseso?

Rapaig, precisamente es lo que hace Mikmoro con css en la página que te enlacé. Que por cierto, había un error en el enlace (no advertido pero ya corregido)

Por lo que edité del código, escribe tres veces lo mismo.

No me parece cómodo. Y como es un foro, no puedo editar direcatemente el código del foro, salvo algunas secciones.

Atte. y muchas gracias por responder nuevamente.
Iván

Mikmoro · #9 (**permalink**) 02/12/2008, 18:49

Había otra solución con el mismo ejemplo que has visto mucho más simple, pero hecha con javascript, lo que para el caso, es lo mismo que intentes aplicar la solución que te propone Raulmmmm.

Si tienes problemas con esa puedes mirar cómo lo hace DragonX en su web:

http://www.urbanchip.com.ar/

Rapaig · #10 (**permalink**) 02/12/2008, 19:00

Hola de nuevo..

He visto tu solución, es interesante. Pero resulta que el foro solo tiene una sola hoja estilos.

Y al editar el código, cuando haces click en los colores, llama a otras hojas de estilo diferentes.

Saludos y muchas gracias de nuevo
Iván.

PD: Si lo que busco es como modificar tal parte de la hoja de estilos, para que el usuario diga si quiere o no con fondo.

Mikmoro · #11 (**permalink**) 02/12/2008, 19:06

Ah, de acuerdo
(esa no era mi solución, sino de DragonX, o de donde sea, pero eso no tiene mucha importancia).

Mikmoro · #12 (**permalink**) 02/12/2008, 19:26

Este sí está basado en mi ejemplo:

http://www.araudi.net/forosdelweb/Rapaig.html

Mikmoro · #13 (**permalink**) 02/12/2008, 19:50

Por cierto: aunque en el truco original el cambio era de sólo una clase (como en el que te pongo), después se transformó a leer distintas hojas de estilo por el aporte de JavierB, para que el cambio fuera persistente mediante una cookie, que imagino que es el siguiente problema que te vas a encontrar.

Puedes ver el desarrollo del hilo y el resultado final aquí

Rapaig · #14 (**permalink**) 02/12/2008, 19:58

Mikmoro...

Creo que es lo que busco, pero no funciona correctamente... Como siempre tentaré al destino probando luego os cuento

Muchas gracias por todo.. y por el tiempo!!

SAludos
Iván

Mikmoro · #15 (**permalink**) 02/12/2008, 20:11

"no funciona correctamente" sin dar explicaciones es mucho decir. Me gustaría que te explicaras.

Rapaig · #16 (**permalink**) 02/12/2008, 20:17

Jaja..

Es que para darte las explicaciones, debo revisar las posibles alternativas. No puedo solo dejar que uds hagan el código. También debo aprender. ^^

Creo que el error está en la id=lista.

Por alguna extraña razón, no puedo ver todo el código fuente del bendito foro. Pero utilizando un addons para firefox, acá coloco una captura, donde aparecen las ID y las Class.

Como soy nuevo en esto, no se identificar muy bien dichas cosas. Esto es parte del ocio que tengo, porque mi área son las estructuras de hormigón XD...

Acá va la captura:

De antemano muchas gracias, nuevamente.
Iván

Rapaig · #17 (**permalink**) 03/12/2008, 18:31

Hola Mikmoro

he seguido probado hoy... Y creo que es la ID. Pues ya el tema me supera.

Saludos
Iván

Mikmoro · #18 (**permalink**) 04/12/2008, 02:07

Fíjate bien en el ejemplo que te puse. Puse un ID al ul:

<ul id="lista" class="forums">

para luego desde el javascript:

dataLayer=document.getElementById('lista');

Mira el ejemplo con detenimiento, a ver si lo puedes aplicar bien.