Re: [Ovillo] Cambiar estilos del elemento seleccionado con clase "current"
Yo estoy con CHK, tampoco entiendo hasta donde quieres llegar. Dandole estilo al li padre también se lo das a los hijos. Es decir. Si tu al li le pones fondo azul, el ul, los li y los a tendrán fondo azul a no ser que tu le especifiques lo contrario en alguno de ellos. Un saludo -- Manuel Canga Desarrollo creativo de CMS y frameworks Email: *i...@latrasweb.net* Web: http://www.latrasweb.net Twitter: http://twitter.com/latrasweb_net El 6 de septiembre de 2012 00:22, CHK Webmaster escribió: > Una idea que se me ocurre es que apliques el estilo sobre el anchor > contenido por el elemento current de la lista. De este modo el estilo > excluirá a los subitems. De todas maneras sin conocer exactamente que > estilos aplicas tampoco acabo de hacerme una idea de qué es lo que quieres > conseguir. En el ejemplo que has dado aplicarías los estilos sobre href="cmvblog">Blog. Usando algo del tipo li.current > a { /* los > estilos */ } > ___ > Lista de distribución Ovillo > Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org > Puedes modificar tus datos o desuscribirte en la siguiente dirección: > http://lists.ovillo.org/mailman/listinfo/ovillo > ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Cambiar estilos del elemento seleccionado con clase "current"
Una idea que se me ocurre es que apliques el estilo sobre el anchor contenido por el elemento current de la lista. De este modo el estilo excluirá a los subitems. De todas maneras sin conocer exactamente que estilos aplicas tampoco acabo de hacerme una idea de qué es lo que quieres conseguir. En el ejemplo que has dado aplicarías los estilos sobre Blog. Usando algo del tipo li.current > a { /* los estilos */ } ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Cambiar estilos del elemento seleccionado con clase "current"
On 09/04/2012 04:51 PM, Manuel Canga - Latrasweb.net wrote: > En mi opinión, para el caso particular que indicas no lo hagas > por css sino por programación. También te lo digo porque no sé > como se haría en css :D ( seguramente alguien con más conocimientos > en las listas te pueda echar una mano ). > > Yo lo resolvería haciendo que de la misma manera que estás añadiendo > un current al li del bajo nivel se lo pones al de arriba que lo contenga. > > No sé como harás la programación, si quieres la pasas y la vemos. > Eso sí, a lo mejor eso ya queda fuera del ámbito de estas listas. Hola a todos, bueno no todo es felicidad en el mundo y estoy teniendo un problema que no logro resolver. En realidad son dos pero el otro lo comentare en otro mensaje a la lista para no secuestrar este hilo. Bien, exceptuando lo del elemento padre y del border que aparece encima del elemento seleccionado que ya convencí a la diseñadora de que eso no se ve feo jejejeje todo funciona perfecto pero si el elemento LI al cual se le aplican los estilos contiene hijos entonces estos estilos tambien son aplicados al elemento hijo. Por supuesto que a de ser así pues la estructura HTML es la siguiente: Inicio Blog Crear entrada Categorías Eventos Mensajes Directorio Amigos Editar perfil Panel de Control Lo he dejado acá en Pastebin para una mejor lectura http://pastebin.com/shBmAPkw Y si se dan de cuenta el LI con clase "has_children" que a su vez tiene "current" tiene un UL dentro y luego está el cierre del LI. No hay forma de evitar esto cierto? Alguna idea o sugerencia en este sentido? Saludos y nuevamente gracias -- Ing. Reynier Perez Mira eMail: reynie...@gmail.com, reynier.pe...@treswd.com Skype: reynierpm Mobile: +58 424.180.5609 ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Cambiar estilos del elemento seleccionado con clase "current"
On 09/05/2012 08:05 AM, CHK Webmaster wrote: > Leyendo la idea de Reynier de seleccionar al elemento inmediatamente > superior (parent) me he acordado que un idea tuve una situación similar y > me puse a buscar si en CSS3 había un selector "<" que funcionase tipo el > element > child_element pero en sentido inverso. Me encontré con un > artículo[1] que reflexiona sobre las repercusiones de que existiese esto. > Se va un poco de tema, pero quizás a alguien le resulta interesante. > > Sobre la solución, también creo que mejor recurrir a la programación para > añadir una clase al padre o similar. > > [1] http://css-tricks.com/parent-selectors-in-css/ > ___ > Lista de distribución Ovillo > Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org > Puedes modificar tus datos o desuscribirte en la siguiente dirección: > http://lists.ovillo.org/mailman/listinfo/ovillo > Muy interesante la lectura CHK Webmaster :) gracias -- Ing. Reynier Perez Mira eMail: reynie...@gmail.com, reynier.pe...@treswd.com Skype: reynierpm Mobile: +58 424.180.5609 ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Cambiar estilos del elemento seleccionado con clase "current"
Leyendo la idea de Reynier de seleccionar al elemento inmediatamente superior (parent) me he acordado que un idea tuve una situación similar y me puse a buscar si en CSS3 había un selector "<" que funcionase tipo el element > child_element pero en sentido inverso. Me encontré con un artículo[1] que reflexiona sobre las repercusiones de que existiese esto. Se va un poco de tema, pero quizás a alguien le resulta interesante. Sobre la solución, también creo que mejor recurrir a la programación para añadir una clase al padre o similar. [1] http://css-tricks.com/parent-selectors-in-css/ ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Cambiar estilos del elemento seleccionado con clase "current"
2012/9/4 Manuel Canga - Latrasweb.net : > En mi opinión, para el caso particular que indicas no lo hagas > por css sino por programación. También te lo digo porque no sé > como se haría en css :D ( seguramente alguien con más conocimientos > en las listas te pueda echar una mano ). > > Yo lo resolvería haciendo que de la misma manera que estás añadiendo > un current al li del bajo nivel se lo pones al de arriba que lo contenga. a mi me mola esta forma, porque aunque estas recorriendo a la programacion, es de forma absolutamente minima, y aun es el CSS el que decide que hacer -- -- ℱin del ℳensaje. ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Cambiar estilos del elemento seleccionado con clase "current"
"reynie...@gmail.com" escribió: >Interesante, exactamente eso es lo que estoy buscando mas no sabia que se >podian "concatenar" por decirlo de alguna forma las clases de tal como lo >haces tu en li.icon-event.current siempre pense hasta ahorita que era >li.icon-event .current. Pruebo esta opción y te digo como me fue. > >Saludos y gracias >Ing. Reynier Perez Mira >eMail: reynie...@gmail.com, reynier. pe...@treswd.com >Website: http://www.reynierpm.com >Skype: reynierpm >Mobile: +58 424.180.5609 > > > >2012/9/4 Manuel Canga - Latrasweb.net > >> Sí, perfectamente. Ya me quedo totalmente claro. >> En estas listas hemos hablado en varias ocasiones >> de unir clases css. Esa podría ser tu solución. >> >> Veamos: >> >> > > >> Inicio >> Blog >> >> Crear >> entrada >> > href="cmvblog/categories">Categorías >> >> >> Eventos >> Directorio >> Amigos >> Mensajes >> Editar perfil >> > target="_blank">Panel de Control >> >> >> Fíjate que en li de eventos, le he añadido la clase current además >> de la que ya tenía. >> >> ¿Cómo hacemos ahora para darle a ese elemento?. Así. >> >> li.icon-event.current { background: >> url("../images/comvivem/icon_eventos_hover.png") >> no-repeat scroll 0 4px transparent; background-color: #000 } >> >> >> Fíjate, le he dicho al sistema css del navegador que quiero darle estilo >> a un li que tenga la clase icon-event y que ademas tenga la clase .current >> Es decir, quiero darle estilo a un li cuando tenga ambas clases y luego >> ponemos todas las propiedades de estilo que queramos darle en ese caso. >> >> El li lo he puesto por clarificar, siempre lo hago así, pero no es >> necesario. >> >> >> Un saludo >> -- >> Manuel Canga >> Desarrollo creativo de >> CMS y frameworks >> Email: *i...@latrasweb.net* >> Web: http://www.latrasweb.net >> Twitter: http://twitter.com/latrasweb_net >> >> >> >> El 4 de septiembre de 2012 22:37, reynie...@gmail.com >> escribió: >> >> > Hola Manuel y gracias por tu respuesta, precisamente eso es lo que >> quiero o >> > sea cambiar el color del fondo del LI que toma clase "current" pero >> > manteniendo el icono asociado a la mismo en el estado hover. Veamos un >> > ejemplo: supongamos que el li con class="icon-event" toma la clase >> current >> > tambien por lo cual quedaria li class="icon-event current" bueno si se >> dan >> > de cuenta ese icon-event tiene un estado por default >> > .icon-event{background: url("../images/comvivem/ico_ >> > eventos.png") no-repeat scroll 0 4px transparent;padding: 0 0 0 >> > 35px;cursor:pointer;border-bottom:1px dotted #CC} y uno para cuando >> se >> > le hace un hover .icon-event:hover{background: >> > url("../images/comvivem/ico_eventos_hover.png") no-repeat scroll 0 4px >> > transparent;padding: 0 0 0 35px;cursor:pointer;border-bottom:1px dotted >> > #CC}. Lo que tendria entonces que hacer digamos seria algo como esto: >> > .current {background: url("../images/comvivem/ico_eventos_hover.png") >> > no-repeat scroll 0 4px transparent; background-color: #000} y funcionaria >> > pero solo para este elemento, que pasas si ahora mi clase current >> estuvera >> > en li class="icon-members current"? Como entonces cambiaria al >> > .icon-members:hover? Me hago entender? >> > >> > >> > Ing. Reynier Perez Mira >> > eMail: reynie...@gmail.com, reynier. >> > pe...@treswd.com >> > Website: http://www.reynierpm.com >> > Skype: reynierpm >> > Mobile: +58 424.180.5609 >> > >> > >> > >> > 2012/9/4 Manuel Canga - Latrasweb.net >> > >> > > No te he entendido bien. Si lo que quieres es que >> > > a un li con una clase current se le cambie el color de fondo >> > > pero los iconos se mantengan como el hover. Añade >> > > a los estilos de current la imagen del icono que tienes en el hover. >> > > >> > ___ >> > Lista de distribución Ovillo >> > Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org >> > Puedes modificar tus datos o desuscribirte en la siguiente dirección: >> > http://lists.ovillo.org/mailman/listinfo/ovillo >> > >> ___ >> Lista de distribución Ovillo >> Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org >> Puedes modificar tus datos o desuscribirte en la siguiente dirección: >> http://lists.ovillo.org/mailman/listinfo/ovillo >> >___ >Lista de distribución Ovillo >Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org >Puedes modificar tus datos o desuscribirte en la siguiente dirección: >http://lists.ovillo.org/mailman/listinfo/ovillo ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Cambiar estilos del elemento seleccionado con clase "current"
jejeje no vale tranquilo de esa me encargo yo solo que queria saber/aprender si existía alguna forma de hacerlo con CSS dado que existen los selectores :before y :after pero estos no cumplen con lo que necesito hacer. Saludos y les dejaré saber como me fue Ing. Reynier Perez Mira eMail: reynie...@gmail.com, reynier. pe...@treswd.com Website: http://www.reynierpm.com Skype: reynierpm Mobile: +58 424.180.5609 2012/9/4 Manuel Canga - Latrasweb.net > No sé como harás la programación, si quieres la pasas y la vemos. > Eso sí, a lo mejor eso ya queda fuera del ámbito de estas listas. > ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Cambiar estilos del elemento seleccionado con clase "current"
En mi opinión, para el caso particular que indicas no lo hagas por css sino por programación. También te lo digo porque no sé como se haría en css :D ( seguramente alguien con más conocimientos en las listas te pueda echar una mano ). Yo lo resolvería haciendo que de la misma manera que estás añadiendo un current al li del bajo nivel se lo pones al de arriba que lo contenga. No sé como harás la programación, si quieres la pasas y la vemos. Eso sí, a lo mejor eso ya queda fuera del ámbito de estas listas. Un saludo -- Manuel Canga Desarrollo creativo de CMS y frameworks Email: *i...@latrasweb.net* Web: http://www.latrasweb.net Twitter: http://twitter.com/latrasweb_net El 4 de septiembre de 2012 23:12, reynie...@gmail.com escribió: > Exacto ese era el problema pero aún así me va quedando un detalle y es que > el elemento que tiene current no debe tener border por ningun lado, le puse > border:0 al current pero eso solo aplica a ese LI y no al de encima cual es > el selector css para decirle que el border-bottom del elemento inmediato > superior al current sea 0? > > Ing. Reynier Perez Mira > eMail: reynie...@gmail.com, reynier. > pe...@treswd.com > Website: http://www.reynierpm.com > Skype: reynierpm > Mobile: +58 424.180.5609 > > > > 2012/9/4 Manuel Canga - Latrasweb.net > > > No hace falta, ya he visto el fallo, retiro lo dicho. > > Ha sido un descuido. En los estilos que contengan: > > > > ul.box_content_navigation li > > > > cambialos a: > > > > > > ul.box_content_navigation > li > > > > > > Un saludo > > -- > > Manuel Canga > > Desarrollo creativo de > > CMS y frameworks > > Email: *i...@latrasweb.net* > > Web: http://www.latrasweb.net > > Twitter: http://twitter.com/latrasweb_net > > > > > > > > El 4 de septiembre de 2012 23:03, reynie...@gmail.com > > escribió: > > > > > Bueno probé el código de Anabel y casi que funciona al 100% pero me > > genera > > > un border doble en los elementos hijos. > > > > > > Ing. Reynier Perez Mira > > > eMail: reynie...@gmail.com, reynier. > > > pe...@treswd.com > > > Website: http://www.reynierpm.com > > > Skype: reynierpm > > > Mobile: +58 424.180.5609 > > > > > > > > > > > > 2012/9/4 Manuel Canga - Latrasweb.net > > > > > > > En verdad, aprovecho y voy un poco más allá. > > > > Una etiqueta siempre puede más tener de una clase, pero no más de un > > id ( > > > > además > > > > único en toda la web ). > > > > > > > > Podrías tener: > > > > > > > > Mi casa > > > > Mi web > > > > Mi gadget > > > > Mi css > > > > > > > > css: > > > > p.fondo { background-color: blue; } > > > > p.color { color: green; } > > > > p.tipo { font-weight: bold; } > > > > p.fondo.color.tipo { border: 1px solid red; } > > > > > > > > resultado: > > > > Mi casa tendra borde rojo, fondo azul, color de texto verde y negrita > > en > > > > letra. > > > > Mi web tendra color de fondo azul y color de texto verde > > > > Mi gadget tendrá fondo azul > > > > Mi css tendrá color de fuente verde. > > > > > > > > Espero que sirva para aclarar todo más. > > > > > > > > Por cierto, +1 a la recomendación de Anabel. > > > > > > > > > > > > > > > > Un saludo > > > > -- > > > > Manuel Canga > > > > Desarrollo creativo de > > > > CMS y frameworks > > > > Email: *i...@latrasweb.net* > > > > Web: http://www.latrasweb.net > > > > Twitter: http://twitter.com/latrasweb_net > > > > > > > > > > > > > > > > El 4 de septiembre de 2012 22:49, reynie...@gmail.com > > > > escribió: > > > > > > > > > Interesante, exactamente eso es lo que estoy buscando mas no sabia > > que > > > se > > > > > podian "concatenar" por decirlo de alguna forma las clases de tal > > como > > > lo > > > > > haces tu en li.icon-event.current siempre pense hasta ahorita que > era > > > > > li.icon-event .current. Pruebo esta opción y te digo como me fue. > > > > > > > > > > Saludos y gracias > > > > > Ing. Reynier Perez Mira > > > > > eMail: reynie...@gmail.com, reynier. > > > > > pe...@treswd.com > > > > > Website: http://www.reynierpm.com > > > > > Skype: reynierpm > > > > > Mobile: +58 424.180.5609 > > > > > > > > > > > > > > > > > > > > 2012/9/4 Manuel Canga - Latrasweb.net > > > > > > > > > > > Sí, perfectamente. Ya me quedo totalmente claro. > > > > > > En estas listas hemos hablado en varias ocasiones > > > > > > de unir clases css. Esa podría ser tu solución. > > > > > > > > > > > > Veamos: > > > > > > > > > > > > > > > > > > > > > > > > Inicio > > > > > > Blog > > > > > > > > > > > > > href="cmvblog/create">Crear > > > > > > entrada > > > > > > > > > > > href="cmvblog/categories">Categorías > > > > > > > > > > > > > > > > > > href="event">Eventos > > > > > > href="members">Directorio > > > > > > > href="relations">Amigos > > > > > > href="messages">Mensajes > > > > > > Editar > > > > > perfil > > > > > > > > > > > target="_blank">Panel de Control > > > > > > > > > > > > > > > > > > Fíjate que en li de eventos, le he añadido la clase current
Re: [Ovillo] Cambiar estilos del elemento seleccionado con clase "current"
Exacto ese era el problema pero aún así me va quedando un detalle y es que el elemento que tiene current no debe tener border por ningun lado, le puse border:0 al current pero eso solo aplica a ese LI y no al de encima cual es el selector css para decirle que el border-bottom del elemento inmediato superior al current sea 0? Ing. Reynier Perez Mira eMail: reynie...@gmail.com, reynier. pe...@treswd.com Website: http://www.reynierpm.com Skype: reynierpm Mobile: +58 424.180.5609 2012/9/4 Manuel Canga - Latrasweb.net > No hace falta, ya he visto el fallo, retiro lo dicho. > Ha sido un descuido. En los estilos que contengan: > > ul.box_content_navigation li > > cambialos a: > > > ul.box_content_navigation > li > > > Un saludo > -- > Manuel Canga > Desarrollo creativo de > CMS y frameworks > Email: *i...@latrasweb.net* > Web: http://www.latrasweb.net > Twitter: http://twitter.com/latrasweb_net > > > > El 4 de septiembre de 2012 23:03, reynie...@gmail.com > escribió: > > > Bueno probé el código de Anabel y casi que funciona al 100% pero me > genera > > un border doble en los elementos hijos. > > > > Ing. Reynier Perez Mira > > eMail: reynie...@gmail.com, reynier. > > pe...@treswd.com > > Website: http://www.reynierpm.com > > Skype: reynierpm > > Mobile: +58 424.180.5609 > > > > > > > > 2012/9/4 Manuel Canga - Latrasweb.net > > > > > En verdad, aprovecho y voy un poco más allá. > > > Una etiqueta siempre puede más tener de una clase, pero no más de un > id ( > > > además > > > único en toda la web ). > > > > > > Podrías tener: > > > > > > Mi casa > > > Mi web > > > Mi gadget > > > Mi css > > > > > > css: > > > p.fondo { background-color: blue; } > > > p.color { color: green; } > > > p.tipo { font-weight: bold; } > > > p.fondo.color.tipo { border: 1px solid red; } > > > > > > resultado: > > > Mi casa tendra borde rojo, fondo azul, color de texto verde y negrita > en > > > letra. > > > Mi web tendra color de fondo azul y color de texto verde > > > Mi gadget tendrá fondo azul > > > Mi css tendrá color de fuente verde. > > > > > > Espero que sirva para aclarar todo más. > > > > > > Por cierto, +1 a la recomendación de Anabel. > > > > > > > > > > > > Un saludo > > > -- > > > Manuel Canga > > > Desarrollo creativo de > > > CMS y frameworks > > > Email: *i...@latrasweb.net* > > > Web: http://www.latrasweb.net > > > Twitter: http://twitter.com/latrasweb_net > > > > > > > > > > > > El 4 de septiembre de 2012 22:49, reynie...@gmail.com > > > escribió: > > > > > > > Interesante, exactamente eso es lo que estoy buscando mas no sabia > que > > se > > > > podian "concatenar" por decirlo de alguna forma las clases de tal > como > > lo > > > > haces tu en li.icon-event.current siempre pense hasta ahorita que era > > > > li.icon-event .current. Pruebo esta opción y te digo como me fue. > > > > > > > > Saludos y gracias > > > > Ing. Reynier Perez Mira > > > > eMail: reynie...@gmail.com, reynier. > > > > pe...@treswd.com > > > > Website: http://www.reynierpm.com > > > > Skype: reynierpm > > > > Mobile: +58 424.180.5609 > > > > > > > > > > > > > > > > 2012/9/4 Manuel Canga - Latrasweb.net > > > > > > > > > Sí, perfectamente. Ya me quedo totalmente claro. > > > > > En estas listas hemos hablado en varias ocasiones > > > > > de unir clases css. Esa podría ser tu solución. > > > > > > > > > > Veamos: > > > > > > > > > > > > > > > > > > > > Inicio > > > > > Blog > > > > > > > > > > href="cmvblog/create">Crear > > > > > entrada > > > > > > > > > href="cmvblog/categories">Categorías > > > > > > > > > > > > > > > Eventos > > > > > Directorio > > > > > href="relations">Amigos > > > > > Mensajes > > > > > Editar > > > > perfil > > > > > > > > > target="_blank">Panel de Control > > > > > > > > > > > > > > > Fíjate que en li de eventos, le he añadido la clase current además > > > > > de la que ya tenía. > > > > > > > > > > ¿Cómo hacemos ahora para darle a ese elemento?. Así. > > > > > > > > > > li.icon-event.current { background: > > > > > url("../images/comvivem/icon_eventos_hover.png") > > > > > no-repeat scroll 0 4px transparent; background-color: #000 } > > > > > > > > > > > > > > > Fíjate, le he dicho al sistema css del navegador que quiero darle > > > estilo > > > > > a un li que tenga la clase icon-event y que ademas tenga la clase > > > > .current > > > > > Es decir, quiero darle estilo a un li cuando tenga ambas clases y > > luego > > > > > ponemos todas las propiedades de estilo que queramos darle en ese > > caso. > > > > > > > > > > El li lo he puesto por clarificar, siempre lo hago así, pero no es > > > > > necesario. > > > > > > > > > > > > > > > Un saludo > > > > > -- > > > > > Manuel Canga > > > > > Desarrollo creativo de > > > > > CMS y frameworks > > > > > Email: *i...@latrasweb.net* > > > > > Web: http://www.latrasweb.net > > > > > Twitter: http://twitter.com/latrasweb_net > > > > > > > > > > > > > > > > > > > > El 4 de septiembre d
Re: [Ovillo] Cambiar estilos del elemento seleccionado con clase "current"
No hace falta, ya he visto el fallo, retiro lo dicho. Ha sido un descuido. En los estilos que contengan: ul.box_content_navigation li cambialos a: ul.box_content_navigation > li Un saludo -- Manuel Canga Desarrollo creativo de CMS y frameworks Email: *i...@latrasweb.net* Web: http://www.latrasweb.net Twitter: http://twitter.com/latrasweb_net El 4 de septiembre de 2012 23:03, reynie...@gmail.com escribió: > Bueno probé el código de Anabel y casi que funciona al 100% pero me genera > un border doble en los elementos hijos. > > Ing. Reynier Perez Mira > eMail: reynie...@gmail.com, reynier. > pe...@treswd.com > Website: http://www.reynierpm.com > Skype: reynierpm > Mobile: +58 424.180.5609 > > > > 2012/9/4 Manuel Canga - Latrasweb.net > > > En verdad, aprovecho y voy un poco más allá. > > Una etiqueta siempre puede más tener de una clase, pero no más de un id ( > > además > > único en toda la web ). > > > > Podrías tener: > > > > Mi casa > > Mi web > > Mi gadget > > Mi css > > > > css: > > p.fondo { background-color: blue; } > > p.color { color: green; } > > p.tipo { font-weight: bold; } > > p.fondo.color.tipo { border: 1px solid red; } > > > > resultado: > > Mi casa tendra borde rojo, fondo azul, color de texto verde y negrita en > > letra. > > Mi web tendra color de fondo azul y color de texto verde > > Mi gadget tendrá fondo azul > > Mi css tendrá color de fuente verde. > > > > Espero que sirva para aclarar todo más. > > > > Por cierto, +1 a la recomendación de Anabel. > > > > > > > > Un saludo > > -- > > Manuel Canga > > Desarrollo creativo de > > CMS y frameworks > > Email: *i...@latrasweb.net* > > Web: http://www.latrasweb.net > > Twitter: http://twitter.com/latrasweb_net > > > > > > > > El 4 de septiembre de 2012 22:49, reynie...@gmail.com > > escribió: > > > > > Interesante, exactamente eso es lo que estoy buscando mas no sabia que > se > > > podian "concatenar" por decirlo de alguna forma las clases de tal como > lo > > > haces tu en li.icon-event.current siempre pense hasta ahorita que era > > > li.icon-event .current. Pruebo esta opción y te digo como me fue. > > > > > > Saludos y gracias > > > Ing. Reynier Perez Mira > > > eMail: reynie...@gmail.com, reynier. > > > pe...@treswd.com > > > Website: http://www.reynierpm.com > > > Skype: reynierpm > > > Mobile: +58 424.180.5609 > > > > > > > > > > > > 2012/9/4 Manuel Canga - Latrasweb.net > > > > > > > Sí, perfectamente. Ya me quedo totalmente claro. > > > > En estas listas hemos hablado en varias ocasiones > > > > de unir clases css. Esa podría ser tu solución. > > > > > > > > Veamos: > > > > > > > > > > > > > > > > Inicio > > > > Blog > > > > > > > > Crear > > > > entrada > > > > > > > href="cmvblog/categories">Categorías > > > > > > > > > > > > Eventos > > > > Directorio > > > > Amigos > > > > Mensajes > > > > Editar > > > perfil > > > > > > > target="_blank">Panel de Control > > > > > > > > > > > > Fíjate que en li de eventos, le he añadido la clase current además > > > > de la que ya tenía. > > > > > > > > ¿Cómo hacemos ahora para darle a ese elemento?. Así. > > > > > > > > li.icon-event.current { background: > > > > url("../images/comvivem/icon_eventos_hover.png") > > > > no-repeat scroll 0 4px transparent; background-color: #000 } > > > > > > > > > > > > Fíjate, le he dicho al sistema css del navegador que quiero darle > > estilo > > > > a un li que tenga la clase icon-event y que ademas tenga la clase > > > .current > > > > Es decir, quiero darle estilo a un li cuando tenga ambas clases y > luego > > > > ponemos todas las propiedades de estilo que queramos darle en ese > caso. > > > > > > > > El li lo he puesto por clarificar, siempre lo hago así, pero no es > > > > necesario. > > > > > > > > > > > > Un saludo > > > > -- > > > > Manuel Canga > > > > Desarrollo creativo de > > > > CMS y frameworks > > > > Email: *i...@latrasweb.net* > > > > Web: http://www.latrasweb.net > > > > Twitter: http://twitter.com/latrasweb_net > > > > > > > > > > > > > > > > El 4 de septiembre de 2012 22:37, reynie...@gmail.com > > > > escribió: > > > > > > > > > Hola Manuel y gracias por tu respuesta, precisamente eso es lo que > > > > quiero o > > > > > sea cambiar el color del fondo del LI que toma clase "current" pero > > > > > manteniendo el icono asociado a la mismo en el estado hover. Veamos > > un > > > > > ejemplo: supongamos que el li con class="icon-event" toma la clase > > > > current > > > > > tambien por lo cual quedaria li class="icon-event current" bueno si > > se > > > > dan > > > > > de cuenta ese icon-event tiene un estado por default > > > > > .icon-event{background: url("../images/comvivem/ico_ > > > > > eventos.png") no-repeat scroll 0 4px transparent;padding: 0 0 0 > > > > > 35px;cursor:pointer;border-bottom:1px dotted #CC} y uno para > > cuando > > > > se > > > > > le hace un hover .icon-event:hover{background: > > > > > url("../images/comvivem/i
Re: [Ovillo] Cambiar estilos del elemento seleccionado con clase "current"
¿ podrías pasar el código de como quedó para echarle un vistazo en su totalidad ? Un saludo -- Manuel Canga Desarrollo creativo de CMS y frameworks Email: *i...@latrasweb.net* Web: http://www.latrasweb.net Twitter: http://twitter.com/latrasweb_net El 4 de septiembre de 2012 23:03, reynie...@gmail.com escribió: > Bueno probé el código de Anabel y casi que funciona al 100% pero me genera > un border doble en los elementos hijos. > > Ing. Reynier Perez Mira > eMail: reynie...@gmail.com, reynier. > pe...@treswd.com > Website: http://www.reynierpm.com > Skype: reynierpm > Mobile: +58 424.180.5609 > > > > 2012/9/4 Manuel Canga - Latrasweb.net > > > En verdad, aprovecho y voy un poco más allá. > > Una etiqueta siempre puede más tener de una clase, pero no más de un id ( > > además > > único en toda la web ). > > > > Podrías tener: > > > > Mi casa > > Mi web > > Mi gadget > > Mi css > > > > css: > > p.fondo { background-color: blue; } > > p.color { color: green; } > > p.tipo { font-weight: bold; } > > p.fondo.color.tipo { border: 1px solid red; } > > > > resultado: > > Mi casa tendra borde rojo, fondo azul, color de texto verde y negrita en > > letra. > > Mi web tendra color de fondo azul y color de texto verde > > Mi gadget tendrá fondo azul > > Mi css tendrá color de fuente verde. > > > > Espero que sirva para aclarar todo más. > > > > Por cierto, +1 a la recomendación de Anabel. > > > > > > > > Un saludo > > -- > > Manuel Canga > > Desarrollo creativo de > > CMS y frameworks > > Email: *i...@latrasweb.net* > > Web: http://www.latrasweb.net > > Twitter: http://twitter.com/latrasweb_net > > > > > > > > El 4 de septiembre de 2012 22:49, reynie...@gmail.com > > escribió: > > > > > Interesante, exactamente eso es lo que estoy buscando mas no sabia que > se > > > podian "concatenar" por decirlo de alguna forma las clases de tal como > lo > > > haces tu en li.icon-event.current siempre pense hasta ahorita que era > > > li.icon-event .current. Pruebo esta opción y te digo como me fue. > > > > > > Saludos y gracias > > > Ing. Reynier Perez Mira > > > eMail: reynie...@gmail.com, reynier. > > > pe...@treswd.com > > > Website: http://www.reynierpm.com > > > Skype: reynierpm > > > Mobile: +58 424.180.5609 > > > > > > > > > > > > 2012/9/4 Manuel Canga - Latrasweb.net > > > > > > > Sí, perfectamente. Ya me quedo totalmente claro. > > > > En estas listas hemos hablado en varias ocasiones > > > > de unir clases css. Esa podría ser tu solución. > > > > > > > > Veamos: > > > > > > > > > > > > > > > > Inicio > > > > Blog > > > > > > > > Crear > > > > entrada > > > > > > > href="cmvblog/categories">Categorías > > > > > > > > > > > > Eventos > > > > Directorio > > > > Amigos > > > > Mensajes > > > > Editar > > > perfil > > > > > > > target="_blank">Panel de Control > > > > > > > > > > > > Fíjate que en li de eventos, le he añadido la clase current además > > > > de la que ya tenía. > > > > > > > > ¿Cómo hacemos ahora para darle a ese elemento?. Así. > > > > > > > > li.icon-event.current { background: > > > > url("../images/comvivem/icon_eventos_hover.png") > > > > no-repeat scroll 0 4px transparent; background-color: #000 } > > > > > > > > > > > > Fíjate, le he dicho al sistema css del navegador que quiero darle > > estilo > > > > a un li que tenga la clase icon-event y que ademas tenga la clase > > > .current > > > > Es decir, quiero darle estilo a un li cuando tenga ambas clases y > luego > > > > ponemos todas las propiedades de estilo que queramos darle en ese > caso. > > > > > > > > El li lo he puesto por clarificar, siempre lo hago así, pero no es > > > > necesario. > > > > > > > > > > > > Un saludo > > > > -- > > > > Manuel Canga > > > > Desarrollo creativo de > > > > CMS y frameworks > > > > Email: *i...@latrasweb.net* > > > > Web: http://www.latrasweb.net > > > > Twitter: http://twitter.com/latrasweb_net > > > > > > > > > > > > > > > > El 4 de septiembre de 2012 22:37, reynie...@gmail.com > > > > escribió: > > > > > > > > > Hola Manuel y gracias por tu respuesta, precisamente eso es lo que > > > > quiero o > > > > > sea cambiar el color del fondo del LI que toma clase "current" pero > > > > > manteniendo el icono asociado a la mismo en el estado hover. Veamos > > un > > > > > ejemplo: supongamos que el li con class="icon-event" toma la clase > > > > current > > > > > tambien por lo cual quedaria li class="icon-event current" bueno si > > se > > > > dan > > > > > de cuenta ese icon-event tiene un estado por default > > > > > .icon-event{background: url("../images/comvivem/ico_ > > > > > eventos.png") no-repeat scroll 0 4px transparent;padding: 0 0 0 > > > > > 35px;cursor:pointer;border-bottom:1px dotted #CC} y uno para > > cuando > > > > se > > > > > le hace un hover .icon-event:hover{background: > > > > > url("../images/comvivem/ico_eventos_hover.png") no-repeat scroll 0 > > 4px > > > > > transparent;padding: 0 0 0 35px;cursor:
Re: [Ovillo] Cambiar estilos del elemento seleccionado con clase "current"
Bueno probé el código de Anabel y casi que funciona al 100% pero me genera un border doble en los elementos hijos. Ing. Reynier Perez Mira eMail: reynie...@gmail.com, reynier. pe...@treswd.com Website: http://www.reynierpm.com Skype: reynierpm Mobile: +58 424.180.5609 2012/9/4 Manuel Canga - Latrasweb.net > En verdad, aprovecho y voy un poco más allá. > Una etiqueta siempre puede más tener de una clase, pero no más de un id ( > además > único en toda la web ). > > Podrías tener: > > Mi casa > Mi web > Mi gadget > Mi css > > css: > p.fondo { background-color: blue; } > p.color { color: green; } > p.tipo { font-weight: bold; } > p.fondo.color.tipo { border: 1px solid red; } > > resultado: > Mi casa tendra borde rojo, fondo azul, color de texto verde y negrita en > letra. > Mi web tendra color de fondo azul y color de texto verde > Mi gadget tendrá fondo azul > Mi css tendrá color de fuente verde. > > Espero que sirva para aclarar todo más. > > Por cierto, +1 a la recomendación de Anabel. > > > > Un saludo > -- > Manuel Canga > Desarrollo creativo de > CMS y frameworks > Email: *i...@latrasweb.net* > Web: http://www.latrasweb.net > Twitter: http://twitter.com/latrasweb_net > > > > El 4 de septiembre de 2012 22:49, reynie...@gmail.com > escribió: > > > Interesante, exactamente eso es lo que estoy buscando mas no sabia que se > > podian "concatenar" por decirlo de alguna forma las clases de tal como lo > > haces tu en li.icon-event.current siempre pense hasta ahorita que era > > li.icon-event .current. Pruebo esta opción y te digo como me fue. > > > > Saludos y gracias > > Ing. Reynier Perez Mira > > eMail: reynie...@gmail.com, reynier. > > pe...@treswd.com > > Website: http://www.reynierpm.com > > Skype: reynierpm > > Mobile: +58 424.180.5609 > > > > > > > > 2012/9/4 Manuel Canga - Latrasweb.net > > > > > Sí, perfectamente. Ya me quedo totalmente claro. > > > En estas listas hemos hablado en varias ocasiones > > > de unir clases css. Esa podría ser tu solución. > > > > > > Veamos: > > > > > > > > > > > > Inicio > > > Blog > > > > > > Crear > > > entrada > > > > > href="cmvblog/categories">Categorías > > > > > > > > > Eventos > > > Directorio > > > Amigos > > > Mensajes > > > Editar > > perfil > > > > > target="_blank">Panel de Control > > > > > > > > > Fíjate que en li de eventos, le he añadido la clase current además > > > de la que ya tenía. > > > > > > ¿Cómo hacemos ahora para darle a ese elemento?. Así. > > > > > > li.icon-event.current { background: > > > url("../images/comvivem/icon_eventos_hover.png") > > > no-repeat scroll 0 4px transparent; background-color: #000 } > > > > > > > > > Fíjate, le he dicho al sistema css del navegador que quiero darle > estilo > > > a un li que tenga la clase icon-event y que ademas tenga la clase > > .current > > > Es decir, quiero darle estilo a un li cuando tenga ambas clases y luego > > > ponemos todas las propiedades de estilo que queramos darle en ese caso. > > > > > > El li lo he puesto por clarificar, siempre lo hago así, pero no es > > > necesario. > > > > > > > > > Un saludo > > > -- > > > Manuel Canga > > > Desarrollo creativo de > > > CMS y frameworks > > > Email: *i...@latrasweb.net* > > > Web: http://www.latrasweb.net > > > Twitter: http://twitter.com/latrasweb_net > > > > > > > > > > > > El 4 de septiembre de 2012 22:37, reynie...@gmail.com > > > escribió: > > > > > > > Hola Manuel y gracias por tu respuesta, precisamente eso es lo que > > > quiero o > > > > sea cambiar el color del fondo del LI que toma clase "current" pero > > > > manteniendo el icono asociado a la mismo en el estado hover. Veamos > un > > > > ejemplo: supongamos que el li con class="icon-event" toma la clase > > > current > > > > tambien por lo cual quedaria li class="icon-event current" bueno si > se > > > dan > > > > de cuenta ese icon-event tiene un estado por default > > > > .icon-event{background: url("../images/comvivem/ico_ > > > > eventos.png") no-repeat scroll 0 4px transparent;padding: 0 0 0 > > > > 35px;cursor:pointer;border-bottom:1px dotted #CC} y uno para > cuando > > > se > > > > le hace un hover .icon-event:hover{background: > > > > url("../images/comvivem/ico_eventos_hover.png") no-repeat scroll 0 > 4px > > > > transparent;padding: 0 0 0 35px;cursor:pointer;border-bottom:1px > dotted > > > > #CC}. Lo que tendria entonces que hacer digamos seria algo como > > esto: > > > > .current {background: url("../images/comvivem/ico_eventos_hover.png") > > > > no-repeat scroll 0 4px transparent; background-color: #000} y > > funcionaria > > > > pero solo para este elemento, que pasas si ahora mi clase current > > > estuvera > > > > en li class="icon-members current"? Como entonces cambiaria al > > > > .icon-members:hover? Me hago entender? > > > > > > > > > > > > Ing. Reynier Perez Mira > > > > eMail: reynie...@gmail.com, reynier. > > > > pe...@treswd.com > > > > Website: http://www.
Re: [Ovillo] Cambiar estilos del elemento seleccionado con clase "current"
En verdad, aprovecho y voy un poco más allá. Una etiqueta siempre puede más tener de una clase, pero no más de un id ( además único en toda la web ). Podrías tener: Mi casa Mi web Mi gadget Mi css css: p.fondo { background-color: blue; } p.color { color: green; } p.tipo { font-weight: bold; } p.fondo.color.tipo { border: 1px solid red; } resultado: Mi casa tendra borde rojo, fondo azul, color de texto verde y negrita en letra. Mi web tendra color de fondo azul y color de texto verde Mi gadget tendrá fondo azul Mi css tendrá color de fuente verde. Espero que sirva para aclarar todo más. Por cierto, +1 a la recomendación de Anabel. Un saludo -- Manuel Canga Desarrollo creativo de CMS y frameworks Email: *i...@latrasweb.net* Web: http://www.latrasweb.net Twitter: http://twitter.com/latrasweb_net El 4 de septiembre de 2012 22:49, reynie...@gmail.com escribió: > Interesante, exactamente eso es lo que estoy buscando mas no sabia que se > podian "concatenar" por decirlo de alguna forma las clases de tal como lo > haces tu en li.icon-event.current siempre pense hasta ahorita que era > li.icon-event .current. Pruebo esta opción y te digo como me fue. > > Saludos y gracias > Ing. Reynier Perez Mira > eMail: reynie...@gmail.com, reynier. > pe...@treswd.com > Website: http://www.reynierpm.com > Skype: reynierpm > Mobile: +58 424.180.5609 > > > > 2012/9/4 Manuel Canga - Latrasweb.net > > > Sí, perfectamente. Ya me quedo totalmente claro. > > En estas listas hemos hablado en varias ocasiones > > de unir clases css. Esa podría ser tu solución. > > > > Veamos: > > > > > > > > Inicio > > Blog > > > > Crear > > entrada > > > href="cmvblog/categories">Categorías > > > > > > Eventos > > Directorio > > Amigos > > Mensajes > > Editar > perfil > > > target="_blank">Panel de Control > > > > > > Fíjate que en li de eventos, le he añadido la clase current además > > de la que ya tenía. > > > > ¿Cómo hacemos ahora para darle a ese elemento?. Así. > > > > li.icon-event.current { background: > > url("../images/comvivem/icon_eventos_hover.png") > > no-repeat scroll 0 4px transparent; background-color: #000 } > > > > > > Fíjate, le he dicho al sistema css del navegador que quiero darle estilo > > a un li que tenga la clase icon-event y que ademas tenga la clase > .current > > Es decir, quiero darle estilo a un li cuando tenga ambas clases y luego > > ponemos todas las propiedades de estilo que queramos darle en ese caso. > > > > El li lo he puesto por clarificar, siempre lo hago así, pero no es > > necesario. > > > > > > Un saludo > > -- > > Manuel Canga > > Desarrollo creativo de > > CMS y frameworks > > Email: *i...@latrasweb.net* > > Web: http://www.latrasweb.net > > Twitter: http://twitter.com/latrasweb_net > > > > > > > > El 4 de septiembre de 2012 22:37, reynie...@gmail.com > > escribió: > > > > > Hola Manuel y gracias por tu respuesta, precisamente eso es lo que > > quiero o > > > sea cambiar el color del fondo del LI que toma clase "current" pero > > > manteniendo el icono asociado a la mismo en el estado hover. Veamos un > > > ejemplo: supongamos que el li con class="icon-event" toma la clase > > current > > > tambien por lo cual quedaria li class="icon-event current" bueno si se > > dan > > > de cuenta ese icon-event tiene un estado por default > > > .icon-event{background: url("../images/comvivem/ico_ > > > eventos.png") no-repeat scroll 0 4px transparent;padding: 0 0 0 > > > 35px;cursor:pointer;border-bottom:1px dotted #CC} y uno para cuando > > se > > > le hace un hover .icon-event:hover{background: > > > url("../images/comvivem/ico_eventos_hover.png") no-repeat scroll 0 4px > > > transparent;padding: 0 0 0 35px;cursor:pointer;border-bottom:1px dotted > > > #CC}. Lo que tendria entonces que hacer digamos seria algo como > esto: > > > .current {background: url("../images/comvivem/ico_eventos_hover.png") > > > no-repeat scroll 0 4px transparent; background-color: #000} y > funcionaria > > > pero solo para este elemento, que pasas si ahora mi clase current > > estuvera > > > en li class="icon-members current"? Como entonces cambiaria al > > > .icon-members:hover? Me hago entender? > > > > > > > > > Ing. Reynier Perez Mira > > > eMail: reynie...@gmail.com, reynier. > > > pe...@treswd.com > > > Website: http://www.reynierpm.com > > > Skype: reynierpm > > > Mobile: +58 424.180.5609 > > > > > > > > > > > > 2012/9/4 Manuel Canga - Latrasweb.net > > > > > > > No te he entendido bien. Si lo que quieres es que > > > > a un li con una clase current se le cambie el color de fondo > > > > pero los iconos se mantengan como el hover. Añade > > > > a los estilos de current la imagen del icono que tienes en el hover. > > > > > > > ___ > > > Lista de distribución Ovillo > > > Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org > > > Puedes modificar tus datos o desuscribirte e
Re: [Ovillo] Cambiar estilos del elemento seleccionado con clase "current"
Gracias Anabel como comente al principio no habia mirado el tema de reducir los estilos aun pero tus sugerencias son bienvenidas y seran usadas. Manuel funciona a la perfección, gracias por la ayuda. Saludos a todos y gracias Ing. Reynier Perez Mira eMail: reynie...@gmail.com, reynier. pe...@treswd.com Website: http://www.reynierpm.com Skype: reynierpm Mobile: +58 424.180.5609 2012/9/4 Anabel Fernandez > Hola Reynier, solo queria ayudarte a reducir la cantidad de estilos que > estas empleando: > > >Inicio > >Crear > entrada > href="cmvblog/categories">Categorías > > >Eventos >Directorio >Amigos >Mensajes >Editar perfil > target="_blank" class="icon-admincp hide-for-small">Panel de > Control > > > ul.box_content_navigation li {border-bottom:1px dotted #CC;} > > ul.box_content_navigation li:first-child {border: none;} > > ul.box_content_navigation li a {padding-left: 35px; cursor: pointer;} > > .icon-home {background: url("../images/comvivem/ico_home.png") no-repeat > scroll 0 5px transparent;} > > .icon-home:hover {background: url("../images/comvivem/ico_home.png") > no-repeat > scroll 0 5px transparent;} > > > > Ya después solo tienes que cambiar los backgrounds, no tienes que repetir > los estilos siempre. > > Un saludo > Anabel > > > On Sep 4, 2012, at 4:49 PM, "reynie...@gmail.com" > wrote: > > > Interesante, exactamente eso es lo que estoy buscando mas no sabia que se > > podian "concatenar" por decirlo de alguna forma las clases de tal como lo > > haces tu en li.icon-event.current siempre pense hasta ahorita que era > > li.icon-event .current. Pruebo esta opción y te digo como me fue. > > > > Saludos y gracias > > Ing. Reynier Perez Mira > > eMail: reynie...@gmail.com, reynier. > pe...@treswd.com > > Website: http://www.reynierpm.com > > Skype: reynierpm > > Mobile: +58 424.180.5609 > > > > > > > > 2012/9/4 Manuel Canga - Latrasweb.net > > > >> Sí, perfectamente. Ya me quedo totalmente claro. > >> En estas listas hemos hablado en varias ocasiones > >> de unir clases css. Esa podría ser tu solución. > >> > >> Veamos: > >> > >> >>> > >>Inicio > >>Blog > >> > >>Crear > >> entrada > >> >> href="cmvblog/categories">Categorías > >> > >> > >>Eventos > >>Directorio > >>Amigos > >>Mensajes > >>Editar > perfil > >> >> target="_blank">Panel de Control > >> > >> > >> Fíjate que en li de eventos, le he añadido la clase current además > >> de la que ya tenía. > >> > >> ¿Cómo hacemos ahora para darle a ese elemento?. Así. > >> > >> li.icon-event.current { background: > >> url("../images/comvivem/icon_eventos_hover.png") > >> no-repeat scroll 0 4px transparent; background-color: #000 } > >> > >> > >> Fíjate, le he dicho al sistema css del navegador que quiero darle estilo > >> a un li que tenga la clase icon-event y que ademas tenga la clase > .current > >> Es decir, quiero darle estilo a un li cuando tenga ambas clases y luego > >> ponemos todas las propiedades de estilo que queramos darle en ese caso. > >> > >> El li lo he puesto por clarificar, siempre lo hago así, pero no es > >> necesario. > >> > >> > >> Un saludo > >> -- > >> Manuel Canga > >> Desarrollo creativo de > >> CMS y frameworks > >> Email: *i...@latrasweb.net* > >> Web: http://www.latrasweb.net > >> Twitter: http://twitter.com/latrasweb_net > >> > >> > >> > >> El 4 de septiembre de 2012 22:37, reynie...@gmail.com > >> escribió: > >> > >>> Hola Manuel y gracias por tu respuesta, precisamente eso es lo que > >> quiero o > >>> sea cambiar el color del fondo del LI que toma clase "current" pero > >>> manteniendo el icono asociado a la mismo en el estado hover. Veamos un > >>> ejemplo: supongamos que el li con class="icon-event" toma la clase > >> current > >>> tambien por lo cual quedaria li class="icon-event current" bueno si se > >> dan > >>> de cuenta ese icon-event tiene un estado por default > >>> .icon-event{background: url("../images/comvivem/ico_ > >>> eventos.png") no-repeat scroll 0 4px transparent;padding: 0 0 0 > >>> 35px;cursor:pointer;border-bottom:1px dotted #CC} y uno para cuando > >> se > >>> le hace un hover .icon-event:hover{background: > >>> url("../images/comvivem/ico_eventos_hover.png") no-repeat scroll 0 4px > >>> transparent;padding: 0 0 0 35px;cursor:pointer;border-bottom:1px dotted > >>> #CC}. Lo que tendria entonces que hacer digamos seria algo como > esto: > >>> .current {background: url("../images/comvivem/ico_eventos_hover.png") > >>> no-repeat scroll 0 4px transparent; background-color: #000} y > funcionaria > >>> pero solo para este elemento, que pasas si ahora mi clase current > >> estuvera > >>> en li class="icon-members current"? Como entonces cambiaria al > >>> .icon-members:hover? Me hago entender? > >>> > >>> > >>> Ing. Reynier Perez Mira > >>> eMail: reynie...@gmail.com, reynier. > >>> pe...@treswd.com > >>> Website: http://www.reynierpm.com > >
Re: [Ovillo] Cambiar estilos del elemento seleccionado con clase "current"
Hola Reynier, solo queria ayudarte a reducir la cantidad de estilos que estas empleando: Inicio Crear entrada Categorías Eventos Directorio Amigos Mensajes Editar perfil Panel de Control ul.box_content_navigation li {border-bottom:1px dotted #CC;} ul.box_content_navigation li:first-child {border: none;} ul.box_content_navigation li a {padding-left: 35px; cursor: pointer;} .icon-home {background: url("../images/comvivem/ico_home.png") no-repeat scroll 0 5px transparent;} .icon-home:hover {background: url("../images/comvivem/ico_home.png") no-repeat scroll 0 5px transparent;} Ya después solo tienes que cambiar los backgrounds, no tienes que repetir los estilos siempre. Un saludo Anabel On Sep 4, 2012, at 4:49 PM, "reynie...@gmail.com" wrote: > Interesante, exactamente eso es lo que estoy buscando mas no sabia que se > podian "concatenar" por decirlo de alguna forma las clases de tal como lo > haces tu en li.icon-event.current siempre pense hasta ahorita que era > li.icon-event .current. Pruebo esta opción y te digo como me fue. > > Saludos y gracias > Ing. Reynier Perez Mira > eMail: reynie...@gmail.com, reynier. pe...@treswd.com > Website: http://www.reynierpm.com > Skype: reynierpm > Mobile: +58 424.180.5609 > > > > 2012/9/4 Manuel Canga - Latrasweb.net > >> Sí, perfectamente. Ya me quedo totalmente claro. >> En estas listas hemos hablado en varias ocasiones >> de unir clases css. Esa podría ser tu solución. >> >> Veamos: >> >> >> >>Inicio >>Blog >> >>Crear >> entrada >>> href="cmvblog/categories">Categorías >> >> >>Eventos >>Directorio >>Amigos >>Mensajes >>Editar perfil >>> target="_blank">Panel de Control >> >> >> Fíjate que en li de eventos, le he añadido la clase current además >> de la que ya tenía. >> >> ¿Cómo hacemos ahora para darle a ese elemento?. Así. >> >> li.icon-event.current { background: >> url("../images/comvivem/icon_eventos_hover.png") >> no-repeat scroll 0 4px transparent; background-color: #000 } >> >> >> Fíjate, le he dicho al sistema css del navegador que quiero darle estilo >> a un li que tenga la clase icon-event y que ademas tenga la clase .current >> Es decir, quiero darle estilo a un li cuando tenga ambas clases y luego >> ponemos todas las propiedades de estilo que queramos darle en ese caso. >> >> El li lo he puesto por clarificar, siempre lo hago así, pero no es >> necesario. >> >> >> Un saludo >> -- >> Manuel Canga >> Desarrollo creativo de >> CMS y frameworks >> Email: *i...@latrasweb.net* >> Web: http://www.latrasweb.net >> Twitter: http://twitter.com/latrasweb_net >> >> >> >> El 4 de septiembre de 2012 22:37, reynie...@gmail.com >> escribió: >> >>> Hola Manuel y gracias por tu respuesta, precisamente eso es lo que >> quiero o >>> sea cambiar el color del fondo del LI que toma clase "current" pero >>> manteniendo el icono asociado a la mismo en el estado hover. Veamos un >>> ejemplo: supongamos que el li con class="icon-event" toma la clase >> current >>> tambien por lo cual quedaria li class="icon-event current" bueno si se >> dan >>> de cuenta ese icon-event tiene un estado por default >>> .icon-event{background: url("../images/comvivem/ico_ >>> eventos.png") no-repeat scroll 0 4px transparent;padding: 0 0 0 >>> 35px;cursor:pointer;border-bottom:1px dotted #CC} y uno para cuando >> se >>> le hace un hover .icon-event:hover{background: >>> url("../images/comvivem/ico_eventos_hover.png") no-repeat scroll 0 4px >>> transparent;padding: 0 0 0 35px;cursor:pointer;border-bottom:1px dotted >>> #CC}. Lo que tendria entonces que hacer digamos seria algo como esto: >>> .current {background: url("../images/comvivem/ico_eventos_hover.png") >>> no-repeat scroll 0 4px transparent; background-color: #000} y funcionaria >>> pero solo para este elemento, que pasas si ahora mi clase current >> estuvera >>> en li class="icon-members current"? Como entonces cambiaria al >>> .icon-members:hover? Me hago entender? >>> >>> >>> Ing. Reynier Perez Mira >>> eMail: reynie...@gmail.com, reynier. >>> pe...@treswd.com >>> Website: http://www.reynierpm.com >>> Skype: reynierpm >>> Mobile: +58 424.180.5609 >>> >>> >>> >>> 2012/9/4 Manuel Canga - Latrasweb.net >>> No te he entendido bien. Si lo que quieres es que a un li con una clase current se le cambie el color de fondo pero los iconos se mantengan como el hover. Añade a los estilos de current la imagen del icono que tienes en el hover. >>> ___ >>> Lista de distribución Ovillo >>> Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org >>> Puedes modificar tus datos o desuscribirte en la siguiente dirección: >>> http://lists.ovillo.org/mailman/listinfo/ovillo >>> >> ___ >> Lista de distribución Ovillo >> Para escribir a la lista,
Re: [Ovillo] Cambiar estilos del elemento seleccionado con clase "current"
Interesante, exactamente eso es lo que estoy buscando mas no sabia que se podian "concatenar" por decirlo de alguna forma las clases de tal como lo haces tu en li.icon-event.current siempre pense hasta ahorita que era li.icon-event .current. Pruebo esta opción y te digo como me fue. Saludos y gracias Ing. Reynier Perez Mira eMail: reynie...@gmail.com, reynier. pe...@treswd.com Website: http://www.reynierpm.com Skype: reynierpm Mobile: +58 424.180.5609 2012/9/4 Manuel Canga - Latrasweb.net > Sí, perfectamente. Ya me quedo totalmente claro. > En estas listas hemos hablado en varias ocasiones > de unir clases css. Esa podría ser tu solución. > > Veamos: > > > > Inicio > Blog > > Crear > entrada > href="cmvblog/categories">Categorías > > > Eventos > Directorio > Amigos > Mensajes > Editar perfil > target="_blank">Panel de Control > > > Fíjate que en li de eventos, le he añadido la clase current además > de la que ya tenía. > > ¿Cómo hacemos ahora para darle a ese elemento?. Así. > > li.icon-event.current { background: > url("../images/comvivem/icon_eventos_hover.png") > no-repeat scroll 0 4px transparent; background-color: #000 } > > > Fíjate, le he dicho al sistema css del navegador que quiero darle estilo > a un li que tenga la clase icon-event y que ademas tenga la clase .current > Es decir, quiero darle estilo a un li cuando tenga ambas clases y luego > ponemos todas las propiedades de estilo que queramos darle en ese caso. > > El li lo he puesto por clarificar, siempre lo hago así, pero no es > necesario. > > > Un saludo > -- > Manuel Canga > Desarrollo creativo de > CMS y frameworks > Email: *i...@latrasweb.net* > Web: http://www.latrasweb.net > Twitter: http://twitter.com/latrasweb_net > > > > El 4 de septiembre de 2012 22:37, reynie...@gmail.com > escribió: > > > Hola Manuel y gracias por tu respuesta, precisamente eso es lo que > quiero o > > sea cambiar el color del fondo del LI que toma clase "current" pero > > manteniendo el icono asociado a la mismo en el estado hover. Veamos un > > ejemplo: supongamos que el li con class="icon-event" toma la clase > current > > tambien por lo cual quedaria li class="icon-event current" bueno si se > dan > > de cuenta ese icon-event tiene un estado por default > > .icon-event{background: url("../images/comvivem/ico_ > > eventos.png") no-repeat scroll 0 4px transparent;padding: 0 0 0 > > 35px;cursor:pointer;border-bottom:1px dotted #CC} y uno para cuando > se > > le hace un hover .icon-event:hover{background: > > url("../images/comvivem/ico_eventos_hover.png") no-repeat scroll 0 4px > > transparent;padding: 0 0 0 35px;cursor:pointer;border-bottom:1px dotted > > #CC}. Lo que tendria entonces que hacer digamos seria algo como esto: > > .current {background: url("../images/comvivem/ico_eventos_hover.png") > > no-repeat scroll 0 4px transparent; background-color: #000} y funcionaria > > pero solo para este elemento, que pasas si ahora mi clase current > estuvera > > en li class="icon-members current"? Como entonces cambiaria al > > .icon-members:hover? Me hago entender? > > > > > > Ing. Reynier Perez Mira > > eMail: reynie...@gmail.com, reynier. > > pe...@treswd.com > > Website: http://www.reynierpm.com > > Skype: reynierpm > > Mobile: +58 424.180.5609 > > > > > > > > 2012/9/4 Manuel Canga - Latrasweb.net > > > > > No te he entendido bien. Si lo que quieres es que > > > a un li con una clase current se le cambie el color de fondo > > > pero los iconos se mantengan como el hover. Añade > > > a los estilos de current la imagen del icono que tienes en el hover. > > > > > ___ > > Lista de distribución Ovillo > > Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org > > Puedes modificar tus datos o desuscribirte en la siguiente dirección: > > http://lists.ovillo.org/mailman/listinfo/ovillo > > > ___ > Lista de distribución Ovillo > Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org > Puedes modificar tus datos o desuscribirte en la siguiente dirección: > http://lists.ovillo.org/mailman/listinfo/ovillo > ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Cambiar estilos del elemento seleccionado con clase "current"
IMPORTANTE: lo típico es pensar que hay que dejar espacio entre los nombres de las clases. No lo hagas!. Te lo pongo en grande por si acaso: li.icon-event.current { estilo que yo quiero para etiquetas que tenga las dos clases anteriores } Un saludo -- Manuel Canga Desarrollo creativo de CMS y frameworks Email: *i...@latrasweb.net* Web: http://www.latrasweb.net Twitter: http://twitter.com/latrasweb_net El 4 de septiembre de 2012 22:45, Manuel Canga - Latrasweb.net < i...@latrasweb.net> escribió: > Sí, perfectamente. Ya me quedo totalmente claro. > En estas listas hemos hablado en varias ocasiones > de unir clases css. Esa podría ser tu solución. > > Veamos: > > > > Inicio > Blog > > Crear > entrada > href="cmvblog/categories">Categorías > > > Eventos > > Directorio > Amigos > Mensajes > Editar perfil > target="_blank">Panel de Control > > > Fíjate que en li de eventos, le he añadido la clase current además > de la que ya tenía. > > ¿Cómo hacemos ahora para darle a ese elemento?. Así. > > li.icon-event.current { background: > url("../images/comvivem/icon_eventos_hover.png") > > no-repeat scroll 0 4px transparent; background-color: #000 } > > > Fíjate, le he dicho al sistema css del navegador que quiero darle estilo > a un li que tenga la clase icon-event y que ademas tenga la clase .current > Es decir, quiero darle estilo a un li cuando tenga ambas clases y luego > ponemos todas las propiedades de estilo que queramos darle en ese caso. > > El li lo he puesto por clarificar, siempre lo hago así, pero no es > necesario. > > > Un saludo > -- > Manuel Canga > Desarrollo creativo de > CMS y frameworks > Email: *i...@latrasweb.net* > Web: http://www.latrasweb.net > Twitter: http://twitter.com/latrasweb_net > > > > El 4 de septiembre de 2012 22:37, reynie...@gmail.com > escribió: > > Hola Manuel y gracias por tu respuesta, precisamente eso es lo que quiero o >> sea cambiar el color del fondo del LI que toma clase "current" pero >> manteniendo el icono asociado a la mismo en el estado hover. Veamos un >> ejemplo: supongamos que el li con class="icon-event" toma la clase current >> tambien por lo cual quedaria li class="icon-event current" bueno si se dan >> de cuenta ese icon-event tiene un estado por default >> .icon-event{background: url("../images/comvivem/ico_ >> eventos.png") no-repeat scroll 0 4px transparent;padding: 0 0 0 >> 35px;cursor:pointer;border-bottom:1px dotted #CC} y uno para cuando se >> le hace un hover .icon-event:hover{background: >> url("../images/comvivem/ico_eventos_hover.png") no-repeat scroll 0 4px >> transparent;padding: 0 0 0 35px;cursor:pointer;border-bottom:1px dotted >> #CC}. Lo que tendria entonces que hacer digamos seria algo como esto: >> .current {background: url("../images/comvivem/ico_eventos_hover.png") >> no-repeat scroll 0 4px transparent; background-color: #000} y funcionaria >> pero solo para este elemento, que pasas si ahora mi clase current estuvera >> en li class="icon-members current"? Como entonces cambiaria al >> .icon-members:hover? Me hago entender? >> >> >> Ing. Reynier Perez Mira >> eMail: reynie...@gmail.com, reynier. >> pe...@treswd.com >> Website: http://www.reynierpm.com >> Skype: reynierpm >> Mobile: +58 424.180.5609 >> >> >> >> 2012/9/4 Manuel Canga - Latrasweb.net >> >> > No te he entendido bien. Si lo que quieres es que >> > a un li con una clase current se le cambie el color de fondo >> > pero los iconos se mantengan como el hover. Añade >> > a los estilos de current la imagen del icono que tienes en el hover. >> > >> ___ >> Lista de distribución Ovillo >> Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org >> Puedes modificar tus datos o desuscribirte en la siguiente dirección: >> http://lists.ovillo.org/mailman/listinfo/ovillo >> > > ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Cambiar estilos del elemento seleccionado con clase "current"
Sí, perfectamente. Ya me quedo totalmente claro. En estas listas hemos hablado en varias ocasiones de unir clases css. Esa podría ser tu solución. Veamos: Inicio Blog Crear entrada Categorías Eventos Directorio Amigos Mensajes Editar perfil Panel de Control Fíjate que en li de eventos, le he añadido la clase current además de la que ya tenía. ¿Cómo hacemos ahora para darle a ese elemento?. Así. li.icon-event.current { background: url("../images/comvivem/icon_eventos_hover.png") no-repeat scroll 0 4px transparent; background-color: #000 } Fíjate, le he dicho al sistema css del navegador que quiero darle estilo a un li que tenga la clase icon-event y que ademas tenga la clase .current Es decir, quiero darle estilo a un li cuando tenga ambas clases y luego ponemos todas las propiedades de estilo que queramos darle en ese caso. El li lo he puesto por clarificar, siempre lo hago así, pero no es necesario. Un saludo -- Manuel Canga Desarrollo creativo de CMS y frameworks Email: *i...@latrasweb.net* Web: http://www.latrasweb.net Twitter: http://twitter.com/latrasweb_net El 4 de septiembre de 2012 22:37, reynie...@gmail.com escribió: > Hola Manuel y gracias por tu respuesta, precisamente eso es lo que quiero o > sea cambiar el color del fondo del LI que toma clase "current" pero > manteniendo el icono asociado a la mismo en el estado hover. Veamos un > ejemplo: supongamos que el li con class="icon-event" toma la clase current > tambien por lo cual quedaria li class="icon-event current" bueno si se dan > de cuenta ese icon-event tiene un estado por default > .icon-event{background: url("../images/comvivem/ico_ > eventos.png") no-repeat scroll 0 4px transparent;padding: 0 0 0 > 35px;cursor:pointer;border-bottom:1px dotted #CC} y uno para cuando se > le hace un hover .icon-event:hover{background: > url("../images/comvivem/ico_eventos_hover.png") no-repeat scroll 0 4px > transparent;padding: 0 0 0 35px;cursor:pointer;border-bottom:1px dotted > #CC}. Lo que tendria entonces que hacer digamos seria algo como esto: > .current {background: url("../images/comvivem/ico_eventos_hover.png") > no-repeat scroll 0 4px transparent; background-color: #000} y funcionaria > pero solo para este elemento, que pasas si ahora mi clase current estuvera > en li class="icon-members current"? Como entonces cambiaria al > .icon-members:hover? Me hago entender? > > > Ing. Reynier Perez Mira > eMail: reynie...@gmail.com, reynier. > pe...@treswd.com > Website: http://www.reynierpm.com > Skype: reynierpm > Mobile: +58 424.180.5609 > > > > 2012/9/4 Manuel Canga - Latrasweb.net > > > No te he entendido bien. Si lo que quieres es que > > a un li con una clase current se le cambie el color de fondo > > pero los iconos se mantengan como el hover. Añade > > a los estilos de current la imagen del icono que tienes en el hover. > > > ___ > Lista de distribución Ovillo > Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org > Puedes modificar tus datos o desuscribirte en la siguiente dirección: > http://lists.ovillo.org/mailman/listinfo/ovillo > ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Cambiar estilos del elemento seleccionado con clase "current"
Gracias Marcos, pero no es esto lo que ando buscando! Ing. Reynier Perez Mira eMail: reynie...@gmail.com, reynier. pe...@treswd.com Website: http://www.reynierpm.com Skype: reynierpm Mobile: +58 424.180.5609 2012/9/4 marcos méndez filesi > Hola, no sé si he entendido bien lo que necesitas. > > Si lo que quieres es cambiar la imagen con un CSS el código es este > > .nombre_de_tu_clase { > background: url(tu_imagen_1.png) no-repeat; > } > > .nombre_de_tu_clase:hover { > background: url(tu_imagen_2.png) no-repeat; > } > > abrazos > > El 4 de septiembre de 2012 22:31, Manuel Canga - Latrasweb.net < > i...@latrasweb.net> escribió: > > > Hola Reynier: > > > > No te he entendido bien. Si lo que quieres es que > > a un li con una clase current se le cambie el color de fondo > > pero los iconos se mantengan como el hover. Añade > > a los estilos de current la imagen del icono que tienes en el hover. > > > > Muchas veces nos enfrascamos en complicaciones cuando > > luego la solución es algo fácil. A mi me ha pasado millones > > de veces. > > > > > > Un saludo > > -- > > Manuel Canga > > Desarrollo creativo de > > CMS y frameworks > > Email: *i...@latrasweb.net* > > Web: http://www.latrasweb.net > > Twitter: http://twitter.com/latrasweb_net > > > > > > > > 2012/9/4 reynie...@gmail.com > > > > > Hola a todos, tengo un pequeño problemita y no se como darle solución. > > > Vean, tengo estás clases creadas en mi CSS: > > > > > > .icon-home{background: url("../images/comvivem/ico_home.png") no-repeat > > > scroll 0 5px transparent;padding: 0 0 0 > > > 35px;cursor:pointer;border-bottom:1px dotted #CC} > > > .icon-home:hover{background: > url("../images/comvivem/ico_home_hover.png") > > > no-repeat scroll 0 5px transparent;padding: 0 0 0 > > > 35px;cursor:pointer;border-bottom:1px dotted #CC} > > > .icon-blog{background: url("../images/comvivem/ico_blog.png") no-repeat > > > scroll 0 5px transparent;padding: 0 0 0 > > > 35px;cursor:pointer;border-bottom:1px dotted #CC} > > > .icon-blog:hover{background: > url("../images/comvivem/ico_blog_hover.png") > > > no-repeat scroll 0 5px transparent;padding: 0 0 0 > > > 35px;cursor:pointer;border-bottom:1px dotted #CC} > > > .icon-event{background: url("../images/comvivem/ico_eventos.png") > > no-repeat > > > scroll 0 4px transparent;padding: 0 0 0 > > > 35px;cursor:pointer;border-bottom:1px dotted #CC} > > > .icon-event:hover{background: > > > url("../images/comvivem/ico_eventos_hover.png") no-repeat scroll 0 4px > > > transparent;padding: 0 0 0 35px;cursor:pointer;border-bottom:1px dotted > > > #CC} > > > .icon-messages{background: url("../images/comvivem/ico_mensajes.png") > > > no-repeat scroll 0 5px transparent;padding: 0 0 0 > > > 35px;cursor:pointer;border-bottom:1px dotted #CC} > > > .icon-messages:hover{background: > > > url("../images/comvivem/ico_mensajes_hover.png") no-repeat scroll 0 5px > > > transparent;padding: 0 0 0 35px;cursor:pointer;border-bottom:1px dotted > > > #CC} > > > .icon-members{background: url("../images/comvivem/ico-directorio.png") > > > no-repeat scroll 0 5px transparent;padding: 0 0 0 > > > 35px;cursor:pointer;border-bottom:1px dotted #CC} > > > .icon-members:hover{background: > > > url("../images/comvivem/ico-directorio_hover.png") no-repeat scroll 0 > 5px > > > transparent;padding: 0 0 0 35px;cursor:pointer;border-bottom:1px dotted > > > #CC} > > > .icon-friends{background: url("../images/comvivem/ico_amigos.png") > > > no-repeat scroll 0 5px transparent;padding: 0 0 0 > > > 35px;cursor:pointer;border-bottom:1px dotted #CC} > > > .icon-friends:hover{background: > > > url("../images/comvivem/ico_amigos-hover.png") no-repeat scroll 0 5px > > > transparent;padding: 0 0 0 35px;cursor:pointer;border-bottom:1px dotted > > > #CC} > > > .icon-account{background: url("../images/comvivem/ico_micuenta.png") > > > no-repeat scroll 0 5px transparent;padding: 0 0 0 > > > 35px;cursor:pointer;border-bottom:1px dotted #CC} > > > .icon-account:hover{background: > > > url("../images/comvivem/ico_micuenta_hover.png") no-repeat scroll 0 5px > > > transparent;padding: 0 0 0 35px;cursor:pointer;border-bottom:1px dotted > > > #CC} > > > .icon-admincp{background: url("../images/comvivem/ico_azul_perfil.png") > > > no-repeat scroll 0 5px transparent;padding: 0 0 0 > > > 35px;cursor:pointer;border-bottom:1px dotted #CC} > > > .icon-admincp:hover{background: > > > url("../images/comvivem/ico_azul_perfil.png") no-repeat scroll 0 5px > > > transparent;padding: 0 0 0 35px;cursor:pointer;border-bottom:1px dotted > > > #CC} > > > > > > No se fijen en que estan repetidas pues aun tengo que optmizar un poco > > todo > > > esto ;). Bien tengo un UL que tiene varios LI: > > > > > > > > > Inicio > > > Blog > > > > > > Crear > > > entrada > > > > > href="cmvblog/categories">Categorías > > > > > > > > > Eventos > > > Directorio > > > Amigos > > >
Re: [Ovillo] Cambiar estilos del elemento seleccionado con clase "current"
Hola, no sé si he entendido bien lo que necesitas. Si lo que quieres es cambiar la imagen con un CSS el código es este .nombre_de_tu_clase { background: url(tu_imagen_1.png) no-repeat; } .nombre_de_tu_clase:hover { background: url(tu_imagen_2.png) no-repeat; } abrazos El 4 de septiembre de 2012 22:31, Manuel Canga - Latrasweb.net < i...@latrasweb.net> escribió: > Hola Reynier: > > No te he entendido bien. Si lo que quieres es que > a un li con una clase current se le cambie el color de fondo > pero los iconos se mantengan como el hover. Añade > a los estilos de current la imagen del icono que tienes en el hover. > > Muchas veces nos enfrascamos en complicaciones cuando > luego la solución es algo fácil. A mi me ha pasado millones > de veces. > > > Un saludo > -- > Manuel Canga > Desarrollo creativo de > CMS y frameworks > Email: *i...@latrasweb.net* > Web: http://www.latrasweb.net > Twitter: http://twitter.com/latrasweb_net > > > > 2012/9/4 reynie...@gmail.com > > > Hola a todos, tengo un pequeño problemita y no se como darle solución. > > Vean, tengo estás clases creadas en mi CSS: > > > > .icon-home{background: url("../images/comvivem/ico_home.png") no-repeat > > scroll 0 5px transparent;padding: 0 0 0 > > 35px;cursor:pointer;border-bottom:1px dotted #CC} > > .icon-home:hover{background: url("../images/comvivem/ico_home_hover.png") > > no-repeat scroll 0 5px transparent;padding: 0 0 0 > > 35px;cursor:pointer;border-bottom:1px dotted #CC} > > .icon-blog{background: url("../images/comvivem/ico_blog.png") no-repeat > > scroll 0 5px transparent;padding: 0 0 0 > > 35px;cursor:pointer;border-bottom:1px dotted #CC} > > .icon-blog:hover{background: url("../images/comvivem/ico_blog_hover.png") > > no-repeat scroll 0 5px transparent;padding: 0 0 0 > > 35px;cursor:pointer;border-bottom:1px dotted #CC} > > .icon-event{background: url("../images/comvivem/ico_eventos.png") > no-repeat > > scroll 0 4px transparent;padding: 0 0 0 > > 35px;cursor:pointer;border-bottom:1px dotted #CC} > > .icon-event:hover{background: > > url("../images/comvivem/ico_eventos_hover.png") no-repeat scroll 0 4px > > transparent;padding: 0 0 0 35px;cursor:pointer;border-bottom:1px dotted > > #CC} > > .icon-messages{background: url("../images/comvivem/ico_mensajes.png") > > no-repeat scroll 0 5px transparent;padding: 0 0 0 > > 35px;cursor:pointer;border-bottom:1px dotted #CC} > > .icon-messages:hover{background: > > url("../images/comvivem/ico_mensajes_hover.png") no-repeat scroll 0 5px > > transparent;padding: 0 0 0 35px;cursor:pointer;border-bottom:1px dotted > > #CC} > > .icon-members{background: url("../images/comvivem/ico-directorio.png") > > no-repeat scroll 0 5px transparent;padding: 0 0 0 > > 35px;cursor:pointer;border-bottom:1px dotted #CC} > > .icon-members:hover{background: > > url("../images/comvivem/ico-directorio_hover.png") no-repeat scroll 0 5px > > transparent;padding: 0 0 0 35px;cursor:pointer;border-bottom:1px dotted > > #CC} > > .icon-friends{background: url("../images/comvivem/ico_amigos.png") > > no-repeat scroll 0 5px transparent;padding: 0 0 0 > > 35px;cursor:pointer;border-bottom:1px dotted #CC} > > .icon-friends:hover{background: > > url("../images/comvivem/ico_amigos-hover.png") no-repeat scroll 0 5px > > transparent;padding: 0 0 0 35px;cursor:pointer;border-bottom:1px dotted > > #CC} > > .icon-account{background: url("../images/comvivem/ico_micuenta.png") > > no-repeat scroll 0 5px transparent;padding: 0 0 0 > > 35px;cursor:pointer;border-bottom:1px dotted #CC} > > .icon-account:hover{background: > > url("../images/comvivem/ico_micuenta_hover.png") no-repeat scroll 0 5px > > transparent;padding: 0 0 0 35px;cursor:pointer;border-bottom:1px dotted > > #CC} > > .icon-admincp{background: url("../images/comvivem/ico_azul_perfil.png") > > no-repeat scroll 0 5px transparent;padding: 0 0 0 > > 35px;cursor:pointer;border-bottom:1px dotted #CC} > > .icon-admincp:hover{background: > > url("../images/comvivem/ico_azul_perfil.png") no-repeat scroll 0 5px > > transparent;padding: 0 0 0 35px;cursor:pointer;border-bottom:1px dotted > > #CC} > > > > No se fijen en que estan repetidas pues aun tengo que optmizar un poco > todo > > esto ;). Bien tengo un UL que tiene varios LI: > > > > > > Inicio > > Blog > > > > Crear > > entrada > > > href="cmvblog/categories">Categorías > > > > > > Eventos > > Directorio > > Amigos > > Mensajes > > Editar > perfil > > > target="_blank">Panel de Control > > > > > > Cuando doy click en cualquiera de ellos se añade un clase current. La > > diseñadora me ha pedido que a esta clase current le cambie el color de > > fondo y le mantenga el icono de color naranja (_hover). Hacer esto para > el > > color de fondo no es problema pero como hacerlo para los iconos? > > > > Saludos y gracias por adelantado > > > > > > Ing. Reynier Perez Mira > > eMail: reynie.
Re: [Ovillo] Cambiar estilos del elemento seleccionado con clase "current"
Hola Manuel y gracias por tu respuesta, precisamente eso es lo que quiero o sea cambiar el color del fondo del LI que toma clase "current" pero manteniendo el icono asociado a la mismo en el estado hover. Veamos un ejemplo: supongamos que el li con class="icon-event" toma la clase current tambien por lo cual quedaria li class="icon-event current" bueno si se dan de cuenta ese icon-event tiene un estado por default .icon-event{background: url("../images/comvivem/ico_ eventos.png") no-repeat scroll 0 4px transparent;padding: 0 0 0 35px;cursor:pointer;border-bottom:1px dotted #CC} y uno para cuando se le hace un hover .icon-event:hover{background: url("../images/comvivem/ico_eventos_hover.png") no-repeat scroll 0 4px transparent;padding: 0 0 0 35px;cursor:pointer;border-bottom:1px dotted #CC}. Lo que tendria entonces que hacer digamos seria algo como esto: .current {background: url("../images/comvivem/ico_eventos_hover.png") no-repeat scroll 0 4px transparent; background-color: #000} y funcionaria pero solo para este elemento, que pasas si ahora mi clase current estuvera en li class="icon-members current"? Como entonces cambiaria al .icon-members:hover? Me hago entender? Ing. Reynier Perez Mira eMail: reynie...@gmail.com, reynier. pe...@treswd.com Website: http://www.reynierpm.com Skype: reynierpm Mobile: +58 424.180.5609 2012/9/4 Manuel Canga - Latrasweb.net > No te he entendido bien. Si lo que quieres es que > a un li con una clase current se le cambie el color de fondo > pero los iconos se mantengan como el hover. Añade > a los estilos de current la imagen del icono que tienes en el hover. > ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Cambiar estilos del elemento seleccionado con clase "current"
Hola Reynier: No te he entendido bien. Si lo que quieres es que a un li con una clase current se le cambie el color de fondo pero los iconos se mantengan como el hover. Añade a los estilos de current la imagen del icono que tienes en el hover. Muchas veces nos enfrascamos en complicaciones cuando luego la solución es algo fácil. A mi me ha pasado millones de veces. Un saludo -- Manuel Canga Desarrollo creativo de CMS y frameworks Email: *i...@latrasweb.net* Web: http://www.latrasweb.net Twitter: http://twitter.com/latrasweb_net 2012/9/4 reynie...@gmail.com > Hola a todos, tengo un pequeño problemita y no se como darle solución. > Vean, tengo estás clases creadas en mi CSS: > > .icon-home{background: url("../images/comvivem/ico_home.png") no-repeat > scroll 0 5px transparent;padding: 0 0 0 > 35px;cursor:pointer;border-bottom:1px dotted #CC} > .icon-home:hover{background: url("../images/comvivem/ico_home_hover.png") > no-repeat scroll 0 5px transparent;padding: 0 0 0 > 35px;cursor:pointer;border-bottom:1px dotted #CC} > .icon-blog{background: url("../images/comvivem/ico_blog.png") no-repeat > scroll 0 5px transparent;padding: 0 0 0 > 35px;cursor:pointer;border-bottom:1px dotted #CC} > .icon-blog:hover{background: url("../images/comvivem/ico_blog_hover.png") > no-repeat scroll 0 5px transparent;padding: 0 0 0 > 35px;cursor:pointer;border-bottom:1px dotted #CC} > .icon-event{background: url("../images/comvivem/ico_eventos.png") no-repeat > scroll 0 4px transparent;padding: 0 0 0 > 35px;cursor:pointer;border-bottom:1px dotted #CC} > .icon-event:hover{background: > url("../images/comvivem/ico_eventos_hover.png") no-repeat scroll 0 4px > transparent;padding: 0 0 0 35px;cursor:pointer;border-bottom:1px dotted > #CC} > .icon-messages{background: url("../images/comvivem/ico_mensajes.png") > no-repeat scroll 0 5px transparent;padding: 0 0 0 > 35px;cursor:pointer;border-bottom:1px dotted #CC} > .icon-messages:hover{background: > url("../images/comvivem/ico_mensajes_hover.png") no-repeat scroll 0 5px > transparent;padding: 0 0 0 35px;cursor:pointer;border-bottom:1px dotted > #CC} > .icon-members{background: url("../images/comvivem/ico-directorio.png") > no-repeat scroll 0 5px transparent;padding: 0 0 0 > 35px;cursor:pointer;border-bottom:1px dotted #CC} > .icon-members:hover{background: > url("../images/comvivem/ico-directorio_hover.png") no-repeat scroll 0 5px > transparent;padding: 0 0 0 35px;cursor:pointer;border-bottom:1px dotted > #CC} > .icon-friends{background: url("../images/comvivem/ico_amigos.png") > no-repeat scroll 0 5px transparent;padding: 0 0 0 > 35px;cursor:pointer;border-bottom:1px dotted #CC} > .icon-friends:hover{background: > url("../images/comvivem/ico_amigos-hover.png") no-repeat scroll 0 5px > transparent;padding: 0 0 0 35px;cursor:pointer;border-bottom:1px dotted > #CC} > .icon-account{background: url("../images/comvivem/ico_micuenta.png") > no-repeat scroll 0 5px transparent;padding: 0 0 0 > 35px;cursor:pointer;border-bottom:1px dotted #CC} > .icon-account:hover{background: > url("../images/comvivem/ico_micuenta_hover.png") no-repeat scroll 0 5px > transparent;padding: 0 0 0 35px;cursor:pointer;border-bottom:1px dotted > #CC} > .icon-admincp{background: url("../images/comvivem/ico_azul_perfil.png") > no-repeat scroll 0 5px transparent;padding: 0 0 0 > 35px;cursor:pointer;border-bottom:1px dotted #CC} > .icon-admincp:hover{background: > url("../images/comvivem/ico_azul_perfil.png") no-repeat scroll 0 5px > transparent;padding: 0 0 0 35px;cursor:pointer;border-bottom:1px dotted > #CC} > > No se fijen en que estan repetidas pues aun tengo que optmizar un poco todo > esto ;). Bien tengo un UL que tiene varios LI: > > > Inicio > Blog > > Crear > entrada > href="cmvblog/categories">Categorías > > > Eventos > Directorio > Amigos > Mensajes > Editar perfil > target="_blank">Panel de Control > > > Cuando doy click en cualquiera de ellos se añade un clase current. La > diseñadora me ha pedido que a esta clase current le cambie el color de > fondo y le mantenga el icono de color naranja (_hover). Hacer esto para el > color de fondo no es problema pero como hacerlo para los iconos? > > Saludos y gracias por adelantado > > > Ing. Reynier Perez Mira > eMail: reynie...@gmail.com, reynier. > pe...@treswd.com > Website: http://www.reynierpm.com > Skype: reynierpm > Mobile: +58 424.180.5609 > ___ > Lista de distribución Ovillo > Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org > Puedes modificar tus datos o desuscribirte en la siguiente dirección: > http://lists.ovillo.org/mailman/listinfo/ovillo > ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguie