[Sergio Iglesias](https://sergioiglesias.net) · Blog sobre Joomla # Cómo crear un nuevo estilo de módulo en una plantilla Joomla! [ Añadir a fuentes preferidas ](https://www.google.com/preferences/source?q=sergioiglesias.net) 20 Abril 2016 [Tips Joomla](https://sergioiglesias.net/blog/joomla) 3 - 5 minutos Visitas: 10463 - - [ Formación Joomla ](https://sergioiglesias.net/etiquetas/formacion-joomla) - [ Desarrollo Joomla ](https://sergioiglesias.net/etiquetas/desarrollo-joomla) - [ Plantillas Joomla ](https://sergioiglesias.net/etiquetas/plantillas-joomla) ![](https://sergioiglesias.net/images/blog/tips/estilo-modulo-plantilla-joomla.jpg) Los **estilos de los módulos** te permiten presentar la información o contenido de un módulo de una forma determinada. Por defecto en Joomla! tenemos varios definidos y que podemos utilizar e incluso modificar mediante override. Lo bueno de Joomla! es que también te permite crear los que necesites para poder adaptarlos al diseño de tu plantilla. ## Qué es y dónde se declara un estilo de módulo en Joomla! Como ya te he comentado, se trata de la forma en que se va a presentar la información de un módulo (título, contenido y otros parámetros de configuración como [sufijos](https://sergioiglesias.net/index.php?option=com_content&view=article&id=372:como-crear-clase-estilo-modulos-plantilla-joomla&catid=19:joomla&Itemid=35), etiqueta del módulo, etiqueta de encabezado, tamaño de Bootstrap...). Esta información se declara, generalmente, en el fichero index.php de la plantilla cuando añades la línea de código que va a mostrar un módulo: ``` ``` ### Estilos de módulo nativos de Joomla! También te he comentado que, por defecto, tenemos los siguientes estilos definidos en Joomla! (se ponen en el atributo style): - **rounded**: presenta la información con un estilo con bordes redondeados. - **none**: presenta la información sin estilos. - **table**: presenta la información en formato tabla. - **horz**: presenta la información también en formato tabla. - **xhtml**: presenta la información en formato HTML (con divs). - **html5**: presenta la información en formato HTML (con Bootstrap). - **outline**: presenta la información de previsualización del módulo. Tienes toda la información en la documentación oficial de Joomla!: [Módulo estándar Chromes](https://docs.joomla.org/Standard_Module_Chromes/es) (también [en inglés](https://docs.joomla.org/Standard_Module_Chromes)). *Cabe decir que si no se pone nada en el atributo style, se toma por defecto el valor "none".* *También es importante decir que casi todas las plantillas desarrolladas tienen overrides de estos estilos y que cuentan con propios desarrollados ([según el framework en el que se basen](https://sergioiglesias.net/index.php?option=com_content&view=article&id=277:frameworks-de-desarrollo-de-plantillas-joomla&catid=24:general&Itemid=46)).* ## Cómo crear un nuevo estilo de módulo A continuación de voy a mostrar los pasos que hay que hacer para **crear un nuevo estilo de módulo** en una plantilla Joomla!. Para ello voy a utilizar, como suelo acostumbrar en estos tutoriales, la plantilla Protostar (que es la que viene por defecto en una instalación Joomla! El fichero en donde hay que declarar tanto los overrides como los nuevos estilos de módulos es en **modules.php** que se encuentra localizado en el directorio "templates/mi\_plantilla/html". *Si no se encuentra este fichero es que la plantilla no tiene overrides ni estilos propios.* Si te fijas en el fichero **modules.php** de la plantilla protostar verás que hay **2 estilos propios**: "no" y "well". ![estilos modulos propios protostar](https://sergioiglesias.net/media/cached-resp-images//images/blog/tips/estilosmodulos/estilos-modulos-propios-protostar_1230.png?version=5b58c1bd2460f5ea7c1ee2476294b3af) A la hora de utilizarlos en un módulo, lo podemos ver en la configuración del módulo dentro de la pestaña de "Avanzado", en el último campo llamado "Estilo del módulo" (que por defecto tendrá el que se haya definido para esa posición - como se ve en el código de declaración jdoc - o none si no tiene nada en este atributo). ![estilos modulos propios protostar back](https://sergioiglesias.net/media/cached-resp-images//images/blog/tips/estilosmodulos/estilos-modulos-propios-protostar-back_1230.png?version=89b24a178f38882095df424989845b68) Según puedes ves en el código, el primero, estilo no (`modChrome_no`), únicamente muestra el contenido del módulo sin nigún formato (no muestra ni título ni tiene en cuenta otros parámetros de configuración). El segundo, estilo well (`modChrome_well`), muestra el contenido en un div con la clase well ([propio de Bootstrap](http://getbootstrap.com/2.3.2/components.html#misc)) y tiene en cuenta los siguientes parámetros de configuración: - **Etiqueta del módulo** (`$moduleTag`): por defecto div (pero puede ser section, aside, nav, address o article). - **Tamaño Bootstrap** (`$bootstrapSize`): por defecto 0 (pero puede ser cualquier valor de 0 al 12). - **Clase del módulo** (`$moduleClass`): para los sufijos (se añadirán a la clase well que viene por defecto). - **Etiqueta de encabezado** (`$headerTag`): por defecto h3 (pero puede ser h1-h6, p o div). - **Clase de encabezado** (`$headerClass`): por defecto no lleva nada (pero se puede utilizar cualquier clase existente o crearla posteriormente en la hoja de estilos). Otras cosas a tener en cuenta en este código son los siguientes condicionales, if: - **Si hay contenido** (`$module->content`): en este caso muestra el contenido del módulo. - **Si se marca "Mostrar título"** (`$module->showtitle`): en este caso muestra el título del módulo dentro contenido (`$module->title`). Ahora que ya tienes una visión clara de lo que puede tener un estilo de módulo, te voy a mostrar cómo crear un nuevo. Lo voy a llamar "nuevo" y como características mostrará el contenido de un módulo en un div con color azul ([del tipo "alert-info" propio de Bootstrap](http://getbootstrap.com/2.3.2/components.html#alerts)). 1. Crear la función: `modChrome_nuevo`. 2. Copiar el mismo código que el estilo "well". 3. Modificamos el código de la línea `class="well...` por `class="alert alert-info...`. Te muestro el código completo: ``` function modChrome_nuevo($module, &$params, &$attribs) { $moduleTag = $params->get('module_tag', 'div'); $bootstrapSize = (int) $params->get('bootstrap_size', 0); $moduleClass = $bootstrapSize != 0 ? ' span' . $bootstrapSize : ''; $headerTag = htmlspecialchars($params->get('header_tag', 'h3')); $headerClass = htmlspecialchars($params->get('header_class', 'page-header')); if ($module->content) { echo '<' . $moduleTag . ' class="alert alert-info ' . htmlspecialchars($params->get('moduleclass_sfx')) . $moduleClass . '">'; if ($module->showtitle) { echo '<' . $headerTag . ' class="' . $headerClass . '">' . $module->title . ''; } echo $module->content; echo ''; } } ``` Ahora puedes ver que en el campo desplegable de "Estilo del módulo" de la pestaña "Avanzado" aparece el nuevo estilo creado "nuevo". ![estilos modulos nuevo protostar back](https://sergioiglesias.net/media/cached-resp-images//images/blog/tips/estilosmodulos/estilos-modulos-nuevo-protostar-back_1230.png?version=582c14d660619db9130d18b4abc1bc1a) El restultado de este módulo lo puedes ver a continuación: el primero, "Popular Tags", utiliza el estilo well y el segundo, "Latest Articles", utiliza el estilo nuevo. ![estilos modulos front](https://sergioiglesias.net/media/cached-resp-images//images/blog/tips/estilosmodulos/estilos-modulos-front_1230.png?version=bfb656c5ff6e48a611efec3bcdf65a17) --- Hasta aquí este pequeño tutorial sobre **cómo crear un estilo de módulo en una plantilla Joomla!** Espero que te haya resultado de interés. Y recuerda que puedes aprender más sobre **desarrollo de plantillas Joomla!** en el [curso gratuito que te ofrezco](http://www.sergioiglesias.net/curso-online-joomla-desarrollo-plantillas/). [ Añadir a fuentes preferidas ](https://www.google.com/preferences/source?q=sergioiglesias.net)Gratuito · Primer paso recomendado ### ¿No sabes bien en qué estado está tu web Joomla? Antes de decidir si hay que arreglar, migrar o mantener, conviene saber qué está pasando. Reviso el estado de tu web — versión de Joomla, extensiones y lo que se pueda ver — y te digo qué conviene hacer y en qué orden. Versión de Joomla y ruta de actualización Estado de extensiones Plan de acción con recomendaciones Informe por email + HTML [ Solicitar revisión gratuita sin compromiso ](https://sergioiglesias.net/revision-joomla-gratis)Respuesta en 24–48 h laborables [![Sergio Iglesias](https://sergioiglesias.net/images/sergiois-joomla-web.png)](https://sergioiglesias.net/sobre-mi)##### Consultor Web Joomla Senior Soy [Sergio Iglesias](https://sergioiglesias.net/sobre-mi). Ayudo a empresas, instituciones y profesionales a convertir su web en una herramienta real de negocio: segura, escalable y fácil de gestionar. Soy especialista en migraciones complejas de Joomla sin pérdida de datos, desarrollo de extensiones y plantillas a medida y ofrezco mantenimiento y evolución de tu CMS. [](https://x.com/sergiois "Sergio Iglesias en X") [](https://www.linkedin.com/in/sergiois "Sergio Iglesias en Linkedin") [](https://github.com/sergiois "Sergio Iglesias en Github") [](https://sergiois.github.io/ "Extensiones Joomla de Sergio Iglesias") ### Suscríbete a mi newsletter ¿Te ha gustado el artículo? Suscríbete a mi newsletter y recibe contenido exclusivo. Podrás hacer gratis un **Curso de desarrollo de plantillas Joomla**. [Quiero apuntarme!](https://sergioiglesias.net/newsletter) ### 2 comentarios - [ ![](https://www.gravatar.com/avatar/b66fba1a78a3ea7b41e98a8e43ec390a0f33e7df0759e8a53879ec6be4be9d0f?s=48&r=G&d=mp) ](https://www.gravatar.com/b66fba1a78a3ea7b41e98a8e43ec390a0f33e7df0759e8a53879ec6be4be9d0f) sergiois [ Sábado, 21 Enero 2017 10:57 ](https://sergioiglesias.net/blog/joomla/como-crear-nuevo-estilo-modulo-plantilla-joomla?akengage_cid=164#akengage-comment-164) Hola Evy,<br /><br />Me alegro que te vaya bien los tutoriales.<br /><br />En cuanto a tu pregunta decirte que sí es posible. Puedes hacerlo a través de una imagen o, mejor, a través de CSS (aquí te dejo una web en la que puedes crearlos y coger el código: http://www.cssmatic.com/es/gradient-generator).<br /><br />Para integrarlo con Joomla puedes hacerlo a través de clases e integrando el código css generado a partir de la herramienta anterior.<br /><br />Gracias por comentar! ;) - [ ![](https://www.gravatar.com/avatar/1937417d6cea0589edba5172863642a4fe9d1a69ef48f598df6b6a83548faba8?s=48&r=G&d=mp) ](https://www.gravatar.com/1937417d6cea0589edba5172863642a4fe9d1a69ef48f598df6b6a83548faba8) Evy [ Sábado, 21 Enero 2017 07:08 ](https://sergioiglesias.net/blog/joomla/como-crear-nuevo-estilo-modulo-plantilla-joomla?akengage_cid=163#akengage-comment-163) Voy por un segundo tutorial y me ha venido muy bien. Gracias por tu ayuda con esto ¿Es posible colocar color de fondo en degradado o degradé, para un módulo?<br /><br />Mil gracias (Y) ### Deja tu comentario En respuesta a Some User Nombre \* Dirección de email \* Texto del comentario \* Doy mi consentimiento para que mi información personal sea recopilada y procesada por este sitio para aceptar y mostrar mi comentario, así como para notificarme sobre las respuestas a él según la [Declaración de privacidad](https://sergioiglesias.net/politica-privacidad) del sitio. \*