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


Meriteiro

Agosto de 2016



"Este membro destacou-se pela sua dedicação e pelo seu esforço.
Ao longo do último mês, demonstrou as suas capacidades gerais no FDF e, por isso, merece o nosso agradecimento."
Login

Esqueci minha senha

Últimos assuntos
» [PEDIDO] Banner
Hoje à(s) 20:14 por Sennior

» Icones Nova mensagem e nemhuma mensagem
Hoje à(s) 20:08 por Holkis

» Betting Arena
Hoje à(s) 20:06 por Holkis

» Logo familia no mercy
Hoje à(s) 20:01 por Holkis

» Remover Imagem de fundo
Hoje à(s) 19:56 por JrMAFiA

» A Propaganda está no lugar errado
Hoje à(s) 19:50 por while

» [PEDIDO] Ícone "Enquete"
Hoje à(s) 19:46 por IsmaelS.

Perdi minha senha!
Obter senha

Nota: use se tiver perdido acesso ao seu painel de controle.

Últimas sugestões
Parceiros Forumeiros
Os membros mais ativos da semana
while
 
Cream
 
Shek
 
Holkis
 
IsmaelS.
 
PrisoN†BreaK
 
Ana Leandro
 
Sennior
 
Cepheus
 
YouTube3
 

Quem está conectado
86 usuários online :: 9 usuários cadastrados, Nenhum Invisível e 77 Visitantes :: 2 Motores de busca

Hancki, Holkis, JrMAFiA, maxleo, Nogueira SSA, Sennior, SyraoN_, while, ZombieW

[ 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.
Meriteiro
Meriteiro

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2607
Pontos Ativos : 5016

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.
Meriteiro
Meriteiro

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2607
Pontos Ativos : 5016

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.
Meriteiro
Meriteiro

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2607
Pontos Ativos : 5016

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


Bem-vindo ao fórum de suporte Forumeiros!
> Tenha conhecimento do regulamento do setor de suporte.
> Conheça a staff e suas diretrizes.
> Antes de perguntar, use a busca.
> Confira a lista de tutoriais.
> MP apenas para assuntos importantes!


Fraise
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 26/06/2015
Mensagens : 4953
Pontos Ativos : 7057

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.
Meriteiro
Meriteiro

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2607
Pontos Ativos : 5016

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.


Bem-vindo ao fórum de suporte Forumeiros!
> Tenha conhecimento do regulamento do setor de suporte.
> Conheça a staff e suas diretrizes.
> Antes de perguntar, use a busca.
> Confira a lista de tutoriais.
> MP apenas para assuntos importantes!


Fraise
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 26/06/2015
Mensagens : 4953
Pontos Ativos : 7057

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.
Meriteiro
Meriteiro

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2607
Pontos Ativos : 5016

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.


Admineiros Jamais forneça seus dados pessoais, tais como e-mail de fundação ou senhas pelo fórum!
Admineiros Antes de criar um novo tópico faça uma pesquisa rápida e olhe a lista de tutoriais prontos.
Admineiros Perdeu a senha de administração? Veja o que fazer.
Admineiros Ferramentas do Administrador.

"Você será lembrado pelo que faz, e não pela cor que tens".

Sennior
Admineiro
Admineiro

Masculino
Inscrito dia : 10/06/2011
Mensagens : 15957
Pontos Ativos : 22299

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
Fórum dos Fóruns - Ajuda mútua para usuários forumeiros
on
Fórum grátis: interajuda aos usuários forumeiros. Criar e administrar um fórum. Descubra nossos guias, tutoriais e astúcias no suporte de Forumeiros.
Votações: 5