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
Conectar-se

Esqueci minha senha

Últimos assuntos
» Texturas Fórum
Hoje à(s) 10:44 am por Kyko

» Barra de anúncio
Hoje à(s) 10:38 am por PrisoN†BreaK

» Barra da categoria
Hoje à(s) 10:35 am por PrisoN†BreaK

» Fim do rodapé
Hoje à(s) 10:34 am por PrisoN†BreaK

» Banner para meu forum
Hoje à(s) 10:20 am por William_iHarDz

» Mudar Usuarios online / Grupos do forum e Aniversariantes
Hoje à(s) 09:58 am por William_iHarDz

» hovercard code pedido
Hoje à(s) 05:58 am por alhathiq

Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Parceiros Forumeiros
Os membros mais ativos da semana
Harleen
 
Shek
 
PrisoN†BreaK
 
William_iHarDz
 
Czins
 
alhathiq
 
Kyko
 

Quem está conectado
306 usuários online :: 6 usuários cadastrados, Nenhum Invisível e 300 Visitantes :: 2 Motores de busca

iScroll, Ketholy123, Kyko, PrisoN†BreaK, SkoLL, William_iHarDz

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em 24/12/09, 01:05 pm

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 09/10/15, 04:23 pm

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 : 2771
Pontos Ativos : 3868

http://suporte-design.forumeiros.com/

Resolvido Re: Efeito de ícones + texto

Mensagem por Moyasy em 09/10/15, 04:28 pm

Código:
<ul id="vertical_slider"><li><a href="/rss" class="rss_feed" style="width: 128px; overflow: hidden;"><p><strong>Ultimele Subiecte</strong><br>Urmareste ultimele subiecte ale <br>forumului <br>&nbsp;</p></a></li><li><a href="#" class="news" style="width: 128px; overflow: hidden;"><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" style="width: 128px; overflow: hidden;"><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" style="width: 128px;"><p><strong>Portofoliu</strong><br>Sed ut perspiciatis unde omnis <br>error sit voluptatem accusantium doloremque <br>&nbsp;</p></a></li></ul>

Painel de Controle > Visualização > Página inicial > Geral > Mensagem na página inicial
avatar

Moyasy
Nível 3

Feminino
Inscrito dia : 07/10/2015
Mensagens : 18
Pontos Ativos : 20

http://www.girls.com

Resolvido Re: Efeito de ícones + texto

Mensagem por IsmaelS. em 09/10/15, 04:31 pm

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 : 2771
Pontos Ativos : 3868

http://suporte-design.forumeiros.com/

Resolvido Re: Efeito de ícones + texto

Mensagem por Moyasy em 09/10/15, 04:35 pm

Primeiramente a gente vai fazendo cada passo, okay?
Adicione este código pra ficar no vertical,
Código:
#vertical_slider li a p {
    line-height: normal;
    padding: 0 0 0 135px;
}
#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 a {
    color: #999;
    text-decoration: none;
}

Até
avatar

Moyasy
Nível 3

Feminino
Inscrito dia : 07/10/2015
Mensagens : 18
Pontos Ativos : 20

http://www.girls.com

Resolvido Re: Efeito de ícones + texto

Mensagem por IsmaelS. em 09/10/15, 04:55 pm

Colocado mas desapareceu o texto.

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2771
Pontos Ativos : 3868

http://suporte-design.forumeiros.com/

Resolvido Re: Efeito de ícones + texto

Mensagem por Fraise em 09/10/15, 05:21 pm

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
avatar

Fraise
Super usuário

Masculino
Inscrito dia : 26/06/2015
Mensagens : 4979
Pontos Ativos : 6634

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

Resolvido Re: Efeito de ícones + texto

Mensagem por IsmaelS. em 09/10/15, 05:25 pm

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 : 2771
Pontos Ativos : 3868

http://suporte-design.forumeiros.com/

Resolvido Re: Efeito de ícones + texto

Mensagem por Moyasy em 09/10/15, 05:30 pm

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>
<ul id="vertical_slider"><li><a href="/rss" class="rss_feed" style="width: 128px; overflow: hidden;"><p><strong>Ultimele Subiecte</strong><br>Urmareste ultimele subiecte ale <br>forumului <br>&nbsp;</p></a></li><li><a href="#" class="news" style="width: 128px; overflow: hidden;"><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" style="width: 128px; overflow: hidden;"><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" style="width: 128px;"><p><strong>Portofoliu</strong><br>Sed ut perspiciatis unde omnis <br>error sit voluptatem accusantium doloremque <br>&nbsp;</p></a></li></ul>
Altere o código do homepage que te dei pra este
E adicione este código na folha de estilo:
Código:

#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;
}

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

Moyasy
Nível 3

Feminino
Inscrito dia : 07/10/2015
Mensagens : 18
Pontos Ativos : 20

http://www.girls.com
  • 0

Resolvido Re: Efeito de ícones + texto

Mensagem por Fraise em 09/10/15, 05:32 pm

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

Fraise
Super usuário

Masculino
Inscrito dia : 26/06/2015
Mensagens : 4979
Pontos Ativos : 6634

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

Resolvido Re: Efeito de ícones + texto

Mensagem por IsmaelS. em 09/10/15, 05:34 pm

Obrigado a ambos ficou perfeito!! Resolvido!

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2771
Pontos Ativos : 3868

http://suporte-design.forumeiros.com/

Resolvido Re: Efeito de ícones + texto

Mensagem por Sennior em 09/10/15, 05:38 pm

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


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

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

Sennior
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16303
Pontos Ativos : 20795

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