photo credit: Louis Engival

Muitos parâmetros de templates são possíveis – variação de cores, XHTML, HTML5 etc. Quando um site precisa ter flexibilidade no layout para mostrar diferentes tipos de conteúdo, pode-se usar variáveis baseadas nos countModules ou criar opções de layout através das configurações de parâmetro do template.

Nesse exemplo, vamos planejar um template com três colunas com largura variável, como mostra a ilustração abaixo.

No arquvo templateDetails.xml adicione as lihas a seguir:

<config>
   <fields name="params">
      <fieldset name="basic">
         <field name="layout" type="list" default="50" label="Escolha laterais"
            description="Controle da largura das barras laterais e da área de conteúdo">
            <option value="50">esquerda e direita</option>
            <option value="70">somente direita</option>
            <option value="80">somente esquerda</option>
            <option value="100">sem barras laterais</option>
         </field>
      </fieldset>
   </fields>
</config>

Obs.: dentro de <fieldset name=”basic”> pode-se incluir mais parâmetros, dentro da tag <field>. Os parâmetros criados aparecerão no Gerenciador de Temas. Para ativá-los no template, é preciso:

• Definir uma variável no linha PHP que já está lá, nas primeiras linhas do código do template

<?php defined ('_JEXEC') or die; $layout=$this->params->get('layout'); ?>

• Criar as divs para barras laterais e conteúdo e usar os valores de parâmetros em sufixos de classes ou id.

<div id="barralateral-<?php echo $layout; ?>">
        <jdoc:include type="modules" name="position-7" />
</div>
<div id="conteudo-<?php echo $layout; ?>">
        <jdoc:include type="message" />
        <jdoc:include type="component" />
</div>
<div id="barralateral2-<?php echo $layout; ?>">
        <jdoc:include type="modules" name="position-6" />
</div>

• Todas as três div’s serão sempre escritas. Crie todas as possibilidade de estilo baseados no parâmetro do layout

.barralateral {width:20%; float:left;}
#barralateral-70, #barralateral-100 {width:0;}
.barralateral2 {width:30%; float:right;}
#barralateral2-80, #barralateral2-100 {width:0;}
#conteudo-50 {width:50%; float:left;}
#conteudo-70 {width:70%; float:left;}
#conteudo-80 {width:80%;}
#conteudo-100 {width:100%;}

• Quando se instala um tema(template), um estilo é criado usando os valores padrão. Duplique esse estilo com um novo nome. Crie mais três estilos.
• Atribua cada um dos quatro estilos de template a quatro ítens de menu diferente.
• Atribua os módulos as páginas onde eles devem aparecer. Por exemplo: na página com opção sem barras laterais, tanto os módulos da postion-6 quanto da position-7 deve estar despublicados.
• Se tudo estiver certo, cada uma das páginas apresentará o layout conforme configurado.

Se esse artigo foi útil para você, apoie esse projeto!

*Baseado em um tutorial de Barb Ackemann – http://irislines.com/blog.html