Fórum dos Fóruns

Fórum dos Fóruns Forumeiros

Welcome FdF Bem-vindo ao fórum de suporte Forumeiros  Muito feliz


Para aproveitar tudo o que o nosso fórum lhe oferece, agradecemos que se identifique, se já é nosso membro, ou que se junte à nossa comunidade, fazendo o seu registo.
Acesso rápido

Fóruns de suporte oficiais
Login

Esqueci minha senha

Últimos assuntos
» Ranks para fórum
Hoje à(s) 19:16 por Fou-Lu

» Efeito no Logo
Hoje à(s) 19:13 por iScroll

» Rank Diretor
Hoje à(s) 18:50 por Fou-Lu

» Modificar Post e Mensagem das categorias
Hoje à(s) 18:29 por William_iHarDz

» Ranks para usar em um forum ( servidor de samp)
Hoje à(s) 18:11 por Fou-Lu

» Remover nomes na barras
Hoje à(s) 16:49 por fiapinho

» Modificação do nome dos usuários
Hoje à(s) 15:31 por xBreninho_.

Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Parceiros Forumeiros
Quem está conectado
285 usuários online :: 5 usuários cadastrados, 1 Invisível e 279 Visitantes :: 2 Motores de busca

Fou-Lu, Kyou, L Mars, ROBERTO 454, ruystguerra

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em Qui 24 Dez 2009 - 15:05

Efeito de ícones + texto

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Efeito de ícones + texto

Mensagem por IsmaelS. em Sex 9 Out 2015 - 20:23

Detalhes da questão


Endereço do fórum: http://master-publicitario.forumeiros.com/
Versão do fórum: PhpBB3

Descrição


Olá!

Gostaria de saber o código deste efeito:


Link do efeito: http://ismaelsd.forumeiros.com.pt/forum

Mas para a versão PhpBB3!

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2610
Pontos Ativos : 5173

http://suportedesign.forumeiros.com/

O autor desta mensagem foi removido do fórum - Ver a mensagem

Resolvido Re: Efeito de ícones + texto

Mensagem por IsmaelS. em Sex 9 Out 2015 - 20:31

Parece que falta algum código de .CSS veja:
- http://master-publicitario.forumeiros.com/

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2610
Pontos Ativos : 5173

http://suportedesign.forumeiros.com/

O autor desta mensagem foi removido do fórum - Ver a mensagem

Resolvido Re: Efeito de ícones + texto

Mensagem por IsmaelS. em Sex 9 Out 2015 - 20:55

Colocado mas desapareceu o texto.

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2610
Pontos Ativos : 5173

http://suportedesign.forumeiros.com/

Resolvido Re: Efeito de ícones + texto

Mensagem por Fraise em Sex 9 Out 2015 - 21:21

Olá!

Aqui está:
Código:
<script type="text/javascript">
  $(function() {
      $("#vertical_slider li a").each(function() {
          $(this).hover(function() {
              $(this).animate({
                  width: "405px"
              }, {
                  queue: false,
                  duration: 450
              });
          }, function() {
              $(this).animate({
                  width: "128px"
              }, {
                  queue: false,
                  duration: 450
              });
          });
      }); /*To use this you need to load jquery easing plugins*/
      $("#vertical_slider.easing li a").each(function() {
          $(this).hover(function() {
              $(this).animate({
                  width: "405px"
              }, {
                  queue: false,
                  duration: 450,
                  easing: 'easeOutBack'
              });
          }, function() {
              $(this).animate({
                  width: "128px"
              }, {
                  queue: false,
                  duration: 450,
                  easing: 'easeInBack'
              });
          });
      });
  });
</script>
<li>
  <a href="/rss" class="rss_feed">
      <p><strong>Ultimele Subiecte</strong><br />Urmareste ultimele subiecte ale <br />forumului <br>&nbsp;</p>
  </a>
</li>
<li>
  <a href="#" class="news">
      <p><strong style="font-size:24px;">Anunturi/Actualizari</strong><br />Ultimele noutati si actualizari de pe <br>forumul .<br>&nbsp;</p>
  </a>
</li>
<li>
  <a href="#" class="suport">
      <p><strong>Suport</strong><br />Lorem ipsum dolor sit amet, <br>consectetur adipisicing elit<br> sed do eiusmod tempor incididunt</p>
  </a>
</li>
<li>
  <a href="#" class="portfolio">
      <p><strong>Portofoliu</strong><br />Sed ut perspiciatis unde omnis <br>error sit voluptatem accusantium doloremque <br>&nbsp;</p>
  </a>
</li>
</ul>

Para que funcione corretamente, deverá aceder a Painel de Controle > Visualização > Cores > Folha de estilo CSS e adicionar o seguinte código:
Código:
#vertical_slider {
color:#999;
font-family:Georgia,"Times New Roman",Times,serif;
font-size:1.2em;
font-style:italic;
font-variant:normal;
font-weight:400;
line-height:1.2em;
list-style:none;
margin-bottom:10px;
margin-top:4px;
text-align:center;
padding:0;
}

#vertical_slider a {
color:#999;
text-decoration:none;
}

#vertical_slider li {
display:inline;
height:90px;
list-style:none;
margin:0 15px 0 0;
padding:0;
}

#vertical_slider li a {
display:inline-block!important;
height:90px;
line-height:90px;
overflow:hidden;
text-align:left;
white-space:nowrap;
width:128px;
}

#vertical_slider li a p {
line-height:normal;
padding:0 0 0 135px;
}

#vertical_slider li a p strong {
color:#360;
font-size:24px;
}

#vertical_slider li a.rss_feed {
background:url(http://i36.servimg.com/u/f36/11/96/49/61/rss10.png) top left no-repeat;
}

#vertical_slider li a.news {
background:url(http://i36.servimg.com/u/f36/11/96/49/61/noutai10.png) top left no-repeat;
}

#vertical_slider li a.suport {
background:url(http://i36.servimg.com/u/f36/11/96/49/61/suport10.png) top left no-repeat;
}

#vertical_slider li a.portfolio {
background:url(http://i36.servimg.com/u/f36/11/96/49/61/portof10.png) top left no-repeat;
}

#specificatii {
-moz-border-radius:10px;
-webkit-border-radius:10px;
background:#765C43;
border:2px solid #401a01;
border-radius:10px;
color:#fff;
float:center;
list-style-type:none;
text-shadow:1px 1px 0 #000;
width:90%;
margin:5px 0;
padding:5px;
}

#specificatii li {
margin-bottom:15px;
text-align:left;
}

#specificatii li:last-child {
margin-bottom:0;
}

#inchide_specificatii {
cursor:pointer;
left:-30px;
position:relative;
top:-20px;
}

#portofoliu {
left:-12px;
position:relative;
}

#portofoliu img {
background:#fff;
border:1px solid #6a6a6a;
padding:2px;
}

#portofoliu td {
-moz-border-radius:7px;
-webkit-border-radius:7px;
background:#fbfbfb;
border:4px solid #c9c9c9;
border-radius:7px;
padding:5px;
}

#portofoliu td:hover {
background:#ebebeb;
}

Até mais.
Fraise

Fraise
Super usuário

Masculino
Inscrito dia : 26/06/2015
Mensagens : 4974
Pontos Ativos : 7235

http://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Resolvido Re: Efeito de ícones + texto

Mensagem por IsmaelS. em Sex 9 Out 2015 - 21:25

Continua sem efeito amigo veja:
- http://master-publicitario.forumeiros.com/

O primeiro código é para colar na homepage certo?

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2610
Pontos Ativos : 5173

http://suportedesign.forumeiros.com/

O autor desta mensagem foi removido do fórum - Ver a mensagem

  • 0

Resolvido Re: Efeito de ícones + texto

Mensagem por Fraise em Sex 9 Out 2015 - 21:32

Okey! Crie um novo JavaScript com este código e com investimento no índice:
Código:
  $(function() {
      $("#vertical_slider li a").each(function() {
          $(this).hover(function() {
              $(this).animate({
                  width: "405px"
              }, {
                  queue: false,
                  duration: 450
              });
          }, function() {
              $(this).animate({
                  width: "128px"
              }, {
                  queue: false,
                  duration: 450
              });
          });
      }); /*To use this you need to load jquery easing plugins*/
      $("#vertical_slider.easing li a").each(function() {
          $(this).hover(function() {
              $(this).animate({
                  width: "405px"
              }, {
                  queue: false,
                  duration: 450,
                  easing: 'easeOutBack'
              });
          }, function() {
              $(this).animate({
                  width: "128px"
              }, {
                  queue: false,
                  duration: 450,
                  easing: 'easeInBack'
              });
          });
      });
  });

Até mais.

Fraise
Super usuário

Masculino
Inscrito dia : 26/06/2015
Mensagens : 4974
Pontos Ativos : 7235

http://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Resolvido Re: Efeito de ícones + texto

Mensagem por IsmaelS. em Sex 9 Out 2015 - 21:34

Obrigado a ambos ficou perfeito!! Resolvido!

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2610
Pontos Ativos : 5173

http://suportedesign.forumeiros.com/

Resolvido Re: Efeito de ícones + texto

Mensagem por Sennior em Sex 9 Out 2015 - 21:38

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

Sennior
Ex-Admineiro
Ex-Admineiro

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16258
Pontos Ativos : 22836

http://ajuda.forumeiros.com/forum https://www.facebook.com/GlladstonHenrique

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum