Modificar código

4 participantes

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

Tópico resolvido Modificar código

Mensagem por IsmaelS. 09.10.15 22:41

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:
- https://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á!
avatar

IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

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

Ir para o topo Ir para baixo

Ajudeiro

Tópico resolvido Re: Modificar código

Mensagem por Fraise 11.10.15 12:39

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
Fraise

Fraise
Ajudeiro
Ajudeiro

Membro desde : 26/06/2015
Mensagens : 6558
Pontos : 8045

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

Ir para o topo Ir para baixo

Tópico resolvido Re: Modificar código

Mensagem por IsmaelS. 11.10.15 15:20

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

IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

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

Ir para o topo Ir para baixo

Tópico resolvido Re: Modificar código

Mensagem por IsmaelS. 13.10.15 15:16

UP!
avatar

IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

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

Ir para o topo Ir para baixo

Ajudeiro

Tópico resolvido Re: Modificar código

Mensagem por Fraise 13.10.15 20:46

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
Fraise

Fraise
Ajudeiro
Ajudeiro

Membro desde : 26/06/2015
Mensagens : 6558
Pontos : 8045

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

Ir para o topo Ir para baixo

Tópico resolvido Re: Modificar código

Mensagem por IsmaelS. 13.10.15 22:52

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:
- https://i.servimg.com/u/f21/16/43/60/45/311.png
- https://i.servimg.com/u/f21/16/43/60/45/411.png
- https://i.servimg.com/u/f21/16/43/60/45/116.png
- https://i.servimg.com/u/f21/16/43/60/45/211.png

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

IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

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

Ir para o topo Ir para baixo

Tópico resolvido Re: Modificar código

Mensagem por Moyasy 13.10.15 23:14

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ê
Moyasy

Moyasy
Novo Membro

Membro desde : 07/10/2015
Mensagens : 18
Pontos : 20

http://www.girls.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Modificar código

Mensagem por IsmaelS. 15.10.15 14:54

UP!
avatar

IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

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

Ir para o topo Ir para baixo

Ajudeiro

Tópico resolvido Re: Modificar código

Mensagem por Fraise 17.10.15 12:39

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
Fraise

Fraise
Ajudeiro
Ajudeiro

Membro desde : 26/06/2015
Mensagens : 6558
Pontos : 8045

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

Ir para o topo Ir para baixo

Tópico resolvido Re: Modificar código

Mensagem por IsmaelS. 17.10.15 14:38

Boa tarde!

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

IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

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

Ir para o topo Ir para baixo

Ajudeiro

Tópico resolvido Re: Modificar código

Mensagem por Fraise 17.10.15 19:18

Olá!

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

Até mais.
Fraise
Fraise

Fraise
Ajudeiro
Ajudeiro

Membro desde : 26/06/2015
Mensagens : 6558
Pontos : 8045

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

Ir para o topo Ir para baixo

Tópico resolvido Re: Modificar código

Mensagem por IsmaelS. 17.10.15 19:21

Boa noite!

Colocado amigo!
avatar

IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

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

Ir para o topo Ir para baixo

Tópico resolvido Re: Modificar código

Mensagem por IsmaelS. 19.10.15 15:55

UP!
avatar

IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

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

Ir para o topo Ir para baixo

Ajudeiro

Tópico resolvido Re: Modificar código

Mensagem por Fraise 20.10.15 13:28

Senhor, aqui ainda está como anteriormente. De certeza que repôs o código padrão?
Modificar código DXa0T8C
Flecha ajudeiros https://i.imgur.com/DXa0T8C.png

Até mais.
Fraise
Fraise

Fraise
Ajudeiro
Ajudeiro

Membro desde : 26/06/2015
Mensagens : 6558
Pontos : 8045

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

Ir para o topo Ir para baixo

Tópico resolvido Re: Modificar código

Mensagem por IsmaelS. 20.10.15 15:44

Boa tarde!

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

IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

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

Ir para o topo Ir para baixo

Tópico resolvido Re: Modificar código

Mensagem por IsmaelS. 22.10.15 0:16

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
avatar

IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

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

Ir para o topo Ir para baixo

Ajudeiro

Tópico resolvido Re: Modificar código

Mensagem por Fraise 22.10.15 12:24

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
Fraise

Fraise
Ajudeiro
Ajudeiro

Membro desde : 26/06/2015
Mensagens : 6558
Pontos : 8045

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

Ir para o topo Ir para baixo

Tópico resolvido Re: Modificar código

Mensagem por IsmaelS. 22.10.15 16:10

Boa tarde!

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

IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

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

Ir para o topo Ir para baixo

Tópico resolvido Re: Modificar código

Mensagem por IsmaelS. 24.10.15 12:32

UP!
avatar

IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

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

Ir para o topo Ir para baixo

Ajudeiro

Tópico resolvido Re: Modificar código

Mensagem por Fraise 24.10.15 12:43

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

Fraise

Fraise
Ajudeiro
Ajudeiro

Membro desde : 26/06/2015
Mensagens : 6558
Pontos : 8045

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

Ir para o topo Ir para baixo

Tópico resolvido Re: Modificar código

Mensagem por IsmaelS. 24.10.15 12:50

@Fraise coloquei amigo mas sem efeito.
avatar

IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

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

Ir para o topo Ir para baixo

Ajudeiro

Tópico resolvido Re: Modificar código

Mensagem por Fraise 24.10.15 12:51

Colocou no inicio da sua folha de estilos?

Até mais.
Fraise

Fraise
Ajudeiro
Ajudeiro

Membro desde : 26/06/2015
Mensagens : 6558
Pontos : 8045

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

Ir para o topo Ir para baixo

Tópico resolvido Re: Modificar código

Mensagem por IsmaelS. 24.10.15 12:53

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

Até mais.

@Fraise sim está colocado.
avatar

IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

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

Ir para o topo Ir para baixo

Tópico resolvido Re: Modificar código

Mensagem por MateusAnjosV 24.10.15 13:36

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
MateusAnjosV

MateusAnjosV
Super Membro

Membro desde : 16/10/2015
Mensagens : 1718
Pontos : 2373

http://holder.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Modificar código

Mensagem por IsmaelS. 24.10.15 13:40

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

IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

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

Ir para o topo Ir para baixo

Tópico resolvido Re: Modificar código

Mensagem por MateusAnjosV 24.10.15 13:42

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

MateusAnjosV
Super Membro

Membro desde : 16/10/2015
Mensagens : 1718
Pontos : 2373

http://holder.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Modificar código

Mensagem por IsmaelS. 24.10.15 13:43

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

IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

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

Ir para o topo Ir para baixo

Tópico resolvido Re: Modificar código

Mensagem por MateusAnjosV 24.10.15 13:46

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)
MateusAnjosV

MateusAnjosV
Super Membro

Membro desde : 16/10/2015
Mensagens : 1718
Pontos : 2373

http://holder.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Modificar código

Mensagem por IsmaelS. 24.10.15 13:51

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

IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

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

Ir para o topo Ir para baixo

  • 0

Tópico resolvido Re: Modificar código

Mensagem por MateusAnjosV 24.10.15 13:56

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?
MateusAnjosV

MateusAnjosV
Super Membro

Membro desde : 16/10/2015
Mensagens : 1718
Pontos : 2373

http://holder.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Modificar código

Mensagem por IsmaelS. 24.10.15 14:01

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

IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

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

Ir para o topo Ir para baixo

Ajudeiro
  • 0

Tópico resolvido Re: Modificar código

Mensagem por Fraise 24.10.15 14:04

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

Fraise
Ajudeiro
Ajudeiro

Membro desde : 26/06/2015
Mensagens : 6558
Pontos : 8045

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

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

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