[TUTORIAL] Como criar mensagens moderativas

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

  • 0

[TUTORIAL] Como criar mensagens moderativas Empty [TUTORIAL] Como criar mensagens moderativas

Mensagem por Pedxz em 12.01.19 16:10

Como criar mensagens moderativas
As Mensagens moderativas são a solução prefeita para que possa moderar o seu fórum. Com elas poderá alertar alguma ocorrência efetuada pelo usuário, assim o seu fórum será moderado de uma forma direita.

Como criar mensagens moderativas


TUTORIAIS, DICAS E ASTÚCIAS

Instalação

Via BBCode

O uso e edição do seu código é facil, o código apresentado em baixo é separado em 4 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 & Demostraçã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]


Via 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 & Demostração
Título
Descrição da mensagem moderativa.
Demostraçã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 bem mais curto nas mensagens:
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 do darão se o FontAwesome for instalado. 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

Masculino
Inscrito dia : 13/01/2017
Mensagens : 2665
Pontos Ativos : 3372

Ver perfil do usuário https://pedxz.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