Personalização do "Enviar" e "Pré-visualizar"

Detalhes da questão

Endereço do fórum: https://empireofwars.forumotion.com/
Versão do fórum: PunBB

Descrição

Gostaria de saber como colocar os botoes assim

https://prnt.sc/rhdrwg

Ja agora estou a tirar as ideias deste forum aqui

http://invision-virus.com/

Olá @empireofwars,

Adicione na sua folha de estilo, o seguinte código:

Código:

.frm-buttons input[type="submit"] {
    background:#212121 url(http://invision-virus.com/forum/public/style_images/light/topic_button.png) repeat-x top;
    color:#fff;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    -moz-box-shadow:inset 0 1px 0 0 #5c5c5c, 0px 2px 3px rgba(0,0,0,0.2);
    -webkit-box-shadow:inset 0 1px 0 0 #5c5c5c, 0px 2px 3px rgba(0,0,0,0.2);
    box-shadow:inset 0 1px 0 0 #5c5c5c, 0px 2px 3px rgba(0,0,0,0.2);
    border-color:#212121
}
 .frm-buttons input[name="preview"] {
    background:#eee;
    border-color:#ddd;
    color:#464646;
    -moz-box-shadow:inset 0 1px 0 0 #f1f1f1, 0px 2px 3px rgba(0,0,0,0.2);
    -webkit-box-shadow:inset 0 1px 0 0 #f1f1f1, 0px 2px 3px rgba(0,0,0,0.2);
    box-shadow:inset 0 1px 0 0 #f1f1f1, 0px 2px 3px rgba(0,0,0,0.2)
}
 .frm-buttons input[type="submit"]:not([name="preview"]):hover {
    color:#fff
}

Cordialmente,
pedxz.

Nao ficou 100% interessante mas gostei.

E possivel trocar a ordem dos botoes?

Altere para:

Código:

.frm-buttons {
  margin-left: auto;
  margin-right: auto;
  width: 23%;
  border-top: 0px!important;
}
.frm-buttons input[type="submit"] {
     background:#212121 url(http://invision-virus.com/forum/public/style_images/light/topic_button.png) repeat-x top;
     color:#fff;
     -moz-border-radius:3px;
     -webkit-border-radius:3px;
     border-radius:3px;
     -moz-box-shadow:inset 0 1px 0 0 #5c5c5c, 0px 2px 3px rgba(0,0,0,0.2);
     -webkit-box-shadow:inset 0 1px 0 0 #5c5c5c, 0px 2px 3px rgba(0,0,0,0.2);
     box-shadow:inset 0 1px 0 0 #5c5c5c, 0px 2px 3px rgba(0,0,0,0.2);
     border-color:#21212;
    float:left;
}
 .frm-buttons input[name="preview"] {
     background:#eee;
    border-color:#ddd;
    color:#464646;
    -moz-box-shadow:inset 0 1px 0 0 #f1f1f1, 0px 2px 3px rgba(0,0,0,0.2);
    -webkit-box-shadow:inset 0 1px 0 0 #f1f1f1, 0px 2px 3px rgba(0,0,0,0.2);
    box-shadow:inset 0 1px 0 0 #f1f1f1, 0px 2px 3px rgba(0,0,0,0.2);
  float:right;
}
 .frm-buttons input[type="submit"]:not([name="preview"]):hover {
     color:#fff
}

Ficou centrado em vez de ficar a direita
https://prnt.sc/rheqrn

Desculpe!

Código:

.frm-buttons {
  margin-left: auto;
  margin-right: auto;
  width: max-content;
  border-top: 0px!important;
  float: right;
}
.frm-buttons input[type="submit"] {
    background:#212121 url(http://invision-virus.com/forum/public/style_images/light/topic_button.png) repeat-x top;
    color:#fff;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    -moz-box-shadow:inset 0 1px 0 0 #5c5c5c, 0px 2px 3px rgba(0,0,0,0.2);
    -webkit-box-shadow:inset 0 1px 0 0 #5c5c5c, 0px 2px 3px rgba(0,0,0,0.2);
    box-shadow:inset 0 1px 0 0 #5c5c5c, 0px 2px 3px rgba(0,0,0,0.2);
    border-color:#21212;
}
 .frm-buttons input[name="preview"] {
    background:#eee;
    border-color:#ddd;
    color:#464646;
    -moz-box-shadow:inset 0 1px 0 0 #f1f1f1, 0px 2px 3px rgba(0,0,0,0.2);
    -webkit-box-shadow:inset 0 1px 0 0 #f1f1f1, 0px 2px 3px rgba(0,0,0,0.2);
    box-shadow:inset 0 1px 0 0 #f1f1f1, 0px 2px 3px rgba(0,0,0,0.2);
}
 .frm-buttons input[type="submit"]:not([name="preview"]):hover {
    color:#fff
}

Nao funcionou, dessa maneira os botoes encontram-se default, como nao sofresse alteracao

Acidentalmente removi uma vírgula do código em cima, altere para:

Código:

.frm-buttons {
  margin-left: auto;
  margin-right: auto;
  width: max-content;
  border-top: 0px!important;
  float: right;
}
.frm-buttons input[type="submit"] {
    background:#212121 url(http://invision-virus.com/forum/public/style_images/light/topic_button.png) repeat-x top;
    color:#fff;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    -moz-box-shadow:inset 0 1px 0 0 #5c5c5c, 0px 2px 3px rgba(0,0,0,0.2);
    -webkit-box-shadow:inset 0 1px 0 0 #5c5c5c, 0px 2px 3px rgba(0,0,0,0.2);
    box-shadow:inset 0 1px 0 0 #5c5c5c, 0px 2px 3px rgba(0,0,0,0.2);
    border-color:#212121
}
 .frm-buttons input[name="preview"] {
    background:#eee;
    border-color:#ddd;
    color:#464646;
    -moz-box-shadow:inset 0 1px 0 0 #f1f1f1, 0px 2px 3px rgba(0,0,0,0.2);
    -webkit-box-shadow:inset 0 1px 0 0 #f1f1f1, 0px 2px 3px rgba(0,0,0,0.2);
    box-shadow:inset 0 1px 0 0 #f1f1f1, 0px 2px 3px rgba(0,0,0,0.2);
    float:right;
}
 .frm-buttons input[type="submit"]:not([name="preview"]):hover {
    color:#fff
}

PErfeito, muito obrigado mesmo.

Por ultimo e ainda a ver com isso, e possivel alterar o nome dos botoes?

Enviar - Postar
Previsualizar - Opções

empireofwars escreveu:(...)
Por ultimo e ainda a ver com isso, e possivel alterar o nome dos botoes?

Enviar - Postar
Previsualizar - Opções

Não é possível, lamento

Boa tarde,

@Pedxz é possivel fazer essa alteração sim, com este JS abaixo, dá para alterar tudo que for necessário.

@empireofwars Adicione este script abaixo com investimento nos tópicos:

Código:

jQuery(document).ready(function(){
      jQuery('input[name="post"]:submit').attr('value', 'Postar');
 
});
jQuery(document).ready(function(){
      jQuery('input[name="preview"]:submit').attr('value', 'Opções');
 
});

Cumprimentos,
Klanxi

Resultou, obrigado