[TUTORIAL] Como criar mensagens moderativas

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

Admineiro
  • 0

Tutorial [TUTORIAL] Como criar mensagens moderativas

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


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

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7957
Pontos : 9209

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos