[TUTORIAL] Adicionar fóruns à um widget

As categorias dentro de widgets tem como objetivo informar aos membros alguns fóruns que são de grande importância dentro do mesmo, podendo assim ter acesso á ele através do Portal. Isso pode ser percebido neste fórum, pois o Fórum dos Fóruns utiliza este tipo de estrutura.

--> Tutoriais e astúcias <--
Adicionar fóruns a um widget

1º - Elaborar o código da lista de fóruns;
Para cada versão será um código diferente, recomendamos que você elabore primeiramente no bloco de notas, pos será mais fácil de editá-lo.

O código irá se dividir em três partes, uma que deverá ser colocada ao início de cada categoria, outra que será responsável por cada fórum e uma para o encerramento da categoria. Lembre-se que é importante que não esqueça nenhuma destas partes pois isso poderá gerar problemas com o código.

Vejamos o código para cada versão:

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

PhpBB 2

Ao início de cada categoria

<table cellpadding="0" cellspacing="0" width="100%" class="three-col"><tbody><tr><td valign="top" width="0"><div id="emptyidleft"></div></td><td valign="top" width="100%"><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0"></table></td><tr> <th colspan="2" nowrap="nowrap" width="100%" class="secondarytitle"><h2>Título da categoria</h2></th></tr>

Para cada fórum da categoria

<tr><td class="row1" align="center" valign="middle"><img src="endereco_da_imagem" alt="Não há novas mensagens" /></td><td class="row1 over" colspan="1" valign="top" width="100%" height="50"><h3 class="hierarchy"><span class="forumlink"><a class="forumlink" href="Endereco_do_forum">Nome do fórum</a><br /></span></h3><span class="genmed">Descrição do fórum<br /></span><span class="gensmall"></span></td></tr>

Ao final de cada categoria

</table>

PhpBB 3

Ao início de cada categoria

<div class="forabg"><div class="inner"><span class="corners-top"><span></span></span><ul class="topiclist"><li class="header"><dl class="icon"><dd class="dterm"><div class="table-title"><h2>Título da categoria</h2></div></dd></dl></li></ul><ul class="topiclist forums">

Para cada fórum da categoria

<li class="row"><dl class="icon" style="background:url(endereco_da_imagem) no-repeat scroll 10px 50%;"><dd class="dterm"><div style="display: block; margin : 0 0px 0 45px;"><h3 class="hierarchy"><a href="Endereco_do_forum" class="forumtitle">Nome do fórum</a></h3><br />Descrição do fórum<br /> </div></dd></dl></li>

Ao final de cada categoria

</ul><span class="corners-bottom"><span></span></span></div></div>

PunBB

Ao início de cada categoria

<div class="main"><div class="main-head"><div class="page-title"><h2>Título da categoria</h2></div></div><div class="main-content"><table width="100%" cellspacing="0" class="table"><thead><tr><th width="100%" class="tcl">Fórum</th></tr></thead><tbody class="statused">

Para cada fórum da categoria

<tr><td class="tcl" style="padding-right: 0px; padding-left: 60px;"><span class="status" style="margin-right: -50px; margin-left: -50px;"><img src="endereco_da_imagem" /></span><h3 class="hierarchy"><a href="Endereco_do_forum" class="forumtitle">Nome do fórum</a></h3><br />Descrição do fórum<br /> </td></tr>

Ao final de cada categoria

</tbody></table></div></div>

Invision

Ao início de cada categoria

<div class="borderwrap"><div class="maintitle floated clearfix"><h2>Título da categoria</h2></div><table width="100%" cellpadding="0" cellspacing="0" class="ipbtable index-box" id="c1"><thead><tr><th class="forum" style="width: 100%;">Fórum</th></tr></thead><tfoot><tr><td colspan="4"></td></tr></tfoot><tbody>

Para cada fórum da categoria

<tr><td class="row2 icon" style="padding-right: 0px; padding-left: 45px;"><span class="status clearfix" style="margin-right: -35px; margin-left: -35px;"><img src="endereco_da_imagem" class="icon" /></span><div class="par forum-name"><h3 class="hierarchy"><a href="Endereco_do_forum" class="forumtitle">Nome do fórum</a></h3><p class="forum-desc">Descrição do fórum</p></div></td></tr>

Ao final de cada categoria

</tbody></table></div>

Neste ponto teremos de compreender o que cada cor representa, para que possa fazer as modificações corretamente:

Vermelho -> Representa o título da categoria, poderá utilizar todo tipo de formatação HTML neste campo;
Preto -> É o endereço da imagem, esta serve para substituir a imagem que representa a imagem "não há novas mensagens", "novas mensgens" e "fórum bloqueado". Recomendamos que utilize imagens descritivas para o fórum neste campo, uma vez que terá o objectivo de ser a imagem "descrição". Aqui não poderá utilizar formatações HTML;
Verde -> É o endereço de ligação do fórum para o qual gostaríamos que, ao clicar no título fossemos redirecionados;
Violeta -> Nome do fórum, neste campo é permitido o uso de formatações HTML;
Laranja -> Descrição do fórum, aqui também será permitido o uso de formatações e, caso deseja poderá adicionar links para subfóruns, para mais informações sobre isso veja a FAQ do tutorial.
Marrom -> Esta modificação somente se faz necessária em alguns casos e em fóruns Phpbb 3. Quando a descrição sobrepor a imagem, deverá ser aumentado este valor, isso irá distanciar o texto da imagem. Recomenda-se que ele tenha uma valor um pouco maior do que a largura da imagem.


2º - Teremos de criar um widget personalizado, pois somente poderemos aplicar este método a widgets editáveis;
Aceda á:
Painel de Controle -> Módulos -> Portal & Widgets -> Configuração do portal
Depois terá de escolher:
Estrutura -> Criar um widget personalizado

Estrutura - Depois de aceder à "Configuração do portal", carregue em "Estrutura" da página do Portal que está a utilizar.

Criar um widget personalizado - Terá de carregar neste botão para poder criar o seu novo widget;

3º - Teremos de colocar o módulo com uma visualização diferente, ou seja teremos de retirar o quadro padrão (table type) que normalmente fica em volta dos módulos:

Nome do widget - Terá de colocar um título para o widget, de forma a poder identifica-lo na lista dos widgets pessoais do Painel de Controle;

Utilizar um table type - Escolhe a opção "Não", para que o widget, não apresente nenhuma estrutura, uma vez que esta já será criada através do código que constará no widget;

Título do widget - Neste campo, é indiferente colocar ou não, um título, uma vez que este já está designado no próprio código. para evitar confusões recomenda-se, não colocar nenhum título;

Fonte do widget - O conteúdo do widget, terá o fundamental, que é toda a estrutura e conteúdo original, código este que você elaborou no item número um e está num bloco de notas ou editor de páginas html;

Salvar - Por fim, após colocar o código, terá de "salvar" o seu widget personalizado. E mantenha-se na mesma página.

4º - Agora teremos de colocar o widget criado, na estrutura do Portal.
Para isso terá de aceder a:
Painel de Controle -> Módulos -> Portal & Widgets -> Configuração do portal -> Estrutura

Estrutura - Depois de aceder à "Configuração do portal", carregue em "Estrutura" da página do Portal que está a utilizar.

Widget personalizado - Depois de entrar na estrutura da página, terá de localizar o widget personalizado, que se encontra no separador "Widgets pessoais", por baixo da matriz do Portal.

"Salvar" Portal - Agora que está localizado o widget, mova-o para a matriz do Portal, através do método drag&drop (arrastar e soltar). Depois de efectuar essa acção, terá de carregar em "salvar", para que o Portal seja actualizado.

Autorizações do widget - Já com o Portal actualizado, já poderá modificar as autorizações do widget, carregando em "Autorizações" ([Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]).

Autorizações - Neste painel, poderá escolher quais os grupos de usuários poderão visualizar o widget.

5º - O resultado final: