[TUTORIAL] Como criar mensagens moderativas

por **tikky** 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:

FontAwesome.com

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