¿Como enmarcar modulos?

[JahierFP]

Saludos, nose si esta bien utilizado el término "enmarcar" pero hace referencia a mi necesidad. Trabajando en mi propia plantilla joomla, me enfrento a querer "enmarcar" determinados modulos como por ejemplo el de la botonera principal, para ser mas especifico les muestro el ejemplo de una plantilla:




Supongo que esa imagen esta fraccionada en 3 partes; 2 que contienen los bordes superiores e inferiores y una que hace de los costados repitiendoce.

¿Como logro esto?

[JahierFP]

...bueno se me complico este tema, pero investigando pude llegar a la solucion q deseaba partiendo desde sufijo de la clase de módulo que es lo que definimos en cada modulo nuevo que creamos o que ya este creado, por ejemplo si abrimos el modulo Menu Principal y vemos Parametros Avanzados veremos "Sufijo de la clase del módulo" en este caso es _menu , bueno esto es para diferenciar los modulos unos de otros y de esa forma darles un estilo diferente a cada uno.

Ahora bien, la forma que aprendi de aplicar el sufijo es despues de moduletable en nuestra hoja de estilos CSS, si desean practicar aki les dejo el codigo a aplicar, ustedes si desean pueden quitar por ejemplo los colores, bordes y dejar la imagen, recuerden indicar bien la ruta de la imagen.

Código:

.moduletable_menu{
.margin-bottom:1em;
.padding:0 10px 10px
.overflow:hidden;
.border:2px dashed #000;
.color:#fff;
.background:#A30808 url(../img/marco.png) repeat-x left bottom;
.}

Todavia no estoy bien %100 en este tema, pero ya con esto podemos partir hacia un rumbo. Si alguien puede aplicar mas info o corregirme bienvenido sea.

[Larenz]

Bueno voy a profundizar un poquito. Recordemos que Joomla trae estilos (CSS) pre-definidos a usar en cualquier plantilla. Ejemplos:

-> componentheading - para los títulos de las noticias.
-> pollstableborder - la tabla que enmarca las encuestas.
-> blog_more - estilo para enlaces a Mas Artículos.
-> moduletable - para los módulos.

Ahora, en cada módulo tenemos la opción de trabajar con sufijos; al igual que incluso en cada Item de Menú podemos trabajar con sufijos para mostrar una página.

Partiendo de la explicación de JahierFP, veremos que al mostrar un módulo normalmente se encerrará bajo la clase moduletable, y al agregarle un sufijo quedaría moduletable_sufijo. Veamos un ejemplo:

Código:

div.moduletable_enlaces {
    margin-bottom: 1em;
    padding: 0 10px 10px;
    border: 1px solid #CCC;
    background: transparent;
    color: #333;
}

Cabe señalar que los parámetros que definen el estilo no deben llevar un punto al comenzar el parámetro a como lo puso JahierFP. Eso es incorrecto. Ahora recordemos que los módulos tienen encabezados que están distinguidos por el tag h3, a los cuales también hay que definirlos o se verán distorsionados a la hora de presentarlos. Ejm:

Código:

div.moduletable_enlaces h3 {
    font-size: 115%;
    font-family: Georgia, "Times New Roman", Verdana, sans-serif;
    margin: 0 0 10px 0;
    padding: 10px 0;
    border-bottom: 1px solid #CCC;
}

Digamos que tu módulo contendrá enlaces y usarás las etiquetas ul y las etiquetas li éste sería un ejemplo:

Código:

div.moduletable_enlaces ul {
    margin: 10px 0 10px 0;
    background: none;
}

div.moduletable_enlaces ul li {
    padding: 3px 0;
    list-style-type: disc;
}

Esos son algunos ejemplos que ayudarán a entender la personalización individual de cada módulo.

Es necesario que sepan también que hoy en día muchas plantillas traen predefinadas ciertas opciones para sus módulos mediante archivos .php y .js y mediante la inserción de la carpeta html en la cual se agregan muchos datos para personalizar la presentación de módulos, secciones, categorías, etc.

Personalmente he editado las etiquetas o clases componentheading por los h1 para lograr una mejor semántica en el código. Esto se logra a como dije: agregando la carpeta html y agreando archivos adicionales. Mi objetivo no es explicar como hacer esto, sino comentarles que los estilos pueden verse afectados por estos cambios en una plantilla.

[lordlol]

gracias Larenz por tu explicación ahora si no es mucha molestia podrías explicar como se agrega la carpeta html y lo de los archivos adicionales.

[richicasas]

En la carpeta de tu template, agregas una nueva carpeta llamada HTML, ahi debes colocar por cada componente y modulo una carpeta que se debe llamar igual al modulo o componente que vas a modificar. y dentro de dicha carpeta deben ir los archivos que tu encuentras en la carpeta VIEWS de los componentes o modulos. Normalmente se llaman default.php. y Ahi modificas la presentacion de los datos.

Se me olvidaba algo, en el XML de la plantilla debes indicar los archivos HTML que subas para poder que funcione.Asi se pone en el archivo XML, lo que puede contener la carpeta HTML

Código PHP:

<filename>html/com_content/article/default.php</filename>
        <filename>html/com_content/article/index.html</filename>
        <filename>html/com_content/category/blog_item.php</filename>
        <filename>html/com_content/category/index.html</filename>
        <filename>html/com_content/frontpage/default_item.php</filename>
        <filename>html/com_content/frontpage/index.html</filename>
        <filename>html/com_content/index.html</filename>
        <filename>html/com_content/section/blog_item.php</filename>
        <filename>html/com_content/section/index.html</filename>
        <filename>html/index.html</filename>
        <filename>html/modules.php</filename>
        <filename>html/mod_banners/default.php</filename>
        <filename>html/mod_banners/index.html</filename>
        <filename>html/mod_login/default.php</filename>
        <filename>html/mod_login/index.html</filename>
 

[lordlol]

Muchas gracias excelente tu explicacion.

[JahierFP]

Me sumo a los agradecimientos, gracias chicos muy claro