InícioEfeitos no quadro de anúncio
4 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre códigos Javascript e jQuery
Página 1 de 1
Efeitos no quadro de anúncio
por Starset 06.06.18 13:25
Detalhes da questão
Endereço do fórum: http://bloodofvalyria.forumeiros.com/
Versão do fórum: phpBB3
Descrição
Bom dia, pessoal! Estou precisando colocar algumas coisas no quadro de anúncio do meu fórum, contudo eu não sei como fazer. Como podem ver no print a baixo este é o quadro. Já deixo também o código.
- Código:
<div id="welcome">
<table cellpadding="0" cellspacing="0">
<tbody> </tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody>
<tr style="">
<td valign="top">
<div class="welcomel">
<div class="banmid">
<div class="avaimg">
<div class="g-2" style="display: none;">
</div>
</div>
<div class="playername">
Bem-vindo (a),<span>{USERNAME}</span>
</div>
</div>
</div>
</td>
<td valign="top">
<div class="welcomem">
<div class="welmid">
“<span class="firstcharacter">R</span> esumo da trama aqui.”
</div>
<div class="welbot">
<div id="news_ticker">
<ul>
<li>
ATENÇÃO! As postagens estão liberadas!
</li>
</ul>
</div>
</div>
</div>
</td>
<td valign="top">
<div class="welcome2">
<div class="banmid">
<div class="flstaffbox" style="background: url(https://i.imgur.com/OIZcQyd.gif);">
<div class="flstaffhover">
<div class="fladmintitle">
Eventos
</div>
<center>
<em>Primavera, 410 d.C.</em>
</center>
<div style="height: 5px;">
</div>
<a href="link" target="_blank">♘ ♞ Nome do evento</a>
</div>
</div>
</div>
</div>
</td>
<td valign="top">
<div class="welcomer">
<div class="plottop">
Estamos na <strong>primavera</strong>, ano de <strong>410 d.C.</strong>
</div>
<div class="plotbot">
<em class="fa fa-whatsapp" aria-hidden="true"></em> <a href="http://bloodofvalyria.forumeiros.com/t52-sistemas-cargos" target="_blank"> <strong>Cargos</strong></a><br /><a href="http://bloodofvalyria.forumeiros.com/t49-sistemas-habiliades" target="_blank"> <strong>Habilidades</strong></a><br /><a href="http://bloodofvalyria.forumeiros.com/t5-registro-de-photoplayer" target="_blank"> <strong>Registro de Photoplayer</strong></a><br /><a href="https://i.imgur.com/NOi8B5g.jpg" target="_blank"> <strong>Mapa de Todo o Mundo Conhecido</strong></a><br /><a href="https://chat.whatsapp.com/HT4hNEPvpw4DPRZ71EyY3X" target="_blank"> <strong>Grupo: Blood of Valyria RPG</strong></a>
</div>
</div>
</td>
</tr><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody> </tbody>
</table>
</div>
E o CSS:
- Código:
/*HEADER*/
#welcome {
width: 990px;
margin-top: 5px;
margin-left: 58px;
margin-bottom: 30px;
padding: 20px;
background: #f9f9f9;
border-left: 1px solid #f2f0ed;
border-right: 1px solid #f2f0ed;
font-family: 'Open Sans', sans-serif; }
.welcomel, .welcomem, .welcomem2, .welcomer { height: 154px; }
.welcomel { margin-right: 20px; }
.welcome2 { margin-left: 20px; }
.welcomer { margin-left: 20px; }
.welmid, .welbot { width: 400px; }
.welmid {
font-family: 'Open Sans', sans-serif!important;
height: 77px;
border: 1px solid #e5e1d9;
margin-bottom: 10px;
padding: 13px 20px;
text-align: justify;
font: 11px lato;
line-height: 140%;
overflow: auto;
background: #f8f7f6; }
.firstcharacter {
float: left;
color: #9d805a;
font: 50px Allura;
line-height: 30px;
padding-top: 8px;
padding-right: 8px; }
.ditem .firstcharacter {
float: left;
color: #B7A387;
font: 45px Allura;
line-height: 25px;
padding-top: 0;
padding-right: 8px; }
.ditem .firstcharacter2 {
float: left;
color: #9d805a;
font: 50px playfair display;
line-height: 30px;
padding-top: 8px;
padding-right: 8px; }
.welbot {
border: 1px solid #e5e1d9;
padding: 10px 20px;
font: 12px cardo;
font-style: italic;
overflow: hidden;
background: url(http://ekkoish.b1.jcink.com/uploads/ekkoish/Eastern_Lands/BackgroundSoft.png) 50px; }
#news_ticker {
width: 400px;
height: 14px;
margin: 0;
color: #000;
overflow: hidden !important;
padding: 3px;
padding-top: 0;
position: relative;
font: 12px cardo;
font-style: italic; }
#news_ticker ul {
float: left;
padding-left: 0;
list-style-type: none;
-webkit-animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;
-moz-animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;
-ms-animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;
animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite; }
#news_ticker ul:hover {
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-ms-animation-play-state: paused;
animation-play-state: paused; }
#news_ticker li { line-height: 16px; }
#news_ticker a {}
@-webkit-keyframes ticker {
0% {margin-top: 0;}
25% {margin-top: -16px;}
50% {margin-top: -32px;}
75% {margin-top: -48px;}
100% {margin-top: 0;} }
@-moz-keyframes ticker {
0% {margin-top: 0;}
25% {margin-top: -16px;}
50% {margin-top: -32px;}
75% {margin-top: -48px;}
100% {margin-top: 0;} }
@-ms-keyframes ticker {
0% {margin-top: 0;}
25% {margin-top: -16px;}
50% {margin-top: -32px;}
75% {margin-top: -48px;}
100% {margin-top: 0;} }
@keyframes ticker {
0% {margin-top: 0;}
25% {margin-top: -16px;}
50% {margin-top: -32px;}
75% {margin-top: -48px;}
100% {margin-top: 0;} }
.banmid {
width: 100px;
padding: 10px;
height: 134px;
background: url(http://ekkoish.b1.jcink.com/uploads/ekkoish/Eastern_Lands/BackgroundSoft.png) -100px;
outline: 1px solid rgba(255, 255, 255, 0.35);
outline-offset: -4px; }
.banmid2 {
width: 100px;
padding: 10px;
height: 134px;
background: url(http://ekkoish.b1.jcink.com/uploads/ekkoish/Eastern_Lands/BackgroundSoft.png) -100px;
outline: 1px solid rgba(255, 255, 255, 0.35);
outline-offset: -4px; }
.avaimg {
background: url(http://ekkoish.b1.jcink.com/uploads/ekkoish/WeAreRoyals/Crown.png);
border: 1px solid rgba(0,0,0,0.4);
border-radius: 100%;
width: 80px;
height: 80px;
margin-left: 8px;
margin-top: -5px;
overflow: hidden;
}
.g-2 {
display: block !important;
}
.avaimg img {
width: 55px;
height: 55px;
margin-left: -3px;
margin-top: -2px;
}
img {
vertical-align: middle;
border: 0px;
}
.playername {
width: 110px;
margin-top: 10px;
text-align: center;
font: 11px cardo;
color: #000;
text-transform: lowercase;
font-style: italic;
}
.playername span {
display: block;
margin-top: 5px;
font: 10px playfair display;
font-style: normal;
letter-spacing: 0px;
text-transform: uppercase;
}
.flstaffbox{
height: 135px;
width: 100px;
display: inline-block;
margin:0px!important;
overflow:hidden;}
.flstaffhover {
padding: 8px;
font-family: 'Open Sans', sans-serif;
font-size: 10px;
background-color: rgba(25,25,25,0.9);
color: #efefef;
text-align: justify;
height: 125px;
overflow: hidden;
width: 85px;
opacity:0;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;}
.flstaffbox:hover .flstaffhover{opacity:1;}
.flstaffhover a {
font-size: 9px;
font-weight: 700;
color: #B7A387;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;}
.flstaffhover a:hover {
color: #efefef;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;}
.fladmintitle{
padding-top: 10px;
padding-bottom: 5px;
text-align: center;
font-family: 'Playfair Display', serif;
font-size: 12px;
text-transform: uppercase;
color: #ebebeb;
font-weight: 300;
line-height: 100%;
border-bottom: 1px dotted #444; }
.fladmintitle:first-letter {
font-weight: 300!important;
margin-right: 3px;
text-transform: uppercase;
font-family: 'Allura', cursive;
font-size: 20px; }
.plottop, .plotbot { width: 204px; }
.plottop {
color: #68553b;
text-align: right;
font: 12px cardo;
font-style: italic;
padding: 0px 20px 10px 20px;
border-bottom: 1px solid #dbd5ca; }
.plottop b { color: #7d5368; }
.plotbot {
height: 75px;
border: 1px solid #e5e1d9;
margin-top: 10px;
padding: 20px;
text-align: justify;
font-family: 'Open Sans', sans-serif!important;
font-size: 11px;
line-height: 140%;
overflow: auto;
background: #f8f7f6; }
#alltop {
width: 980px;
margin: 0 auto;
}
#topbanner2017 {
background: url(https://i.imgur.com/pdE9vB6.png);
opacity: 0.7;
width: 980px;
height: 500px;
}
#topblurb {
color: #f8f7f6;
font: 12px cardo;
letter-spacing: 2px;
height: 200px;
padding: 0 100px;
line-height: 200%;
margin-top: -150px;
text-align: left;
opacity: .5;
}
important {
font: 14px cardo;
font-weight: 700;
font-style: italic;
}
Dito isso, vamos ao que preciso fazer e não sei.
1 - Na primeira parte do código, eu consigo colocar o USERNAME, porém por algum motivo o círculo superior, onde era para estar o avatar do usuário, não muda. Gostaria de saber como fazer para que, assim como o nome de usuário, a imagem troque para aquela usada pelo player.
2 - Na segunda parte do quadro, onde está escrito "Resumo da Trama aqui", gostaria de colocar o widget de tópicos recentes e não faço ideia de como o fazer.
Alguém tem como ajudar com essas duas questões?
Desde já grato.
Starset- ****
- Membro desde : 02/03/2017
Mensagens : 265
Pontos : 378 -
Starset- ****
- Membro desde : 02/03/2017
Mensagens : 265
Pontos : 378 -
Re: Efeitos no quadro de anúncio
por tikky 07.06.18 18:17
Olá @Starset,
Primeiramente devo relembrar que segundo o regulamento de suporte só é permitido uma questão por tópico.
Qual a questão que pretende tratar aqui? A outra você terá que abrir outro tópico.
Atenciosamente,
Primeiramente devo relembrar que segundo o regulamento de suporte só é permitido uma questão por tópico.
Qual a questão que pretende tratar aqui? A outra você terá que abrir outro tópico.
Atenciosamente,
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7962
Pontos : 9217
Re: Efeitos no quadro de anúncio
por Starset 07.06.18 19:56
Como você, pediu para eu escolher, minha prioridade é esta:
2 - Na segunda parte do quadro, onde está escrito "Resumo da Trama aqui", gostaria de colocar o widget de tópicos recentes e não faço ideia de como o fazer.
Aguardo,
2 - Na segunda parte do quadro, onde está escrito "Resumo da Trama aqui", gostaria de colocar o widget de tópicos recentes e não faço ideia de como o fazer.
Aguardo,
Starset- ****
- Membro desde : 02/03/2017
Mensagens : 265
Pontos : 378 -
Re: Efeitos no quadro de anúncio
por Starset 08.06.18 20:43
up up
Edit: Consegui utilizando um código JS, consegui colocar os tópicos recentes em meu quadro de anúncios. Agora preciso realizar a primeira questão, que é:
1 - Na primeira parte do código, eu consigo colocar o USERNAME, porém por algum motivo o círculo superior, onde era para estar o avatar do usuário, não muda. Gostaria de saber como fazer para que, assim como o nome de usuário, a imagem troque para o avatar usada pelo player.
09/06/2018 - 09:26:12
Edit: Consegui utilizando um código JS, consegui colocar os tópicos recentes em meu quadro de anúncios. Agora preciso realizar a primeira questão, que é:
1 - Na primeira parte do código, eu consigo colocar o USERNAME, porém por algum motivo o círculo superior, onde era para estar o avatar do usuário, não muda. Gostaria de saber como fazer para que, assim como o nome de usuário, a imagem troque para o avatar usada pelo player.
09/06/2018 - 09:26:12
Starset- ****
- Membro desde : 02/03/2017
Mensagens : 265
Pontos : 378 -
Re: Efeitos no quadro de anúncio
por RafaelS. 09.06.18 20:40
Olá!
Tente este:
Até.
Tente este:
- Código:
<script>
jQuery(document).on('ready',function(){
jQuery('.avaimg').each(function(){
var profileUserURL=jQuery(this).parent().children('.playername').children('#link').children('a').attr('href');
jQuery(this).html('<a href="'+profileUserURL+'" class="avt-r-enlace"><img src="http://2img.net/i/fa/invision/pp-blank-thumb.png" alt="Nenhum avatar" /></a>');
jQuery(this).load(profileUserURL+' .module:eq(0) img:eq(0)')
})
});
</script><style>
#welcome {
width: 990px;
margin-top: 5px;
margin-left: 58px;
margin-bottom: 30px;
padding: 20px;
background: #f9f9f9;
border-left: 1px solid #f2f0ed;
border-right: 1px solid #f2f0ed;
font-family: 'Open Sans', sans-serif; }
.welcomel, .welcomem, .welcomem2, .welcomer { height: 154px; }
.welcomel { margin-right: 20px; }
.welcome2 { margin-left: 20px; }
.welcomer { margin-left: 20px; }
.welmid, .welbot { width: 400px; }
.welmid {
font-family: 'Open Sans', sans-serif!important;
height: 77px;
border: 1px solid #e5e1d9;
margin-bottom: 10px;
padding: 13px 20px;
text-align: justify;
font: 11px lato;
line-height: 140%;
overflow: auto;
background: #f8f7f6; }
.firstcharacter {
float: left;
color: #9d805a;
font: 50px Allura;
line-height: 30px;
padding-top: 8px;
padding-right: 8px; }
.ditem .firstcharacter {
float: left;
color: #B7A387;
font: 45px Allura;
line-height: 25px;
padding-top: 0;
padding-right: 8px; }
.ditem .firstcharacter2 {
float: left;
color: #9d805a;
font: 50px playfair display;
line-height: 30px;
padding-top: 8px;
padding-right: 8px; }
.welbot {
border: 1px solid #e5e1d9;
padding: 10px 20px;
font: 12px cardo;
font-style: italic;
overflow: hidden;
background: url(http://ekkoish.b1.jcink.com/uploads/ekkoish/Eastern_Lands/BackgroundSoft.png) 50px; }
#news_ticker {
width: 400px;
height: 14px;
margin: 0;
color: #000;
overflow: hidden !important;
padding: 3px;
padding-top: 0;
position: relative;
font: 12px cardo;
font-style: italic; }
#news_ticker ul {
float: left;
padding-left: 0;
list-style-type: none;
-webkit-animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;
-moz-animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;
-ms-animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;
animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite; }
#news_ticker ul:hover {
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-ms-animation-play-state: paused;
animation-play-state: paused; }
#news_ticker li { line-height: 16px; }
#news_ticker a {}
@-webkit-keyframes ticker {
0% {margin-top: 0;}
25% {margin-top: -16px;}
50% {margin-top: -32px;}
75% {margin-top: -48px;}
100% {margin-top: 0;} }
@-moz-keyframes ticker {
0% {margin-top: 0;}
25% {margin-top: -16px;}
50% {margin-top: -32px;}
75% {margin-top: -48px;}
100% {margin-top: 0;} }
@-ms-keyframes ticker {
0% {margin-top: 0;}
25% {margin-top: -16px;}
50% {margin-top: -32px;}
75% {margin-top: -48px;}
100% {margin-top: 0;} }
@keyframes ticker {
0% {margin-top: 0;}
25% {margin-top: -16px;}
50% {margin-top: -32px;}
75% {margin-top: -48px;}
100% {margin-top: 0;} }
.banmid {
width: 100px;
padding: 10px;
height: 134px;
background: url(http://ekkoish.b1.jcink.com/uploads/ekkoish/Eastern_Lands/BackgroundSoft.png) -100px;
outline: 1px solid rgba(255, 255, 255, 0.35);
outline-offset: -4px; }
.banmid2 {
width: 100px;
padding: 10px;
height: 134px;
background: url(http://ekkoish.b1.jcink.com/uploads/ekkoish/Eastern_Lands/BackgroundSoft.png) -100px;
outline: 1px solid rgba(255, 255, 255, 0.35);
outline-offset: -4px; }
.avaimg {
border: 1px solid rgba(0,0,0,0.4);
border-radius: 100%;
width: 80px;
height: 80px;
margin-left: 8px;
margin-top: -5px;
overflow: hidden;
}
.g-2 {
display: block !important;
}
.avaimg img {
width: 80px;
height: 80px;
}
img {
vertical-align: middle;
border: 0px;
}
.playername {
width: 110px;
margin-top: 10px;
text-align: center;
font: 11px cardo;
color: #000;
text-transform: lowercase;
font-style: italic;
}
.playername span {
display: block;
margin-top: 5px;
font: 10px playfair display;
font-style: normal;
letter-spacing: 0px;
text-transform: uppercase;
}
.flstaffbox{
height: 135px;
width: 100px;
display: inline-block;
margin:0px!important;
overflow:hidden;}
.flstaffhover {
padding: 8px;
font-family: 'Open Sans', sans-serif;
font-size: 10px;
background-color: rgba(25,25,25,0.9);
color: #efefef;
text-align: justify;
height: 125px;
overflow: hidden;
width: 85px;
opacity:0;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;}
.flstaffbox:hover .flstaffhover{opacity:1;}
.flstaffhover a {
font-size: 9px;
font-weight: 700;
color: #B7A387;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;}
.flstaffhover a:hover {
color: #efefef;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;}
.fladmintitle{
padding-top: 10px;
padding-bottom: 5px;
text-align: center;
font-family: 'Playfair Display', serif;
font-size: 12px;
text-transform: uppercase;
color: #ebebeb;
font-weight: 300;
line-height: 100%;
border-bottom: 1px dotted #444; }
.fladmintitle:first-letter {
font-weight: 300!important;
margin-right: 3px;
text-transform: uppercase;
font-family: 'Allura', cursive;
font-size: 20px; }
.plottop, .plotbot { width: 204px; }
.plottop {
color: #68553b;
text-align: right;
font: 12px cardo;
font-style: italic;
padding: 0px 20px 10px 20px;
border-bottom: 1px solid #dbd5ca; }
.plottop b { color: #7d5368; }
.plotbot {
height: 75px;
border: 1px solid #e5e1d9;
margin-top: 10px;
padding: 20px;
text-align: justify;
font-family: 'Open Sans', sans-serif!important;
font-size: 11px;
line-height: 140%;
overflow: auto;
background: #f8f7f6; }
#alltop {
width: 980px;
margin: 0 auto;
}
#topbanner2017 {
background: url(https://i.imgur.com/pdE9vB6.png);
opacity: 0.7;
width: 980px;
height: 500px;
}
#topblurb {
color: #f8f7f6;
font: 12px cardo;
letter-spacing: 2px;
height: 200px;
padding: 0 100px;
line-height: 200%;
margin-top: -150px;
text-align: left;
opacity: .5;
}
important {
font: 14px cardo;
font-weight: 700;
font-style: italic;
}</style>
<div id="welcome">
<table cellpadding="0" cellspacing="0">
<tbody> </tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody>
<tr style="">
<td valign="top">
<div class="welcomel">
<div class="banmid">
<div class="avaimg">
<div class="g-2" style="display: none;">
</div>
</div>
<div class="playername">
Bem-vindo (a),<span id="link">{USERLINK}</span>
</div>
</div>
</div>
</td>
<td valign="top">
<div class="welcomem">
<div class="welmid">
“<span class="firstcharacter">R</span> esumo da trama aqui.”
</div>
<div class="welbot">
<div id="news_ticker">
<ul>
<li>
ATENÇÃO! As postagens estão liberadas!
</li>
</ul>
</div>
</div>
</div>
</td>
<td valign="top">
<div class="welcome2">
<div class="banmid">
<div class="flstaffbox" style="background: url(https://i.imgur.com/OIZcQyd.gif);">
<div class="flstaffhover">
<div class="fladmintitle">
Eventos
</div>
<center>
<em>Primavera, 410 d.C.</em>
</center>
<div style="height: 5px;">
</div>
<a href="link" target="_blank">♘ ♞ Nome do evento</a>
</div>
</div>
</div>
</div>
</td>
<td valign="top">
<div class="welcomer">
<div class="plottop">
Estamos na <strong>primavera</strong>, ano de <strong>410 d.C.</strong>
</div>
<div class="plotbot">
<em class="fa fa-whatsapp" aria-hidden="true"></em> <a href="http://bloodofvalyria.forumeiros.com/t52-sistemas-cargos" target="_blank"> <strong>Cargos</strong></a><br /><a href="http://bloodofvalyria.forumeiros.com/t49-sistemas-habiliades" target="_blank"> <strong>Habilidades</strong></a><br /><a href="http://bloodofvalyria.forumeiros.com/t5-registro-de-photoplayer" target="_blank"> <strong>Registro de Photoplayer</strong></a><br /><a href="https://i.imgur.com/NOi8B5g.jpg" target="_blank"> <strong>Mapa de Todo o Mundo Conhecido</strong></a><br /><a href="https://chat.whatsapp.com/HT4hNEPvpw4DPRZ71EyY3X" target="_blank"> <strong>Grupo: Blood of Valyria RPG</strong></a>
</div>
</div>
</td>
</tr><tbody> </tbody>
</table>
</div>
Até.
RafaelS.- Membro Entusiasta
- Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156 -
Re: Efeitos no quadro de anúncio
por Starset 09.06.18 20:49
Coloquei o JS que você mandou, mas como o código veio todo bagunçado, copiei apenas a esse trecho:
É isso mesmo? E na parte que está "nenhum avatar" está correto?
Pois no quadro de anúncio apareceu a imagem abaixo, no lugar que deveria ser o avatar do player.
Aguardo retorno,
- Código:
jQuery(document).on('ready',function(){
jQuery('.avaimg').each(function(){
var profileUserURL=jQuery(this).parent().children('.playername').children('#link').children('a').attr('href');
jQuery(this).html('<a href="'+profileUserURL+'" class="avt-r-enlace"><img src="https://2img.net/i/fa/invision/pp-blank-thumb.png" alt="Nenhum avatar" /></a>');
jQuery(this).load(profileUserURL+' .module:eq(0) img:eq(0)')
})
});
É isso mesmo? E na parte que está "nenhum avatar" está correto?
Pois no quadro de anúncio apareceu a imagem abaixo, no lugar que deveria ser o avatar do player.
Aguardo retorno,
Starset- ****
- Membro desde : 02/03/2017
Mensagens : 265
Pontos : 378 -
Re: Efeitos no quadro de anúncio
por RafaelS. 09.06.18 20:53
Olá @Starset,
Acredito que não tenha funcionado, pois é necessário o código todo uma vez que foram feitas modificações em alguns elementos.
Essa imagem aparece por predefinição, se o JS não conseguir carregar nenhuma imagem.
Até mais.
Observação: Se quiser, pode mandar o código novamente sem que ele esteja "bagunçado" que eu faço as alterações.
Acredito que não tenha funcionado, pois é necessário o código todo uma vez que foram feitas modificações em alguns elementos.
Essa imagem aparece por predefinição, se o JS não conseguir carregar nenhuma imagem.
Até mais.
Observação: Se quiser, pode mandar o código novamente sem que ele esteja "bagunçado" que eu faço as alterações.
RafaelS.- Membro Entusiasta
- Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156 -
Re: Efeitos no quadro de anúncio
por Starset 09.06.18 21:10
RafaelS., você me mandou um unico código, que estava na verdade uma bagunça rs, me desculpe.
Na minha primeira mensagem está tudo divido: o html e o css. Já na sua é tudo confuso, todos os 3 códigos em um só. Solicito que organize melhor sua resposta e separe seus códigos na postagem citada abaixo, para que eu possa realizar o teste sugerido.
abraços.
Na minha primeira mensagem está tudo divido: o html e o css. Já na sua é tudo confuso, todos os 3 códigos em um só. Solicito que organize melhor sua resposta e separe seus códigos na postagem citada abaixo, para que eu possa realizar o teste sugerido.
RafaelS. escreveu:Olá!
Tente este:
- Código:
<script>
jQuery(document).on('ready',function(){
jQuery('.avaimg').each(function(){
var profileUserURL=jQuery(this).parent().children('.playername').children('#link').children('a').attr('href');
jQuery(this).html('<a href="'+profileUserURL+'" class="avt-r-enlace"><img src="https://2img.net/i/fa/invision/pp-blank-thumb.png" alt="Nenhum avatar" /></a>');
jQuery(this).load(profileUserURL+' .module:eq(0) img:eq(0)')
})
});
</script><style>
#welcome {
width: 990px;
margin-top: 5px;
margin-left: 58px;
margin-bottom: 30px;
padding: 20px;
background: #f9f9f9;
border-left: 1px solid #f2f0ed;
border-right: 1px solid #f2f0ed;
font-family: 'Open Sans', sans-serif; }
.welcomel, .welcomem, .welcomem2, .welcomer { height: 154px; }
.welcomel { margin-right: 20px; }
.welcome2 { margin-left: 20px; }
.welcomer { margin-left: 20px; }
.welmid, .welbot { width: 400px; }
.welmid {
font-family: 'Open Sans', sans-serif!important;
height: 77px;
border: 1px solid #e5e1d9;
margin-bottom: 10px;
padding: 13px 20px;
text-align: justify;
font: 11px lato;
line-height: 140%;
overflow: auto;
background: #f8f7f6; }
.firstcharacter {
float: left;
color: #9d805a;
font: 50px Allura;
line-height: 30px;
padding-top: 8px;
padding-right: 8px; }
.ditem .firstcharacter {
float: left;
color: #B7A387;
font: 45px Allura;
line-height: 25px;
padding-top: 0;
padding-right: 8px; }
.ditem .firstcharacter2 {
float: left;
color: #9d805a;
font: 50px playfair display;
line-height: 30px;
padding-top: 8px;
padding-right: 8px; }
.welbot {
border: 1px solid #e5e1d9;
padding: 10px 20px;
font: 12px cardo;
font-style: italic;
overflow: hidden;
background: url(http://ekkoish.b1.jcink.com/uploads/ekkoish/Eastern_Lands/BackgroundSoft.png) 50px; }
#news_ticker {
width: 400px;
height: 14px;
margin: 0;
color: #000;
overflow: hidden !important;
padding: 3px;
padding-top: 0;
position: relative;
font: 12px cardo;
font-style: italic; }
#news_ticker ul {
float: left;
padding-left: 0;
list-style-type: none;
-webkit-animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;
-moz-animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;
-ms-animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;
animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite; }
#news_ticker ul:hover {
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-ms-animation-play-state: paused;
animation-play-state: paused; }
#news_ticker li { line-height: 16px; }
#news_ticker a {}
@-webkit-keyframes ticker {
0% {margin-top: 0;}
25% {margin-top: -16px;}
50% {margin-top: -32px;}
75% {margin-top: -48px;}
100% {margin-top: 0;} }
@-moz-keyframes ticker {
0% {margin-top: 0;}
25% {margin-top: -16px;}
50% {margin-top: -32px;}
75% {margin-top: -48px;}
100% {margin-top: 0;} }
@-ms-keyframes ticker {
0% {margin-top: 0;}
25% {margin-top: -16px;}
50% {margin-top: -32px;}
75% {margin-top: -48px;}
100% {margin-top: 0;} }
@keyframes ticker {
0% {margin-top: 0;}
25% {margin-top: -16px;}
50% {margin-top: -32px;}
75% {margin-top: -48px;}
100% {margin-top: 0;} }
.banmid {
width: 100px;
padding: 10px;
height: 134px;
background: url(http://ekkoish.b1.jcink.com/uploads/ekkoish/Eastern_Lands/BackgroundSoft.png) -100px;
outline: 1px solid rgba(255, 255, 255, 0.35);
outline-offset: -4px; }
.banmid2 {
width: 100px;
padding: 10px;
height: 134px;
background: url(http://ekkoish.b1.jcink.com/uploads/ekkoish/Eastern_Lands/BackgroundSoft.png) -100px;
outline: 1px solid rgba(255, 255, 255, 0.35);
outline-offset: -4px; }
.avaimg {
border: 1px solid rgba(0,0,0,0.4);
border-radius: 100%;
width: 80px;
height: 80px;
margin-left: 8px;
margin-top: -5px;
overflow: hidden;
}
.g-2 {
display: block !important;
}
.avaimg img {
width: 80px;
height: 80px;
}
img {
vertical-align: middle;
border: 0px;
}
.playername {
width: 110px;
margin-top: 10px;
text-align: center;
font: 11px cardo;
color: #000;
text-transform: lowercase;
font-style: italic;
}
.playername span {
display: block;
margin-top: 5px;
font: 10px playfair display;
font-style: normal;
letter-spacing: 0px;
text-transform: uppercase;
}
.flstaffbox{
height: 135px;
width: 100px;
display: inline-block;
margin:0px!important;
overflow:hidden;}
.flstaffhover {
padding: 8px;
font-family: 'Open Sans', sans-serif;
font-size: 10px;
background-color: rgba(25,25,25,0.9);
color: #efefef;
text-align: justify;
height: 125px;
overflow: hidden;
width: 85px;
opacity:0;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;}
.flstaffbox:hover .flstaffhover{opacity:1;}
.flstaffhover a {
font-size: 9px;
font-weight: 700;
color: #B7A387;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;}
.flstaffhover a:hover {
color: #efefef;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;}
.fladmintitle{
padding-top: 10px;
padding-bottom: 5px;
text-align: center;
font-family: 'Playfair Display', serif;
font-size: 12px;
text-transform: uppercase;
color: #ebebeb;
font-weight: 300;
line-height: 100%;
border-bottom: 1px dotted #444; }
.fladmintitle:first-letter {
font-weight: 300!important;
margin-right: 3px;
text-transform: uppercase;
font-family: 'Allura', cursive;
font-size: 20px; }
.plottop, .plotbot { width: 204px; }
.plottop {
color: #68553b;
text-align: right;
font: 12px cardo;
font-style: italic;
padding: 0px 20px 10px 20px;
border-bottom: 1px solid #dbd5ca; }
.plottop b { color: #7d5368; }
.plotbot {
height: 75px;
border: 1px solid #e5e1d9;
margin-top: 10px;
padding: 20px;
text-align: justify;
font-family: 'Open Sans', sans-serif!important;
font-size: 11px;
line-height: 140%;
overflow: auto;
background: #f8f7f6; }
#alltop {
width: 980px;
margin: 0 auto;
}
#topbanner2017 {
background: url(https://i.imgur.com/pdE9vB6.png);
opacity: 0.7;
width: 980px;
height: 500px;
}
#topblurb {
color: #f8f7f6;
font: 12px cardo;
letter-spacing: 2px;
height: 200px;
padding: 0 100px;
line-height: 200%;
margin-top: -150px;
text-align: left;
opacity: .5;
}
important {
font: 14px cardo;
font-weight: 700;
font-style: italic;
}</style>
<div id="welcome">
<table cellpadding="0" cellspacing="0">
<tbody> </tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody>
<tr style="">
<td valign="top">
<div class="welcomel">
<div class="banmid">
<div class="avaimg">
<div class="g-2" style="display: none;">
</div>
</div>
<div class="playername">
Bem-vindo (a),<span id="link">{USERLINK}</span>
</div>
</div>
</div>
</td>
<td valign="top">
<div class="welcomem">
<div class="welmid">
“<span class="firstcharacter">R</span> esumo da trama aqui.”
</div>
<div class="welbot">
<div id="news_ticker">
<ul>
<li>
ATENÇÃO! As postagens estão liberadas!
</li>
</ul>
</div>
</div>
</div>
</td>
<td valign="top">
<div class="welcome2">
<div class="banmid">
<div class="flstaffbox" style="background: url(https://i.imgur.com/OIZcQyd.gif);">
<div class="flstaffhover">
<div class="fladmintitle">
Eventos
</div>
<center>
<em>Primavera, 410 d.C.</em>
</center>
<div style="height: 5px;">
</div>
<a href="link" target="_blank">♘ ♞ Nome do evento</a>
</div>
</div>
</div>
</div>
</td>
<td valign="top">
<div class="welcomer">
<div class="plottop">
Estamos na <strong>primavera</strong>, ano de <strong>410 d.C.</strong>
</div>
<div class="plotbot">
<em class="fa fa-whatsapp" aria-hidden="true"></em> <a href="http://bloodofvalyria.forumeiros.com/t52-sistemas-cargos" target="_blank"> <strong>Cargos</strong></a><br /><a href="http://bloodofvalyria.forumeiros.com/t49-sistemas-habiliades" target="_blank"> <strong>Habilidades</strong></a><br /><a href="http://bloodofvalyria.forumeiros.com/t5-registro-de-photoplayer" target="_blank"> <strong>Registro de Photoplayer</strong></a><br /><a href="https://i.imgur.com/NOi8B5g.jpg" target="_blank"> <strong>Mapa de Todo o Mundo Conhecido</strong></a><br /><a href="https://chat.whatsapp.com/HT4hNEPvpw4DPRZ71EyY3X" target="_blank"> <strong>Grupo: Blood of Valyria RPG</strong></a>
</div>
</div>
</td>
</tr><tbody> </tbody>
</table>
</div>
Até.
abraços.
Starset- ****
- Membro desde : 02/03/2017
Mensagens : 265
Pontos : 378 -
Re: Efeitos no quadro de anúncio
por RafaelS. 09.06.18 21:19
Olá!
@Starset. acho que eu entendi
Na verdade, não é "bagunça". Eu apenas juntei o CSS, HTML e jS para ficar em só um "lugar" no fórum, para que quando queira fazer modificações saiba onde se encontra.
Mas se realmente deseja os 3 separados, aqui tem:
Boa noite.
@Starset. acho que eu entendi
Na verdade, não é "bagunça". Eu apenas juntei o CSS, HTML e jS para ficar em só um "lugar" no fórum, para que quando queira fazer modificações saiba onde se encontra.
Mas se realmente deseja os 3 separados, aqui tem:
HTML
- Código:
<div id="welcome">
<table cellpadding="0" cellspacing="0">
<tbody> </tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody>
<tr style="">
<td valign="top">
<div class="welcomel">
<div class="banmid">
<div class="avaimg">
<div class="g-2" style="display: none;">
</div>
</div>
<div class="playername">
Bem-vindo (a),<span id="link">{USERLINK}</span>
</div>
</div>
</div>
</td>
<td valign="top">
<div class="welcomem">
<div class="welmid">
“<span class="firstcharacter">R</span> esumo da trama aqui.”
</div>
<div class="welbot">
<div id="news_ticker">
<ul>
<li>
ATENÇÃO! As postagens estão liberadas!
</li>
</ul>
</div>
</div>
</div>
</td>
<td valign="top">
<div class="welcome2">
<div class="banmid">
<div class="flstaffbox" style="background: url(https://i.imgur.com/OIZcQyd.gif);">
<div class="flstaffhover">
<div class="fladmintitle">
Eventos
</div>
<center>
<em>Primavera, 410 d.C.</em>
</center>
<div style="height: 5px;">
</div>
<a href="link" target="_blank">♘ ♞ Nome do evento</a>
</div>
</div>
</div>
</div>
</td>
<td valign="top">
<div class="welcomer">
<div class="plottop">
Estamos na <strong>primavera</strong>, ano de <strong>410 d.C.</strong>
</div>
<div class="plotbot">
<em class="fa fa-whatsapp" aria-hidden="true"></em> <a href="http://bloodofvalyria.forumeiros.com/t52-sistemas-cargos" target="_blank"> <strong>Cargos</strong></a><br /><a href="http://bloodofvalyria.forumeiros.com/t49-sistemas-habiliades" target="_blank"> <strong>Habilidades</strong></a><br /><a href="http://bloodofvalyria.forumeiros.com/t5-registro-de-photoplayer" target="_blank"> <strong>Registro de Photoplayer</strong></a><br /><a href="https://i.imgur.com/NOi8B5g.jpg" target="_blank"> <strong>Mapa de Todo o Mundo Conhecido</strong></a><br /><a href="https://chat.whatsapp.com/HT4hNEPvpw4DPRZ71EyY3X" target="_blank"> <strong>Grupo: Blood of Valyria RPG</strong></a>
</div>
</div>
</td>
</tr><tbody> </tbody>
</table>
</div>
CSS
- Código:
#welcome {
width: 990px;
margin-top: 5px;
margin-left: 58px;
margin-bottom: 30px;
padding: 20px;
background: #f9f9f9;
border-left: 1px solid #f2f0ed;
border-right: 1px solid #f2f0ed;
font-family: 'Open Sans', sans-serif; }
.welcomel, .welcomem, .welcomem2, .welcomer { height: 154px; }
.welcomel { margin-right: 20px; }
.welcome2 { margin-left: 20px; }
.welcomer { margin-left: 20px; }
.welmid, .welbot { width: 400px; }
.welmid {
font-family: 'Open Sans', sans-serif!important;
height: 77px;
border: 1px solid #e5e1d9;
margin-bottom: 10px;
padding: 13px 20px;
text-align: justify;
font: 11px lato;
line-height: 140%;
overflow: auto;
background: #f8f7f6; }
.firstcharacter {
float: left;
color: #9d805a;
font: 50px Allura;
line-height: 30px;
padding-top: 8px;
padding-right: 8px; }
.ditem .firstcharacter {
float: left;
color: #B7A387;
font: 45px Allura;
line-height: 25px;
padding-top: 0;
padding-right: 8px; }
.ditem .firstcharacter2 {
float: left;
color: #9d805a;
font: 50px playfair display;
line-height: 30px;
padding-top: 8px;
padding-right: 8px; }
.welbot {
border: 1px solid #e5e1d9;
padding: 10px 20px;
font: 12px cardo;
font-style: italic;
overflow: hidden;
background: url(http://ekkoish.b1.jcink.com/uploads/ekkoish/Eastern_Lands/BackgroundSoft.png) 50px; }
#news_ticker {
width: 400px;
height: 14px;
margin: 0;
color: #000;
overflow: hidden !important;
padding: 3px;
padding-top: 0;
position: relative;
font: 12px cardo;
font-style: italic; }
#news_ticker ul {
float: left;
padding-left: 0;
list-style-type: none;
-webkit-animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;
-moz-animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;
-ms-animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;
animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite; }
#news_ticker ul:hover {
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-ms-animation-play-state: paused;
animation-play-state: paused; }
#news_ticker li { line-height: 16px; }
#news_ticker a {}
@-webkit-keyframes ticker {
0% {margin-top: 0;}
25% {margin-top: -16px;}
50% {margin-top: -32px;}
75% {margin-top: -48px;}
100% {margin-top: 0;} }
@-moz-keyframes ticker {
0% {margin-top: 0;}
25% {margin-top: -16px;}
50% {margin-top: -32px;}
75% {margin-top: -48px;}
100% {margin-top: 0;} }
@-ms-keyframes ticker {
0% {margin-top: 0;}
25% {margin-top: -16px;}
50% {margin-top: -32px;}
75% {margin-top: -48px;}
100% {margin-top: 0;} }
@keyframes ticker {
0% {margin-top: 0;}
25% {margin-top: -16px;}
50% {margin-top: -32px;}
75% {margin-top: -48px;}
100% {margin-top: 0;} }
.banmid {
width: 100px;
padding: 10px;
height: 134px;
background: url(http://ekkoish.b1.jcink.com/uploads/ekkoish/Eastern_Lands/BackgroundSoft.png) -100px;
outline: 1px solid rgba(255, 255, 255, 0.35);
outline-offset: -4px; }
.banmid2 {
width: 100px;
padding: 10px;
height: 134px;
background: url(http://ekkoish.b1.jcink.com/uploads/ekkoish/Eastern_Lands/BackgroundSoft.png) -100px;
outline: 1px solid rgba(255, 255, 255, 0.35);
outline-offset: -4px; }
.avaimg {
border: 1px solid rgba(0,0,0,0.4);
border-radius: 100%;
width: 80px;
height: 80px;
margin-left: 8px;
margin-top: -5px;
overflow: hidden;
}
.g-2 {
display: block !important;
}
.avaimg img {
width: 80px;
height: 80px;
}
img {
vertical-align: middle;
border: 0px;
}
.playername {
width: 110px;
margin-top: 10px;
text-align: center;
font: 11px cardo;
color: #000;
text-transform: lowercase;
font-style: italic;
}
.playername span {
display: block;
margin-top: 5px;
font: 10px playfair display;
font-style: normal;
letter-spacing: 0px;
text-transform: uppercase;
}
.flstaffbox{
height: 135px;
width: 100px;
display: inline-block;
margin:0px!important;
overflow:hidden;}
.flstaffhover {
padding: 8px;
font-family: 'Open Sans', sans-serif;
font-size: 10px;
background-color: rgba(25,25,25,0.9);
color: #efefef;
text-align: justify;
height: 125px;
overflow: hidden;
width: 85px;
opacity:0;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;}
.flstaffbox:hover .flstaffhover{opacity:1;}
.flstaffhover a {
font-size: 9px;
font-weight: 700;
color: #B7A387;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;}
.flstaffhover a:hover {
color: #efefef;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;}
.fladmintitle{
padding-top: 10px;
padding-bottom: 5px;
text-align: center;
font-family: 'Playfair Display', serif;
font-size: 12px;
text-transform: uppercase;
color: #ebebeb;
font-weight: 300;
line-height: 100%;
border-bottom: 1px dotted #444; }
.fladmintitle:first-letter {
font-weight: 300!important;
margin-right: 3px;
text-transform: uppercase;
font-family: 'Allura', cursive;
font-size: 20px; }
.plottop, .plotbot { width: 204px; }
.plottop {
color: #68553b;
text-align: right;
font: 12px cardo;
font-style: italic;
padding: 0px 20px 10px 20px;
border-bottom: 1px solid #dbd5ca; }
.plottop b { color: #7d5368; }
.plotbot {
height: 75px;
border: 1px solid #e5e1d9;
margin-top: 10px;
padding: 20px;
text-align: justify;
font-family: 'Open Sans', sans-serif!important;
font-size: 11px;
line-height: 140%;
overflow: auto;
background: #f8f7f6; }
#alltop {
width: 980px;
margin: 0 auto;
}
#topbanner2017 {
background: url(https://i.imgur.com/pdE9vB6.png);
opacity: 0.7;
width: 980px;
height: 500px;
}
#topblurb {
color: #f8f7f6;
font: 12px cardo;
letter-spacing: 2px;
height: 200px;
padding: 0 100px;
line-height: 200%;
margin-top: -150px;
text-align: left;
opacity: .5;
}
important {
font: 14px cardo;
font-weight: 700;
font-style: italic;
}
JS
- Código:
jQuery(document).on('ready',function(){
jQuery('.avaimg').each(function(){
var profileUserURL=jQuery(this).parent().children('.playername').children('#link').children('a').attr('href');
jQuery(this).html('<a href="'+profileUserURL+'" class="avt-r-enlace"><img src="https://2img.net/i/fa/invision/pp-blank-thumb.png" alt="Nenhum avatar" /></a>');
jQuery(this).load(profileUserURL+' .module:eq(0) img:eq(0)')
})
});
Boa noite.
RafaelS.- Membro Entusiasta
- Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156 -
Re: Efeitos no quadro de anúncio
por Starset 09.06.18 21:36
Realizei as alterações, porém não aparece a imagem do avatar, mas sim aquele símbolo de imagem quebrada e mesmo assim fora da área do círculo, como pode ver no print abaixo:
o que posso fazer?
o que posso fazer?
Starset- ****
- Membro desde : 02/03/2017
Mensagens : 265
Pontos : 378 -
Re: Efeitos no quadro de anúncio
por RafaelS. 09.06.18 21:46
Olá novamente @Starset.
Poderia me informar se o senhor tem o recurso perfil avançado ativo?
Até mais.
Poderia me informar se o senhor tem o recurso perfil avançado ativo?
Até mais.
RafaelS.- Membro Entusiasta
- Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156 -
Re: Efeitos no quadro de anúncio
por Starset 09.06.18 21:48
O perfil avançado esta desativado! Preciso que ele esteja desativado, por questões estéticas e de outros códigos que utilizo na página de perfil!
Starset- ****
- Membro desde : 02/03/2017
Mensagens : 265
Pontos : 378 -
Starset- ****
- Membro desde : 02/03/2017
Mensagens : 265
Pontos : 378 -
Starset- ****
- Membro desde : 02/03/2017
Mensagens : 265
Pontos : 378 -
Starset- ****
- Membro desde : 02/03/2017
Mensagens : 265
Pontos : 378 -
Starset- ****
- Membro desde : 02/03/2017
Mensagens : 265
Pontos : 378 -
Starset- ****
- Membro desde : 02/03/2017
Mensagens : 265
Pontos : 378 -
Starset- ****
- Membro desde : 02/03/2017
Mensagens : 265
Pontos : 378 -
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7962
Pontos : 9217
Re: Efeitos no quadro de anúncio
por Starset 16.06.18 13:24
Oi, @Pedxz!
O problema é que no quadro de anuncio o avatar não ta aparecendo por eu usar o perfil normal e não o avançado. Quando eu ativo o perfil avançado, passa a aparecer, porém não quero utilizar o modelo desta opção.
A mensagem abaixo foi muito útil. E acredito que seja algum pequeno ajuste para o perfil normal, já que os codes foram feitos para o avançado.
O problema é que no quadro de anuncio o avatar não ta aparecendo por eu usar o perfil normal e não o avançado. Quando eu ativo o perfil avançado, passa a aparecer, porém não quero utilizar o modelo desta opção.
A mensagem abaixo foi muito útil. E acredito que seja algum pequeno ajuste para o perfil normal, já que os codes foram feitos para o avançado.
RafaelS. escreveu:Olá!
@Starset. acho que eu entendi
Na verdade, não é "bagunça". Eu apenas juntei o CSS, HTML e jS para ficar em só um "lugar" no fórum, para que quando queira fazer modificações saiba onde se encontra.
Mas se realmente deseja os 3 separados, aqui tem:HTML
- Código:
<div id="welcome">
<table cellpadding="0" cellspacing="0">
<tbody> </tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody>
<tr style="">
<td valign="top">
<div class="welcomel">
<div class="banmid">
<div class="avaimg">
<div class="g-2" style="display: none;">
</div>
</div>
<div class="playername">
Bem-vindo (a),<span id="link">{USERLINK}</span>
</div>
</div>
</div>
</td>
<td valign="top">
<div class="welcomem">
<div class="welmid">
“<span class="firstcharacter">R</span> esumo da trama aqui.”
</div>
<div class="welbot">
<div id="news_ticker">
<ul>
<li>
ATENÇÃO! As postagens estão liberadas!
</li>
</ul>
</div>
</div>
</div>
</td>
<td valign="top">
<div class="welcome2">
<div class="banmid">
<div class="flstaffbox" style="background: url(https://i.imgur.com/OIZcQyd.gif);">
<div class="flstaffhover">
<div class="fladmintitle">
Eventos
</div>
<center>
<em>Primavera, 410 d.C.</em>
</center>
<div style="height: 5px;">
</div>
<a href="link" target="_blank">♘ ♞ Nome do evento</a>
</div>
</div>
</div>
</div>
</td>
<td valign="top">
<div class="welcomer">
<div class="plottop">
Estamos na <strong>primavera</strong>, ano de <strong>410 d.C.</strong>
</div>
<div class="plotbot">
<em class="fa fa-whatsapp" aria-hidden="true"></em> <a href="http://bloodofvalyria.forumeiros.com/t52-sistemas-cargos" target="_blank"> <strong>Cargos</strong></a><br /><a href="http://bloodofvalyria.forumeiros.com/t49-sistemas-habiliades" target="_blank"> <strong>Habilidades</strong></a><br /><a href="http://bloodofvalyria.forumeiros.com/t5-registro-de-photoplayer" target="_blank"> <strong>Registro de Photoplayer</strong></a><br /><a href="https://i.imgur.com/NOi8B5g.jpg" target="_blank"> <strong>Mapa de Todo o Mundo Conhecido</strong></a><br /><a href="https://chat.whatsapp.com/HT4hNEPvpw4DPRZ71EyY3X" target="_blank"> <strong>Grupo: Blood of Valyria RPG</strong></a>
</div>
</div>
</td>
</tr><tbody> </tbody>
</table>
</div>CSS
- Código:
#welcome {
width: 990px;
margin-top: 5px;
margin-left: 58px;
margin-bottom: 30px;
padding: 20px;
background: #f9f9f9;
border-left: 1px solid #f2f0ed;
border-right: 1px solid #f2f0ed;
font-family: 'Open Sans', sans-serif; }
.welcomel, .welcomem, .welcomem2, .welcomer { height: 154px; }
.welcomel { margin-right: 20px; }
.welcome2 { margin-left: 20px; }
.welcomer { margin-left: 20px; }
.welmid, .welbot { width: 400px; }
.welmid {
font-family: 'Open Sans', sans-serif!important;
height: 77px;
border: 1px solid #e5e1d9;
margin-bottom: 10px;
padding: 13px 20px;
text-align: justify;
font: 11px lato;
line-height: 140%;
overflow: auto;
background: #f8f7f6; }
.firstcharacter {
float: left;
color: #9d805a;
font: 50px Allura;
line-height: 30px;
padding-top: 8px;
padding-right: 8px; }
.ditem .firstcharacter {
float: left;
color: #B7A387;
font: 45px Allura;
line-height: 25px;
padding-top: 0;
padding-right: 8px; }
.ditem .firstcharacter2 {
float: left;
color: #9d805a;
font: 50px playfair display;
line-height: 30px;
padding-top: 8px;
padding-right: 8px; }
.welbot {
border: 1px solid #e5e1d9;
padding: 10px 20px;
font: 12px cardo;
font-style: italic;
overflow: hidden;
background: url(http://ekkoish.b1.jcink.com/uploads/ekkoish/Eastern_Lands/BackgroundSoft.png) 50px; }
#news_ticker {
width: 400px;
height: 14px;
margin: 0;
color: #000;
overflow: hidden !important;
padding: 3px;
padding-top: 0;
position: relative;
font: 12px cardo;
font-style: italic; }
#news_ticker ul {
float: left;
padding-left: 0;
list-style-type: none;
-webkit-animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;
-moz-animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;
-ms-animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;
animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite; }
#news_ticker ul:hover {
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-ms-animation-play-state: paused;
animation-play-state: paused; }
#news_ticker li { line-height: 16px; }
#news_ticker a {}
@-webkit-keyframes ticker {
0% {margin-top: 0;}
25% {margin-top: -16px;}
50% {margin-top: -32px;}
75% {margin-top: -48px;}
100% {margin-top: 0;} }
@-moz-keyframes ticker {
0% {margin-top: 0;}
25% {margin-top: -16px;}
50% {margin-top: -32px;}
75% {margin-top: -48px;}
100% {margin-top: 0;} }
@-ms-keyframes ticker {
0% {margin-top: 0;}
25% {margin-top: -16px;}
50% {margin-top: -32px;}
75% {margin-top: -48px;}
100% {margin-top: 0;} }
@keyframes ticker {
0% {margin-top: 0;}
25% {margin-top: -16px;}
50% {margin-top: -32px;}
75% {margin-top: -48px;}
100% {margin-top: 0;} }
.banmid {
width: 100px;
padding: 10px;
height: 134px;
background: url(http://ekkoish.b1.jcink.com/uploads/ekkoish/Eastern_Lands/BackgroundSoft.png) -100px;
outline: 1px solid rgba(255, 255, 255, 0.35);
outline-offset: -4px; }
.banmid2 {
width: 100px;
padding: 10px;
height: 134px;
background: url(http://ekkoish.b1.jcink.com/uploads/ekkoish/Eastern_Lands/BackgroundSoft.png) -100px;
outline: 1px solid rgba(255, 255, 255, 0.35);
outline-offset: -4px; }
.avaimg {
border: 1px solid rgba(0,0,0,0.4);
border-radius: 100%;
width: 80px;
height: 80px;
margin-left: 8px;
margin-top: -5px;
overflow: hidden;
}
.g-2 {
display: block !important;
}
.avaimg img {
width: 80px;
height: 80px;
}
img {
vertical-align: middle;
border: 0px;
}
.playername {
width: 110px;
margin-top: 10px;
text-align: center;
font: 11px cardo;
color: #000;
text-transform: lowercase;
font-style: italic;
}
.playername span {
display: block;
margin-top: 5px;
font: 10px playfair display;
font-style: normal;
letter-spacing: 0px;
text-transform: uppercase;
}
.flstaffbox{
height: 135px;
width: 100px;
display: inline-block;
margin:0px!important;
overflow:hidden;}
.flstaffhover {
padding: 8px;
font-family: 'Open Sans', sans-serif;
font-size: 10px;
background-color: rgba(25,25,25,0.9);
color: #efefef;
text-align: justify;
height: 125px;
overflow: hidden;
width: 85px;
opacity:0;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;}
.flstaffbox:hover .flstaffhover{opacity:1;}
.flstaffhover a {
font-size: 9px;
font-weight: 700;
color: #B7A387;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;}
.flstaffhover a:hover {
color: #efefef;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;}
.fladmintitle{
padding-top: 10px;
padding-bottom: 5px;
text-align: center;
font-family: 'Playfair Display', serif;
font-size: 12px;
text-transform: uppercase;
color: #ebebeb;
font-weight: 300;
line-height: 100%;
border-bottom: 1px dotted #444; }
.fladmintitle:first-letter {
font-weight: 300!important;
margin-right: 3px;
text-transform: uppercase;
font-family: 'Allura', cursive;
font-size: 20px; }
.plottop, .plotbot { width: 204px; }
.plottop {
color: #68553b;
text-align: right;
font: 12px cardo;
font-style: italic;
padding: 0px 20px 10px 20px;
border-bottom: 1px solid #dbd5ca; }
.plottop b { color: #7d5368; }
.plotbot {
height: 75px;
border: 1px solid #e5e1d9;
margin-top: 10px;
padding: 20px;
text-align: justify;
font-family: 'Open Sans', sans-serif!important;
font-size: 11px;
line-height: 140%;
overflow: auto;
background: #f8f7f6; }
#alltop {
width: 980px;
margin: 0 auto;
}
#topbanner2017 {
background: url(https://i.imgur.com/pdE9vB6.png);
opacity: 0.7;
width: 980px;
height: 500px;
}
#topblurb {
color: #f8f7f6;
font: 12px cardo;
letter-spacing: 2px;
height: 200px;
padding: 0 100px;
line-height: 200%;
margin-top: -150px;
text-align: left;
opacity: .5;
}
important {
font: 14px cardo;
font-weight: 700;
font-style: italic;
}JS
- Código:
jQuery(document).on('ready',function(){
jQuery('.avaimg').each(function(){
var profileUserURL=jQuery(this).parent().children('.playername').children('#link').children('a').attr('href');
jQuery(this).html('<a href="'+profileUserURL+'" class="avt-r-enlace"><img src="https://2img.net/i/fa/invision/pp-blank-thumb.png" alt="Nenhum avatar" /></a>');
jQuery(this).load(profileUserURL+' .module:eq(0) img:eq(0)')
})
});
Boa noite.
Starset- ****
- Membro desde : 02/03/2017
Mensagens : 265
Pontos : 378 -
Starset- ****
- Membro desde : 02/03/2017
Mensagens : 265
Pontos : 378 -
Starset- ****
- Membro desde : 02/03/2017
Mensagens : 265
Pontos : 378 -
Re: Efeitos no quadro de anúncio
por RafaelS. 19.06.18 15:32
Olá @Starset.
Desculpe a demora, tenho andado ocupado. Efectivamente o código que lhe passei era caso tivesse o perfil avançado ativado. Sendo assim, substitua o JS por este:
Cordialmente.
Rafael.
Desculpe a demora, tenho andado ocupado. Efectivamente o código que lhe passei era caso tivesse o perfil avançado ativado. Sendo assim, substitua o JS por este:
- Código:
jQuery(document).on('ready',function(){
jQuery('.avaimg').each(function(){
var profileUserURL=jQuery(this).parent().children('.playername').children('#link').children('a').attr('href');
jQuery(this).html('<a href="'+profileUserURL+'" class="avt-r-enlace"><img src="https://2img.net/i/fa/invision/pp-blank-thumb.png" alt="Nenhum avatar" /></a>');
jQuery(this).load(profileUserURL+' .profile-view:eq(0) img:eq(0)')
})
});
Cordialmente.
Rafael.
RafaelS.- Membro Entusiasta
- Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156 -
Re: Efeitos no quadro de anúncio
por Starset 19.06.18 19:03
@RafaelS., infelizmente o código não resultou em nada, o espaço em que deveria ficar o avatar, fica vazio 
Segue o print:
Segue o print:
Starset- ****
- Membro desde : 02/03/2017
Mensagens : 265
Pontos : 378 -
Re: Efeitos no quadro de anúncio
por RafaelS. 19.06.18 20:28
Olá @Starset,
Erro meu eu fiz o código no meu fórum de testes na versão PunBB ignorando que você usava uma versão diferente.
Tente este, não se esqueça do investimento em todas as páginas:
Até mais.
Erro meu eu fiz o código no meu fórum de testes na versão PunBB ignorando que você usava uma versão diferente.
Tente este, não se esqueça do investimento em todas as páginas:
- Código:
jQuery(document).on('ready',function(){
jQuery('.avaimg').each(function(){
var profileUserURL=jQuery(this).parent().children('.playername').children('#link').children('a').attr('href');
jQuery(this).html('<a href="'+profileUserURL+'" class="avt-r-enlace"><img src="https://2img.net/i/fa/invision/pp-blank-thumb.png" alt="Nenhum avatar" /></a>');
jQuery(this).load(profileUserURL+' .column1 img:eq(0)')
})
});
Até mais.
RafaelS.- Membro Entusiasta
- Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156 -
Re: Efeitos no quadro de anúncio
por Starset 19.06.18 20:55
Obrigado, funcionou! Fiz testes com o investimento em todas as páginas e apenas na página inicial e ambos os casos finalmente funcionou!
Podem fechar o tópico.
Podem fechar o tópico.
Starset- ****
- Membro desde : 02/03/2017
Mensagens : 265
Pontos : 378 -
Re: Efeitos no quadro de anúncio
por Fraise 25.06.18 22:01
Tópico resolvidoMovido para "Questões resolvidas". |
Fraise- Ajudeiro
- Membro desde : 26/06/2015
Mensagens : 6566
Pontos : 8050 -
Tópicos semelhantes» Como coloco esse quadro quadro nas mensagens ?
» Efeitos no nick
» Efeitos ao Marcar
» Efeitos natalinos
» Efeitos em imagens
» Efeitos no nick
» Efeitos ao Marcar
» Efeitos natalinos
» Efeitos em imagens
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre códigos Javascript e jQuery
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos