Hitskin.comIsto é uma pré-visualização de um tema em Hitskin.com
Instalar o tema • Voltar para a ficha do tema
ArtigosModificar código
4 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode
Página 1 de 1
Modificar código
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á!
IsmaelS.- Hiper Membro
- Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142 -
Re: Modificar código
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?
Caso precise, aqui está o código padrão:
Até mais.
Fraise
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?
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- Ajudeiro
- Membro desde : 26/06/2015
Mensagens : 6566
Pontos : 8050 -
Re: Modificar código
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/
- http://master-publicitario.forumeiros.com/
IsmaelS.- Hiper Membro
- Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142 -
IsmaelS.- Hiper Membro
- Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142 -
Re: Modificar código
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
E se possível, me forneça todos os códigos que tenham haver com isso.
Até mais.
Fraise
Fraise- Ajudeiro
- Membro desde : 26/06/2015
Mensagens : 6566
Pontos : 8050 -
Re: Modificar código
por IsmaelS. 13.10.15 22:52
Aqui estão:
Homepage:
.CSS:
.jS:
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!
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!
IsmaelS.- Hiper Membro
- Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142 -
Re: Modificar código
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
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
Moyasy- Novo Membro
- Membro desde : 07/10/2015
Mensagens : 18
Pontos : 20 -
IsmaelS.- Hiper Membro
- Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142 -
Re: Modificar código
por Fraise 17.10.15 12:39
Olá novamente @IsmaelS.,
Antes de procedermos à edição dos textos, troque o CSS por este:
Vamos ver se fica correto.
Até mais.
Fraise
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.
Até mais.
Fraise
Fraise- Ajudeiro
- Membro desde : 26/06/2015
Mensagens : 6566
Pontos : 8050 -
Re: Modificar código
por IsmaelS. 17.10.15 14:38
Boa tarde!
As imagens foram trocadas mas continua desta forma:
- http://master-publicitario.forumeiros.com/
As imagens foram trocadas mas continua desta forma:
- http://master-publicitario.forumeiros.com/
IsmaelS.- Hiper Membro
- Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142 -
Re: Modificar código
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
Poderia repor os códigos padrões novamente, conforme a primeira mensagem do tópico?
Até mais.
Fraise
Fraise- Ajudeiro
- Membro desde : 26/06/2015
Mensagens : 6566
Pontos : 8050 -
IsmaelS.- Hiper Membro
- Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142 -
IsmaelS.- Hiper Membro
- Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142 -
Re: Modificar código
por Fraise 20.10.15 13:28
Senhor, aqui ainda está como anteriormente. De certeza que repôs o código padrão?
https://i.imgur.com/DXa0T8C.png
Até mais.
Fraise
https://i.imgur.com/DXa0T8C.pngAté mais.
Fraise
Fraise- Ajudeiro
- Membro desde : 26/06/2015
Mensagens : 6566
Pontos : 8050 -
Re: Modificar código
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.
@Fraise, erro meu coloquei agora ambos, como no outro tópico, mas agora nem os ícones aparece.
IsmaelS.- Hiper Membro
- Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142 -
Re: Modificar código
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
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.- Hiper Membro
- Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142 -
Re: Modificar código
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. 
Coloque os valores padrão como citado anteriormente.
HTML:
CSS:
JS:
Até mais.
Fraise
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> </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> </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> </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- Ajudeiro
- Membro desde : 26/06/2015
Mensagens : 6566
Pontos : 8050 -
Re: Modificar código
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/
@Fraise coloquei amigo, mas não aparece os ícones ou seja o efeito deles:
- http://master-publicitario.forumeiros.com/
IsmaelS.- Hiper Membro
- Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142 -
IsmaelS.- Hiper Membro
- Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142 -
Re: Modificar código
por Fraise 24.10.15 12:43
Fiz uns testes neste seu fórum:
http://ismaelsd.forumeiros.com.pt/
Adicione no inicio da sua folha de estilos:
Até mais.
Fraise
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- Ajudeiro
- Membro desde : 26/06/2015
Mensagens : 6566
Pontos : 8050 -
IsmaelS.- Hiper Membro
- Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142 -
Fraise- Ajudeiro
- Membro desde : 26/06/2015
Mensagens : 6566
Pontos : 8050 -
IsmaelS.- Hiper Membro
- Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142 -
Re: Modificar código
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:
HTML:
Javascript:
Veja o resultado:
http://mateusanjosv.forumeiros.com/h1-
Abraço, MateusAnjos!
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> </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> </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> </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!
MateusAnjosV- Super Membro
- Membro desde : 16/10/2015
Mensagens : 1718
Pontos : 2373 -
Re: Modificar código
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".
- http://master-publicitario.forumeiros.com/
É como não deixa-se modificar porque fica tudo "marado".
IsmaelS.- Hiper Membro
- Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142 -
Re: Modificar código
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. ^^
Mande-me as alterações que eu as farei. ^^
MateusAnjosV- Super Membro
- Membro desde : 16/10/2015
Mensagens : 1718
Pontos : 2373 -
Re: Modificar código
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.
IsmaelS.- Hiper Membro
- Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142 -
Re: Modificar código
por MateusAnjosV 24.10.15 13:46
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> </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> </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> </p></a></li></ul>
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- Super Membro
- Membro desde : 16/10/2015
Mensagens : 1718
Pontos : 2373 -
Re: Modificar código
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:
E está tudo como disse o__O
- 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.- Hiper Membro
- Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142 -
Re: Modificar código
por MateusAnjosV 24.10.15 13:56
Você removeu algumas coisas:
É melhor que eu altere, ai você só se baseia, por exemplo, o código acima resulta?
<ul id="vertical_slider">
<li><a href="/rss"
class="rss_feed" style="width: 128px; overflow: hidden;"><p><strong>Mateus</strong><br>Vida loka <br> </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> </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> </p></a></li></ul>
É melhor que eu altere, ai você só se baseia, por exemplo, o código acima resulta?
MateusAnjosV- Super Membro
- Membro desde : 16/10/2015
Mensagens : 1718
Pontos : 2373 -
Re: Modificar código
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:
Depois se for Salvar o código fica desta forma:
E se alterar é quando dá esse problema de "marado" mas já percebi amigo, obrigado e resolvido!!
- 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> </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> </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> </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!!
IsmaelS.- Hiper Membro
- Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142 -
Re: Modificar código
por Fraise 24.10.15 14:04
Graças a deus. 
| 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- Ajudeiro
- Membro desde : 26/06/2015
Mensagens : 6566
Pontos : 8050 -
Tópicos semelhantes» Queria modificar esse codigo
» Modificar código
» Modificar código de loja
» Modificar codigo do perfil
» Modificar esse codigo
» Modificar código
» Modificar código de loja
» Modificar codigo do perfil
» Modificar esse codigo
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos