Feeds:
Posts
Comentários

Archive for the ‘CSS’ Category

Testando a versão beta do Joomla 1.5 e podemos perceber que houve uma boa mudança em relação ao código gerado pelo módulo menu.

Até a versão recente, 1.0.x não é possível sem hacks, fazer tab menu. Empresas que oferecem esse tipo de template – como é o caso do Rockettheme – fizeram criando um php que para gerar o próprio código para menu, para depois aplicar o estilo nas tabs.

O grande problema é que a classe quando um botão estava ativo ficava na tag “<a” e não na tag “<li”.

Código gerado* pelo Joomla 1.0.x (módulo menu setado para flat list).

<ul>
<li><a href=””>Item 1</a></li>
<li><a href=””>Item 2</a></li>
<li><a href=”” class=”active”>Item 3</a></li>
<li><a href=””>Item 4</a></li>
</ul>

Código gerado* pelo Joomla 1.5 (módulo menu setado para list – nova opção)

<ul>
<li><a href=””>Item 1</a></li>
<li><a href=””>Item 2</a></li>
<li class=”active”><a href=””>Item 3</a></li>
<li><a href=””>Item 4</a></li>
</ul>

O simples fato da classe ter mudado para o “li” faz uma grande diferença. No próximo capítulo estarei mostrando um código que poderá ser usado para criar tab menu para Joomla 1.5.

* – O código gerado não são exatamente esses, mas para fins didáticos, tenha isso como verdade. Não será difícil adaptar para um template Joomla.

Anúncios

Read Full Post »

Resolvi traduzir o tutorial oficial de criação de template sem uso de tabela para Joomla 1.0.x

A tradução está meio nas coxas, não tive tempo pra revisar, mas espero que ajude. Não irei tirar nenhuma dúvida, pois não fui eu quem elaborou o tutorial.

Introdução

Que é um Template para Joomla?

Processo de Design em Servidor Local(Localhost)

W3C e Tableless Design

Os Componentes do Template

Usando o CSS para Criar um Layout

Módulos

Menus

Escondendo Colunas

Conclusão

Apêndice A: Dicas e Truques

A versão original em inglês, você poderá encontrar aqui:

http://dev.joomla.org/content/view/1136/79/

Read Full Post »

Apêndice A: Dicas e TruquesLarguras Variáveis da Página, Cantos Arredondados, Texto Redimendionáveis e mais

Larguras Variáveis de Página

O design discutido aqui é de página fluida. Ele irá ser redimensionado com a janela do navegador mantem uma margem de 10% do lado direito e do lado esquerdo. Mesmo que nós tenhamos configurado a largura das colunas em porcentagens, nós também podemos definir um valor fixo para a largura mudando o #width para um número absoluto. Fazendo layout desse modo significa mais flexibilidade. É possível mudar a largura da página editando apenas uma linha.

Um aspecto que deve se tomar cuidado quando está trabalhando com layout fluido são as imagens. Qualquer sentido você necessita expandir dentro, necessita sempre estar uma parcela da cor contínua que possa expandir. Uma parte pequena da imagem é cortada geralmente e repetida então.

Fluid Image Slicing

Como você vê no exemplo acima, há uma área no meu que pode ser escalável. O CSS seria algo como isso:

background:url(../images/FluidImageSlicingMIDDLE.png) 0 0 repeat-x;

Compare com um cabeçalho que usa uma foto:

Fluid Image Slicing

Não há área que pode ser repetida e assim esse tipo de cabeçalho não pode ser usado em layout fluido.

Isso se aplica em qualquer tipo de escala, vertical ou horizontal. Devendo ter uma fração da imagem que pode ser repetida.

Uma outra vantagem de ter as larguras de coluna baseadas porcentagem do uso do template é o uso de um método de definir a largura. Usando uma folha de estilo separada, é possível dinamicamente mudar a largura de uma página baseada na preferência do usuário. Você pode ver isso em ação no Compass Design.

Cantos Arredondados

Provavelmente o design mais comum no momento é aquele que usa cantos arredondados para os boxes dos módulos. O padrão atual é usar o “-3” no estilo do módulo para produzir 3 <div>‘s. Estes três e o principal <div> .module são usados para colocar 4 imagens redondas no box.

Você poderá ver em ação no http://www.joomla.org. Aqui estão as 4 imagens:

E aqui está o código:

div.module-grey h3, div.moduletable-grey h3 {
font-family: Helvetica, Arial, sans-serif;
font-size: 1em;
font-weight: bold;
color: #333;
margin: -2px -8px 0 -8px;
border-bottom: 1px solid #cdcdcd;
padding-left: 10px;
padding-bottom: 2px;
}
div.module-grey, div.moduletable-grey {
background: url(../images/jos_box_grey_tl.png) 0 0 no-repeat;
margin: 0;
padding: 0;
margin-bottom: 20px;
}
div.module-grey div, div.moduletable-grey div {
background: url(../images/jos_box_grey_tr.png) 100% 0 no-repeat;
}
div.module-grey div div, div.moduletable-grey div div {
background: url(../images/jos_box_grey_bl.png) 0 100% no-repeat;
}
div.module-grey div div div, div.moduletable-grey div div div {
background: url(../images/jos_box_grey_br.png) 100% 100% no-repeat;
padding: 8px;
width: auto !important;
width: 100%;
}
div.module-grey ul, div.moduletable-grey ul {
margin: 10px 0;
padding-left: 20px;
}

Muitas técnicas existem para produzir borda arredondada. Many techniques exist to produce rounded corners. Um par de sites tem o sumário eles: css-discuss.incutio.com e Smiley Cat.

Boxes com larguras fixas usando 2 imagens

Pela primeira vez desenvolvida pelo Joomlashack, é possível diminuir pela metade o número de imagens usados em um box. Essa técnica irá criar boxes que podem ser escaláveis verticalmente mas não horizontalmente.

Dois tipos de imagens são usadas e são:

Two image boxes e Two Image Box

O CSS usado para produzir o efeito é:

.moduletable-box {
margin:0 0 10px 0;
padding:0 0 10px 0;
background:url(../images/bottom.png) bottom left no-repeat;
}
.moduletable-box h3 {
padding:8px 10px 6px 15px;
margin-bottom:8px;
text-align:left;
font:bold 1.1em Arial,Helvetica,sans-serif;
color:#fff;
background:url(../images/top.png) top left no-repeat;
}

Essa técnica é particularmente prática por algumas razões:

– A imagem da base do box pode ser reutilizada com diferentes cores
– O fundo de um H3 poderá ser escalável com o texto(a técnica do joomla.org não)
– Metade de tantas imagens é duas vezes mais rápido (aproximadamente) para carregar

É necessário setar o sufixo do módulo $style para “-2” para funcionar corretamente.

Boxes com largura e altura fluida usando 2 imagens

Mais uma técnica avançada foi desenvolvida pela Compass Design. setar o sufixo do módulo $style para “-3” para funcionar corretamente. De novo, cada <div> é usada para colocar os cantos de um box, contudo somente duas imagens são usadas. O sufixo -box da classe do módulo deve ser usada.

Left Fluid Box e Fluid right box

.module-box {
background: url(../images/boxright.png) top right no-repeat;
padding:0;
margin:0 0 10px 0;
}
.module-box h3 {
margin:0;
padding:0 0 4px 0;
border-bottom:#ccc 1px solid;
color: #666;
font: bold 1em Tahoma, Arial, Helvetica, sans-serif;
text-align:center;
}
.module-box div {
background: url(../images/boxleft.png) top left no-repeat;
margin:0;
padding:6px 0 0 0;
}
.module-box div div{
background: url(../images/boxleft.png) bottom left no-repeat;
padding:0 0 0 5px;
}
.module-box div div div{
background: url(../images/boxright.png) bottom right no-repeat;
padding:0 5px 5px 0;
height:auto !important;
height:1%;
}

Esta técnica irá tornar escalável vertical e horizontalmente.

Quase todas as técnicas desses dois site dá pra trabalhar em cima. Particularmente interessante o box flexível do 456bereastreet’s que pode ser customizados as bordas e os cantos. Ele somente usa uma imagem ficando fácil assim mudar as cores. A implementação dessa técnica deixamos como exercício para o leitor!

Texto Redimendionáveis

Muitos estão incorporando nos design do site a opção de modificar o tamanho dos textos possibilitando maior acessibilidade. De modo geral para melhor consistência entre os navegadores, você precisa fazer algumas poucas coisas para que possa colocar um botão para redimensionar o tamanho das letras:

1. na tag body, define um tamanho de fonte de 76%

body { font-size:76%; }

2. Define-se todas as fontes em “em”. Esse é uma unidade relativa, por exemplo:

p { font-size:1em; }

3. Fazer todos os containers dinâmicos. Um exemplo que não está funcionando é o www.joomla.org. Se você fazer ele ficar maior, o container para o menu horizontal não aumenta. Se você usa FF você pode usar as teclas (ctrl+ in FF) para aumentar a fonte. Nesse caso o layout irá quebrar.  Você pode não fixar nenhum tamanho para altura dos containers e poderá ver isso funcionando em www.joomlashack.com.

4. Abaixe o selecionador de tamanho de fonte em (http://forum.joomla.org/Themes/joomla/md_stylechanger.js)

5. Coloque o arquivo em algum lugar na pasta template que você está usando

6. Coloque as imagens A+, A-, e Reset na pasta imagens do seu template

7. Cole o código seguinte no seu arquivo index.php do seu template

<script type=”text/javascript” language=”javascript” xsrc=”<?php echo $mosConfig_live_site;?> /templates/<?php echo $mainframe->getTemplate(); ?>/____1____”>
</script>
<a xhref=”index.php” title=”Increase size” onclick=”changeFontSize(1);return false;”>
<img xsrc=”<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?> /images/____2____” alt=”” border=”0″ />
</a>
<a xhref=”index.php” title=”Decrease size” onclick=”changeFontSize(-1);return false;”>
<img xsrc=”<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?> /images/____3____” alt=”” border=”0″ />
</a>
<a xhref=”index.php” title=”Revert styles to default” onclick=”revertStyles(); return false;”>
<img xsrc=”<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?> /images/____4____” alt=”” border=”0″ />
</a>

8. Faça tudo a seguir:

– Substitua ____1____ pela posição do arquivo .js foi salvado relativo ao template
– Substitua ____2____ pelo nome de sua imagem A+
– Substitua ____3____ pelo nome de sua imagem A-
– Substitua ____4____ pelo nome de sua imagem Reset

    Obrigado para r0tt3n and his FAQ do forums do Joomla por essa técnica

    Menus Drop Down

    Por várias razões, SEO e de acessibilidade somam-se, o autor é inclinado ser contra ao flash e ao Javascript. Melhorar enfatizar que código válido de W3C e páginas cruas,  nenhuma deles é ajudada com essas aproximações. Como então iremso reproduzer esses efeitos como um menu drop down.

    Bem, há um número de técnicas que você pode se usar com CSS para ter menus maisvisualmente atrativos, todo usa listas desordenada (listas) para criar o menu. Vamos olhar um, um menu drop down.O menu se chama “suckerfish”, é CSS puro, muito limpo tem apenas 12 linhas do Javascript para o IE.

    Você pode ver demo aqui:
    www.htmldog.com/articles/suckerfish/dropdowns/example/

    Você pode encontrar manuais de como a coisa trabalha em alguns sites como:
    www.htmldog.com/articles/suckerfish/dropdowns/
    www.alistapart.com/articles/dropdowns/

    Agora, você pôde ter observado que você a saida do menu é uma lista limpa. Isto acontece pois há um módulo que trata disso fora. Seu nome é extended_menu, você pode encontrá-lo aqui:
    de.siteof.de/extended-menu.html
    [nota do tradutor: Ou no extensions.joomla.org]

    É o mais fácil se você lhe der um sufixo do menu e da classe do módulo. Eu usei o “mainnav” para ambos (você verá no CSS abaixo). Um par de outros ajustes que você necessitará:

    – Estilo do menu: list
    – Expandir o menu: Sim

    .moduletablemainnav{
    position:relative;
    z-index:100;
    font:0.9em Verdana, Arial, Helvetica, sans-serif;
    margin:0;
    padding:0;
    }
    #mainlevelmainnav,#mainlevelmainnav ul{
    float:left;
    list-style:none;
    line-height:1em;
    background:transparent;
    font-weight:700;
    margin:0;
    padding:0;
    }
    #mainlevelmainnav a{
    display:block;
    color:#f90;
    text-decoration:none;
    margin-right:15px;
    padding:0.3em;
    }
    #mainlevelmainnav li{
    float:left;
    padding:0;
    }
    #mainlevelmainnav li ul{
    position:absolute;
    left:-999em;
    height:auto;
    width:11em;
    font-weight:400;
    background:#36f;
    border:#00C 1px solid;
    margin:0;
    }
    #mainlevelmainnav li li{
    width:11em;
    }
    #mainlevelmainnav li ul a{
    width:11em;
    color:#fff;
    font-size:0.9em;
    line-height:1em;
    font-weight:400;
    }
    #mainlevelmainnav li:hover ul ul,#mainlevelmainnav li:hover ul ul ul, #mainlevelmainnav li.sfhover ul ul,#mainlevelmainnav li.sfhover ul ul ul{
    left:-999em;
    }
    #mainlevelmainnav li:hover ul,#mainlevelmainnav li li:hover ul, #mainlevelmainnav li li li:hover ul,#mainlevelmainnav li.sfhover ul, #mainlevelmainnav li li.sfhover ul,#mainlevelmainnav li li li.sfhover ul{
    left:auto;
    z-index:6000;
    }
    #mainlevelmainnav li li:hover,#mainlevelmainnav li li.sfhover{
    background:#039 url(../images/soccerball.gif) 98% 50% no-repeat;
    }

    Agora, apenas tenha certeza que você configurou corretamente os z-index, lembrando também que para ter um z-index, os elementos precisam algum tipo de ordenação, se não absoluto então relativo.

    Por último mas não menos importante, você precisa adicionar um Javascript no cabeçalho do template index.php (ou um arquivo js) para que o IE interprete o :hover corretamente.

    <script type=”text/javascript”><!–//–><![CDATA[//><!– sfHover = function() { var sfEls = document.getElementById(“mainlevelmainnav”).getElementsByTagName(“LI”); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=” sfhover”; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(” sfhover\\b”), “”); } } } if (window.attachEvent) window.attachEvent(“onload”, sfHover); //–><!]]></script>

    Esta técnica está sendo discutidas nos fóruns do Joomla.

    The author, Barrie North creates Joomla Templates and Tutorials at www.compassdesigns.net. This work is licensed under a Creative Commons Attribution NonCommercial ShareAlike 2.5 License.
    This attributation must be reproduced in full.

    Read Full Post »

    Conclusão

    Este tutorial te guia por meio de passos a criar um template para joomla. O template usa cascading style sheets (CSS) para produzir um layout com o mínimo de uso de tabelas. Este é um objetivo desejável porque significa que o código do molde é mais fácil de validar aos padrões do Consortium do World Wide Web (W3C). Tenderá também a carregar mais rapidamente, ser mais fácil de manter e melhor desempenho nos sites de busca. O template é também fonte requisitada para um desempenho melhor em SEO.

    The author, Barrie North creates Joomla Templates and Tutorials at  www.compassdesigns.net. This work is licensed under a Creative Commons Attribution NonCommercial ShareAlike 2.5 License.
    This attributation must be reproduced in full.

    Read Full Post »

    Escondendo Colunas

    Até aqui nós temos o layout the três colunas, apesar que não termos conteúdo lá. Nós queremos que seja possível “desligar” uma coluna automaticamente ou “esconder” se não houver conteúdo nele.

    Um jeito simples de se fazer é ter um trecho de código PHP no <head> de sua página.

    <?php if ( mosCountModules( ‘right’ ) <= 0) { ?>
    <style type=”text/css” media=”screen”>
    #main-body {width:100%;}
    #content{width:75%;}
    #sidebar{width:25%;}
    #sidebar-2{display:none;} </style>
    <?php } ?>

    mosCountModules irá retornar o número de módulos presentes naquela posição. Se for igual ou menor que zero, isto é, não há nada lá, então ele aplicará uma régra de estilo específica. Esse php deve aparecer DEPOIS da linha que link com o arquivo template_css.css. Isto é porque se houver duas régras idênticas de CSS, a última régra declarada irá sobrescrever todas anteriores.

    Isto, if, pode ser utilizado de modo semelhante para importar sub-arquivos de CSS.

    Escondendo o Código do Módulo

    Quando se cria colunas escondidas, é boa prática configurar os módulos para não gerarem código quano o mesmo não possui conteúdo. Se isso não for feito, as páginas irão apresentar <div>s vazias que poderão atormentar os navegadores.

    Para esconder <div> vazia, o seguinte if é usado:

    <?php if (mosCountModules(‘left’)) { ?><?php mosLoadModules( ‘left’, -2 );?> <?php } ?>

    Qualquer coisa pode ser colocado dentro do if, assim nós colocamos o <div> lá:

    <?php if (mosCountModules(‘left’)) { ?>
    <div id=”sidebar”>
    <div class=”inside”>
    <?php mosLoadModules( ‘left’, -2 );?>
    </div></div>
    <?php } ?>

    Usando o código acima, se não há nada publicado no left, então #sidebar não terá saída.

    Estados condicionais também podem ser usados. Nossa coluna sidebar também tem o user1 dentro como o left, assim nós temos um OR (ou uma coisa ou outra):

    <?php if (mosCountModules(‘left’) || mosCountModules(‘user1’)) { ?>
    <div id=”sidebar”>
    <div class=”inside”>
    <div id=”navcontainer”>
    <?php mosLoadModules(‘user1’,-2);?>
    </div>
    <?php mosLoadModules(‘left’,-2);?>
    </div></div>
    <?php } ?>

    Assim, se alguma coisa é publicada em um dos dois “left” ou “user1”, então um pedaço de código irá ser gerado.

    Usando essa técnica para na coluna da direita e esquerda, nosso arquivo index.php agora se parecerá com isso:

    <?php defined( ‘_VALID_MOS’ ) or die( ‘Direct Access to this location is not allowed.’ ); ?>
    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
    http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
    <html xmlns=”http://www.w3.org/1999/xhtml&#8221; lang=”<?php echo _LANGUAGE; ?>” xml:lang=”<?php echo _LANGUAGE; ?>”>
    <head> <meta http-equiv=”Content-Type” content=”text/html; <?php echo _ISO; ?>” /> <?php if ($my->id) { initEditor(); } ?>
    <?php mosShowHead(); ?>
    <script type=”text/javascript”> </script>
    <!–http://www.bluerobot.com/web/css/fouc.asp–&gt;
    <link href=”templates/<?php echo $cur_template; ?>/css/template_css.css” rel=”stylesheet” type=”text/css” media=”screen” />
    <?php if ( mosCountModules( ‘right’ ) <= 0) { ?>
    <style type=”text/css” media=”screen”>
    #main-body {width:100%;}
    #content{width:75%;}
    #sidebar{width:25%;
    #wrap{background:none;} </style>
    <?php } ?>
    </head>
    <body>
    <div id=”wrap”>
    <div id=”header”>
    <h1><?php echo $mosConfig_sitename; ?></h1> <?php mospathway() ?>
    </div>
    <div id=”main-body”>
    <div id=”content”>
    <div class=”inside”>
    <?php mosLoadModules(‘top’,-2);?>
    <?php mosMainBody(); ?>
    </div></div>
    <?php if (mosCountModules(‘left’) || mosCountModules(‘user1’)) { ?>
    <div id=”sidebar”>
    <div class=”inside”>
    <div id=”navcontainer”>
    <?php mosLoadModules(‘user1’,-2);?>
    </div> <?php mosLoadModules(‘left’,-2);?>
    </div></div>
    <?php } ?>
    </div> <!–end of main-body–>
    <?php if (mosCountModules(‘right’)) { ?>
    <div id=”sidebar-2″>
    <div class=”inside”>
    <?php mosLoadModules(‘right’,-2);?>
    </div></div> <?php } ?>
    <div id=”footer”>
    <?php mosLoadModules(footer,-2);?>
    </div>
    </div> <!–end of wrap–>
    </body>
    </html>

    Eu tenho também sugerido que se troque o rodapé(footer). O include footer.php torna difícil mudar seu texto. É muito mais preferível que ele seja um módulo. include makes it very difficult to change what this text is. I much prefer to have this placed as a module. Há mesmo uma posição de módulo chamada footer! Observe que no template associado com esse tutorial, Nós NÃO mudamos o código do rodapé no arquivo de download, mas eu espero ter dado uma boa opção.

    Dica para Designer

    Há muitos nomes associados com módulos em Joomla: banner, left, right, user1, footer etc. Uma coisa que você deve ficar ciente é que esses nomes não tem correspondência direta com uma posição particular. A posição dos módulos é totalmente controlável pelo design do template, como nós vimos aqui. É habitual colocar colocá-los em uma posição que seja condescendente ao nome, mas não é requerido.

    Read Full Post »

    Menus

    Configure esse controle para mostrar como o menu será mostrado. Quando você faz um módulo primeiro(menu) você irá observar que aparecerá essa mensagem dizendo pra você que um módulo está sendo criado com o mesmo nome.

    New Menu Created

    No módulo desse menu, há várias opções de como o menu será apresentado:

    Menu Options

    • Vertical
      O menu aparece como uma tabela vertical
    • Horizontal
      O menu aparece como uma tabela horizontal
    • Flat List
      O menu aparece como uma lista CSS <ul>

    No formato de tabela produz esse código:

    <div class=”moduletable”>
    <h3>Main Menu</h3>
    <table width=”100%” border=”0″ cellpadding=”0″ cellspacing=”0″>
    <tr align=”left”>
    <td> <a xhref=”http://dev.joomla.org/component/option,com_frontpage/amp;Itemid,1/&#8221; class=”mainlevel” id=”active_menu”>Home</a>
    </td>
    </tr>
    <tr align=”left”>
    <td> <a xhref=”http://dev.joomla.org/content/&#8221; class=”mainlevel” >Joomla! License</a> </td></tr> <tr align=”left”><td><a xhref=”http://dev.joomla.org/content/&#8221; class=”mainlevel” >News</a>
    </td>
    </tr>
    <tr align=”left”>
    <td> <a xhref=”http://dev.joomla.org/content/&#8221; class=”mainlevel” >Blog</a>
    </td>
    </tr>
    <tr align=”left”>
    <td> <a xhref=”http://dev.joomla.org/component/option,com_weblinks/amp;Itemid,23/&#8221; class=”mainlevel” >Links</a> </td></tr> <tr align=”left”><td> <a xhref=”http://dev.joomla.org/component/option,com_contact/amp;Itemid,3/&#8221; class=”mainlevel” >Contact Us</a>
    </td>
    </tr>
    <tr align=”left”>
    <td> <a xhref=”http://dev.joomla.org/component/option,com_search/amp;Itemid,5/&#8221; class=”mainlevel” >Search</a>
    </td>
    </tr>
    <tr align=”left”>
    <td>
    <a xhref=”http://dev.joomla.org/component/option,com_newsfeeds/amp;Itemid,7/&#8221; class=”mainlevel” >News Feeds</a>
    </td>
    </tr>
    <tr align=”left”>
    <td> <a xhref=”http://dev.joomla.org/content/&#8221; class=”mainlevel” >FAQs</a>
    </td>
    </tr>
    <tr align=”left”><td> <a xhref=”http://dev.joomla.org/component/option,com_wrapper/amp;Itemid,8/&#8221; class=”mainlevel” >Wrapper</a>
    </td>
    </tr>
    </table>
    </div>

    Como lista produzirá (o mesmo menu):

    <div class=”moduletable”>
    <h3>Main Menu</h3>
    <ul id=”mainlevel”>
    <li><a xhref=”http://dev.joomla.org/component/option,com_frontpage/amp;Itemid,1/&#8221; class=”mainlevel” id=”active_menu”>Home</a></li>
    <li><a xhref=”http://dev.joomla.org/content/&#8221; class=”mainlevel” >Joomla! License</a></li>
    <li><a xhref=”http://dev.joomla.org/content/&#8221; class=”mainlevel” >News</a></li>
    <li><a xhref=”http://dev.joomla.org/content/&#8221; class=”mainlevel” >Blog</a></li>
    <li><a xhref=”http://dev.joomla.org/component/option,com_weblinks/amp;Itemid,23/&#8221; class=”mainlevel” >Links</a></li>
    <li><a xhref=”http://dev.joomla.org/component/option,com_contact/amp;Itemid,3/&#8221; class=”mainlevel” >Contact Us</a></li>
    <li><a xhref=”http://dev.joomla.org/component/option,com_search/amp;Itemid,5/&#8221; class=”mainlevel” >Search</a></li>
    <li><a xhref=”http://dev.joomla.org/component/option,com_newsfeeds/amp;Itemid,7/&#8221; class=”mainlevel” >News Feeds</a></li>
    <li><a xhref=”http://dev.joomla.org/content/&#8221; class=”mainlevel” >FAQs</a></li>
    <li><a xhref=”http://dev.joomla.org/component/option,com_wrapper/amp;Itemid,8/&#8221; class=”mainlevel” > Wrapper</a></li>
    </ul>
    </div>

    De novo, usando listas CSS ao invés de tabelas resulta em redução código e mais fácil manutenção. Após configurar seu menu para lista nos teremos somente 12 tabelas (o resto não pode ser removido sem usar hacks). Listas são melhores que tabelas por causa de navegadores baseados em texto, leitores de tela, navegadores que não suportem CSS, navegadores que o css estiver desativado e bots dos sites de busca irão ter acesso ao conteúdo mais facilmente.

    Uma das outras vantagens e que usando CSS para os menus, temos vários exemplos de códigos em vários sites de desenvolvedores de CSS. Vamos olhar um deles e ver como pode ser usado.

    No maxdesign.com tem uma seleção de mais de 30 menus todos baseados em um mesmo código. Isto é chamado de Listamatic. Há uma pequena diferença no código que precisamos fazer para adaptar nesses menus para o Joomla.

    Essas listas usam o seguinte código:

    <div id=”navcontainer”>
    <ul id=”navlist”>
    <li id=”active”><a xhref=”http://dev.joomla.org/content/view/1136/79/1/7/&#8221; id=”current”>Item one</a></li>
    <li><a xhref=”http://dev.joomla.org/content/view/1136/79/1/7/”>Item two</a></li> <li><a xhref=”http://dev.joomla.org/content/view/1136/79/1/7/”>Item three</a></li>
    <li><a xhref=”http://dev.joomla.org/content/view/1136/79/1/7/”>Item four</a></li> <li><a xhref=”http://dev.joomla.org/content/view/1136/79/1/7/”>Item five</a></li>
    </ul>
    </div>

    Isso significa que há um div <div> chamado navcontainer e o <ul> tem um id de navlist.. Para duplicar esse efeito no Joomla, nós precisamos adicionar um lugar para o módulo, vamos usar um user1 antes dos módulos da esquerda.

    <div id=”sidebar”>
    <div class=”inside”>
    <div id=”navcontainer”>
    <?php mosLoadModules(‘user1’,-2);?>

    </div>

    <?php mosLoadModules(‘left’,-2);?>
    </div></div>

    Observe que nós colocamos o mosLoadModules no <div> que vem do ListaMatic. Este pode ter qualquer nome, mas para fim de tutorial, é melhor usar o mesmo código!

    Em seguida, se houver alguma referência ao navlist, para Joomla há uma saida como o mainlevel:

    <ul id=”mainlevel”>

    Por último , nós precisamos adicionar um sufixo CSS no módulo user1 admin backend de modo que o módulo possa receber estilos originais do CSS. Obviamente isto implica que nós estamos pondo o menu que nós queremos nesta posição.

    Module Suffix

    Um sufixo da classe do módulo pode ser usado em todo o módulo. Quando há a saída, os nomes do <div> para esse módulo terão o sufixo adicionado.

    Assim neste caso:

    • Se usasse um estilo -2 seria .moduletable-leftnav.
    • Se usasse um estilo -3 seria .module-leftnav.

    Este uso de um sufixo na classe do módulo é muito útil. Nós veremos nas seções dicas e truques que isso permite que tenhamos diferentes cores de boxes simplesmente mudando o sufixo da classe.

    Para nosso site, nós iremos usar List 10 de Mark Newhouse. Nosso CSS irá ser:

    .moduletable-leftnav{
    margin-bottom:1em;
    padding:0; /*the padding is removed so the menu fills the whole module box*/
    border:1px #CCC solid;
    }
    .moduletable-leftnav h3{
    background:#666;
    width:100%;
    color:#fff;
    padding:0.25em 0;
    text-align:center;
    font-size:1.1em;
    margin:0;
    /*now we have no padding in the module, we don’t need the negative margins*/ border-bottom: 1px solid #CCC;
    }
    #navcontainer{
    padding:0;
    color: #333;
    }
    #navcontainer ul{
    list-style: none;
    margin: 0;
    padding: 0;
    }
    #navcontainer li{
    border-bottom: 1px solid #ccc;
    margin: 0;
    }
    #navcontainer li a{
    display: block;
    padding: 3px 5px 3px 0.5em;
    border-left: 10px solid #333;
    border-right: 10px solid #9D9D9D;
    background-color:#666;
    color: #fff;
    text-decoration: none;
    }
    html>body #navcontainer li a {
    width: auto;
    }
    #navcontainer li a:hover,a#active_menu:link,a#active_menu:visited{
    border-left: 10px solid #1c64d1;
    border-right: 10px solid #5ba3e0;
    background-color: #2586d7;
    color: #fff;
    }

    Dica para Designer

    Quando se tenta fazer um específico menu funcionar, aqui vai uma dica útil. Crie uma instalação básica de Joomla e então olhe o código gerado no mainmenu. Copie e cole esse código em um Editor HTML (como Dreamweaver). Substitua todos os links por “#” e então adicione as régras de CSS até que você consiga o efeito desejado. O código do menu  para criar um estilo é mostrado abaixo:

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
    http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
    <html xmlns=”http://www.w3.org/1999/xhtml”&gt;
    <head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
    <title>Untitled Document</title>
    <style type=”text/css”>
    <!– .thisisyourCSS {
    /* put a rule here*/
    } –>
    </style>
    </head>
    <body>
    <div class=”moduletable”>
    <h3>Main Menu</h3>
    <ul id=”mainlevel”>
    <li><a xhref=”http://dev.joomla.org/content/view/1136/79/1/7/&#8221; class=”mainlevel” id=”active_menu”>Home</a></li>
    <li><a xhref=”http://dev.joomla.org/content/view/1136/79/1/7/&#8221; class=”mainlevel” >Joomla! License</a></li>
    <li><a xhref=”http://dev.joomla.org/content/view/1136/79/1/7/&#8221; class=”mainlevel” >News</a></li>
    <li><a xhref=”http://dev.joomla.org/content/view/1136/79/1/7/&#8221; class=”mainlevel” >Blog</a></li>
    <li><a xhref=”http://dev.joomla.org/content/view/1136/79/1/7/&#8221; class=”mainlevel” >Links</a></li>
    <li><a xhref=”http://dev.joomla.org/content/view/1136/79/1/7/&#8221; class=”mainlevel” >Contact Us</a></li>
    <li><a xhref=”http://dev.joomla.org/content/view/1136/79/1/7/&#8221; class=”mainlevel” >Search</a></li>
    <li><a xhref=”http://dev.joomla.org/content/view/1136/79/1/7/&#8221; class=”mainlevel” >News Feeds</a></li>
    <li><a xhref=”http://dev.joomla.org/content/view/1136/79/1/7/&#8221; class=”mainlevel” >FAQs</a></li>
    <li><a xhref=”http://dev.joomla.org/content/view/1136/79/1/7/&#8221; class=”mainlevel” >Wrapper</a></li>
    </ul>
    </div>
    </body>
    </html>

    Observe que o CSS embutido(no mesmo documento) é mais fácil fazer a edição do que linkado.

    Read Full Post »

    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:

    2nd Version after styles added

    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*/ }

    Read Full Post »

    « Newer Posts - Older Posts »