Botões moderativos (Sucesso...)

Qual é minha questão:
Saudações!

Eu segui o tutorial dos botões daqui e deu.
O único problema é que os botões não aparece na barra de BBcode. O problema é que só consegui introduzir manualmente: [**infos**] ... [**/infos**]

Imagem:

[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Até.

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

Versão:
PunBB

Saudações!

Envie-me o link do tutorial em que o mesmo viu o código.

Até mais.

[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Crie um novo JavaScript com investimento em todas as páginas e adicione:
Código: (Selecionar conteúdo)

Código:

$(function(){
  $(function(){
    $('<a class="sceditor-button sceditor-button-sucesso" unselectable="on" title="Sucesso"><div unselectable="on" style="background-image:url(http://i.imgur.com/EISZPwN.png)">Sucesso</div></a>').insertBefore('.sceditor-button-size').click(function(){
            $('#text_editor_textarea').sceditor("instance").insertText("[table class=sucesso][tr][td]","[/td][/tr][/table]");
     });
     $('<a class="sceditor-button sceditor-button-alerta" unselectable="on" title="Alerta"><div unselectable="on" style="background-image:url(http://i.imgur.com/lMsD0nE.png)">Alerta</div></a>').insertAfter('.sceditor-button-sucesso').click(function(){
            $('#text_editor_textarea').sceditor("instance").insertText("[table class=alerta][tr][td]","[/td][/tr][/table]");
     });
     $('<a class="sceditor-button sceditor-button-aviso" unselectable="on" title="Aviso"><div unselectable="on" style="background-image:url(http://i.imgur.com/cI8SnOI.png)">Aviso</div></a>').insertAfter('.sceditor-button-alerta').click(function(){
            $('#text_editor_textarea').sceditor("instance").insertText("[table class=aviso][tr][td]","[/td][/tr][/table]");
     });
     $('<a class="sceditor-button sceditor-button-info" unselectable="on" title="Informação"><div unselectable="on" style="background-image:url(http://i.imgur.com/40zM1qS.png)">Informação</div></a>').insertAfter('.sceditor-button-aviso').click(function(){
            $('#text_editor_textarea').sceditor("instance").insertText("[table class=infos][tr][td]","[/td][/tr][/table]");
     });
     });
  });

Depois adicione ao seu css:
Código: (Selecionar conteúdo)

Código:

.sucesso {
background: url('http://cdn3.iconfinder.com/data/icons/fatcow/32x32_0020/accept.png') no-repeat 6px #effeb9;
border: 1px solid #9ac601;
color: #4F8A10;
padding: 6px 6px 6px 40px;
width: 99%;
text-shadow: 0 1px 0 #FFFAF1;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) inset;
font-weight: bold;
border-radius: 3px 3px 3px 3px;
}
.alerta {
background: url('http://cdn1.iconfinder.com/data/icons/CrystalClear/32x32/actions/messagebox_critical.png') no-repeat 6px #fccac3;
border: 1px solid #db3f23;
color: #D8000C;
padding: 6px 6px 6px 40px;
width: 99%;
text-shadow: 0 1px 0 #FFFAF1;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) inset;
font-weight: bold;
border-radius: 3px 3px 3px 3px;
}
.aviso {
background: url('http://cdn3.iconfinder.com/data/icons/fatcow/32x32_0400/error.png') no-repeat 6px #ffeaa9;
border: 1px solid #f9b516;
color: #9F6000;
padding: 6px 6px 6px 40px;
width: 99%;
text-shadow: 0 1px 0 #FFFAF1;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) inset;
font-weight: bold;
border-radius: 3px 3px 3px 3px;
}
.infos {
background: url('http://cdn1.iconfinder.com/data/icons/musthave/24/Information.png') no-repeat 6px #d1e4f3;
border: 1px solid #4d8fcb;
color: #00529B;
padding: 6px 6px 6px 40px;
width: 99%;
text-shadow: 0 1px 0 #FFFAF1;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) inset;
font-weight: bold;
border-radius: 3px 3px 3px 3px;
}

Até mais!

Saudações!

Se possível os indicados no topo do tópico! 

Exemplo: [infos=Teste]Mas obrigado pela atenção [/infos] 

Até

Aqui amigo:

Código:

$(document).on('ready', function () {
$(".sceditor-container").append('<div class="sceditor-dropdown sceditor-sucesso" style="display:none;margin-top: 27px;"><div><label for="sucessotext" style="text-align:left;" >Texto : </label><input type="text" id="sucessotext" style = "float:left" placeholder="Insira seu título aqui...">
<label for="sucessonote" style="text-align:left;">Nota : </label><input type="text" id="sucessonote" style = "float:left" placeholder="Insira seu texto aqui..."><input type="button" style = "margin-top: 15px;"class="button" value="insert"></div></div>'); 
 $('<a class="sceditor-button bbcode-sucesso"  title="Sucesso"><div style="background-image:url(http://i.imgur.com/EISZPwN.png)">Sucesso</div></a>').insertBefore('.sceditor-button-size').click(function () {
var f = $(".sceditor-sucesso").css("display");
if(f =='none') {$(".sceditor-sucesso").css({"left": $(this).position().left , "top": $(this).position().top, }).show(); }
else {$(".sceditor-sucesso").hide(); }
});
$(".sceditor-sucesso .button").click(function () {
var title = $(".sceditor-sucesso #sucessotext").val();
var note = $(".sceditor-sucesso #sucessonote").val();
$('#text_editor_textarea').sceditor("instance").insert('[sucesso='+title+']'+note+'[/sucesso]');
});
});

Este é somente o de um BBcode, mas creio que você irá entender este código e conseguirá adicionar os demais.
Até mais!

Daemon escreveu:Aqui amigo:

Código:

$(document).on('ready', function () {
$(".sceditor-container").append('<div class="sceditor-dropdown sceditor-sucesso" style="display:none;margin-top: 27px;"><div><label for="sucessotext" style="text-align:left;" >Texto : </label><input type="text" id="sucessotext" style = "float:left" placeholder="Insira seu título aqui...">
<label for="sucessonote" style="text-align:left;">Nota : </label><input type="text" id="sucessonote" style = "float:left" placeholder="Insira seu texto aqui..."><input type="button" style = "margin-top: 15px;"class="button" value="insert"></div></div>');  
 $('<a class="sceditor-button bbcode-sucesso"  title="Sucesso"><div style="background-image:url(http://i.imgur.com/EISZPwN.png)">Sucesso</div></a>').insertBefore('.sceditor-button-size').click(function () {
var f = $(".sceditor-sucesso").css("display");
if(f =='none') {$(".sceditor-sucesso").css({"left": $(this).position().left , "top": $(this).position().top, }).show(); }
else {$(".sceditor-sucesso").hide(); }
});
$(".sceditor-sucesso .button").click(function () {
var title = $(".sceditor-sucesso #sucessotext").val();
var note = $(".sceditor-sucesso #sucessonote").val();
$('#text_editor_textarea').sceditor("instance").insert('[sucesso='+title+']'+note+'[/sucesso]');
});
});

Este é somente o de um BBcode, mas creio que você irá entender este código e conseguirá adicionar os demais.
Até mais!

[sucesso=Resolvido]Caro Daemon resultou mesmo! Estou adicionando o resto obrigado pela ajuda.[/sucesso] 

#rep

Até mais!

[sucesso=Tópico Resolvido; e Bloqueado][/sucesso]Movido para: Arquivo - Pedido de código