Módulos
Quando um módulo é chamado no index.php, ele tem várias opções de como pode ser exibido. A sintaxe é:
mosLoadModules(‘$position_name’[, $style] )
A $style é opcional e pode assumir os valores 0, 1, -1, -2 or -3.
0 = (modo padrão) Módulos são mostrados em uma coluna. O exemplo a seguir mostra a saída:
<table cellpadding=”0″ cellspacing=”0″ class=”moduletable”>
<tr>
<th valign=”top”>Module Title</th>
</tr>
<tr>
<td>Module output</td>
</tr>
</table>
1 = Módulos são mostrados horizontalmente. Cada módulo é mostrado em uma celula de uma tabela que as contém. O exemplo a seguir mostra a saída:
<!– Module wrapper –>
<table cellspacing=”1″ cellpadding=”0″ border=”0″ width=”100%”>
<tr>
<td align=”top”> <table cellpadding=”0″ cellspacing=”0″ class=”moduletable”>
<tr>
<th valign=”top”>Module Title</th>
</tr>
<tr>
<td> Module output</td>
</tr>
</table>
</td>
<td align=”top”> <!– …the next module… –>
</td>
</tr>
</table>
-1 = Módulos são mostrados com uma saída crua e sem títulos. O exemplo a seguir mostra a saída:
Module Output
-2 = Módulos são mostrados no formato CSS englobado por um <div>. O exemplo a seguir mostra a saída:
<div class=”moduletable”>
<h3>Module Title</h3>
Module output
</div>
-3 = Módulos mostrados nesse formato permite que se possa ter bordar arredondadas. Se esse $style é usado, o nome da classe do <div> muda de moduletable para module. O exemplo a seguir mostra a saída:
<div class=”module”>
<div> <div> <div>
<h3>Module Title</h3>
Module output
</div> </div> </div>
</div>
Como você pode ver as opções de CSS (-1, -2 e -3) são o suficiente para você facilmente colocar o estilo em suas páginas O autor não recomenda que use o sufixo 0 (padrão) ou 1 , a menos que seja totalmente necessário.
Para desenvolver nosso template, nós iremos colocar os módulos com $style de “-2″ para todos os nosso módulos:
<body>
<div id=”wrap”>
<div id=”header”>
<?php echo $mosConfig_sitename; ?>
<?php mospathway() ?>
</div>
<div id=”main-body”>
<div id=”content”>
<div class=”inside”>
<?php mosLoadModules(‘top’,-2);?>
<?php mosMainBody(); ?>
</div></div>
<div id=”sidebar”>
<div class=”inside”>
<?php mosLoadModules(‘left’,-2);?>
</div></div>
</div> <!–end of main-body–>
<div id=”sidebar-2″>
<div class=”inside”>
<?php mosLoadModules(‘right’,-2);?>
</div></div>
<div id=”footer”>
<?php include_once( $mosConfig_absolute_path .’/includes/footer.php’ ); ?>
</div>
</div> <!–end of wrap–>
</body>
Observe que não podemos colocar esses estilos de módulos em nenhum dos módulos a seguir..
- <?php echo $mosConfig_sitename; ?>
- <?php mospathway() ?>
- <?php mosMainBody(); ?>
- <?php include_once( $mosConfig_absolute_path .’/includes/footer.php’ ); ?>
Mudando os módulos para uso do CSS reduz o número de tabelas para 14. Vamos agora adicionar um simples estilo para o template para ter o resultado abaixo:
Primeiramente nós colocamos o título do site dentro da tag <H1>. Isso é mais semanticamente correto e iremos também ajudar no SEO.
<h1><?php echo $mosConfig_sitename; ?></h1>
Nós também iremos adicionar algum estilo aos módulos com uma borda e um fundo para o cabeçalho.
Nosso customize.css agora se parece com isso:
/*Compass Design Customize.css file */ * {
margin:0;
padding:0;
}
h1,h2,h3,h4,h5,h6,p,blockquote,form,label,ul,ol,dl,fieldset,address{
margin:0.5em 0;
}
ul{
margin-left:2em;
}
fieldset{
padding:.5em;
}
body{
font-size:76.1%;
font-family:Verdana,Arial,Helvetica,sans-serif;
line-height:1.3em;
margin:1em 0;
}
#wrap{
border:1px solid #999;
background: url(../images/threecol-r.gif) repeat-y 75% 0;
height:100% !Important;
height:1%;
}
#wrap-inner {
background: url(../images/threecol-l.gif) repeat-y 25.125% 0;
height:100% !Important;
height:1%;
}
#header{
border-bottom: 1px solid #999;
padding:10px;
}
#footer{
border-top: 1px solid #999;
padding:5px;
}
a{
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
h1,.componentheading{
font-size:1.7em;
line-height:1.7em;
}
h2,.contentheading{
font-size:1.5em;
line-height:1.5em;
}
h3{
font-size:1.3em;
line-height:1.3em;
}
h4{
font-size:1.2em;
line-height:1.2em;
}
h5{
font-size:1.1em;
line-height:1.1em;
}
h6{
font-size:1em;
line-height:1em;
font-weight:bold;
}
#footer,.small,.createdate,.modifydate,.mosimage_caption{
font:0.8em Arial,Helvetica,sans-serif;
color:#999;
}
.moduletable{
margin-bottom:1em;
padding:0 10px;
/*padding for inside text*/ border:1px #CCC solid;
}
.moduletable h3{
background:#666;
color:#fff;
padding:0.25em 0;
text-align:center;
font-size:1.1em;
margin:0 -10px 0.5em -10px;
/*negative padding to pull h3 back out from .moduletable padding*/ }
Publicado por Sampahio Damaceno em 22/Jun/2007 às 10:13 am
Ajudou muito, algumas velhas dúvidas, pricipalmente quanto aos módulos.
Valeu!
[]´s
Publicado por Super PRoton em 10/Jun/2008 às 4:09 pm
Poxa, eu tentei fazer isso mas meu joomla é o 1,.5.3!:( Vc sabe como faço para tirar as tabelas dos conteúdos? fica tão feio aquels tabelas!:( se puder me ajudar, me manda um e-mail? soude83@hotmail.com
valeeeeeeeeeeeeeeeeu!