Joomleros - La comunidad Joomla! en español

Hola amigos de Joomla! México, eh estado tratando de entender como funciona la opción para estilos personalizados para cada módulo, ésta opción está en los parámetros de cualquier módulo.. con este nombre: Estilo CSS para el módulo ó Module Class Suffix

Según entiendo, funciona así:

"Se introduce el sufijo para la clase CSS del módulo. Ejemplo:
moduletable-poll. En este ejemplo, -poll es el sufijo. Este sufijo debe
estar presente en la hoja de estilos CSS de la plantilla. Esto permite
aplicar un estilo personalizado al módulo."

Quiero personalizar el módulo JCal Pro Latest del Calendario para eventos JCal Pro, en los parámetros del módulo JCal Pro Latest viene esta opción: Module Class Suffix allí escribo eventos, en la hoja de estilos de mi template pongo estas líneas:

table.moduletable-eventos {
estilos..
estilos..
estilos..
}

Pero no hace nada, solo me anula el estilo pordefault que tenia y me pone el contenido del módulo sin nigun estilo.. no sé que estoy haciendo mal, espero haberme explicado y puedan hecharme una mano con esto, de antemano muchas gracias!!!

El Module Class Suffix sería -eventos (es importante el guión).

Sobre las instrucciones en la hoja de estilos, te anexo una parte de lo que tengo en uno de mis sitios donde los sufijos son -1 y -2:

Código:

table.moduletable-1 { width: 100%; background: url('/../images/menu_bg.jpg') repeat-x; background-color: #fff001; margin: 0px 0px 10px 0px; border-left: solid 0px #000000; border-right: solid 0px #000000; border-top: solid 0px #000000; border-bottom: solid 0px #000000; } table.moduletable-1 th { background: url('/../images/menu.png') no-repeat; vertical-align: middle; font-size: 11px; font-weight: normal; color: #FFFFFF; text-align: left; text-indent: 20px; width: 100%; height: 20px; text-transform: uppercase; } table.moduletable-1 td { font-size: 11px; padding: 0px; font-weight: normal; } table.moduletable-2 { width: 100%; background: url('/../images/menu_bg1.jpg') repeat-x; background-color: #fff001; margin: 0px 0px 10px 0px; border-left: solid 0px #000000; border-right: solid 0px #000000; border-top: solid 0px #000000; border-bottom: solid 0px #000000; } table.moduletable-2 th { background: url('/../images/menu2.png') no-repeat; vertical-align: middle; font-size: 11px; font-weight: normal; color: #FFFFFF; text-align: left; text-indent: 20px; width: 100%; height: 20px; text-transform: uppercase; } table.moduletable-2 td { font-size: 11px; padding: 3px; font-weight: normal; }

Ey muchas gracias Carreon, lo probé y me funciona, te lo agradezco mucho, cuidate y muchos saludos!!!

Lo que me falalba es que no le agregaba el - a eventos, le puse -eventos y funcionó muy bien. Hasta luego!

carreon escribió:

QUOTE:
El Module Class Suffix sería -eventos (es importante el guión).

Sobre las instrucciones en la hoja de estilos, te anexo una parte de lo que tengo en uno de mis sitios donde los sufijos son -1 y -2:

Código:

table.moduletable-1 { width: 100%; background: url('/../images/menu_bg.jpg') repeat-x; background-color: #fff001; margin: 0px 0px 10px 0px; border-left: solid 0px #000000; border-right: solid 0px #000000; border-top: solid 0px #000000; border-bottom: solid 0px #000000; } table.moduletable-1 th { background: url('/../images/menu.png') no-repeat; vertical-align: middle; font-size: 11px; font-weight: normal; color: #FFFFFF; text-align: left; text-indent: 20px; width: 100%; height: 20px; text-transform: uppercase; } table.moduletable-1 td { font-size: 11px; padding: 0px; font-weight: normal; } table.moduletable-2 { width: 100%; background: url('/../images/menu_bg1.jpg') repeat-x; background-color: #fff001; margin: 0px 0px 10px 0px; border-left: solid 0px #000000; border-right: solid 0px #000000; border-top: solid 0px #000000; border-bottom: solid 0px #000000; } table.moduletable-2 th { background: url('/../images/menu2.png') no-repeat; vertical-align: middle; font-size: 11px; font-weight: normal; color: #FFFFFF; text-align: left; text-indent: 20px; width: 100%; height: 20px; text-transform: uppercase; } table.moduletable-2 td { font-size: 11px; padding: 3px; font-weight: normal; }

Estimado Carreon: me ha servido mucho este codigo, pues pude ajustar alfunos detalles en los modulos de mi sitio, pero sigo con un problemita y no encuentro solución en ningún lado por eso recurro a este foro, tengo una imágen de cabecera en un modulo (encuestas), y esta imágen queda por encima de la pregunta y de una opción de respuesta del modulo Encuestas...eL TEMA ES QUE NO CONSIGO SUBIR ESA IMÁGEN, EXISTE ALGUNA CLASE QUE COLOQUE EN EL CODIGO Y ME PERMITA SUBIR O BAJAR ESA IMÁGEN??? Saludos desde Uruguay y muchas gracias

puede ser con position del background.

Estimado Carrion: muchas gracias por su respuesta, el link me sirvio muchisimo, utilicé la clase : background-position: 40% 0%; y conseguí subir la imagen como quería, pero!! ahhh, el texto del modulo sigue por encima de la imágen, se me ocurre que tenga que bajar el contenido del módulo , asi podré ver correctamente el módulo, pero la verdad no se como hacer eso!!!!, tu sabes???
el link de mi web es: www.forestalweb.com/joomla (es el módulo encuestas)

gracias!

Ahora puedes usar un padding-top o margin-top para recorrer el texto hacia abajo, en la misma página de la liga anterior encuentras informacion sobre esto. Además, si se recorre tu imagen hacia abajo, recuerda que background-position puede ser negativo.

Saludos.

Muchisimas gracias Carreon!!!, la verdad que te soy muy agradecido, por que me has ayudado muchisimo, logré acomodar el módulo como quería, !!!, encontré la ayuda que no encontraba en otros foros.-
Muchas gracias y te seguiré molestando , (de vez en cuando)

un abrazo!

Hola Carreon, estoy utilizando otro template y no consigo cambiarle el estilo de los módulos... hice exatamente como enseñas en tu mensaje... pero como el amigo que comenzó este tema, no consigo que cambie el estilo del menú, casualmente estoy intentando cambiar el modulos del componente adsmanagerr ADS, alguna idéa??


saludos

Lo más común es que en ocasiones y dependiendo del explorador, se les da mas "peso" a otras definiciones hechas en la misma hoja de estilos, por lo que es necesario agregar " !important" (sin las comillas) antes del punto y coma (;) del final de cada instrucción que no se refleja en el exporador.