Alterar imagem do code no SCeditor

Detalhes da questão

Endereço do fórum: http://www.schultzgames.com/
Versão do fórum: PhpBB3

Descrição

Olá pessoal, alguém saberia dizer como alterar imagens desta caixa citada abaixo???

Os membros do meu fórum tem uma dificuldade extraordinária de colocar os códigos dentro da codebox do fórum, e acredito eu que isto se deve ao fato de não ser muito óbvio que o botão do "pergaminho" simboliza uma codebox. Então eu gostaria de trocar aquela imagem, por uma mais destacada e maior, para que os membros possam ver que aquilo trata-se de uma inocente e doce caixa de códigos.

Alguém saberia como eu posso fazer isto? (gostaria de trocar a imagem por uma umas 4x mais larga)

Olá, veja: https://ajuda.forumeiros.com/t57328-tutorial-alterar-icone-dos-botoes-bbcode

Até Mais

Sim, mas neste link não há nada sobre o botão da "codebox"

Isto seria no código js que você está a utilizar...
Pois o tutorial ensina apenas os bbcodes padrões e não os que vocês criam com o uso de jquery/javascript... Se precisar de ajuda, peço que deixe aqui o código que utilizas para obter o codebox.

Até mais.

Acredito que eu não tenha nenhum JS que edite aquele botãozinho com aparência de pergaminho que você clica para adicionar os códigos O.o

Até chequei aqui, mas não encontrei nada.

Perdão.. é que em outro fórum, existe um bbcode chamado codebox, até pensei que estavas a utilizar.

Enfim, utilize esse código para mudar a imagem:

Código:

.sceditor-button-code div {
    background-image:url('ENDEREÇO DA IMAGEM') !important;
    background-position:0 !important;
}

Desculpe o mal entendimento.

Até mais.

Hmm, interessante, a imagem é trocada, mas o tamanho do botão ainda fica pequeno e quadrado.

Se eu colocar uma imagem 4x mais larga do que a original, a nova imagem é cortada

Up 1

Up 2

Up 3

Up 4

Up 5

O que deseja? aumentar o tamanho de todos os botões por acaso?
Pois se só aumenta o do code, ficará estranho... um maior que os outros.

Seria isto mesmo? fico no aguardo
Até mais.

Sim, a intenção é alterar apenas o tamanho do code, para que seja mais visível e os membros novos consigam colocar os códigos dentro da code sem que eu tenha que fazer eu mesmo a cada novo tópico

Olá, adicione esse código em sua folha de estilo css:

Código:

.sceditor-button {height:35px!important;}
      .sceditor-button div {margin-top:10px!important;}

lembrando que .sceditor-button seria para a caixa de todos os itens do SCeditor.
.sceditor-button div para todas as imagens dos itens do SCeditor.

Até mais.

Hmm, o que acontece com este trecho de código é que ele aumenta apenas a height geral dos botões.

A intenção seria aumentar apenas a width do botão code, apenas isto.

Então amigo... basta editar :/

Código:

.sceditor-button {width:35px!important;}
      .sceditor-button div {margin-left:10px!important;}

Até mais.

Mas isto afeta a todos os botões... eu pretendo deixar tudo como está, quero editar apenas a largura do botão (code), apenas isto

Olá,
adiciona esse código em sua CSS.

Código:

.sceditor-button .code {
width:35px!important;
}


Resulta?

Até mais.

Resultou em parte... adaptei ao meu código e ficou assim:

Código:

.sceditor-button {
    height:35px!important;
}
.sceditor-button div {
    margin-top:10px!important;
}
.sceditor-button-code div {
    background-image:url('http://i.imgur.com/MT68Sv7.png') !important;
    background-position:0 !important;
}
.sceditor-button-code {
    width:50px!important;
}

O tamanho dos botões muda, mas a imagem ainda fica pequena, independente do tamanho dela.

Olá, a imagem é pequena.. pois isto ficou pequena, kkk

Mas, troque o código seu por este:

Código:

.sceditor-button {
    height:35px!important;
}
.sceditor-button div {
    margin-top:10px!important;
}
.sceditor-button-code div {
    background-image:url('http://i.imgur.com/MT68Sv7.png') !important;
    background-position:0 !important;
    margin-left:10px!important;
    width:100%!important;
    height:100%!important;
    background-size:60%!important;
    margin-top:0px!important;
}
.sceditor-button-code {
    width:50px!important; 
}

Para mudar o tamanho da imagem , procure no código que te passei por: background-size:60%!important;

Dai basta mudar o valor 60% para qual achar melhor.
Até mais.

100%, agora está destacado o/