[TUTORIAL] Alterar ícone dos botões BBCode
Página 1 de 1 • Compartilhe

[TUTORIAL] Alterar ícone dos botões BBCode
![]() | SCEditor Forumeiros |
Assim como o antigo editor, nós podemos alterar as imagens correspondentes ao negrito, itálico, sublinhado e outros mais do SCEditor, aumentando a personalização do fórum.
--> Tutoriais, dicas e astúcias <--
Alterar imagens dos botões do editor
Alterar imagens dos botões do editor
1º - Localização e noções básicas da função:
CSS na verdade significa "Cascading Style Sheets", sua principal função é personalizar um determinado conteúdo exibido, em um determinado lugar na página. Cada versão de fórum (phpbb2. phpbb3, punbb e invision) possuem uma classe diferente, e nessas classes podem ser adicionadas as “propriedades”. Caso queira conhecer alguns tipos de classes, poderá consultar mais informações no seguinte: Elaborar um código CSS
Painel de controle ->> Visualização ->> Imagens e Cores ->> Cores ->> Folha de estilo CSS ->>
![]() | ![]() |
![]() | ![]() |
![]() | ![]() |
![]() | ![]() |
2º - Código a ser usado:
Vamos usar a propriedade do CSS background-image: url('') que é usado para colocar imagens em uma classe ou id. Já que o editor já tem uma específica, vamos apenas alterar o background dele por uma desejável. Adicione o seguinte código no seu CSS:
- Código:
.sceditor-button-bold div {
background-image:url('ENDEREÇO_DA_IMAGEM') !important;
background-position:0 !important;
}
Feito isso, salve.
Para modificar outros botões, os códigos abaixo alteram cada um:
- NEGRITO:
- Código:
.sceditor-button-bold div {
background-image:url('ENDEREÇO_DA_IMAGEM') !important;
background-position:0 !important;
}
- ITÁLICO:
- Código:
.sceditor-button-italic div {
background-image:url('ENDEREÇO_DA_IMAGEM') !important;
background-position:0 !important;
}
- SUBLINHADO:
- Código:
.sceditor-button-underline div {
background-image:url('ENDEREÇO_DA_IMAGEM') !important;
background-position:0 !important;
}
- RISCADO:
- Código:
.sceditor-button-strike div {
background-image:url('ENDEREÇO_DA_IMAGEM') !important;
background-position:0 !important;
}
- ESQUERDA:
- Código:
.sceditor-button-left div {
background-image:url('ENDEREÇO_DA_IMAGEM') !important;
background-position:0 !important;
}
- CENTREALIZADO:
- Código:
.sceditor-button-center div {
background-image:url('ENDEREÇO_DA_IMAGEM') !important;
background-position:0 !important;
}
- DIREITA:
- Código:
.sceditor-button-right div {
background-image:url('ENDEREÇO_DA_IMAGEM') !important;
background-position:0 !important;
}
- JUSTIFICADO:
- Código:
.sceditor-button-justify div {
background-image:url('ENDEREÇO_DA_IMAGEM') !important;
background-position:0 !important;
}
- Existe outras imagens que posso usar?
Claro! Veja abaixo a imagem correspondente a alguns botões do antigo editor:- IMAGENS DO EDITOR ANTIGO:
- https://2img.net/i/fa/wysiwyg/text_italic.png
https://2img.net/i/fa/wysiwyg/text_underline.png
https://2img.net/i/fa/wysiwyg/text_strikethrough.png
https://2img.net/i/fa/wysiwyg/text_align_left.png
https://2img.net/i/fa/wysiwyg/text_align_right.png
https://2img.net/i/fa/wysiwyg/text_align_justify.png
https://2img.net/i/fa/wysiwyg/text_list_bullets.png
https://2img.net/i/fa/wysiwyg/text_list_numbers.png
https://2img.net/i/fa/wysiwyg/text_horizontalrule.png
https://2img.net/i/fa/wysiwyg/comments.png
https://2img.net/i/fa/wysiwyg/page_white_code.png
https://2img.net/i/fa/wysiwyg/picture.png
https://2img.net/i/fa/wysiwyg/link.png
https://2img.net/i/fa/wysiwyg/page_white_flash.png
https://2img.net/i/fa/wysiwyg/film.png
https://2img.net/i/fa/wysiwyg/color_swatch.png
https://2img.net/i/fa/wysiwyg/font.png
https://2img.net/i/fa/wysiwyg/help.png
https://2img.net/i/fa/wysiwyg/font_delete.png
https://2img.net/i/fa/i/switch_wysiwyg.gif
- Resultado
© Fórum dos Fóruns & Shek
![]() | Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: [Dúvida] Alterar imagens dos botões do editor |
seender- Membro Proficiente
-
Membro desde : 07/04/2009
Mensagens : 9449
Pontos : 12455

» Alterar ícone dos botões bbcode
» Alterar ícone dos botões bbcode
» Alterar ícone dos botões BBCode
» Alterar ícone dos botões BBCode
» [TUTORIAL] Alterar o ícone do tópico em modo AJAX
» Alterar ícone dos botões bbcode
» Alterar ícone dos botões BBCode
» Alterar ícone dos botões BBCode
» [TUTORIAL] Alterar o ícone do tópico em modo AJAX
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos