Como colocar os artigos em "box" ???

Moderator: ariadneduvessa

Locked
djfeliz

Como colocar os artigos em "box" ???

Post by djfeliz » Sat Oct 06, 2007 6:43 pm

Todos os usuários Joomla sabe que os artigos exibidos, ficam um embaixo do outro, exceto quando o usuário prefere exibir a página principal em 2 ou 3 colunas (não me refiro ao layout do template em 2 ou 3 colunas, mas sim, apenas na "main page")...

Por um tempo, andei pesquisando, perguntando em [spam] no orkut, em como colocar os artigos em "box". Depois de tanto "fuçar", acabei conseguindo fazer isto, um exemplo, você pode ver no Joomla BR: http://www.joomlabr.net

Nomalmente nos templates, até fazem o "box" na mainpage, mas os artigos acabam ficando agrupados, um abaixo do outro, separados apenas pelo Título.

Vamos lá... você também pode fazer, aconselho fazer uma cópia da pasta com_content, caso ocorra algum erro, ou você não tenha gostado do resultado final.

Vamos "hackear" apenas o arquivo "content.html.php", por que é nele que se encontram os scripts de exibição dos artigos.... Este arquivo se encontra na pasta /components/com_content

Abra o content.html.php em um editor php, na linha 433 é onde inicia o script para a exibição do ítem de conteúdo: * Show a content item. E logo mais abaixo, na linha 463 é que inicia os scripts de exibição de toda a configuração do ítem de conteúdo: displays Item Title -  displays PDF Icon... e assim por diante...

Perceba que linha 462 está vazia, assim, aperte "Enter" para abrir espaço para ser adicionadas as seguintes linhas:

462
463          ?>
464
465 @import url("/templates/getTemplate(); ?>/css/template_css.css"");
466
467
468       
469       
549


## Estas linhas (463 a 469) vão "chamar" o arquivo CSS do template "template_css.css", e é onde você vai adicionar os códigos CSS para fazer o "box", e também poderá ser colocado em arquivo CSS de qualquer template. A linha 548 coloquei como referencia, você cria a linha 549 fechando o

Será preciso criar um nome para a (ID ou CLASS) CSS, por exemplo: contentbox

Este é o código css que é adicionado no arquivo template_css.css para fazer o "box" no item de conteúdo:

.contentbox {
margin: 0 5px 0px 5px;
padding: 0 5px 10px 5px;
background: #fff;
border: thin solid #3083B8;
width: auto !important;
width: 100%;
}

### Neste exemplo, utilizei a cor da borda conforme a que já está no template, servindo apenas como referencia.

Só isto.. é só salvar os arquivos e utilizar...

Obs: Se não tiver estes códigos adicionados no arquivo CSS do template, não tem problema, os ítem de conteúdo serão exibidos normalmente, apenas sem o "box"

### Para se criar "box" rounded corner, aí já é outra técnica, será preciso criar as imagens, adicionar as linhas no CSS e adicionar as tags

Note que a navegação pelos ítens de conteúdo, fica por fora do "box"...

Espero que este pequeno tutorial, sirva para alguém...
Last edited by djfeliz on Sat Oct 06, 2007 7:13 pm, edited 1 time in total.

User avatar
fititnt
Joomla! Hero
Joomla! Hero
Posts: 2350
Joined: Sat Jul 15, 2006 1:41 am
Location: Porto Alegre - RS - Brazil
Contact:

Re: Como colocar os artigos em "box" ???

Post by fititnt » Fri Nov 16, 2007 9:10 pm

Humm... bom resultado! Demorei um pouco, mas vi agora e adicionei ao FAQ. Quando fizer mais algum desses pode me dar um toque que eu acrescento lá =]

Olha, quando eu vi isso no seu navegador, pensei que teria feito usando fieldset, que só muda um pouco a aparência de navegador para navegador. Agora estou usando o FF 2.0.08 no ubuntu e aparem com os cantos mai quadrados, mas no IE creio que vão aparecer exatamente como você fez com imagens.

Tem um post que ensina como colocar estilo no elemento fieldset com CSS.

Conforme o que o programador quer fazer, talvez prefira usar algo como

Code: Select all

<fieldset id=”estilodocss”><legend>TITULO DO POST</legend>

conteudo do post

</fieldset>
A diferença nesse caso seria que o título ocuparia parte do topo da 'div' ou 'tabela' e que haveria um pouco menos de código fonte para fazer a mesma coisa.

//adicionado

Vi agora que no IE, e praticamente somente nele, conforme o FieldSet que for colocado, vai dar problema. É uma questão de dar uma testada antes e tenrar evitar erros que a miscrosoft cometeu ¬¬
Last edited by fititnt on Fri Nov 16, 2007 9:16 pm, edited 1 time in total.
Emerson da Rocha Luiz
Moderador aposentado, 2008-2014 | Membro do JUGRS
http://www.fititnt.org


Locked

Return to “Programação e desenvolvimento”