Esta es la distribución en CSS de las areas donde se puede cambiar el color de fondo (mas info en
http://joomlabcn.blogspot.com/2010/07/gestion-de-plantillas.html)
A tener en cuenta que el ancho de algunas areas se decide en la sentencia de estilo de index.php tomado de un parámetro
style type="text/css"
#ja-header,#ja-mainnav,#ja-container,#ja-botsl,#ja-footer {width: 950px;margin: 0 auto;}
#ja-wrapper {min-width: 951px;}
/styleContenido de index.php y sus asociados en template.css, etc.En el caso de ancho fijo de 150px y usando LEFT y RIGHT
Estructura generalLo engloban todo BODY y JA_WRAPPER
- body id="bd" class="fs5 FF"
- div id="ja-wrapper"
Dentro está estructurado en 3 DIVS wrapper (que ocupan todo el ancho de la pantalla)
- div id="ja-headerwrap" - CABECERA
- div id="ja-containerwrap" - CONTENEDOR DE COLUMNAS IZQ, CONTENIDO Y DERECHA
- div id="ja-footerwrap" - PIE DE PAGINA
body id="bd" class="fs5 FF"
Ocupa toda la pantalla. Define la fuente (familia, tamaño, color) y el contorno de toda la página.
html, body, form, fieldset { margin: 0; padding: 0;} NO TOCAR, el margen del fondo no va bien.body { background: Red; font-family: Arial, Helvetica, sans-serif; line-height: 150%;} AQUI SE DECIDE LA FAMILIA DE LAS LETRAS Y EL INTERLINEADO.body#bd { color: #2C2C2C; background: Yellow; padding: 20px;} COLOR DE LOS MARGENES SUPERIOR E INFERIOR (Y EN SU CASO LATERALES), y el color de las letras de casi todo.body.fs5{ font-size: 14px;} TAMAÑO DE LAS LETRAS DE TODO (LOS Hx SE AMPLIAN ACORDE) SE DECIDE EN LOS PARAMETROS DE LA PLANTILLAdiv id="ja-wrapper" wrapper centra todo dentro de body. - #ja-wrapper { width: 100%; margin: 0; background: Red; /* LCLIS Color de fondo entre principio de pantalla y header, header y contenido, contenido y footer, footer y final de pantalla */ padding-bottom: 5px; /* LCLIS espacio libre entre footer y final de pantalla */ PADDING-TOP: 5PX; /* LCLIS espacio libre entre header y principio de pantalla */}
- si se define ancho en pixels, por ejemplo 950, hay que tener en cuanta de poner margin: 0px auto ; para centrar, y también el ancho definido como parámetro de ja_purity, que debe ser menor.
div id="ja-headerwrap"
Cabecera (todo el ancho)
- #ja-headerwrap { background: Green; /* LCLIS color laterales cabecera */ color: #CCCCCC; line-height: normal; height: 120px; margin-bottom: 5px; /* LCLIS espacio entre header y contenido */
div id="ja-containerwrap"/"ja-containerwrap2"/
Contenedor de col. izquierda, derecha y contenido, situado entre header y footer
Dentro de ellos anidados están ja-containerwrap2, ja-container y ja-container2
- #ja-containerwrap { background: Aqua; } LCLIS sin margenes no sirve para nada
- #ja-containerwrap2 { background: DarkGray; } COLOR DE FONDO DEL CONTAINER A IZQUIERDA Y DERECHA
div id="ja-footerwrap"
Pié de Página
- #ja-footerwrap { clear: both; background: Fuchsia; /* LCLIS fondo de los laterales del footer */ margin-top: 5px; /* LCLIS espacio entre contenido y footer */ height: 20px; /* LCLIS altura del footer */}
Estructura del Container (engloba columna izquierda, contenido y columna derecha)
div id="ja-container"
.div id="ja-container2" class="clearfix"
..div id="ja-mainbody" class="clearfix" >>>> MAINBODY = CONTENT + COL1
...div id="ja-contentwrap"
.../div
...div id="ja-col1"
.../div
../div
..div id="ja-col2" >>> COL 2
../div
./div
/div
div id="ja-container" div id="ja-container2" class="clearfix"
Contiene left, contenido y right
- #ja-container { background: Gold; /* LCLIS: no afecta - url(../images/c-bg1.gif) repeat-y 18% 0; */}
#ja-container2 { padding: 20px ; background: MistyRose; /* LCLIS fondo de todo el contenedor (lo que rodea left, contenido y right) */}
div id="ja-mainbody" class="clearfix"
Columna izquierda y Contenido
- #ja-mainbody { float: left; width: 80%; /* LCLIS ancho de columna izquierda + contenido en relacion a CONTENT. El resto para Col Derecha (#ja-col2)*/}
div id="ja-contentwrap", div id="ja-content"
Contenido
- #ja-mainbody #ja-contentwrap { float: right; width: 75%; /* LCLIS ancho del contenido en relación a Mainbody (col izq + contenido). El resto para columna izquierda (#ja-col1) */}
- #ja-contentwrap { min-height: 300px; height: auto;}
- #ja-content { /* -- CONTENIDO -- */ padding: 10px; background-color: White; margin-right: 10px; margin-left: 10px; margin-top: 0px; color: #2C2C2C; }
div id="ja-col1"
Columna izquierda
- #ja-col1 { /* LCLIS Ancho Columna izquierda. A tener en cuenta con el ancho de ja-contentwrap */ float: left; width: 24.99%; overflow: hidden;}
div id="ja-col2"
Columna derecha
- #ja-col2 { float: right; width: 20%; /* LCLIs ancho columna derecha. A tener en cuenta el ancho de ja-mainbody */ overflow: hidden;}
Estructura del Menu vertical
Dentro de div id="ja-col1"
div class="moduletable_menu"
h3 CABECERA MENU VERTICAL /h3
ul class="menu"
li id="current" class="active item1" item escogido /li
li class="item54" a href="...span otro item... /ul
/div
- div.moduletable_menu { padding: 0 0 20px; margin-bottom: 15px; background: url(../images/hdot.gif) repeat-x bottom;}
- div.moduletable_menu h3 { padding: 0 0 8px; margin: 0; color: #7BA566; font-size: 125%; font-weight: bold; text-transform: uppercase; }
La clase menu con ul, li, etc está en menu.css
Estructura del Contenido
Dentro de div id="ja-content"
div class="componentheading" La Bohème Cafè /div
table class="blog" cellpadding="0" cellspacing="0"
tr
td valign="top"
div
div class="contentpaneopen"
div class="article-content"
CONTENIDO ....
/div
/div
span class="article_separator" /span
/div
/td
/tr
/table
Estructura de la columna derecha
Dentro de div id="ja-col2"
Ejemplo newsflash
div class="jamod module" id="Mod25"
h3 class="show" span NOTICIAS /span /h3
div class="jamod-content"
table class="contentpaneopen"
tr td class="contentheading" width="100%"
a href="/test/index.php/es/noticies-i-novetats/2-newsflash-1" class="contentpagetitle"
TÍTULO
/a
/td /tr /table
table class="contentpaneopen"
tr td valign="top"
CONTENIDO ARTÍCULO
/td /tr /table
/div
- .contentheading { font-size: 150%; font-weight: bold; /* MODIFICAR FORMATO CABECERA NOTICIA */}
Caso de FULL (sin left ni right)
Se usan
- #ja-containerwrap-f { background: Red; /* LCLIS sin right ni left */}
- #ja-mainbody-f { float: none; width: 100%;}
- #ja-containerwrap-f #ja-container,#ja-containerwrap-f #ja-container2 { background: White; /* LCLIS margen entre wrap y contenido */ /* none; */}
