[TUTORIAL] Como criar mensagens moderativas

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

  • 0

Tutorial [TUTORIAL] Como criar mensagens moderativas

Mensagem por pedxz 12.01.19 16:10

Como criar mensagens de moderação
As mensagens de moderação são a solução prefeita para quem quer um fórum organizado, em termos de moderação em postagens, de acordo com as suas regras! Com elas poderá alertar alguma ocorrência efetuada pelo usuário, por exemplo.

Como criar mensagens de moderação
TUTORIAIS, DICAS E ASTÚCIAS

Uso

Pelo BBCode

O uso e edição do código é fácil! Vamos separar em quatro partes:

Estilo da mensagem
Código:
[table style="background-color: #14821E;border-radius: 2px;padding: 5px;margin: 1em 25px 1em 1em;min-width: 90%!important; line-height: 10px!important"]


Ícone da mensagem
Código:
[td class="fa fa-check" style="font-size: 25px;margin-right: 15px;padding: 15px!important;color: white;display: table-cell;vertical-align: middle;"][/td]


Título da mensagem
Código:
[td][tr][b] Título da mensagem [/b][/tr][/td]


Descrição da mensagem
Código:
[td][tr][b] Título da mensagem [/b]
Descrição da mensagem [/tr][/td]


Conclusão e demonstração
Título
Descrição da mensagem moderativa.
Demostração de como ficará
Código:
[table style="background-color: #14821E;padding: 5px;border-radius: 2px;margin: 1em 25px 1em 1em;min-width: 90%!important; line-height: 10px!important"]
[tr style=][td class="fa fa-check" style="font-size: 25px;margin-right: 15px;padding: 15px!important;color: white;display: table-cell;vertical-align: middle;"][/td]
[td style="width: 100%;color: white"][b] Título[/b]
Descrição da mensagem moderativa.
 [/td]
[/tr]
[/table]


Por HTML


Estilo da mensagem
Código:
<table style="background-color: #14821E;border-radius: 2px;padding: 5px;margin: 1em 25px 1em 1em;min-width: 90%!important; line-height: 10px!important">


Ícone da mensagem
Código:
<td class="fa fa-check" style="font-size: 25px;margin-right: 15px;padding: 15px!important;color: white;display: table-cell;vertical-align: middle;"></td>


Título da mensagem
Código:
<td><tr><b>Título da mensagem </b></tr></td>


Descrição da mensagem
Código:
<td><tr><b> Título da mensagem </b>
<p>Descrição da mensagem</p> </tr></td>


Conclusão e demonstração
Título
Descrição da mensagem moderativa.
Demonstração de como ficará
Código:
<table style="background-color: #14821E;border: solid 2px #14821E;border-radius: 2px;margin: 1em 25px 1em 1em;min-width: 90%!important; line-height: 10px!important"><tr><td class="fa fa-check" style="font-size: 25px;margin-right: 15px;padding: 15px!important;color: white;display: table-cell;vertical-align: middle;"></td><td style="width: 100%;color: white"><b>Tópico atualizado</b>
<p>Uma atualização foi realizada neste requerimento.</p>
 
</td>
</tr>
</table>


Adicionar na Folha de Estilo (versão curta)

Para que o código fique mais limpo, recomendamos a criação de uma classe:
Código:
.mod {
      padding: 5px;
      border-radius: 2px;
      margin: 1em 25px 1em 1em;
      min-width: 90%!important;
      line-height: 10px!important;
}
.mod [class^="fa fa-"] {
      font-size: 25px;
      margin-right: 15px;
      padding: 15px!important;
      color: white;
      display: table-cell;
      vertical-align: middle;
}
.mod.success {
      background-color: #14821E;
}

Finalmente basta utilizar este código (curto) BBCode nas postagens:
Código:
[table class="mod success"]
[tr style=][td class="fa fa-check"][/td]
[td style="width: 100%;color: white"][b] Título[/b]
Descrição da mensagem moderativa.
 [/td]
[/tr]
[/table]


Lista de ícones

Os ícones só darão se o FontAwesome estiver instalado no seu fórum. Existe centenas de ícones no qual podes ver eles deste site:


Na tabela de moderação, o ícone pode ser alterado em fa fa-check mude check para o ícone que quer usar!
pedxz

pedxz
Moderadeiro
Moderadeiro

Inscrito dia : 13/01/2017
Mensagens : 5976
Pontos Ativos : 7112

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