Personalizar o separador de assinatura

Detalhes da questão

Endereço do fórum: http://pre-vestibulando.forumeiros.com
Versão do fórum: phpBB3

Descrição

Olá, Pessoal do FDF!

Hoje, eu gostaria de colocar tipo um barra qualquer em vez da linha padrão do separador de assinatura. Por conta disso, alguém poderia indicar algumas barras separadoras. Até...

Como tá no Painel de controle:



Como fica no Fórum:



Por isso que eu gostaria de alterar. rsrs

Olá,

O ideal seria colocar alguma imagem como separador, não hífen/underline... você pode pedir para criarem um a seu gosto no Setor Gráfico do FdF.

Vou disponibilizar dois separadores, caso lhe agradem.

https://i.imgur.com/6Qz6vRC.png
https://i.imgur.com/JzvuVgu.png

Não se esqueça que podes utilizar as balizar BBcode [img] (obrigatório se vai pôr a imagem) e [center] (recomendado).


o/

Eduardo Lima escreveu:Olá,

O ideal seria colocar alguma imagem como separador, não hífen/underline... você pode pedir para criarem um a seu gosto no Setor Gráfico do FdF.

Vou disponibilizar dois separadores, caso lhe agradem.

https://i.imgur.com/6Qz6vRC.png
https://i.imgur.com/JzvuVgu.png

Não se esqueça que podes utilizar as balizar BBcode [img] (obrigatório se vai pôr a imagem) e [center] (recomendado).


o/

Obrigado! Além disso, poderia falar um pouco mais sobre "As balizar BBcode".

Olá,

Perdoe-me o erro de digitação, na verdade são balizas BBCode.

Os únicos dois permitidos neste campo (refiro-me ao campo do separador de assinatura) são as balizas:

Código:

[img][/img]
[center][/center]

A baliza [ img ] (sem o espaço) é utilizada para acrescentar a imagem, exemplo de aplicação:

Código:

[img]https://i.imgur.com/6Qz6vRC.png[/img]

Isto faz com que fique assim:



Agora, a baliza [ center ] (sem o espaço) é utilizada para centralizar a imagem (neste caso), exemplo de aplicação:

Código:

[center][img]https://i.imgur.com/6Qz6vRC.png[/img][/center]

Isto faz com que fique assim:



É isto. o/

Olá,
tenho uma sugestão de um modelo de assinatura para você*; O final é limitado (altura) e usa scrollbar e do topo aparece Assinatura FdF, isso em css claro, ou fazer outra coisa que você tenha em mente.
Exemplo*:



obrigado,

Pedxz escreveu:Olá,
tenho uma sugestão de um modelo de assinatura para você*; O final é limitado (altura) e usa scrollbar e do topo aparece Assinatura FdF, isso em css claro, ou fazer outra coisa que você tenha em mente.
Exemplo*:



obrigado,

Olá, vc tem alguma sugestão para um separador de assinatura que seja parecido com essa imagem:



Ou seja, que destaca-se por ser um "pouco metálico" e que em vez de letras tivesse fórmulas. Estarei aguardando a sua resposta.

Eduardo Lima escreveu:Olá,

Perdoe-me o erro de digitação, na verdade são balizas BBCode.

Os únicos dois permitidos neste campo (refiro-me ao campo do separador de assinatura) são as balizas:

Código:

[img][/img]
[center][/center]

A baliza [ img ] (sem o espaço) é utilizada para acrescentar a imagem, exemplo de aplicação:

Código:

[img]https://i.imgur.com/6Qz6vRC.png[/img]

Isto faz com que fique assim:



Agora, a baliza [ center ] (sem o espaço) é utilizada para centralizar a imagem (neste caso), exemplo de aplicação:

Código:

[center][img]https://i.imgur.com/6Qz6vRC.png[/img][/center]

Isto faz com que fique assim:

É isto. o/

Obrigado por me informar.

Eu pela imagem não percebi grande coisa, você não têm o demo (fórum) onde tirou esse print?

Pedxz escreveu:Eu pela imagem não percebi grande coisa, você não têm o demo (fórum) onde tirou esse print?

Na verdade eu tirei isso de um site. Eu recortei uma parte (não é uma barra ) para tipo passar uma noção.

deixe esta opção vazia e adicione isto do seu CSS

Código:


.signature_div {
    background-color: rgba(253, 246, 209, 0.99);
    padding: 1em;
    text-align: center;
    border-radius: 4px;
    box-shadow: inset rgb(226, 218, 176) 0 1px 1px;
}


Pedxz escreveu: deixe esta opção vazia e adicione isto do seu CSS

Código:


.signature_div {
    background-color: rgba(253, 246, 209, 0.99);
    padding: 1em;
    text-align: center;
    border-radius: 4px;
    box-shadow: inset rgb(226, 218, 176) 0 1px 1px;
}


Olá, já adicionei na folha de estilo.

Veja como ficou:



A partir desse código é possível colocar uma "imagem de fundo nessa barra"? Aguardo a sua resposta.

Sim é possível,
qual a imagem que você quer?

Pedxz escreveu:Sim é possível,
qual a imagem que você quer?

Olá, quando for à noite eu forneço a imagem pra vc, pode ser? Desde já agradeço pela sua ajuda.

Bem autor,
fiz a assinatura com o gradiente metálico

Código:

.signature_div {
    padding: 1em;
  text-align: center;
  background: rgba(255,255,255,1);
  background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(47%, rgba(246,246,246,1)), color-stop(100%, rgba(237,237,237,1)));
  background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
  background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
  background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
  background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed', GradientType=0 );
    border-radius: 4px;
    box-shadow: inset rgb(226, 218, 176) 0 1px 1px;
}


para por a imagem sem a mesma fiquei danificada era necessário o seguinte template: viewtopic_body (CRIAÇÃO DE UMA NOVA CLASS)


esperarei uma resposta sua,
obrigado

Pedxz escreveu:Bem autor,
fiz a assinatura com o gradiente metálico

Código:

.signature_div {
    padding: 1em;
  text-align: center;
  background: rgba(255,255,255,1);
  background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(47%, rgba(246,246,246,1)), color-stop(100%, rgba(237,237,237,1)));
  background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
  background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
  background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
  background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed', GradientType=0 );
    border-radius: 4px;
    box-shadow: inset rgb(226, 218, 176) 0 1px 1px;
}


para por a imagem sem a mesma fiquei danificada era necessário o seguinte template: viewtopic_body (CRIAÇÃO DE UMA NOVA CLASS)


esperarei uma resposta sua,
obrigado

Olá, ainda não resultou... Infelizmente. Veja:



Aguardo a sua resposta.

Bem,
eu posso usar a imagem mas com a imagem terá uma restrição de tamanho (tamanho da imagem aumentada), por isso não recomendo muito usar uma imagem não têm outra forma que você queira usar?

Vc poderia apresentar algumas sugestões de separadores de assinatura legais.

Veja se esta "assinatura" elegante está no seu gosto, é possível a troca de cores:

Código:

.signature_div {
    height: auto;
    width: auto;
    padding: 1.4em;
    text-align: center;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
    background-color: #fafafa;
}
.signature_div::before {
  content: 'Minha assinatura Pré-Vesticulando';
  background-color: #F5D76E;
  color: #fafafa;
  padding: 1em;
  float: right;
  border-radius: 3px;
  }


Pedxz escreveu:Veja se esta "assinatura" elegante está no seu gosto, é possível a troca de cores:

Código:

.signature_div {
    height: auto;
    width: auto;
    padding: 1.4em;
    text-align: center;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
    background-color: #fafafa;
}
.signature_div::before {
  content: 'Minha assinatura Pré-Vestibulando';
  background-color: #F5D76E;
  color: #fafafa;
  padding: 1em;
  float: right;
  border-radius: 3px;
  }


Olá, gostei dessa "assinatura". Veja como ficou:



É possível "metalizá-la" também?

Mude para

Código:


.signature_div {
    height: auto;
    width: auto;
    padding: 1.4em;
    text-align: center;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
    background-color: #90A4A3;
}
.signature_div::before {
  content: 'Minha assinatura Pré-Vestibulando';
  background-color: #F5D76E;
  color: #fafafa;
  padding: 1em;
  float: right;
  border-radius: 3px;
  }


Apenas mudou de cor para um cinza. Eu queria um efeito metálico mais ou menos assim:

Olá,

A imagem sugerida pelo senhor não é a mais ideal para esse tipo de caso, tendo em vista que a imagem pode ficar meio distorcida dependendo do tamanho da assinatura de cada usuário.

Contudo, deixarei um código abaixo para que você possa ver o resultado.
Adicione ao final de sua Folha de Estilos:

Código:

.signature_div {
  background-image: url(https://i62.servimg.com/u/f62/19/80/65/20/metyyl10.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

Se não funcionar...:

o/

Desculpe, Luiz. Vc entendeu errado... Eu não quero mais uma imagem no separador de assinatura. Mas sim, poder usar esse separador abaixo que o colega fez pra mim com uma "metalização".



Ou seja, colocar um efeito metálico.

Ah desculpe,
eu tinha visto os botões do seu print e pensei que o efeito "metalizado" era só a cor, mas use este código

Código:

.signature_div {
    height: auto;
    width: auto;
    padding: 1.4em;
    text-align: center;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
    background: rgba(255,255,255,1);
  background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(47%, rgba(246,246,246,1)), color-stop(100%, rgba(237,237,237,1)));
  background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
  background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
  background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
  background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed', GradientType=0 );
}
.signature_div::before {
  content: 'Minha assinatura Pré-Vestibulando';
  background-color: #F5D76E;
  color: #fafafa;
  padding: 1em;
  float: right;
  border-radius: 3px;
  }


Vai ficar assim

Obrigado pela ajuda. Pode fechar o tópico.