[TUTORIAL] Criar um "Widget duplo"

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

[TUTORIAL] Criar um "Widget duplo"

Mensagem por Solkis em 04/06/09, 09:10 pm

Neste tutorial iremos aprender a criar um widget, que terá como particularidade o fato deste ser dividido em duas colunas, para que possa ocupar menos espaço na estrutura do fórum e que é muito bom para o agrupamento de informações semelhantes.



--> Tutorial <--
Criar um "Widget duplo"



- Teremos de criar um widget personalizado, pois somente poderemos aplicar este método a widgets editáveis;

Painel de Controle -> Módulos -> Portal & Widgets -> Configuração do portal
Depois terá de escolher:
Estrutura -> Criar um widget personalizado

(carregue na imagem para aumentar)
Seta Estrutura - Depois de aceder à "Configuração do portal", carregue em "Estrutura" da página do Portal que está a utilizar.
Seta Criar um widget personalizado - Terá de carregar neste botão para poder criar o seu novo widget;



- 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:

(carregue na imagem para aumentar)
Seta 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;
Seta 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;
Seta 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;
Seta Fonte do widget - O conteúdo do widget, terá o fundamental, que é toda aa estrutura e conteúdo original, código este que está disponível, mais à frente;
Seta Salvar - Por fim, após colocar o código, terá de "salvar" o seu widget personalizado. E mantenha-se na mesma página.


- Agora teremos de aplicar o conteúdo no widget;
Para cada versão teremos de utilizar um código diferente, somente deverá copiar o código referente á sua versão.

PhpBB 2
<table border="0" cellpadding="0" cellspacing="5" width="100%" height="100%"><tr><td valign="top"><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0"><tr><td class="catLeft" height="25"><span class="genmed module-title">Título do Widget esquerdo</span></td></tr><tr><td class="row1" align="left">Conteúdo do Widget esquerdo</td></tr></table></td> <td valign="top"><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0"><tr><td class="catLeft" height="25"><span class="genmed module-title">Título do Widget direito</span></td></tr><tr><td class="row1" align="left">Conteúdo do Widget direito</td></tr></table></td></tr></table>


PhpBB 3
<table border="0" cellpadding="0" cellspacing="5" width="100%" height="100%"><tr><td valign="top"><div class="module"><div class="inner"><span class="corners-top"><span></span></span><div class="h3">Título do Widget esquerdo</div>Conteúdo do Widget esquerdo<span class="corners-bottom"><span></span></span></div></div></td> <td valign="top"><div class="module"><div class="inner"><span class="corners-top"><span></span></span><div class="h3">Título do Widget direito</div>Conteúdo do Widget direito<span class="corners-bottom"><span></span></span></div></div></td></tr></table>


PunBB
<table border="0" cellpadding="0" cellspacing="5" width="100%" height="100%"><tr><td valign="top"><div class="module main"><div class="main-head"><div class="h3">Título do Widge esquerdo</div></div><div class="main-content clearfix">Conteúdo do Widget esquerdo</div></td> <td valign="top"><div class="module main"><div class="main-head"><div class="h3">Título do Widget direito</div></div><div class="main-content clearfix">Conteúdo do Widget direito</div></td></tr></table>


Invision
<table border="0" cellpadding="0" cellspacing="5" width="100%" height="100%"><tr><td valign="top"><div class="module borderwrap"><div class="maintitle"><h3>Título do Widget esquerdo</h3></div><div class="box-content">Conteúdo do Widget esquerdo</div></td> <td valign="top"><div class="module borderwrap"><div class="maintitle"><h3>Título do Widget direito</h3></div><div class="box-content">Conteúdo do Widget direito</div></td></tr></table>
Agora que já colocamos o código no widget, vamos modificar os conteúdos:
- Título do Widget -> A primeira parte a ser modificada, podemos colocar o título, normalmente, como se colocássemos nos campos que estão em cima.
- Conteúdo -> Colocámos o nosso conteúdo, o que pretendemos que seja mostrado em cada uma das colunas, na mesma como procedemos com o título, também aqui, devemos colocar, como se estivéssemos a colocar num widget normal.



- 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

(carregue na imagem para aumentar)
Seta Estrutura - Depois de aceder à "Configuração do portal", carregue em "Estrutura" da página do Portal que está a utilizar.
Seta 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.
Seta "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.
Seta Autorizações do widget - Já com o Portal actualizado, já poderá modificar as autorizações do widget, carregando em "Autorizações" ().
Seta Autorizações - Neste painel, poderá escolher quais os grupos de usuários poderão visualizar o widget.



- O resultado final:

(carregue na imagem para ampliar)



--> FAQ <--
Criar um "Widget duplo"




  • Como posso adicionar uma imagem junto ao título do Widget?
    Terá de utilizar o seguinte código:
    <img src="URL_DA_IMAGEM"> Título do Widget
  • Em que situações é recomendável utilizar esta estrutura?
    Ela pode ser usada em situações onde desejamos economizar espaço e em que a coluna tenha um tamanho relativamente grande o suficiente para comportar os Widgets pois, cada um ocupa 50% do tamanho total da coluna em que estão colocados.





© Fórum dos Fóruns




Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
Criar um "Widget duplo"
avatar

Solkis
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 26/01/2008
Mensagens : 9983
Pontos Ativos : 12075

Ver perfil do usuário https://ajuda.forumeiros.com

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo


Permissão deste fórum:
Você não pode responder aos tópicos neste fórum