[TUTORIAL] Modificar a zona "Quem está conetado"

por Luciano98 05.04.12 0:30

Modificar a zona "Quem está conetado" (PhpBB 2 e PunBB)

Este tutorial é sobre a edição da parte dos templates referente à zona de “Quem está conectado” , ou seja, atua nas versões PunBB e PhpBB2.

--> Tutoriais e astúcias <--
Modificar a zona "Quem está conetado" (PhpBB 2 e PunBB)

TUTORIAL - [TUTORIAL] Modificar a zona "Quem está conetado" Warning

Para que possamos prosseguir com o tutorial é preciso que tenha noção sobre a edição dos templates que serão necessárias para a continuação deste tutorial. Para isso veja: Modificar os templates do fórum

1º - Acessar a template
Terá de acessar a gestão dos templates para efetuar as mudanças. Aceda a:
Painel de Controle -> Visualização -> Templates -> Geral -> template index_body

(falta a imagem)

2º - Encontrar a parte do código a alterar

Versão PhpBB 2

Código::  <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0"> <tr> <td class="catHead" colspan="2" height="28"><span class="cattitle"><a class="cattitle" href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></span></td> </tr> <tr> <td class="row1" rowspan="6" align="center" valign="middle"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" /></td> <td class="row1" width="100%"><span class="gensmall">{TOTAL_POSTS} {TOTAL_USERS} {NEWEST_USER}</span></td> </tr> <tr> <td class="row1"><span class="gensmall">{TOTAL_USERS_ONLINE} {RECORD_USERS} {LOGGED_IN_USER_LIST}</span></td> </tr> {L_CONNECTED_MEMBERS} {L_WHOSBIRTHDAY_TODAY} {L_WHOSBIRTHDAY_WEEK} <tr> <td class="row1"><span class="gensmall">{LEGEND} : {GROUP_LEGEND}</span></td> </tr>  <tr> <td class="row1"> <span class="gensmall">{TOTAL_CHATTERS_ONLINE} : {CHATTERS_LIST}  <div id="chatbox_popup"></div> <script type="text/javascript"> //<![CDATA[ insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}'); //]]> </script>  </span> </td> </tr>  </table>

Versão PunBB

Código::  <div id="pun-info" class="main"> <div class="main-content"> <div id="stats"> <p class="right">{TOTAL_POSTS}</p> <p>{TOTAL_USERS}</p> <p>{NEWEST_USER}</p> </div> <div id="onlinelist"> <img src="{L_ONLINE_IMG}" alt="{L_WHO_IS_ONLINE}" /> <p class="right"><a href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></p> <p>{TOTAL_USERS_ONLINE} {RECORD_USERS} {LOGGED_IN_USER_LIST} {L_ONLINE_USERS} {L_CONNECTED_MEMBERS} {L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}</p> <div class="clear"></div> <p>{LEGEND} : {GROUP_LEGEND}</p> </div>  <div id="onlinechat"> <p class="page-bottom"> {TOTAL_CHATTERS_ONLINE} : {CHATTERS_LIST}  <div id="chatbox_popup"></div> <script type="text/javascript"> insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}'); </script>  </p> </div>  </div> </div>

3º - Identificar as diferentes partes do código

Com esta alteração poderemos mudar vários aspetos do código de forma a reestruturar a zona "Quem está conetado". No entanto temos de saber aquilo que estamos a alterar (variáveis) para podermos saber onde inserir uma imagem, uma frase, etc. Por exemplo, {L_ONLINE_IMG} seria substituído pelo endereço da imagem que está nessa linha. Mas como saber onde cada uma dessas variáveis será substituída?

Vejamos um outro exemplo com a variável {L_CONNECTED_MEMBERS}:

Insira um marcador, como DDDDebut e depois um outro como FFFFin. Seguidamente salve e publique o seu template. Depois basta ir ao código fonte e procurar por um dos marcadores que inseriu previamente.

No modelo

TUTORIAL - [TUTORIAL] Modificar a zona "Quem está conetado" K30s2r

No código-fonte

TUTORIAL - [TUTORIAL] Modificar a zona "Quem está conetado" 112c3de

Portanto no segundo exemplo a substituição foi:

Código:: <tr><td class="row1"><span class="gensmall">Membres connectés au cours des 24 dernières heures : <a href="/profile.forum?mode=viewprofile&u=1"><span style="color:#000099"><strong>Admin</strong></span></a></span></td></tr>

Importante: Seja qual for a sua intenção relativamente à mudança desta parte em particular deve sempre lembrar-se de manter a conformidade das tags. Por exemplo, imagine que existia o seguinte:

Código:: <div><marquee><span>texte

Que seria a variável {EXEMPLE}

Código:: {EXEMPLE}</span></marquee></div>

Todas as balizas terão de ser fechadas, caso contrário não funcionará. O caso em cima é especial pois estamos perante uma tag indicando a existência de uma linha numa tabela (table row=<tr>). Para utilizar corretamente esse ponto deverá ser assim:

Código:: <table>{L_CONNECTED_MEMBERS}</table>

Lista de variáveis

{U_VIEWONLINE} - phpbb2 & punbb

Código:: /viewonline.htm

Explicação: Endereço relativo à página "Quem está online" e poderá ser utilizada com um link num código html (<a href="{U_VIEWONLINE}">Quem está online</a> )

{L_WHO_IS_ONLINE} - phpbb2 & punbb

Código:: Qui est en ligne?

Explicação: Sequência de texto que muda conforme a língua utilizada no fórum.

{L_ONLINE_IMG} - phpbb2 & punbb

Código:: http://2img.net/i/fa/subsilver/whosonline.gif

Explicação: É o link da imagem. A Administração pode utilizar isto para colocar uma imagem sem ter que estar a mudar o tema/versão do fórum (basta mudar a imagem no painel de controle em "gestão de imagens")

{TOTAL_POSTS} - phpbb2 & punbb

Código:: Nos membres ont posté un total de <strong>2</strong> messages

Explicação: É o número de mensagens postadas no fórum. No final deste tutorial veremos como alterar esta parte do texto.

{TOTAL_USERS} - phpbb2 & punbb

Código:: Nous avons <strong>1</strong> membre enregistré

Explicação: É o número total de membros registados.

{NEWEST_USER} - phpbb2 & punbb

Código:: L'utilisateur enregistré le plus récent est <strong><a href="/profile.forum?mode=viewprofile&u=1"><span style="color:#000099"><strong>Admin</strong></span></a></strong>

Explicação: Esta parte representa a informação acerca do último membro registado.

{TOTAL_USERS_ONLINE} - phpbb2 & punbb

Código:: Il y a en tout <strong>1</strong> utilisateur en ligne :: 1 Enregistré, 0 Invisible et 0 Invité

Explicação: Esta parte diz respeita ao número total de pessoas online, tantos os registados como os convidados.

{RECORD_USERS} - phpbb2 & punbb

Código:: Le record du nombre d'utilisateurs en ligne est de <strong>2</strong> le Mer 21 Avr 2010 - 21:18

Explicação: Esta frase mostra o recorde de utilizadores online registado num determinado dia.

{LOGGED_IN_USER_LIST} - phpbb2 & punbb

Código:: Utilisateurs enregistrés : <a href="/profile.forum?mode=viewprofile&u=1"><span style="color:#000099"><strong>Admin</strong></span></a>

Explicação: Lista de utilizadores online e invisíveis (apenas os administradores e moderadores podem ver esses membros).

{L_ONLINE_USERS} - punbb

Explicação: Esta variável não pode ser substituída por nada o que no fim de contas não lhe dá utilidade alguma.

{L_CONNECTED_MEMBERS} - phpBB2

Código:: <tr><td class="row1"><span class="gensmall">Membres connectés au cours des 24 dernières heures : <a href="/profile.forum?mode=viewprofile&u=1"><span style="color:#000099"><strong>Admin</strong></span></a></span></td></tr>

Explicação: Indica os utilizadores registados que visitaram o fórum num determinado período de tempo (exemplo: nas últimas 24 horas).

Código do template a utilizar:

Código:: <table>{L_CONNECTED_MEMBERS}</table>

{L_CONNECTED_MEMBERS} - punBB

Código:: Membres connectés au cours des 24 dernières heures : <a href="/profile.forum?mode=viewprofile&u=1"><span style="color:#000099"><strong>Admin</strong></span></a>

Explicação: Indica os utilizadores registados que visitaram o fórum num determinado período de tempo (exemplo: nas últimas 24 horas).

{L_WHOSBIRTHDAY_TODAY} - phpBB2

Código:: <tr><td class="row1"><span class="gensmall">Aucun membre ne fête son anniversaire aujourd'hui

Explicação: Indica os aniversários do dia.

Template a utilizar:

Código:: <table>{L_WHOSBIRTHDAY_TODAY}</span></td></tr></table>

ou

Código:: <table>{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}</table>

(com os aniversários da semana)

{L_WHOSBIRTHDAY_TODAY} - punBB

Código:: <br style="line-height:5px;" />Aucun membre ne fête son anniversaire aujourd'hui

Explicação: Indica os aniversários do dia.

{L_WHOSBIRTHDAY_WEEK} - phpBB2

Código:: Aucun membre ne fête son anniversaire dans les 7 prochains jours</span></td></tr>

Explicação: Indica os aniversários durante um período de tempo definido pelo administrador.

Template a utilizar:

Código:: <table><tr><td><span>{L_WHOSBIRTHDAY_WEEK}</table>

ou

Código:: <table>{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}</table>

(com os aniversários da semana)

{L_WHOSBIRTHDAY_WEEK} - punBB

Código:: Aucun membre ne fête son anniversaire dans les 7 prochains jours

Explicação: Indica os aniversários durante um período de tempo definido pelo administrador.

{LEGEND} - punBB e phpBB2

Código:: Légende

Explicação: Indica os aniversários durante um período de tempo definido pelo administrador.
(em desenvolvimento)

{GROUP_LEGEND} - punBB e phpBB2

Código:: [ <b><a style="color: #000099" class="gensmall" href="/groupcp.forum?g=2">Modérateurs</a></b> ]

Explicação: Indica os grupos existentes (os visíveis e com cor)

{TOTAL_CHATTERS_ONLINE} - punBB e phpBB2

Código:: Il y a actuellement <strong>1</strong> utilisateur(s) sur la ChatBox

Explicação: Número total de membros no chat.

{CHATTERS_LIST} - punBB e phpBB2

Código:: <a href="/profile.forum?mode=viewprofile&u=1"><span style="color:#000099"><strong>Admin</strong></span></a>

Explicação: Lista com o nome de membros no chat.

{...U_FRAME_CHATBOX} - punBB e phpBB2

Código:: /chatbox/chatbox.forum?

Explicação: É apenas um link relativo ao chatbox.

{L_CLICK_TO_JOIN_CHAT} - punBB e phpBB2

Código:: Rejoindre le Chat

Explicação: É apenas uma linha que muda consoante a linguagem.

(Eu coloquei o código do modelo para usar as variáveis quando não era apenas a própria variável)

agora você está pronto para usar essas variáveis nas estruturas quiser html (blocos, blocos de rolagem da tabela, ...)

4º - Considerações finaisi
É possível substituir completamente algo, como os grupos pode-se substituir completamente, dando links para páginas de grupo e da cor (que pode apresentá-los como totalmente deseja, mas não surtirá efeito aos membros pertencentes aos grupos)

O quem está conectado não há nenhuma maneira de mudá-lo assim (porque cada vez que você reabrir a página que deve ser modificado de acordo com os usuários que estão on-line), você deve Portanto, se queremos apresentá-lo de forma diferente para a variável e usar javascript (é uma linguagem que é usada para modificar uma página web na sequência dos acontecimentos de que é decidido (ele vai estar aqui de passagem que o código irá alterar os elementos que desejas) para edição.

É recomendado que faça apenas um bloco (<div> ...</ div>) ou tabela (<table> <tr> <td> ... </ tr> </ td> </ table>) com Quem está online caso queira colocar um identificador para tal parte dum código basta adicionar um atributo id e definir o id. (veja o exemplo <div id="qeel-perso"> ...</ div> e para uma tabela ficaria assim <table id="qeel-perso"> <tr> <td> ...</ td > </ tr> </ table>)

Então tudo que você precisa para fazer um script que irá mudar a maneira que você quer fazer isso, vamos utilizar apenas duas coisas

A primeira é:

Código:: document.getElementById('qeel-perso').innerHTML

para descrevê-lo é, de fato "documento" (que é o objeto que está sendo toda a página) e do "documento" é utilizada uma função chamada getElementById, esse recurso analisa o conteúdo do documento e selecione tag html que tem o identificador a ser dado como um parâmetro (se ele é chamado aqui qeel-pessoal, ele irá procurar todas as tags e pára quando é id = "qeel-pessoal"), finalmente tomamos apenas o innerHTML propriedade do objeto (que é a nossa linha) é selecionado, ele é na verdade o conteúdo do nosso html está online, com esta propriedade, existem duas maneiras de fazer, apenas usá-lo, por exemplo

Código:: alert(document.getElementById('qeel-perso').innerHTML);

fazer uma pequena caixa de diálogo que exibe o conteúdo do html está online ou você pode mudar seu conteúdo, por exemplo

Código:: document.getElementById('qeel-perso').innerHTML='<strong>Alerta !!!</strong>';

Irá alertar toda vez que haver alguém no Quem está conectado. Finalmente, graças a este código já podemos suspeitar do que vamos "usar" no conteúdo do quem está online, modificar e então alterar o conteúdo que está em sintonia para colocar o conteúdo modificado

chega-se a segunda:

Código:: text.replace(/ce qu'on cherche/,"ce par quoi on le remplace");

é um método chamado substituir, apenas para ter uma cadeia (por exemplo, innerHTML que acabamos de ver) e da função substitui a corda sempre que encontrá-lo, o primeiro parâmetro pelo segundo

Agora podemos entender que só vai fazer:
document.getElementById('qeel-perso').innerHTML= document.getElementById('qeel-perso').innerHTML.replace(/ce qu'on cherche/,"ce par quoi on le remplace");
mas temos de fornecer mais informações para os parâmetros primeiro, o segundo parâmetro "aquele pelo qual ele é substituído," só há duas coisas a dizer sobre isso ou são utilizados "para os bancos, neste caso, se houver um" em um substituto deverá ser apresentado, então se eu quiser substituir:

Código:: le "chat"

Vou ter que colocar:

Código:: "le "chat""

ou você pode usar ", mas é a mesma coisa, se você quiser:

Código:: l'ordinateur s'est éteint

Vamos precisar:

Código:: 'l'ordinateur s'est éteint'

e em ambos os casos, se você quer colocar na frase, devemos colocar no lugar Finalmente, a segunda coisa, o primeiro parâmetro para os parâmetros que são usados no segundo, com US $ 1 (o primeiro), R $ 2 (a segunda), US $ 3 (o terceiro), ... para o primeiro parâmetro, não há muito a ser dito contra a primeiro, há um vôo de caráter que são "mágica" Finalmente, quando utilizados, eles não significam apenas uma letra, como usá-los então? basta colocar um na frente, aqui está a lista dos seguintes caracteres:

Código:: / . $ [ ] ( ) { } ^ ? * + -

Se eu quero olhar *-+{aaa}+-*:

Código:: /*-+{aaa}+-*/

Em termos de personagens mágicas, você pode aprender o que eles são usados nas páginas seguintes:

mas aqui não vamos aprender que o que é útil para nós ., +, ? et ( ) em relação ao ponto, pode na verdade ser qualquer caractere, exceto os personagens de volta na linha, por isso, se não há uma única letra, colocar /. / seleccione o
em seguida, para a maioria, isso significa apenas que ac "acima podem estar presentes um ou mais", então se colocarmos / ab + c / abc ou abbbbbc encontrá-lo, mas não
em termos de consulta ponto significa "acima existe ou não" que será útil, por exemplo, quando uma palavra começa no plural ou não, podemos simplesmente colocar / hóspedes? / e vai substituir o que os clientes se houver um s ou convidado se não houver (fazemos ambos ao mesmo tempo).
em termos de suportes têm duas aplicações, primeiro habilitá-lo em combinação com o? para dizer se este grupo de letra existe ou não, assim, por exemplo / 123 (456)? 789/123 456 789 e 123789 encontrará boa, então a segunda coisa mais útil é que cada parte entre parênteses é armazenado em uma variável que 'podem ser reutilizados na cadeia de substituição com ou dois $ 2 é o número de variáveis, para o nosso exemplo está online, podemos fazer:

Código:: text.replace(/Nous avons (.+) membre(s?) enregistrés?/,'On a $1 gentil$2 membre$2 enregistré$2');

coloque em $ 1, o número de membros, então temos um segundo par de parênteses é vazio ou um $ (se houver mais um membro), então a string de substituição, colocamos as variáveis para preencher o canal (o $ 1 é substituído pelo número de membros e US $ 3 s 2 será substituído se houvesse mais de um membro ou nada se houvesse apenas um membro)

Aqui você está agora pronto para tudo, aqui está um exemplo, se você perdeu:

Código:: <div id="qeel-perso" style="background-image:url({L_ONLINE_IMG})"> {GROUP_LEGEND} {TOTAL_POSTS}{TOTAL_USERS} </div> <script type="text/javascript"> document.getElementById('qeel-perso').innerHTML=document.getElementById('qeel-perso').innerHTML.replace(/Nos membres ont posté un total de (.+) message(s?)Nous avons (.+) membre(s?) enregistrés?/,'Nos $3 brave$4 ont fait $1 post$2 o/').replace(/[ (.+) ]/,'<{ $1 }>'); </script>

Acabou de fazer o quem está conectado com os nomes do grupo, a linha de colocar o número total de mensagens, trazendo a linha de total de usuários únicos e pequenas como nós colocar a imagem de quem está on-line como uma imagem de fundo de quem está online

dá-me isso no script sem display:

Código:: <div id="qeel-perso" style="background-image:url(http://i41.tinypic.com/v7a6qg.gif)"> [ <b><a style="color: #000099" class="gensmall" href="/groupcp.forum?g=2">Modérateurs</a></b> ] Nos membres ont posté un total de <strong>3</strong> messagesNous avons <strong>1</strong> membre enregistré</div>

TUTORIAL - [TUTORIAL] Modificar a zona "Quem está conetado" 21eq6w5

então o código:

Código:: document.getElementById('qeel-perso').innerHTML

vamos encontrar o conteúdo do que está em linha para o qual fazemos duas substituições
o primeiro com:

Código:: .replace(/Nos membres ont posté un total de (.+) message(s?)Nous avons (.+) membre(s?) enregistrés?/,'Nos $3 brave$4 ont fait $1 post$2 o/')

irá substituir:

Código:: Nos membres ont posté un total de <strong>3</strong> messagesNous avons <strong>1</strong> membre enregistré

por:

Código:: Nos <strong>1</strong> brave ont fait <strong>3</strong> posts o/

então passamos esta string novamente alterada por um método alternativo:

Código:: .replace(/[ (.+) ]/,'<{ $1 }>');

ela só vai substituir o [ et ] a lenda que cerca grupos com <{ et }>, que é a nossa linha, portanto, à chegada:

Código:: <div id="qeel-perso" style="background-image:url(http://i41.tinypic.com/v7a6qg.gif)"> <{ <b><a style="color: #000099" class="gensmall" href="/groupcp.forum?g=2">Modérateurs</a></b> }> Nos <strong>1</strong> brave ont fait <strong>3</strong> posts o/</div>

TUTORIAL - [TUTORIAL] Modificar a zona "Quem está conetado" M34ua

TUTORIAL - [TUTORIAL] Modificar a zona "Quem está conetado" Act_bottom

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
Modificar a zona "Quem está conetado" (PhpBB 2 e PunBB)