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
Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Parceiros Forumeiros
Os membros mais ativos da semana
Kyo Panda
 
Fatalisss
 
Harleen
 
JulioPais
 
Shek
 
Holkis
 
APOllO
 
MtX
 
Roger_Crazzy
 
Taxy_InSaniTy
 

Quem está conectado
278 usuários online :: 4 usuários cadastrados, Nenhum Invisível e 274 Visitantes :: 3 Motores de busca

APOllO, Dark Hunter, Holkis, Luiz

[ Ver toda a lista ]


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

Modificar código

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

Resolvido Modificar código

Mensagem por IsmaelS. em 09/10/15, 06:41 pm

Detalhes da questão


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

Descrição


Olá!

Foi dado como resolvido esta dúvida e estava tudo a funcionar na perfeição:
- http://ajuda.forumeiros.com/t102065-efeito-de-icones-texto#708256

.CSS:
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://i21.servimg.com/u/f21/16/43/60/45/311.png) top left no-repeat;
}
#vertical_slider li a.news {
background:url(http://i21.servimg.com/u/f21/16/43/60/45/411.png) top left no-repeat;
}
#vertical_slider li a.suport {
background:url(http://i21.servimg.com/u/f21/16/43/60/45/116.png) top left no-repeat;
}
#vertical_slider li a.portfolio {
background:url(http://i21.servimg.com/u/f21/16/43/60/45/211.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;
}

Código Homepage:
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 style="width: 128px; overflow: hidden;" class="rss_feed" href="/rss">
      </a>
      <p style="width: 128px; overflow: hidden;">
         <strong>Ultimele Subiecte</strong><br />Urmareste ultimele subiecte ale <br />forumului <br />
      </p><a style="width: 128px; overflow: hidden;" class="rss_feed" href="/rss"></a>
   </li>
   <li>
      <a style="width: 128px; overflow: hidden;" class="news" href="#">
      </a>
      <p style="width: 128px; overflow: hidden;">
         <strong style="font-size:24px;">Anunturi/Actualizari</strong><br />Ultimele noutati si actualizari de pe <br />forumul .<br />
      </p><a style="width: 128px; overflow: hidden;" class="news" href="#"></a>
   </li>
   <li>
      <a style="width: 128px; overflow: hidden;" class="suport" href="#">
      </a>
      <p style="width: 128px; overflow: hidden;">
         <strong>Suport</strong><br />Lorem ipsum dolor sit amet, <br />consectetur adipisicing elit<br /> sed do eiusmod tempor incididunt
      </p><a style="width: 128px; overflow: hidden;" class="suport" href="#"></a>
   </li>
   <li>
      <a style="width: 128px;" class="portfolio" href="#">
      </a>
      <p style="width: 128px;">
         <strong>Portofoliu</strong><br />Sed ut perspiciatis unde omnis <br />error sit voluptatem accusantium doloremque <br />
      </p><a style="width: 128px;" class="portfolio" href="#"></a>
   </li>
</ul>

jS.:
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'
              });
          });
      });
  });

Apenas modifiquei os ícones, só que ao alterar seja qual texto for do slide ele simplesmente fica bugado não sei porque ou seja apenas tem que estar o texto como está!

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2768
Pontos Ativos : 3863

http://master-publicitario.forumeiros.com/

Resolvido Re: Modificar código

Mensagem por Fraise em 11/10/15, 08:39 am

Olá!

Se você apenas tivesse editado os ícones era quase impossivel isso ocorrer. O senhor deve ter apagado algo sem querer que danificou todo o código. Poderia por gentileza, colocar as imagens novamente e tomar atenção para ver se não danifica o código? Muito feliz
Caso precise, aqui está o código padrão:
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 : 4977
Pontos Ativos : 6632

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

Resolvido Re: Modificar código

Mensagem por IsmaelS. em 11/10/15, 11:20 am

Amigo apenas tinha modificado os ícones mas não foi isso que causou o problema, agora queria modificar o texto e ao modificar ficou como está agora:
- http://master-publicitario.forumeiros.com/

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2768
Pontos Ativos : 3863

http://master-publicitario.forumeiros.com/

Resolvido Re: Modificar código

Mensagem por IsmaelS. em 13/10/15, 11:16 am

UP!

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2768
Pontos Ativos : 3863

http://master-publicitario.forumeiros.com/

Resolvido Re: Modificar código

Mensagem por Fraise em 13/10/15, 04:46 pm

Restaure o código (coloque o código padrão) e me diga os textos e imagens que deseja colocar.
E se possível, me forneça todos os códigos que tenham haver com isso.

Até mais.
Fraise
avatar

Fraise
Super usuário

Masculino
Inscrito dia : 26/06/2015
Mensagens : 4977
Pontos Ativos : 6632

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

Resolvido Re: Modificar código

Mensagem por IsmaelS. em 13/10/15, 06:52 pm

Aqui estão:

Homepage:
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;">      </a>     
      <p style="width: 128px; overflow: hidden;">
                 <strong>Ultimele Subiecte</strong><br />Urmareste ultimele subiecte ale <br />forumului <br />     
      </p><a href="/rss" class="rss_feed" style="width: 128px; overflow: hidden;"></a> 
   </li>
    
   <li>
            <a href="#" class="news" style="width: 128px; overflow: hidden;">      </a>     
      <p style="width: 128px; overflow: hidden;">
                 <strong style="font-size:24px;">Anunturi/Actualizari</strong><br />Ultimele noutati si actualizari de pe <br />forumul .<br />     
      </p><a href="#" class="news" style="width: 128px; overflow: hidden;"></a> 
   </li>
    
   <li>
            <a href="#" class="suport" style="width: 128px; overflow: hidden;">      </a>     
      <p style="width: 128px; overflow: hidden;">
                 <strong>Suport</strong><br />Lorem ipsum dolor sit amet, <br />consectetur adipisicing elit<br /> sed do eiusmod tempor incididunt     
      </p><a href="#" class="suport" style="width: 128px; overflow: hidden;"></a> 
   </li>
    
   <li>
            <a href="#" class="portfolio" style="width: 128px;">      </a>     
      <p style="width: 128px;">
                 <strong>Portofoliu</strong><br />Sed ut perspiciatis unde omnis <br />error sit voluptatem accusantium doloremque <br />     
      </p><a href="#" class="portfolio" style="width: 128px;"></a> 
   </li>
</ul>

.CSS:
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;
}

.jS:
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'
              });
          });
      });
  });

O texto ainda não sei mas se conseguir modificar sem ficar com problemas seria óptimo, as imagens são estas:
- http://i21.servimg.com/u/f21/16/43/60/45/311.png
- http://i21.servimg.com/u/f21/16/43/60/45/411.png
- http://i21.servimg.com/u/f21/16/43/60/45/116.png
- http://i21.servimg.com/u/f21/16/43/60/45/211.png

Eu tinha alterado direito mas se conseguir você a ficar direito agradeço!

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2768
Pontos Ativos : 3863

http://master-publicitario.forumeiros.com/

Resolvido Re: Modificar código

Mensagem por Moyasy em 13/10/15, 07:14 pm

Olá,
Não acredito que deu este erro, mas enfim, vamos refazer o código okay?
Como você já falou os endereços dos ícones, o quê eu preciso é os textos de ícones, que poderemos continuar a reformulação do código.

E desculpe pela demora a responder neste tópico, tive problemas pessoais
Até mais,
Moyasy  Eu amo você
avatar

Moyasy
Nível 3

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

http://www.girls.com

Resolvido Re: Modificar código

Mensagem por IsmaelS. em 15/10/15, 10:54 am

UP!

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2768
Pontos Ativos : 3863

http://master-publicitario.forumeiros.com/

Resolvido Re: Modificar código

Mensagem por Fraise em 17/10/15, 08:39 am

Olá novamente @IsmaelS.,

Antes de procedermos à edição dos textos, troque o CSS por este:
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://i21.servimg.com/u/f21/16/43/60/45/311.png) top left no-repeat;
}
#vertical_slider li a.news {
background:url(http://i21.servimg.com/u/f21/16/43/60/45/411.png) top left no-repeat;
}
#vertical_slider li a.suport {
background:url(http://i21.servimg.com/u/f21/16/43/60/45/116.png) top left no-repeat;
}
#vertical_slider li a.portfolio {
background:url(http://i21.servimg.com/u/f21/16/43/60/45/211.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;
}

Vamos ver se fica correto. Feliz

Até mais.
Fraise
avatar

Fraise
Super usuário

Masculino
Inscrito dia : 26/06/2015
Mensagens : 4977
Pontos Ativos : 6632

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

Resolvido Re: Modificar código

Mensagem por IsmaelS. em 17/10/15, 10:38 am

Boa tarde!

As imagens foram trocadas mas continua desta forma:
- http://master-publicitario.forumeiros.com/

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2768
Pontos Ativos : 3863

http://master-publicitario.forumeiros.com/

Resolvido Re: Modificar código

Mensagem por Fraise em 17/10/15, 03:18 pm

Olá!

Poderia repor os códigos padrões novamente, conforme a primeira mensagem do tópico?

Até mais.
Fraise
avatar

Fraise
Super usuário

Masculino
Inscrito dia : 26/06/2015
Mensagens : 4977
Pontos Ativos : 6632

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

Resolvido Re: Modificar código

Mensagem por IsmaelS. em 17/10/15, 03:21 pm

Boa noite!

Colocado amigo!

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2768
Pontos Ativos : 3863

http://master-publicitario.forumeiros.com/

Resolvido Re: Modificar código

Mensagem por IsmaelS. em 19/10/15, 12:55 pm

UP!

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2768
Pontos Ativos : 3863

http://master-publicitario.forumeiros.com/

Resolvido Re: Modificar código

Mensagem por Fraise em 20/10/15, 10:28 am

Senhor, aqui ainda está como anteriormente. De certeza que repôs o código padrão?

Flecha ajudeiros http://i.imgur.com/DXa0T8C.png

Até mais.
Fraise
avatar

Fraise
Super usuário

Masculino
Inscrito dia : 26/06/2015
Mensagens : 4977
Pontos Ativos : 6632

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

Resolvido Re: Modificar código

Mensagem por IsmaelS. em 20/10/15, 12:44 pm

Boa tarde!

@Fraise, erro meu coloquei agora ambos, como no outro tópico, mas agora nem os ícones aparece.

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2768
Pontos Ativos : 3863

http://master-publicitario.forumeiros.com/

Resolvido Re: Modificar código

Mensagem por IsmaelS. em 21/10/15, 09:16 pm

Boa noite!

Eu sei que só se deve fazer "UP" depois das 24h, mas queria deixar aqui o tema do efeito caso seja mais fácil:
- http://ismaelsd.forumeiros.com.pt/forum

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2768
Pontos Ativos : 3863

http://master-publicitario.forumeiros.com/

Resolvido Re: Modificar código

Mensagem por Fraise em 22/10/15, 09:24 am

Para adicionar informação adicional antes de se terem passado 24 horas, por gentileza... edite a sua última mensagem. Regras

Coloque os valores padrão como citado anteriormente.
HTML:
Código:
<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>

CSS:
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;
}

JS:
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
avatar

Fraise
Super usuário

Masculino
Inscrito dia : 26/06/2015
Mensagens : 4977
Pontos Ativos : 6632

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

Resolvido Re: Modificar código

Mensagem por IsmaelS. em 22/10/15, 01:10 pm

Boa tarde!

@Fraise coloquei amigo, mas não aparece os ícones ou seja o efeito deles:
- http://master-publicitario.forumeiros.com/

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2768
Pontos Ativos : 3863

http://master-publicitario.forumeiros.com/

Resolvido Re: Modificar código

Mensagem por IsmaelS. em 24/10/15, 09:32 am

UP!

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2768
Pontos Ativos : 3863

http://master-publicitario.forumeiros.com/

Resolvido Re: Modificar código

Mensagem por Fraise em 24/10/15, 09:43 am

Fiz uns testes neste seu fórum:
Seta http://ismaelsd.forumeiros.com.pt/

Adicione no inicio da sua folha de estilos:
Código:
#vertical_slider li a.rss_feed {
    background: url(http://i21.servimg.com/u/f21/16/43/60/45/311.png) top left no-repeat !important;
}

#vertical_slider li a.news {
    background: url(http://i21.servimg.com/u/f21/16/43/60/45/411.png) top left no-repeat !important;
}

#vertical_slider li a.suport {
    background: url(http://i21.servimg.com/u/f21/16/43/60/45/116.png) top left no-repeat !important;
}

#vertical_slider li a.portfolio {
    background: url(http://i21.servimg.com/u/f21/16/43/60/45/211.png) top left no-repeat !important;
}

Até mais.
Fraise

avatar

Fraise
Super usuário

Masculino
Inscrito dia : 26/06/2015
Mensagens : 4977
Pontos Ativos : 6632

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

Resolvido Re: Modificar código

Mensagem por IsmaelS. em 24/10/15, 09:50 am

@Fraise coloquei amigo mas sem efeito.

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2768
Pontos Ativos : 3863

http://master-publicitario.forumeiros.com/

Resolvido Re: Modificar código

Mensagem por Fraise em 24/10/15, 09:51 am

Colocou no inicio da sua folha de estilos?

Até mais.
avatar

Fraise
Super usuário

Masculino
Inscrito dia : 26/06/2015
Mensagens : 4977
Pontos Ativos : 6632

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

Resolvido Re: Modificar código

Mensagem por IsmaelS. em 24/10/15, 09:53 am

@Fraise escreveu:Colocou no inicio da sua folha de estilos?

Até mais.

@Fraise sim está colocado.

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2768
Pontos Ativos : 3863

http://master-publicitario.forumeiros.com/

Resolvido Re: Modificar código

Mensagem por MateusAnjosV em 24/10/15, 10:36 am

Buenos dias amigos!

Vamos lá @IsmaelS.?
Remova todos os códigos fornecidos por outros nesse tópico, para evitar bugs!!!
Primeiramente, adicione em sua CSS:
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;
    }

HTML:
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; overflow: hidden;"><p><strong>Portofoliu</strong><br>Sed ut perspiciatis unde omnis <br>error sit voluptatem accusantium doloremque <br>&nbsp;</p></a></li></ul>
 

Javascript:
Código:
$(function(){$('#pun-navlinks a').css( {backgroundPosition: "0px 32px"} ).mouseover(function(){$(this).stop().animate({backgroundPosition:"(-0px 64px)"}, {duration:350})}).mouseout(function(){$(this).stop().animate({backgroundPosition:"(0px 32px)"}, {duration:300, complete:function(){$(this).css({backgroundPosition: "0px 32px"})}})})});
$(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'});});});});

Veja o resultado:
http://mateusanjosv.forumeiros.com/h1-

Abraço, MateusAnjos!
Feliz
avatar

MateusAnjosV
Membro do Fórum

Masculino
Inscrito dia : 16/10/2015
Mensagens : 1421
Pontos Ativos : 1987

http://ajuda.forumeiros.com/

Resolvido Re: Modificar código

Mensagem por IsmaelS. em 24/10/15, 10:40 am

@MatheusAnjosV eu coloquei e resultou tudo direito mas se for alterar o texto no .HTML veja como fica:
- http://master-publicitario.forumeiros.com/

É como não deixa-se modificar porque fica tudo "marado".

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2768
Pontos Ativos : 3863

http://master-publicitario.forumeiros.com/

Resolvido Re: Modificar código

Mensagem por MateusAnjosV em 24/10/15, 10:42 am

É simples amigo, você tem que deixa-los ser um LINK! <a>
Mande-me as alterações que eu as farei. ^^
avatar

MateusAnjosV
Membro do Fórum

Masculino
Inscrito dia : 16/10/2015
Mensagens : 1421
Pontos Ativos : 1987

http://ajuda.forumeiros.com/

Resolvido Re: Modificar código

Mensagem por IsmaelS. em 24/10/15, 10:43 am

@MateusAnjosV escreveu:É simples amigo, você tem que deixa-los ser um LINK! <a>
Mande-me as alterações que eu as farei. ^^

@MateusAnjosV como assim? Será que poderia me explicar? Pois caso um dia desejar modificar já sei como.

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2768
Pontos Ativos : 3863

http://master-publicitario.forumeiros.com/

Resolvido Re: Modificar código

Mensagem por MateusAnjosV em 24/10/15, 10:46 am

Aeeeeeeew, acertou meu nome!

Acredito que uma "imagem", fala mais que mil palavras:
Código:
<ul id="vertical_slider"><li><a href="/rss"
  class="rss_feed" style="width: 128px; overflow: hidden;"><p><strong>Mateus</strong><br>Vida loka <br>&nbsp;</p></a></li><li><a href="#" class="news" style="width: 128px; overflow: hidden;"><p><strong style="font-size:24px;">Fraise</strong><br>Vida loka<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; overflow: hidden;"><p><strong>Portofoliu</strong><br>Sed ut perspiciatis unde omnis <br>error sit voluptatem accusantium doloremque <br>&nbsp;</p></a></li></ul>
 
Pode conferir aqui:
http://mateusanjosv.forumeiros.com/h1-ismaels

Você só pode editar os textos, mantenha os <p> e os <a>, ok?
(Pode modificar os atributos deles href, title, etc, mas mantenha-os)
avatar

MateusAnjosV
Membro do Fórum

Masculino
Inscrito dia : 16/10/2015
Mensagens : 1421
Pontos Ativos : 1987

http://ajuda.forumeiros.com/

Resolvido Re: Modificar código

Mensagem por IsmaelS. em 24/10/15, 10:51 am

@MateusAnjosV veja apenas alterei o primeiro o título para "Test 1" e descrição "Test2" e ficou logo tudo "marado" e veja como alterei:
Código:
<ul id="vertical_slider">
   
   <li>
       <a href="/rss" class="rss_feed" style="width: 128px; overflow: hidden;"> </a>
      <p style="width: 128px; overflow: hidden;">
          <strong>Test 1</strong><br />test2 <br /> 
      </p><a href="/rss" class="rss_feed" style="width: 128px; overflow: hidden;"></a>
   </li>
   
   <li>
       <a href="#" class="news" style="width: 128px; overflow: hidden;"> </a>
      <p style="width: 128px; overflow: hidden;">
          <strong style="font-size:24px;">Fraise</strong><br />Vida loka<br /> 
      </p><a href="#" class="news" style="width: 128px; overflow: hidden;"></a>
   </li>
   
   <li>
       <a href="#" class="suport" style="width: 128px; overflow: hidden;"> </a>
      <p style="width: 128px; overflow: hidden;">
          <strong>Suport</strong><br />Lorem ipsum dolor sit amet, <br />consectetur adipisicing elit<br /> sed do eiusmod tempor incididunt
      </p><a href="#" class="suport" style="width: 128px; overflow: hidden;"></a>
   </li>
   
   <li>
       <a href="#" class="portfolio" style="width: 128px; overflow: hidden;"> </a>
      <p style="width: 128px; overflow: hidden;">
          <strong>Portofoliu</strong><br />Sed ut perspiciatis unde omnis <br />error sit voluptatem accusantium doloremque <br /> 
      </p><a href="#" class="portfolio" style="width: 128px; overflow: hidden;"></a>
   </li>
</ul>
 

E está tudo como disse o__O

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2768
Pontos Ativos : 3863

http://master-publicitario.forumeiros.com/
  • 0

Resolvido Re: Modificar código

Mensagem por MateusAnjosV em 24/10/15, 10:56 am

Você removeu algumas coisas:
<ul id="vertical_slider">
<li><a href="/rss"
class="rss_feed" style="width: 128px; overflow: hidden;"><p><strong>Mateus</strong><br>Vida loka <br>&nbsp;</p>
</a>

</li>

<li><a href="#" class="news" style="width: 128px; overflow: hidden;"><p><strong style="font-size:24px;">Fraise</strong><br>Vida loka<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; overflow: hidden;"><p><strong>Portofoliu</strong><br>Sed ut perspiciatis unde omnis <br>error sit voluptatem accusantium doloremque <br>&nbsp;</p></a></li></ul>

É melhor que eu altere, ai você só se baseia, por exemplo, o código acima resulta?
avatar

MateusAnjosV
Membro do Fórum

Masculino
Inscrito dia : 16/10/2015
Mensagens : 1421
Pontos Ativos : 1987

http://ajuda.forumeiros.com/

Resolvido Re: Modificar código

Mensagem por IsmaelS. em 24/10/15, 11:01 am

@MateusAnjosV já percebi o problema ou seja se colocar este código lá e alterar tudo no momento funciona:
Código:
<ul id="vertical_slider">
<li><a href="/rss"
class="rss_feed" style="width: 128px; overflow: hidden;"><p><strong>Regulamento & Staff</strong><br>Leia atenciosamente o regulamento do fórum e confira a equipa de moderação.<br>&nbsp;</p>
</a>

</li>

<li><a href="#" class="news" style="width: 128px; overflow: hidden;"><p><strong style="font-size:24px;">Diretório dos Fóruns</strong><br>Promova o seu fórum e aumente o seu tráfego.<br>&nbsp;</p></a></li><li><a href="#" class="suport" style="width: 128px; overflow: hidden;"><p><strong>ASD</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; overflow: hidden;"><p><strong>Portofoliu</strong><br>Sed ut perspiciatis unde omnis <br>error sit voluptatem accusantium doloremque <br>&nbsp;</p></a></li></ul>

Depois se for Salvar o código fica desta forma:
Código:
<ul id="vertical_slider">
   
   <li>
       <a href="/rss" class="rss_feed" style="width: 128px; overflow: hidden;"> </a>
      <p style="width: 128px; overflow: hidden;">
          <strong>Regulamento & Staff</strong><br />Leia atenciosamente o regulamento do fórum e confira a equipa de moderação.<br /> 
      </p><a href="/rss" class="rss_feed" style="width: 128px; overflow: hidden;"></a> 
   </li>
    
   <li>
       <a href="#" class="news" style="width: 128px; overflow: hidden;"> </a>
      <p style="width: 128px; overflow: hidden;">
          <strong style="font-size:24px;">Diretório dos Fóruns</strong><br />Promova o seu fórum e aumente o seu tráfego.<br /> 
      </p><a href="#" class="news" style="width: 128px; overflow: hidden;"></a>
   </li>
   
   <li>
       <a href="#" class="suport" style="width: 128px; overflow: hidden;"> </a>
      <p style="width: 128px; overflow: hidden;">
          <strong>ASD1</strong><br />Lorem ipsum dolor sit amet, <br />consectetur adipisicing elit<br /> sed do eiusmod tempor incididunt
      </p><a href="#" class="suport" style="width: 128px; overflow: hidden;"></a>
   </li>
   
   <li>
       <a href="#" class="portfolio" style="width: 128px; overflow: hidden;"> </a>
      <p style="width: 128px; overflow: hidden;">
          <strong>Portofoliu</strong><br />Sed ut perspiciatis unde omnis <br />error sit voluptatem accusantium doloremque <br /> 
      </p><a href="#" class="portfolio" style="width: 128px; overflow: hidden;"></a>
   </li>
</ul>

E se alterar é quando dá esse problema de "marado" mas já percebi amigo, obrigado e resolvido!! Muito feliz

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2768
Pontos Ativos : 3863

http://master-publicitario.forumeiros.com/
  • 0

Resolvido Re: Modificar código

Mensagem por Fraise em 24/10/15, 11:04 am

Graças a deus. Ajuda/Confuso

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

Fraise
Super usuário

Masculino
Inscrito dia : 26/06/2015
Mensagens : 4977
Pontos Ativos : 6632

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

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