Boas-vindas ao Power Pixel

Junte-se a comunidade! Crie o seu próprio conteúdo, e faça amizades.EntrarCriar uma conta

avatar IsmaelS.  • Ter 30 Dez 2014 - 18:23

Colocar título ao gerar caixas de moderação Empty Colocar título ao gerar caixas de moderação Ter 30 Dez 2014 - 18:23

[quadrado=Minha questão]
Bem estou a utilizar um código de botões de moderação que fica este resultado:

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Ou seja automaticamente através o código ele já tem um título padrão, o que desejava era o próprio usuário escrever um título ao gerar as caixas:

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Simplesmente criar outro campo de texto para colocar o título se possível.

.CSS
Código:
  .postbody .sucesso, .postbody .aviso, .postbody .infos, .postbody .alerta {
    width: 75%;
    margin: 8px 0;
    padding: 8px;
    color: #fefefe;
    -webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.4);
    -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.4);
    -khtml-box-shadow: 0 1px 5px rgba(0,0,0,0.4);
    box-shadow: 0 1px 5px rgba(0,0,0,0.4);
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -khtml-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
    border-style: solid;
    border-width: 0;
    position: relative;
    font: 14px/20px Museo300Regular,Helvetica,Arial,sans-serif;
    }
    .postbody .infos {
    background-color: #2fa9f6;
    background-image: url(http://i.imgur.com/Rb84YPI.png);
    background-repeat: no-repeat;
    background-position: 99% 50%;
    }
    .postbody .sucesso {
    background-color: #7EB62E;
    background-image: url(http://i.imgur.com/6vH65jF.png);
    background-repeat: no-repeat;
    background-position: 99% 50%;
    }
    .postbody .aviso {
    background-color: #BE1B00;
    background-image: url(http://i.imgur.com/aN6WLBM.png);
    background-repeat: no-repeat;
    background-position: 99% 50%;
    }
    .postbody .alerta {
    background-color: #F09D06;
    background-image: url(http://i.imgur.com/GvA8cN0.png);
    background-repeat: no-repeat;
    background-position: 99% 50%;
    }

    .postbody .alerta:before {
    content: 'Tópico Negado';
    font-weight: 700;
    }
    .postbody .aviso:before {
    content: 'Aviso Importante';
    font-weight: 700;
    }
    .postbody .infos:before {
    content: 'Informação';
    font-weight: 700;
    }
    .postbody .sucesso:before {
    content: 'Questão Resolvida';
    font-weight: 700;
    }

.jS:
Código:
/*
    * Código: Inserir novos comandos no editor.
    * Data de criação: 26/12/2014.
    * Autor: Daemon.
    * Versão: 1.0.
    * Acesse: http://bestskins.net
    * Não distribuir, ou remover os créditos do autor.
    */

    var add_BBCode = {
          '1': {bbcode: 'sucesso'},
          '2': {bbcode: 'aviso'},
          '3': {bbcode: 'alerta'},
          '4': {bbcode: 'infos'}
    };

    $(document).on('ready', function() {
    var newDrop = '<div class="sceditor-dropdown sceditor-drop" style="display: none;">' +
                  '  <div>' +
                  '    <label unselectable="on">Inserir...</label>' +
                  '    <select id="drop_value">' +
                  '        <option value="" selected>--------------</option>' +
                  '    </select>' +
                  '  </div>' +
                  '  <div>' +
                  '    <label unselectable="on">Descrição (opcional):</label>' +
                  '    <input type="text" id="desc_value" />' +
                  '  </div>' +
                  '  <div>' +
                  '    <input type="button" class="button" value="Inserir" onclick="bbcode_drop()">' +
                  '  </div>' +
                  '</div>';
    $('body').append(newDrop);
        $.each(add_BBCode, function(order, object) {
          bbcode = object.bbcode;
          $('#drop_value').append($('<option>', {
                        value: bbcode
          }).text(bbcode));
        });
    $('<a class="sceditor-button" id="custom_command" onclick="toggle_dropbox(this)"><div style="background-image: url(http://i.imgur.com/EyQscqP.png);opacity: 1 !important;">CM</div></a>').insertBefore('.sceditor-button-quote');
    });
    function toggle_dropbox(bs) {
      var box = $('.sceditor-drop');
      if(box.is(':visible')) {
          box.hide();
      } else {
          box.css({
            'left': $(bs).offset().left,
            'top': $(bs).offset().top + $(bs).outerHeight(),
              'text-align': 'left'
          }).show();
      }
    };
    function bbcode_drop() {
        var box = $('.sceditor-drop');
        var bbcode = box.find('#drop_value').val();
        var nota = box.find('#desc_value').val();
        var editor = $('#text_editor_textarea').sceditor('instance');
        if(bbcode.length > 0) {
          if(nota.length > 0) {
            editor.insert('[table class="' + bbcode + '"][tr][td]' + nota + '[/td][/tr][/table]');
          } else {
            editor.insert('[table class="' + bbcode + '"][tr][td]','[/td][/tr][/table]');
          }
        }
        box.find('input[type="text"]').val('');
        box.hide();
    };



Endereço do meu fórum:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Versão:
PunBB[/quadrado]

avatar IsmaelS.  • Qua 31 Dez 2014 - 20:08

Colocar título ao gerar caixas de moderação Empty Re: Colocar título ao gerar caixas de moderação Qua 31 Dez 2014 - 20:08

UP - Necessitando de ajuda amigos !!!

avatar IsmaelS.  • Sáb 3 Jan 2015 - 1:56

Colocar título ao gerar caixas de moderação Empty Re: Colocar título ao gerar caixas de moderação Sáb 3 Jan 2015 - 1:56

UP - Necessitando de ajuda aqui amigos!

Cepheus Cepheus  • Sáb 3 Jan 2015 - 12:00

Colocar título ao gerar caixas de moderação Empty Re: Colocar título ao gerar caixas de moderação Sáb 3 Jan 2015 - 12:00

Fiz uma pequena alteração no código do Daemon:

Troque seu CSS por esse:
Código:
.postbody .sucesso, .postbody .aviso, .postbody .infos, .postbody .alerta {
  width: 75%;
  margin: 8px 0;
  padding: 8px;
  color: #fefefe;
  -webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.4);
  -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.4);
  -khtml-box-shadow: 0 1px 5px rgba(0,0,0,0.4);
  box-shadow: 0 1px 5px rgba(0,0,0,0.4);
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  -khtml-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
  border-style: solid;
  border-width: 0;
  position: relative;
  font: 14px/20px Museo300Regular,Helvetica,Arial,sans-serif;
  }
  .postbody .infos {
  background-color: #2fa9f6;
  background-image: url(http://i.imgur.com/Rb84YPI.png);
  background-repeat: no-repeat;
  background-position: 99% 50%;
  }
  .postbody .sucesso {
  background-color: #7EB62E;
  background-image: url(http://i.imgur.com/6vH65jF.png);
  background-repeat: no-repeat;
  background-position: 99% 50%;
  }
  .postbody .aviso {
  background-color: #BE1B00;
  background-image: url(http://i.imgur.com/aN6WLBM.png);
  background-repeat: no-repeat;
  background-position: 99% 50%;
  }
  .postbody .alerta {
  background-color: #F09D06;
  background-image: url(http://i.imgur.com/GvA8cN0.png);
  background-repeat: no-repeat;
  background-position: 99% 50%;
  }
.postbody .titulo{font-weight: 700;}
  

Troque o JS por esse:
Código:
/*
    * Código: Inserir novos comandos no editor.
    * Data de criação: 26/12/2014.
    * Autor: Daemon.
    * Versão: 1.0.
    * Acesse: http://bestskins.net
    * Não distribuir, ou remover os créditos do autor.
    */

    var add_BBCode = {
          '1': {bbcode: 'sucesso'},
          '2': {bbcode: 'aviso'},
          '3': {bbcode: 'alerta'},
          '4': {bbcode: 'infos'}
    };

    $(document).on('ready', function() {
    var newDrop = '<div class="sceditor-dropdown sceditor-drop" style="display: none;">' +
                  '  <div>' +
                  '     <label unselectable="on">Inserir...</label>' +
                  '     <select id="drop_value">' +
                  '        <option value="" selected>--------------</option>' +
                  '     </select>' +
                  '     <label unselectable="on">Titulo (opcional):</label>' +
                  '     <input type="text" id="titulo_value" />' +
                  '  </div>' +
                  '  <div>' +
                  '     <label unselectable="on">Descrição (opcional):</label>' +
                  '     <input type="text" id="desc_value" />' +
                  '  </div>' +
                  '  <div>' +
                  '     <input type="button" class="button" value="Inserir" onclick="bbcode_drop()">' +
                  '  </div>' +
                  '</div>';
    $('body').append(newDrop);
        $.each(add_BBCode, function(order, object) {
           bbcode = object.bbcode;
           $('#drop_value').append($('<option>', {
                         value: bbcode
           }).text(bbcode));
        });
    $('<a class="sceditor-button" id="custom_command" onclick="toggle_dropbox(this)"><div style="background-image: url(http://i.imgur.com/EyQscqP.png);opacity: 1 !important;">CM</div></a>').insertBefore('.sceditor-button-quote');
    });
    function toggle_dropbox(bs) {
      var box = $('.sceditor-drop');
      if(box.is(':visible')) {
           box.hide();
      } else {
           box.css({
             'left': $(bs).offset().left,
             'top': $(bs).offset().top + $(bs).outerHeight(),
              'text-align': 'left'
           }).show();
      }
    };
    function bbcode_drop() {
        var box = $('.sceditor-drop');
        var bbcode = box.find('#drop_value').val();
        var nota = box.find('#desc_value').val();
        var titulo = box.find('#titulo_value').val();
        var editor = $('#text_editor_textarea').sceditor('instance');
        if(bbcode.length > 0) {
          if(nota.length > 0 , titulo.length > 0){
             editor.insert('[table class="' + bbcode + '"][tr][td class="titulo"]' + titulo + '[/td][/tr][tr][td]' + nota + '[/td][/tr][/table]');
          } else {
             editor.insert('[table class="' + bbcode + '"][tr][td class="titulo"]','[/td][/tr][tr][td]','[/td][/tr][/table]');
          }
        }
        box.find('input[type="text"]').val('');
        box.hide();
    };

avatar IsmaelS.  • Sáb 3 Jan 2015 - 14:21

Colocar título ao gerar caixas de moderação Empty Re: Colocar título ao gerar caixas de moderação Sáb 3 Jan 2015 - 14:21

Seria possível colocar o título e descrição em cor branca, e os títulos de cada caixa desta forma:

- Caixa Verde
- Caixa Vermelha
- Caixa Laranja
- Caixa Azul

E uma dúvida apenas a staff tem acesso a esses botões?

Cepheus Cepheus  • Sáb 3 Jan 2015 - 16:43

Colocar título ao gerar caixas de moderação Empty Re: Colocar título ao gerar caixas de moderação Sáb 3 Jan 2015 - 16:43

Basta procurar o código abaixo na sua folha de estilo:(caso não ache procure por parte da linha exemplo: "body, td, th, tr")
Código:
body, td, th, tr {
color: #4F5961;
}

Troque por:
Código:
body {
color: #4F5961;
}

Sobre visualização dos botões eles serão visíveis a todos

avatar IsmaelS.  • Sáb 3 Jan 2015 - 17:10

Colocar título ao gerar caixas de moderação Empty Re: Colocar título ao gerar caixas de moderação Sáb 3 Jan 2015 - 17:10

Perfeito, e modificar os títulos de cada caixa, onde posso editar?

Cepheus Cepheus  • Dom 4 Jan 2015 - 11:32

Colocar título ao gerar caixas de moderação Empty Re: Colocar título ao gerar caixas de moderação Dom 4 Jan 2015 - 11:32

Reputação da mensagem: 100% (1 votos)
Você pode mudar, porem não recomendo:
No seu JS procure a seguinte linha:
Código:
 var add_BBCode = {
          '1': {bbcode: 'sucesso'},
          '2': {bbcode: 'aviso'},
          '3': {bbcode: 'alerta'},
          '4': {bbcode: 'infos'}
    };

Vamos supor que você queira mudar o bbcode "sucesso"

Você terá que mudar também a seguinte linha no seu css e trocar a parte onde está escrito "sucesso"
Lembrando que o nome não pode ter caracteres especiais nem espaços.
Código:
.postbody .sucesso
Todas as áreas onde estiver .sucesso deverá ser trocadas.
Exemplo vamos supor novamente que eu queira trocar .sucesso por .resolvido
Ficaria assim:
Código:
.postbody .resolvido


Seria basicamente isso,
Agora para adicionar uma nova caixa é o mesmo processo porem ao invés de modificar você terá QUE criar novos campos tanto no js como no css
Exemplo:
OBS: As áreas onde estão escrito NOVA-CAIXA-DE-TEXTO tanto no css como no js foram as áreas criadas.
Código:
var add_BBCode = {
          '1': {bbcode: 'sucesso'},
          '2': {bbcode: 'aviso'},
          '3': {bbcode: 'alerta'},
          '4': {bbcode: 'infos'}
          '5': {bbcode: 'NOVA-CAIXA-DE-TEXTO'}
    };

css:
Código:
.postbody .NOVA-CAIXA-DE-TEXTO, .postbody .sucesso, .postbody .aviso, .postbody .infos, .postbody .alerta {
  width: 75%;
  margin: 8px 0;
  padding: 8px;
  color: #fefefe;
  -webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.4);
  -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.4);
  -khtml-box-shadow: 0 1px 5px rgba(0,0,0,0.4);
  box-shadow: 0 1px 5px rgba(0,0,0,0.4);
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  -khtml-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
  border-style: solid;
  border-width: 0;
  position: relative;
  font: 14px/20px Museo300Regular,Helvetica,Arial,sans-serif;
  }
  .postbody .NOVA-CAIXA-DE-TEXTO {
  background-color: #2fa9f6;
  background-image: url(http://i.imgur.com/Rb84YPI.png);
  background-repeat: no-repeat;
  background-position: 99% 50%;
  }

Posso fechar o tópico?

avatar IsmaelS.  • Dom 4 Jan 2015 - 14:29

Colocar título ao gerar caixas de moderação Empty Re: Colocar título ao gerar caixas de moderação Dom 4 Jan 2015 - 14:29

Perfeito e obrigado, resolvido amigo!

Cepheus Cepheus  • Seg 5 Jan 2015 - 10:06

Colocar título ao gerar caixas de moderação Empty Re: Colocar título ao gerar caixas de moderação Seg 5 Jan 2015 - 10:06

[sucesso=Tópico Resolvido; e Bloqueado][/sucesso]

Conteúdo patrocinado  • 

Colocar título ao gerar caixas de moderação Empty Re: Colocar título ao gerar caixas de moderação

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