Fórum dos Fóruns

Fórum grátis: ajuda e atendimento ao utilizador Forumeiros.com

Banner com animação

3 participantes

Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum

Ir para baixo

Tópico resolvido Banner com animação

Mensagem por LucasPofahl 20.11.17 15:16

Detalhes da questão


Endereço do fórum: http://deltaforcecompany.forumeiros.com/
Versão do fórum: ModernBB

Descrição


Descrição do que desejo : Desejo que o logo do meu forúm permaneça apena mude o fundo com animação, a animação pode ser https://i.servimg.com/u/f62/19/78/52/23/slide11.png.

Ex: http://ls-cw.forumeiros.com/


Última edição por LucasPofahl em 23.11.17 15:20, editado 1 vez(es)
LucasPofahl
LucasPofahl
*

Membro desde : 04/10/2017
Mensagens : 37
Pontos : 53

http://deltaforcecompany.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Banner com animação

Mensagem por Ketholy 20.11.17 15:29

Olá LucasPofahl,

Aconselho que o senhor leia os link de suporte abaixo, um dos dois irá lhe ajudar.

-https://ajuda.forumeiros.com/t104934-tutorial-como-transformar-seu-banner-em-um-slide-show
-https://ajuda.forumeiros.com/t98820-tutorial-gerador-de-slides

Até mais !
Ketholy
Ketholy
Super Membro

Membro desde : 20/01/2017
Mensagens : 1309
Pontos : 1577

http://jogosrpg-com-br.forumais.com/forum https://twitter.com/Ketholy Suan

Ir para o topo Ir para baixo

Tópico resolvido Re: Banner com animação

Mensagem por LucasPofahl 20.11.17 15:41

Olá  Ketholy,

Na realidade não é especificamente uns slides e sim uma animação como está no site que dei como exemplo.


Espero resposta,

Att   Feliz
LucasPofahl
LucasPofahl
*

Membro desde : 04/10/2017
Mensagens : 37
Pontos : 53

http://deltaforcecompany.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Banner com animação

Mensagem por Konai 20.11.17 16:58

Olá autor!

Adicione a tua CSS o seguinte código:
Código:
#page-header {
    background: black url(https://i62.servimg.com/u/f62/19/78/52/23/slide11.png) repeat;
    animation: animate-background linear 100s infinite;
}
#page-header {
    position: relative;
    top: -30px;
    margin-top: 30px;
}
#logo-desc {
    padding: 60px 30px 30px;
}
#logo {
    float: left;
}
CPainel > Visualização >> Imagens e Cores >>> Cores > Folha de estilo CSS

Att! Feliz
Konai
Konai
Membro Entusiasta

Membro desde : 07/08/2010
Mensagens : 6045
Pontos : 7550

http://narutongo.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Banner com animação

Mensagem por LucasPofahl 20.11.17 17:07

Gaaratsu escreveu:Olá autor!

Adicione a tua CSS o seguinte código:
Código:
#page-header {
    background: black url(https://i62.servimg.com/u/f62/19/78/52/23/slide11.png) repeat;
    animation: animate-background linear 100s infinite;
}
#page-header {
    position: relative;
    top: -30px;
    margin-top: 30px;
}
#logo-desc {
    padding: 60px 30px 30px;
}
#logo {
    float: left;
}
CPainel > Visualização >> Imagens e Cores >>> Cores > Folha de estilo CSS

Att! Feliz
 
Obrigado pela ajuda , mais não resultou em nada !
Código:
#page-header .headerbar {
  background-image: url(https://i11.servimg.com/u/f11/19/78/52/23/loto10.png);
  background-size: 800px;
  background-position: center center;
  background-color: #000;
}
 
#page-header  .headerbar #logo {
  display: none;
}
 
.forabg,
.forumbg {
  background-color: #fff;
  border: solid 1px #000;
}
 
.forabg .header *,
.forumbg .header * {
  color: #000;
}
 
.forumbg .btn-collapse,
.forabg .btn-collapse {
  display: none;
}
 
.forabg .header .table-title h2,
.forumbg .header .table-title h2 {
  font-weight: 400;
}
 
.forabg .row,
.forumbg .row {
  background-color: #f0f0f0
}
 
.forabg .row:hover,
.forumbg .row:hover {
  background-color: #e4e4e4;
}
.header .table-title h2 {
  display: none !important;
}
body {
  padding-top: 55px;
}

.is-sticky#headerbar-top {
  background-color: #212121;
}
.headerbar {
  height: 390px;
}
 
.headerbar .navbar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  padding: 7px;
}
#page-header {
    background: black url(https://i62.servimg.com/u/f62/19/78/52/23/slide11.png) repeat;
    animation: animate-background linear 100s infinite;
}
#page-header {
    position: relative;
    top: -30px;
    margin-top: 30px;
}
#logo-desc {
    padding: 60px 30px 30px;
}
#logo {
    float: left;
}

Deixo minha CSS acima.

Att
LucasPofahl
LucasPofahl
*

Membro desde : 04/10/2017
Mensagens : 37
Pontos : 53

http://deltaforcecompany.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Banner com animação

Mensagem por Konai 20.11.17 18:10

Certo! Delete os códigos passados anteriormente e vamos lá!

Adicione o seguinte código na tua CSS:
Código:
a#logo img {
  visibility: hidden;
}

.headerbar {
  margin: -5px!important;
  margin-bottom: -67px!important;
  background-size: cover;
  background: url(https://i62.servimg.com/u/f62/19/78/52/23/slide11.png)!important;
  background-repeat: repeat-x!important;
}

div#wrap {
  opacity: 1!important;
}
CPainel > Visualização >> Imagens e Cores >>> Cores >>> Folha de estilo CSS
Lembre--se que as opções da CSS devem estar assim:
Forçar o CSS base do seu fórum - Não
Desativar o CSS de base - Não
Melhorar seu CSS - Sim

Agora em seu template overall_header adicione o seguinte código abaixo da tag
<head>:
Código:
<style>
@keyframes branding {
 
  from {
      background-position: 0 0;
  }
   
  to {
      background-position: 1600px 0;
  }
}
 
.headerbar {
    animation: branding 40s linear infinite;
}
</style>
CPainel > Visualização >> Templates >>> Geral > overall_header
Não esqueça de publicar o template após salvar!

OBS: Vai ficar um pouco esquisito, pois a imagem que o senhor forneceu é pequena e não muito larga.

Att! Feliz
Konai
Konai
Membro Entusiasta

Membro desde : 07/08/2010
Mensagens : 6045
Pontos : 7550

http://narutongo.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Banner com animação

Mensagem por LucasPofahl 20.11.17 18:32

Fiz todos os procedimentos certinhos , mas resultou nisso  Não
LucasPofahl
LucasPofahl
*

Membro desde : 04/10/2017
Mensagens : 37
Pontos : 53

http://deltaforcecompany.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Banner com animação

Mensagem por Konai 20.11.17 19:11

O senhor adicionou corretamente como lhe indiquei no template? Salvou e publicou?

Só para testes, copie todo o conteúdo da tua CSS e cole em um bloco de notas ou no word mesmo. Exclua ela do CPainel e adicione somente aquele código CSS que lhe passei, okay?
Salve e veja como fica!

Att! Feliz
Konai
Konai
Membro Entusiasta

Membro desde : 07/08/2010
Mensagens : 6045
Pontos : 7550

http://narutongo.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Banner com animação

Mensagem por LucasPofahl 21.11.17 15:16

Aee, mas a logo do fórum sumiu e tinha que almentar mais a animação.
LucasPofahl
LucasPofahl
*

Membro desde : 04/10/2017
Mensagens : 37
Pontos : 53

http://deltaforcecompany.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Banner com animação

Mensagem por Konai 21.11.17 22:28

Para a logo aparecer, substitua o código CSS anterior que lhe passei por este outro:
Código:
.headerbar {
  margin: -5px!important;
  margin-bottom: -67px!important;
  background-size: cover;
  background: url(https://i62.servimg.com/u/f62/19/78/52/23/slide11.png)!important;
  background-repeat: repeat-x!important;
}

div#wrap {
  opacity: 1!important;
}

Agora para acelerar ou desacelerar, temos que editar aquele código HTML que adicionamos no template.
A parte que deverá editar é:
animation: branding 40s linear infinite;
Aumente ou diminua o valor "40" destacado em negrito, mas mantenha o "s"

Att! Feliz
Konai
Konai
Membro Entusiasta

Membro desde : 07/08/2010
Mensagens : 6045
Pontos : 7550

http://narutongo.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Banner com animação

Mensagem por LucasPofahl 22.11.17 15:21

Apareceu a logo , mas está tudo desconfigurada.

Vamos tentar arrumar.

Att :  De bem com a vida
LucasPofahl
LucasPofahl
*

Membro desde : 04/10/2017
Mensagens : 37
Pontos : 53

http://deltaforcecompany.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Banner com animação

Mensagem por Konai 22.11.17 15:50

LucasPofahl escreveu:Apareceu a logo , mas está tudo desconfigurada.

Vamos tentar arrumar.

Att :  De bem com a vida
Na realidade não tem nada de errado com a logo, ela simplesmente é grande demais e a imagem que o senhor me passou para ter o efeito de animação é pequena. O correto seria o senhor solicitar na seção gráfica, uma logo menor com fundo transparente para não atrapalhar a imagem de fundo em animação.

Att! Feliz
Konai
Konai
Membro Entusiasta

Membro desde : 07/08/2010
Mensagens : 6045
Pontos : 7550

http://narutongo.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Banner com animação

Mensagem por LucasPofahl 22.11.17 16:16

Beleza , e tem como almentar aquela animação?
LucasPofahl
LucasPofahl
*

Membro desde : 04/10/2017
Mensagens : 37
Pontos : 53

http://deltaforcecompany.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Banner com animação

Mensagem por Ketholy 23.11.17 21:21

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.
Tópico marcado como Resolvido e movido para Questões resolvidas.
Ketholy
Ketholy
Super Membro

Membro desde : 20/01/2017
Mensagens : 1309
Pontos : 1577

http://jogosrpg-com-br.forumais.com/forum https://twitter.com/Ketholy Suan

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum

 
Permissões neste sub-fórum
Não podes responder a tópicos