Como adicionar uma animação no avatar

3 participantes

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

Tópico resolvido Como adicionar uma animação no avatar

Mensagem por LucianoMicle 06.06.21 19:30

Detalhes da questão


Endereço do fórum: https://luciano.foroactivo.com/
Versão do fórum: phpBB3

Descrição


Oi! Como posso adicionar uma animação do avatar do meu u1, estava assistindo a um fórum e gostei da ideia.
Gostaria de mudar as cores, e que cada usuário "moderador, etc" (usuário com classificação especial, possa obtê-lo)

O fórum em que eu vi: Fórum

Imagem de exemplo:
LucianoMicle

LucianoMicle
****

Membro desde : 07/09/2019
Mensagens : 239
Pontos : 357

https://divtes.foroactivo.com/ https://www.facebook.com/facebook.com/lucianomicleok https://twitter.com/twitter.com/lucianomicleok

Ir para o topo Ir para baixo

Principal Contribuidor

Tópico resolvido Re: Como adicionar uma animação no avatar

Mensagem por Shek 07.06.21 14:30

Olá Luciano.

Essa é uma imagem PNG de fundo, e então ele usa um giro com a propriedade animate. Encontre uma imagem PNG de sua escolha que podemos fazer uma aplicação para você nos avatares. Eu ia dizer que com animate.css daria pra fazer, porém, o animate.css não tem o giro sem fade.

Só ressaltando, cuidado com a regra número 2.12 do FDF: https://ajuda.forumeiros.com/t82-regras-do-forum-dos-foruns-fdf

Até mais.
Shek

Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 18896
Pontos : 22793

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ir para o topo Ir para baixo

  • 0

Tópico resolvido Re: Como adicionar uma animação no avatar

Mensagem por LucianoMicle 08.06.21 6:33

Olá amigo!
Se você viu e leu as regras, sabe que ninguém gosta de quebrá-las, mas deixe um exemplo de algo semelhante.
Porque eu sei que você sempre pede algo para que possamos mostrar o que pedimos ou sermos específicos.
Afastando-me, li os tutoriais mencionados, mas não funcionam para mim.

Você pode me mostrar um código armado? Vou esperar uma resposta Coração
LucianoMicle

LucianoMicle
****

Membro desde : 07/09/2019
Mensagens : 239
Pontos : 357

https://divtes.foroactivo.com/ https://www.facebook.com/facebook.com/lucianomicleok https://twitter.com/twitter.com/lucianomicleok

Ir para o topo Ir para baixo

Principal Contribuidor

Tópico resolvido Re: Como adicionar uma animação no avatar

Mensagem por Shek 08.06.21 20:57

Boa tarde, Luciano.

Existe uma diferença entre "mostrar o que deseja" e "copiar o que viu" em outro fórum. Talvez não seja seu objetivo, mas se você leu as regras assim como eu então teria respondido na sua mensagem o que lhe pedi.
Shek escreveu:Encontre uma imagem PNG de sua escolha que podemos fazer uma aplicação para você nos avatares.
Isso quer dizer que, não me neguei a ajudá-lo e muito menos a fazer algo semelhante ao que citou de exemplo, mas sim uma simples imagem que você quer para colocar por trás do avatar. E não, você não chegou a ler os tutoriais que citei porque eu mesmo disse que não funcionariam, então repetir o que eu disse não lhe dará argumentos válidos para contradizer o regulamento do FDF. Vamos interpretar melhor as coisas, por favor.

Por fim, sugiro que solicita tal imagem no setor gráfico, que novamente digo, farei o que puder para ajudá-lo. E sim, se outra pessoa copiar o fórum e postar o código do dono do fórum para você (o que me recuso a fazer), então você terá sua resposta.

Então, agora quem aguarda sua resposta com a imagem solicitada sou eu. Piscada

Atenciosamente,
Shek King
Shek

Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 18896
Pontos : 22793

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ir para o topo Ir para baixo

Tópico resolvido Re: Como adicionar uma animação no avatar

Mensagem por LucianoMicle 09.06.21 0:06

Oi!
Este exemplo é algo semelhante, com uma animação pairando sobre o círculo.

Spoiler:
LucianoMicle

LucianoMicle
****

Membro desde : 07/09/2019
Mensagens : 239
Pontos : 357

https://divtes.foroactivo.com/ https://www.facebook.com/facebook.com/lucianomicleok https://twitter.com/twitter.com/lucianomicleok

Ir para o topo Ir para baixo

  • 0

Tópico resolvido Re: Como adicionar uma animação no avatar

Mensagem por Connor R. 09.06.21 0:10

@LucianoMicle No caso é necessário uma imagem png, ou seja, transparente para o efeito desejado. Você pode pesquisar no google bordas redondas png e escolher uma que atenda aos seus requisitos, veja abaixo um exemplo.

https://www.bing.com/images/search?q=borda+redonda+png&form=HDRSC3&first=1&tsc=ImageBasicHover
Connor R.

Connor R.
Super Membro

Membro desde : 06/08/2012
Mensagens : 1253
Pontos : 2021

http://somosmugiwara.forumeiros.com https://www.facebook.com/kadandajr https://twitter.com/SomosMugiwara

Ir para o topo Ir para baixo

Tópico resolvido Re: Como adicionar uma animação no avatar

Mensagem por LucianoMicle 09.06.21 3:37

Agora sim, esta é uma imagem png:
LucianoMicle

LucianoMicle
****

Membro desde : 07/09/2019
Mensagens : 239
Pontos : 357

https://divtes.foroactivo.com/ https://www.facebook.com/facebook.com/lucianomicleok https://twitter.com/twitter.com/lucianomicleok

Ir para o topo Ir para baixo

Tópico resolvido Re: Como adicionar uma animação no avatar

Mensagem por Connor R. 09.06.21 19:42

Não consigo visualizar os seus tópicos e acho ue você possui os templates modificados, logo não consigo puxar as informações para criar o código de animação. Mas abaixo deixo um exemplo no jsfiddle.

https://jsfiddle.net/Kadanda/78mv1ob5/20/
Connor R.

Connor R.
Super Membro

Membro desde : 06/08/2012
Mensagens : 1253
Pontos : 2021

http://somosmugiwara.forumeiros.com https://www.facebook.com/kadandajr https://twitter.com/SomosMugiwara

Ir para o topo Ir para baixo

Principal Contribuidor

Tópico resolvido Re: Como adicionar uma animação no avatar

Mensagem por Shek 09.06.21 21:16

Boa tarde.

Eu quero deixar minha sugestão, Luciano. Feliz Juntando o código do @Connor R. que já está prontinho + o que eu tinha feito (que envolvia edição de templates), fiz com CSS Muito feliz
Código:
.postprofile dl dt a img {
    overflow: hidden;
    position: relative;
    z-index: 0;
}

dt[style="pointer-events: none;"]::before {
    background: url(https://www.seekpng.com/png/full/808-8082985_borda-de-tecnologia-azul-futurista-moldura-redonda-circle.png) no-repeat center center;
    background-size: 150px;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: -75px;
    z-index: 0;
   animation:spin 5s linear infinite
}

@keyframes spin {
50%{transform:rotate(360deg)}
}
@keyframes spin1 {
100%{transform:rotate(360deg)}
}
@keyframes spin2 {
30%{transform:rotate(360deg)}
}
@keyframes spin3 {
70%{transform:rotate(360deg)}
}
Resultado:
Adicionar - Como adicionar uma animação no avatar XUqzW7H
PS: É necessário desativar o recurso "Melhorar meu CSS" na folha de estilos CSS.
Shek

Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 18896
Pontos : 22793

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ir para o topo Ir para baixo

Tópico resolvido Re: Como adicionar uma animação no avatar

Mensagem por Connor R. 09.06.21 22:52

@Shek apenas adicionando que existem diferentes tipos de animação no código. Esqueci de mencionar, mas no code abaixo o spin e uma animação, o spin1 é outro tipo, porém todas envolvendo a rotatividade da borda.

Código:

@keyframes spin {
50%{transform:rotate(360deg)}
}
@keyframes spin1 {
100%{transform:rotate(360deg)}
}
@keyframes spin2 {
30%{transform:rotate(360deg)}
}
@keyframes spin3 {
70%{transform:rotate(360deg)}
}
Connor R.

Connor R.
Super Membro

Membro desde : 06/08/2012
Mensagens : 1253
Pontos : 2021

http://somosmugiwara.forumeiros.com https://www.facebook.com/kadandajr https://twitter.com/SomosMugiwara

Ir para o topo Ir para baixo

Tópico resolvido Re: Como adicionar uma animação no avatar

Mensagem por LucianoMicle 09.06.21 23:36

Olá !
O design é 10, embora eu prefira algo mais circular e sem muitos detalhes, algo que seja sentillo. Mas entre isso é ótimo.
Além disso, estou com um problema, notei que em alguns usuários o efeito / animação parece um pouco mais alto que o avatar.

Adicionar - Como adicionar uma animação no avatar Borde10

Editar: Quando abro a lista suspensa, obtenho a animação abaixo.

Adicionar - Como adicionar uma animação no avatar Borde210
LucianoMicle

LucianoMicle
****

Membro desde : 07/09/2019
Mensagens : 239
Pontos : 357

https://divtes.foroactivo.com/ https://www.facebook.com/facebook.com/lucianomicleok https://twitter.com/twitter.com/lucianomicleok

Ir para o topo Ir para baixo

Tópico resolvido Re: Como adicionar uma animação no avatar

Mensagem por Connor R. 10.06.21 2:21

Pra ser mais fácil de resolver este problema você deve autorizar a visualização dos tópicos aos visitantes.
Connor R.

Connor R.
Super Membro

Membro desde : 06/08/2012
Mensagens : 1253
Pontos : 2021

http://somosmugiwara.forumeiros.com https://www.facebook.com/kadandajr https://twitter.com/SomosMugiwara

Ir para o topo Ir para baixo

Tópico resolvido Re: Como adicionar uma animação no avatar

Mensagem por LucianoMicle 10.06.21 2:24

Olá amigo!
Não se esqueça que tenho uma categoria para usuários e faço seus testes quando essas coisas acontecem.
https://luciano.foroactivo.com/f6-pruebas-de-invitados
Vou esperar uma resposta.
LucianoMicle

LucianoMicle
****

Membro desde : 07/09/2019
Mensagens : 239
Pontos : 357

https://divtes.foroactivo.com/ https://www.facebook.com/facebook.com/lucianomicleok https://twitter.com/twitter.com/lucianomicleok

Ir para o topo Ir para baixo

Principal Contribuidor

Tópico resolvido Re: Como adicionar uma animação no avatar

Mensagem por Shek 10.06.21 22:58

Olá novamente. Muito feliz

Vamos tentar outra mudança. Se tens o template viewtopic_body editado, nos ceda o código aqui em tópico por favor?

Até breve.
Shek

Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 18896
Pontos : 22793

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ir para o topo Ir para baixo

Tópico resolvido Re: Como adicionar uma animação no avatar

Mensagem por LucianoMicle 10.06.21 23:37

Olá amigo!
Aqui está o código

Código:
<script type="text/javascript">
//<![CDATA[
var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}', _atr = '{JS_DIR}addthis/', _ati = '{PATH_IMG_FA}addthis/'{ADDTHIS_LANG}, addthis_localize = { share_caption: "{L_SHARE_CAPTION}", email: "{L_EMAIL}", email_caption: "{L_EMAIL_CAPTION}", favorites: "{L_SHARE_BOOKMARKS}", print: "{L_PRINT}", more: "{L_MORE}" };
 
$(function(){
    if(typeof(_atc) == "undefined") {
        _atc = {  };
    }
});
 
var hiddenMsgLabel = { visible:'{JS_HIDE_HIDDEN_MESSAGE}', hidden:'{JS_SHOW_HIDDEN_MESSAGE}' };
showHiddenMessage = function(id)
{
    try
    {
        var regId = parseInt(id, 10);
        if( isNaN(regId) ) { regId = 0; }
 
        if( regId > 0)
        {
            $('.post--' + id).toggle(0, function()
 {
 if( $(this).is(":visible") )
 {
 $('#hidden-title--' + id).html(hiddenMsgLabel.visible);
 }
 else
 {
 $('#hidden-title--' + id).html(hiddenMsgLabel.hidden);
 }
 });
        }
    }
    catch(e) { }
 
 return false;
};
 
//]]>
</script>
 <script type="text/javascript">
  $(function() {
  $('.post .postprofile #dropdown-info').click(function() {
  $(this).parent().find( ".user-info" ).fadeToggle('slow');
  });
  });
</script>
<style>
.onoffcontent {
    display: none;
}
.authname {
    background: #292929;
    margin-bottom: 10px;
    margin-top: -12px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 8px;
    border-bottom: 3px solid #312f2f;
}
</style>
<h1 class="page-title">
 <a href="{TOPIC_URL}">{TOPIC_TITLE}</a>
</h1>
<div class="topic-actions">
 <div class="buttons">
 
 <!-- BEGIN switch_user_authpost -->
 <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" class="{POST_IMG_CLASS}" alt="{L_POST_NEW_TOPIC}" /></a>
 <!-- END switch_user_authpost -->
 
 <!-- BEGIN switch_user_authreply -->
 <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" class="i_reply" alt="{L_POST_REPLY_TOPIC}" /></a>
 <!-- END switch_user_authreply -->
 </div>
 
 <div class="pathname-box">
 <p>
            <a class="nav" href="{U_INDEX}"><span>{L_INDEX}</span></a>
            <!--{NAV_SEP}<a class="nav" href="{U_ALBUM}"><span>{L_ALBUM}</span></a>-->
            {NAV_CAT_DESC}
        </p>
 </div>
 
 <p class="right">
        <!-- BEGIN switch_twitter_btn -->
        <span>
            <a href="https://twitter.com/share" class="twitter-share-button" data-via="{TWITTER}">Tweet</a>
            <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
        </span>
        <!-- END switch_twitter_btn -->
 <!-- BEGIN switch_fb_likebtn -->
 <script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "https://connect.facebook.net/{LANGUAGE}/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));</script>
 <span class="fb-like" data-href="{FORUM_URL}{TOPIC_URL}" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></span>
 <!-- END switch_fb_likebtn -->
 </p>
 
 <div class="pagination">
 {PAGE_NUMBER}
  •
        <a class="addthis_button" href="#">{L_SHARE}</a>
 <!-- BEGIN switch_plus_menu -->
  •
 <script type="text/javascript">//<![CDATA[
 var url_favourite = '{U_FAVOURITE_JS_PLUS_MENU}';
 var url_newposts = '{U_NEWPOSTS_JS_PLUS_MENU}';
 var url_egosearch = '{U_EGOSEARCH_JS_PLUS_MENU}';
 var url_unanswered = '{U_UNANSWERED_JS_PLUS_MENU}';
 var url_watchsearch = '{U_WATCHSEARCH_JS_PLUS_MENU}';
 insert_plus_menu_new('f{FORUM_ID}&t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES});
 //]]>
 </script>
 <!-- END switch_plus_menu -->
 </div>
 <div class="clear"></div>
</div>
 
<!-- BEGIN topicpagination -->
<p class="pagination">{PAGINATION}</p>
<!-- END topicpagination -->
<p class="left-box">
    <!-- BEGIN switch_isconnect -->
    <a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a>
    <!-- END switch_isconnect -->
    <a href="#bottom">{L_GOTO_DOWN}</a>
</p>
<div class="clear"></div>
{POLL_DISPLAY}
 
<!-- BEGIN postrow -->
 <!-- BEGIN hidden -->
 <div class="post {postrow.hidden.ROW_COUNT}">
 <div class="inner">
 <span class="corners-top"><span></span></span>
 <p style="text-align:center">{postrow.hidden.MESSAGE}</p>
 <div class="clear"></div>
 <span class="corners-bottom"><span></span></span>
 </div>
 </div>
 <!-- END hidden -->
 <!-- BEGIN displayed -->
 <div id="p{postrow.displayed.U_POST_ID}" class="post {postrow.displayed.ROW_COUNT}{postrow.displayed.ONLINE_IMG_NEW} post--{postrow.displayed.U_POST_ID}"{postrow.displayed.THANK_BGCOLOR} style="{postrow.displayed.DISPLAYABLE_STATE}">
 <div class="inner"><span class="corners-top"><span></span></span>
            <div style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></div>
 <div class="postbody">
 
 <ul class="profile-icons">
 <li>{postrow.displayed.THANK_IMG}</li>
 <li>{postrow.displayed.MULTIQUOTE_IMG}</li>
 <li>{postrow.displayed.QUOTE_IMG}</li>
 <li>{postrow.displayed.EDIT_IMG}</li>
 <li>{postrow.displayed.DELETE_IMG}</li>
 <li>{postrow.displayed.IP_IMG}</li>
 <li>{postrow.displayed.REPORT_IMG_NEW}</li>
 </ul>
 
 <h2 class="topic-title">{postrow.displayed.ICON} <a href="{postrow.displayed.POST_URL}">{postrow.displayed.POST_SUBJECT}</a></h2>
 <p class="author"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" /> {L_TOPIC_BY} {postrow.displayed.POSTER_NAME} {postrow.displayed.POST_DATE_NEW}</p>
 <div class="clearfix"></div>
 
 
 
 
 <div style="display:none"></div>
 <div class="content clearfix">
 <div>{postrow.displayed.MESSAGE}</div>
 <!-- BEGIN switch_attachments -->
 <dl class="attachbox">
 <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
 <dd class="attachments">
 <!-- BEGIN switch_post_attachments -->
 <dl class="file clearfix">
 <dt>
 <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" alt=""/>
 </dt>
 <dd>
 <!-- BEGIN switch_dl_att -->
 <span><a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}</span>
 <!-- END switch_dl_att -->
 
 <!-- BEGIN switch_no_dl_att -->
 <span>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}</span>
 <!-- END switch_no_dl_att -->
 
 <!-- BEGIN switch_no_comment -->
 <span>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</span>
 <!-- END switch_no_comment -->
 
 <!-- BEGIN switch_no_dl_att -->
 <span><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></span>
 <!-- END switch_no_dl_att -->
 
 <span>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</span>
 </dd>
 </dl>
 <!-- END switch_post_attachments -->
 </dd>
 </dl>
 <!-- END switch_attachments -->
 
 </div>
 {postrow.displayed.EDITED_MESSAGE}
 <!-- BEGIN switch_signature -->
 <div class="signature_div" id="sig{postrow.displayed.U_POST_ID}">{postrow.displayed.SIGNATURE_NEW}</div>
 <!-- END switch_signature -->
 </div>
 
 <div class="postprofile" id="profile{postrow.displayed.U_POST_ID}">
 <!-- div class="online2"></div-->
 <div class="authname"><strong style="font-size:1.2em">{postrow.displayed.POSTER_NAME}</strong></div>
 <dl>
 <dt style="pointer-events: none;">
 {postrow.displayed.POSTER_AVATAR}
 <br />
 </dt>
 <dd>{postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}</dd>
 <dd><br /></dd>
 <div id="dropdown-info"><i style="display: unset!important" class="fa fa-chevron-down"></i></div>
 <dd><br /></dd>
  <div class="user-info" style="display:none">
 <dd>
 <!-- BEGIN profile_field -->
<div class="online43">{postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}</div>{postrow.displayed.profile_field.SEPARATOR}
 <!-- END profile_field -->
 {postrow.displayed.POSTER_RPG}
 </dd>
 
<dd class="contatoseparator">
{postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
 </dd>
 </div>
 <dd style="display: none;"><br /></dd>
 </dl>
 </div>
 
 <div class="clear"></div>
  <!-- BEGIN switch_likes_active -->
 <div class="fa_like_div">
 <!-- BEGIN switch_like_list -->
 {postrow.displayed.switch_likes_active.switch_like_list.D_LIKE_LIST}
 <!-- END switch_like_list -->
 <!-- BEGIN switch_dislike_list -->
 {postrow.displayed.switch_likes_active.switch_dislike_list.D_DISLIKE_LIST}
 <!-- END switch_dislike_list -->
 <button class="rep-button {postrow.displayed.switch_likes_active.C_VOTE_LIKE}"  data-href="{postrow.displayed.switch_likes_active.U_VOTE_LIKE}" data-href-rm="{postrow.displayed.switch_likes_active.U_VOTE_RM_LIKE}">
 <svg width="13px" height="13px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 1344q0-26-19-45t-45-19q-27 0-45.5 19t-18.5 45q0 27 18.5 45.5t45.5 18.5q26 0 45-18.5t19-45.5zm160-512v640q0 26-19 45t-45 19h-288q-26 0-45-19t-19-45v-640q0-26 19-45t45-19h288q26 0 45 19t19 45zm1184 0q0 86-55 149 15 44 15 76 3 76-43 137 17 56 0 117-15 57-54 94 9 112-49 181-64 76-197 78h-129q-66 0-144-15.5t-121.5-29-120.5-39.5q-123-43-158-44-26-1-45-19.5t-19-44.5v-641q0-25 18-43.5t43-20.5q24-2 76-59t101-121q68-87 101-120 18-18 31-48t17.5-48.5 13.5-60.5q7-39 12.5-61t19.5-52 34-50q19-19 45-19 46 0 82.5 10.5t60 26 40 40.5 24 45 12 50 5 45 .5 39q0 38-9.5 76t-19 60-27.5 56q-3 6-10 18t-11 22-8 24h277q78 0 135 57t57 135z" fill="#666"/></svg>
 <span>{postrow.displayed.switch_likes_active.L_LIKE}</span>{postrow.displayed.switch_likes_active.COUNT_VOTE_LIKE}
 </button>
 <!-- BEGIN switch_dislike_button -->
 <button class="rep-button {postrow.displayed.switch_likes_active.switch_dislike_button.C_VOTE_DISLIKE}" data-href="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_DISLIKE}" data-href-rm="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_RM_LIKE}">
 <svg width="13px" height="13px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 576q0 26-19 45t-45 19q-27 0-45.5-19t-18.5-45q0-27 18.5-45.5t45.5-18.5q26 0 45 18.5t19 45.5zm160 512v-640q0-26-19-45t-45-19h-288q-26 0-45 19t-19 45v640q0 26 19 45t45 19h288q26 0 45-19t19-45zm1129-149q55 61 55 149-1 78-57.5 135t-134.5 57h-277q4 14 8 24t11 22 10 18q18 37 27 57t19 58.5 10 76.5q0 24-.5 39t-5 45-12 50-24 45-40 40.5-60 26-82.5 10.5q-26 0-45-19-20-20-34-50t-19.5-52-12.5-61q-9-42-13.5-60.5t-17.5-48.5-31-48q-33-33-101-120-49-64-101-121t-76-59q-25-2-43-20.5t-18-43.5v-641q0-26 19-44.5t45-19.5q35-1 158-44 77-26 120.5-39.5t121.5-29 144-15.5h129q133 2 197 78 58 69 49 181 39 37 54 94 17 61 0 117 46 61 43 137 0 32-15 76z" fill="#666"/></svg>
 <span>{postrow.displayed.switch_likes_active.switch_dislike_button.L_DISLIKE}</span>{postrow.displayed.switch_likes_active.switch_dislike_button.COUNT_VOTE_DISLIKE}
 </button>
 <!-- END switch_dislike_button -->
 </div>
 <!-- END switch_likes_active -->
  <!-- BEGIN switch_like_popup --><div id="like_popup" style="z-index: 10000 !important;">  <div class="h3">{SITENAME}</div>  <div id="like_popup_message">        {LIKE_POPUP_MSG}  </div>  <div id="like_popup_buttons">      <form action="{S_LOGIN_ACTION}" method="get">        <input type="submit" class="button1" value="{L_LOGIN}"/>        <input type="button" class="button1" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';"/>        <input id="like_popup_close" type="button" class="button2" value="{L_LIKE_CLOSE}"/>      </form>  </div></div><!-- END switch_like_popup -->
 
 <p class="right"><a href="#top">{L_BACK_TO_TOP}</a> <a href="#bottom">{L_GOTO_DOWN}</a></p>
 <span class="corners-bottom"><span></span></span></div>
 </div>
 <!-- BEGIN first_post_br -->
 <hr id="first-post-br" />
 <!-- END first_post_br -->
 <!-- END displayed -->
<!-- END postrow -->
 
<a name="bottomtitle"></a>
 
<!-- BEGIN topicpagination -->
<p class="pagination">{PAGINATION}</p>
<!-- END topicpagination -->
 
<p class="left-box">
    <!-- BEGIN switch_isconnect -->
    <a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a>
    <!-- END switch_isconnect -->
    <a href="#top">{L_BACK_TO_TOP}</a>
</p>
 
<div class="clear"></div>
 
<div class="noprint">
<!-- BEGIN switch_user_logged_in -->
<!-- BEGIN watchtopic -->
<p class="right">{S_WATCH_TOPIC}</p>
<!-- END watchtopic -->
<!-- END switch_user_logged_in -->
</div>
 
<!-- BEGIN promot_trafic -->
<div class="post row2" id="ptrafic_close" style="display:none;font-size:1.3em;line-height:1.4em">
 <span class="corners-top"><span></span></span>
 <span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_MORE_IMG}" alt="+" align="" border="0" /></a></span>
 <span class="ptrafic"> {PROMOT_TRAFIC_TITLE}</span>
 <span class="corners-bottom"><span></span></span>
</div>
<div class="post row2" id="ptrafic_open" style="display:'';font-size:1.3em;line-height:1.4em">
 <span class="corners-top"><span></span></span>
 <span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_LESS_IMG}" alt="-" align="" border="0" /></a></span>
 <span class="ptrafic"> {PROMOT_TRAFIC_TITLE}</span>
 <div class="clear"></div>
 <div>
 <!-- BEGIN link -->
 » <a href="{promot_trafic.link.U_HREF}" target="_blank" title="{promot_trafic.link.TITLE}" rel="nofollow">{promot_trafic.link.TITLE}</a><br />
 <!-- END link -->
 </div>
 <span class="corners-bottom"><span></span></span>
</div>
<!-- END promot_trafic -->
 
<!-- BEGIN switch_forum_rules -->
<div class="post row1" id="forum_rules">
 <span class="corners-top"><span></span></span>
 <div class="h3"> {L_FORUM_RULES}</div>
 <div class="clear"></div>
 <table class="postbody">
 <tr>
 <!-- BEGIN switch_forum_rule_image -->
 <td class="logo">
 <img src="{RULE_IMG_URL}" alt="" />
 </td>
 <!-- END switch_forum_rule_image -->
 <td class="rules content">
 {RULE_MSG}
 </td>
 </tr>
 </table>
 <span class="corners-bottom"><span></span></span>
</div>
<!-- END switch_forum_rules -->
 
<!-- BEGIN switch_user_logged_in -->
<a name="quickreply"></a>
{QUICK_REPLY_FORM}
<!-- END switch_user_logged_in -->
 
<hr />
 
<div class="topic-actions">
 <div class="buttons">
 <!-- BEGIN switch_user_authpost -->
 <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" class="{POST_IMG_CLASS}" alt="{L_POST_NEW_TOPIC}" /></a>
 <!-- END switch_user_authpost -->
 
 <!-- BEGIN switch_user_authreply -->
 <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" class="i_reply" alt="{L_POST_REPLY_TOPIC}" /></a>
 <!-- END switch_user_authreply -->
 </div>
 
 <div class="pathname-box">
 <p><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC}</p>
 </div>
 
 <div class="pagination">
 {PAGE_NUMBER}
 </div>
</div>
<div class="clear"></div>
 
<form action="{S_JUMPBOX_ACTION}" method="get" onsubmit="if(document.jumpbox.f.value == -1){return false;}">
<fieldset class="jumpbox">
 <label>{L_JUMP_TO}: </label>
 {S_JUMPBOX_SELECT}
 <input class="button2" type="submit" value="{L_GO}" />
</fieldset>
</form>
 
<!-- BEGIN viewtopic_bottom -->
<form method="get" action="{S_FORM_MOD_ACTION}">
<fieldset class="quickmod">
 <input type="hidden" name="t" value="{TOPIC_ID}" />
 
 <!-- <input type="hidden" name="sid" value="{S_SID}" /> -->
 <input type="hidden" name="{SECURE_ID_NAME}" value="{SECURE_ID_VALUE}" />
 <label>{L_MOD_TOOLS}: </label>
 {S_SELECT_MOD}&nbsp;
 <input class="button2" type="submit" value="{L_GO}" />
</fieldset>
</form>
<div class="clear"></div>
<p class="right">{S_TOPIC_ADMIN}</p>
<!-- END viewtopic_bottom -->
 
<!-- BEGIN show_permissions -->
 <div class="h3">{L_TABS_PERMISSIONS}</div>
 {S_AUTH_LIST}
<!-- END show_permissions -->
 
<!-- BEGIN switch_image_resize -->
<script type="text/javascript">
//<![CDATA[
$(resize_images({ 'selector' : '.postbody .content', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
//]]>
</script>
<!-- END switch_image_resize -->
 
<script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=forumotion" type="text/javascript"></script>
LucianoMicle

LucianoMicle
****

Membro desde : 07/09/2019
Mensagens : 239
Pontos : 357

https://divtes.foroactivo.com/ https://www.facebook.com/facebook.com/lucianomicleok https://twitter.com/twitter.com/lucianomicleok

Ir para o topo Ir para baixo

Principal Contribuidor

Tópico resolvido Re: Como adicionar uma animação no avatar

Mensagem por Shek 11.06.21 1:01

Olá novamente.

Salve seu template e CSS como backup antes de executar as operações a seguir.

Troque os códigos desta mensagem por esse novo:
Código:
.profile-avatar {
    margin: 0px 0px 0px 0px !important;
}

.profile-avatar::after {
    background: url(https://i.servimg.com/u/f13/19/81/07/80/7fa2b110.gif) no-repeat center;
    background-size: 130px;
    bottom: 0;
    content: "";
    left: 20px;
    position: absolute;
    top: 0;
    z-index: 1;
    animation: spin 2s linear infinite;
    width: 200px;
    height: 200px;
}
 
@keyframes spin {
50%{transform:rotate(360deg)}
}
@keyframes spin1 {
100%{transform:rotate(360deg)}
}
@keyframes spin2 {
30%{transform:rotate(360deg)}
}
@keyframes spin3 {
70%{transform:rotate(360deg)}
}
Procure por .postprofile dt imge substitua por:
Código:
.postprofile dt img {
    border-radius: 100px;
    width: 126px;
    background: #fff;
}
Remova:
Código:
.postprofile dl dt a img {
margin-bottom:3px;
      overflow: hidden;
    position: relative;
    z-index: 0;
}
Procure por .postprofile dd, .postprofile dt e substitua-o por:
Código:
.postprofile dd, .postprofile dt {
    line-height: 1.2em !important;
    margin-left: 5px !important;
}
Remova:
Código:
.postprofile {  text-align:center; }

Substitua o template viewtopic_body por:
Código:
        <script type="text/javascript">
        //<![CDATA[
        var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}', _atr = '{JS_DIR}addthis/', _ati = '{PATH_IMG_FA}addthis/'{ADDTHIS_LANG}, addthis_localize = { share_caption: "{L_SHARE_CAPTION}", email: "{L_EMAIL}", email_caption: "{L_EMAIL_CAPTION}", favorites: "{L_SHARE_BOOKMARKS}", print: "{L_PRINT}", more: "{L_MORE}" };
        
        $(function(){
            if(typeof(_atc) == "undefined") {
                _atc = {  };
            }
        });
        
        var hiddenMsgLabel = { visible:'{JS_HIDE_HIDDEN_MESSAGE}', hidden:'{JS_SHOW_HIDDEN_MESSAGE}' };
        showHiddenMessage = function(id)
        {
            try
            {
                var regId = parseInt(id, 10);
                if( isNaN(regId) ) { regId = 0; }
        
                if( regId > 0)
                {
                    $('.post--' + id).toggle(0, function()
         {
         if( $(this).is(":visible") )
         {
         $('#hidden-title--' + id).html(hiddenMsgLabel.visible);
         }
         else
         {
         $('#hidden-title--' + id).html(hiddenMsgLabel.hidden);
         }
         });
                }
            }
            catch(e) { }
        
         return false;
        };
        
        //]]>
        </script>
         <script type="text/javascript">
          $(function() {
          $('.post .postprofile #dropdown-info').click(function() {
          $(this).parent().find( ".user-info" ).fadeToggle('slow');
          });
          });
        </script>
        <style>
        .onoffcontent {
            display: none;
        }
        .authname {
            background: #292929;
            margin-bottom: 10px;
            margin-top: -12px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            padding: 8px;
            border-bottom: 3px solid #312f2f;
        }
        </style>
        <h1 class="page-title">
         <a href="{TOPIC_URL}">{TOPIC_TITLE}</a>
        </h1>
        <div class="topic-actions">
         <div class="buttons">
        
         <!-- BEGIN switch_user_authpost -->
         <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" class="{POST_IMG_CLASS}" alt="{L_POST_NEW_TOPIC}" /></a>
         <!-- END switch_user_authpost -->
        
         <!-- BEGIN switch_user_authreply -->
         <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" class="i_reply" alt="{L_POST_REPLY_TOPIC}" /></a>
         <!-- END switch_user_authreply -->
         </div>
        
         <div class="pathname-box">
         <p>
                    <a class="nav" href="{U_INDEX}"><span>{L_INDEX}</span></a>
                    <!--{NAV_SEP}<a class="nav" href="{U_ALBUM}"><span>{L_ALBUM}</span></a>-->
                    {NAV_CAT_DESC}
                </p>
         </div>
        
         <p class="right">
                <!-- BEGIN switch_twitter_btn -->
                <span>
                    <a href="https://twitter.com/share" class="twitter-share-button" data-via="{TWITTER}">Tweet</a>
                    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
                </span>
                <!-- END switch_twitter_btn -->
         <!-- BEGIN switch_fb_likebtn -->
         <script>(function(d, s, id) {
          var js, fjs = d.getElementsByTagName(s)[0];
          if (d.getElementById(id)) return;
          js = d.createElement(s); js.id = id;
          js.src = "https://connect.facebook.net/{LANGUAGE}/all.js#xfbml=1";
          fjs.parentNode.insertBefore(js, fjs);
         }(document, 'script', 'facebook-jssdk'));</script>
         <span class="fb-like" data-href="{FORUM_URL}{TOPIC_URL}" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></span>
         <!-- END switch_fb_likebtn -->
         </p>
        
         <div class="pagination">
         {PAGE_NUMBER}
          •
                <a class="addthis_button" href="#">{L_SHARE}</a>
         <!-- BEGIN switch_plus_menu -->
          •
         <script type="text/javascript">//<![CDATA[
         var url_favourite = '{U_FAVOURITE_JS_PLUS_MENU}';
         var url_newposts = '{U_NEWPOSTS_JS_PLUS_MENU}';
         var url_egosearch = '{U_EGOSEARCH_JS_PLUS_MENU}';
         var url_unanswered = '{U_UNANSWERED_JS_PLUS_MENU}';
         var url_watchsearch = '{U_WATCHSEARCH_JS_PLUS_MENU}';
         insert_plus_menu_new('f{FORUM_ID}&t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES});
         //]]>
         </script>
         <!-- END switch_plus_menu -->
         </div>
         <div class="clear"></div>
        </div>
        
        <!-- BEGIN topicpagination -->
        <p class="pagination">{PAGINATION}</p>
        <!-- END topicpagination -->
        <p class="left-box">
            <!-- BEGIN switch_isconnect -->
            <a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a>
            <!-- END switch_isconnect -->
            <a href="#bottom">{L_GOTO_DOWN}</a>
        </p>
        <div class="clear"></div>
        {POLL_DISPLAY}
        
        <!-- BEGIN postrow -->
         <!-- BEGIN hidden -->
         <div class="post {postrow.hidden.ROW_COUNT}">
         <div class="inner">
         <span class="corners-top"><span></span></span>
         <p style="text-align:center">{postrow.hidden.MESSAGE}</p>
         <div class="clear"></div>
         <span class="corners-bottom"><span></span></span>
         </div>
         </div>
         <!-- END hidden -->
         <!-- BEGIN displayed -->
         <div id="p{postrow.displayed.U_POST_ID}" class="post {postrow.displayed.ROW_COUNT}{postrow.displayed.ONLINE_IMG_NEW} post--{postrow.displayed.U_POST_ID}"{postrow.displayed.THANK_BGCOLOR} style="{postrow.displayed.DISPLAYABLE_STATE}">
         <div class="inner"><span class="corners-top"><span></span></span>
                    <div style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></div>
         <div class="postbody">
        
         <ul class="profile-icons">
         <li>{postrow.displayed.THANK_IMG}</li>
         <li>{postrow.displayed.MULTIQUOTE_IMG}</li>
         <li>{postrow.displayed.QUOTE_IMG}</li>
         <li>{postrow.displayed.EDIT_IMG}</li>
         <li>{postrow.displayed.DELETE_IMG}</li>
         <li>{postrow.displayed.IP_IMG}</li>
         <li>{postrow.displayed.REPORT_IMG_NEW}</li>
         </ul>
        
         <h2 class="topic-title">{postrow.displayed.ICON} <a href="{postrow.displayed.POST_URL}">{postrow.displayed.POST_SUBJECT}</a></h2>
         <p class="author"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" /> {L_TOPIC_BY} {postrow.displayed.POSTER_NAME} {postrow.displayed.POST_DATE_NEW}</p>
         <div class="clearfix"></div>
        
        
        
        
         <div style="display:none"></div>
         <div class="content clearfix">
         <div>{postrow.displayed.MESSAGE}</div>
         <!-- BEGIN switch_attachments -->
         <dl class="attachbox">
         <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
         <dd class="attachments">
         <!-- BEGIN switch_post_attachments -->
         <dl class="file clearfix">
         <dt>
         <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" alt=""/>
         </dt>
         <dd>
         <!-- BEGIN switch_dl_att -->
         <span><a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}</span>
         <!-- END switch_dl_att -->
        
         <!-- BEGIN switch_no_dl_att -->
         <span>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}</span>
         <!-- END switch_no_dl_att -->
        
         <!-- BEGIN switch_no_comment -->
         <span>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</span>
         <!-- END switch_no_comment -->
        
         <!-- BEGIN switch_no_dl_att -->
         <span><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></span>
         <!-- END switch_no_dl_att -->
        
         <span>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</span>
         </dd>
         </dl>
         <!-- END switch_post_attachments -->
         </dd>
         </dl>
         <!-- END switch_attachments -->
        
         </div>
         {postrow.displayed.EDITED_MESSAGE}
         <!-- BEGIN switch_signature -->
         <div class="signature_div" id="sig{postrow.displayed.U_POST_ID}">{postrow.displayed.SIGNATURE_NEW}</div>
         <!-- END switch_signature -->
         </div>
        
         <div class="postprofile" id="profile{postrow.displayed.U_POST_ID}">
         <!-- div class="online2"></div-->
         <div class="authname"><strong style="font-size:1.2em">{postrow.displayed.POSTER_NAME}</strong></div>
         <dl>
         <dt style="pointer-events: none;">
         <div class="profile-avatar">{postrow.displayed.POSTER_AVATAR}</div>
         <br />
         </dt>
         <dd>{postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}</dd>
         <dd><br /></dd>
         <div id="dropdown-info"><i style="display: unset!important" class="fa fa-chevron-down"></i></div>
         <dd><br /></dd>
          <div class="user-info" style="display:none">
         <dd>
         <!-- BEGIN profile_field -->
        <div class="online43">{postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}</div>{postrow.displayed.profile_field.SEPARATOR}
         <!-- END profile_field -->
         {postrow.displayed.POSTER_RPG}
         </dd>
        
        <dd class="contatoseparator">
        {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
         </dd>
         </div>
         <dd style="display: none;"><br /></dd>
         </dl>
         </div>
        
         <div class="clear"></div>
          <!-- BEGIN switch_likes_active -->
         <div class="fa_like_div">
         <!-- BEGIN switch_like_list -->
         {postrow.displayed.switch_likes_active.switch_like_list.D_LIKE_LIST}
         <!-- END switch_like_list -->
         <!-- BEGIN switch_dislike_list -->
         {postrow.displayed.switch_likes_active.switch_dislike_list.D_DISLIKE_LIST}
         <!-- END switch_dislike_list -->
         <button class="rep-button {postrow.displayed.switch_likes_active.C_VOTE_LIKE}"  data-href="{postrow.displayed.switch_likes_active.U_VOTE_LIKE}" data-href-rm="{postrow.displayed.switch_likes_active.U_VOTE_RM_LIKE}">
         <svg width="13px" height="13px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 1344q0-26-19-45t-45-19q-27 0-45.5 19t-18.5 45q0 27 18.5 45.5t45.5 18.5q26 0 45-18.5t19-45.5zm160-512v640q0 26-19 45t-45 19h-288q-26 0-45-19t-19-45v-640q0-26 19-45t45-19h288q26 0 45 19t19 45zm1184 0q0 86-55 149 15 44 15 76 3 76-43 137 17 56 0 117-15 57-54 94 9 112-49 181-64 76-197 78h-129q-66 0-144-15.5t-121.5-29-120.5-39.5q-123-43-158-44-26-1-45-19.5t-19-44.5v-641q0-25 18-43.5t43-20.5q24-2 76-59t101-121q68-87 101-120 18-18 31-48t17.5-48.5 13.5-60.5q7-39 12.5-61t19.5-52 34-50q19-19 45-19 46 0 82.5 10.5t60 26 40 40.5 24 45 12 50 5 45 .5 39q0 38-9.5 76t-19 60-27.5 56q-3 6-10 18t-11 22-8 24h277q78 0 135 57t57 135z" fill="#666"/></svg>
         <span>{postrow.displayed.switch_likes_active.L_LIKE}</span>{postrow.displayed.switch_likes_active.COUNT_VOTE_LIKE}
         </button>
         <!-- BEGIN switch_dislike_button -->
         <button class="rep-button {postrow.displayed.switch_likes_active.switch_dislike_button.C_VOTE_DISLIKE}" data-href="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_DISLIKE}" data-href-rm="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_RM_LIKE}">
         <svg width="13px" height="13px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 576q0 26-19 45t-45 19q-27 0-45.5-19t-18.5-45q0-27 18.5-45.5t45.5-18.5q26 0 45 18.5t19 45.5zm160 512v-640q0-26-19-45t-45-19h-288q-26 0-45 19t-19 45v640q0 26 19 45t45 19h288q26 0 45-19t19-45zm1129-149q55 61 55 149-1 78-57.5 135t-134.5 57h-277q4 14 8 24t11 22 10 18q18 37 27 57t19 58.5 10 76.5q0 24-.5 39t-5 45-12 50-24 45-40 40.5-60 26-82.5 10.5q-26 0-45-19-20-20-34-50t-19.5-52-12.5-61q-9-42-13.5-60.5t-17.5-48.5-31-48q-33-33-101-120-49-64-101-121t-76-59q-25-2-43-20.5t-18-43.5v-641q0-26 19-44.5t45-19.5q35-1 158-44 77-26 120.5-39.5t121.5-29 144-15.5h129q133 2 197 78 58 69 49 181 39 37 54 94 17 61 0 117 46 61 43 137 0 32-15 76z" fill="#666"/></svg>
         <span>{postrow.displayed.switch_likes_active.switch_dislike_button.L_DISLIKE}</span>{postrow.displayed.switch_likes_active.switch_dislike_button.COUNT_VOTE_DISLIKE}
         </button>
         <!-- END switch_dislike_button -->
         </div>
         <!-- END switch_likes_active -->
          <!-- BEGIN switch_like_popup --><div id="like_popup" style="z-index: 10000 !important;">  <div class="h3">{SITENAME}</div>  <div id="like_popup_message">        {LIKE_POPUP_MSG}  </div>  <div id="like_popup_buttons">      <form action="{S_LOGIN_ACTION}" method="get">        <input type="submit" class="button1" value="{L_LOGIN}"/>        <input type="button" class="button1" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';"/>        <input id="like_popup_close" type="button" class="button2" value="{L_LIKE_CLOSE}"/>      </form>  </div></div><!-- END switch_like_popup -->
        
         <p class="right"><a href="#top">{L_BACK_TO_TOP}</a> <a href="#bottom">{L_GOTO_DOWN}</a></p>
         <span class="corners-bottom"><span></span></span></div>
         </div>
         <!-- BEGIN first_post_br -->
         <hr id="first-post-br" />
         <!-- END first_post_br -->
         <!-- END displayed -->
        <!-- END postrow -->
        
        <a name="bottomtitle"></a>
        
        <!-- BEGIN topicpagination -->
        <p class="pagination">{PAGINATION}</p>
        <!-- END topicpagination -->
        
        <p class="left-box">
            <!-- BEGIN switch_isconnect -->
            <a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a>
            <!-- END switch_isconnect -->
            <a href="#top">{L_BACK_TO_TOP}</a>
        </p>
        
        <div class="clear"></div>
        
        <div class="noprint">
        <!-- BEGIN switch_user_logged_in -->
        <!-- BEGIN watchtopic -->
        <p class="right">{S_WATCH_TOPIC}</p>
        <!-- END watchtopic -->
        <!-- END switch_user_logged_in -->
        </div>
        
        <!-- BEGIN promot_trafic -->
        <div class="post row2" id="ptrafic_close" style="display:none;font-size:1.3em;line-height:1.4em">
         <span class="corners-top"><span></span></span>
         <span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_MORE_IMG}" alt="+" align="" border="0" /></a></span>
         <span class="ptrafic"> {PROMOT_TRAFIC_TITLE}</span>
         <span class="corners-bottom"><span></span></span>
        </div>
        <div class="post row2" id="ptrafic_open" style="display:'';font-size:1.3em;line-height:1.4em">
         <span class="corners-top"><span></span></span>
         <span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_LESS_IMG}" alt="-" align="" border="0" /></a></span>
         <span class="ptrafic"> {PROMOT_TRAFIC_TITLE}</span>
         <div class="clear"></div>
         <div>
         <!-- BEGIN link -->
         » <a href="{promot_trafic.link.U_HREF}" target="_blank" title="{promot_trafic.link.TITLE}" rel="nofollow">{promot_trafic.link.TITLE}</a><br />
         <!-- END link -->
         </div>
         <span class="corners-bottom"><span></span></span>
        </div>
        <!-- END promot_trafic -->
        
        <!-- BEGIN switch_forum_rules -->
        <div class="post row1" id="forum_rules">
         <span class="corners-top"><span></span></span>
         <div class="h3"> {L_FORUM_RULES}</div>
         <div class="clear"></div>
         <table class="postbody">
         <tr>
         <!-- BEGIN switch_forum_rule_image -->
         <td class="logo">
         <img src="{RULE_IMG_URL}" alt="" />
         </td>
         <!-- END switch_forum_rule_image -->
         <td class="rules content">
         {RULE_MSG}
         </td>
         </tr>
         </table>
         <span class="corners-bottom"><span></span></span>
        </div>
        <!-- END switch_forum_rules -->
        
        <!-- BEGIN switch_user_logged_in -->
        <a name="quickreply"></a>
        {QUICK_REPLY_FORM}
        <!-- END switch_user_logged_in -->
        
        <hr />
        
        <div class="topic-actions">
         <div class="buttons">
         <!-- BEGIN switch_user_authpost -->
         <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" class="{POST_IMG_CLASS}" alt="{L_POST_NEW_TOPIC}" /></a>
         <!-- END switch_user_authpost -->
        
         <!-- BEGIN switch_user_authreply -->
         <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" class="i_reply" alt="{L_POST_REPLY_TOPIC}" /></a>
         <!-- END switch_user_authreply -->
         </div>
        
         <div class="pathname-box">
         <p><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC}</p>
         </div>
        
         <div class="pagination">
         {PAGE_NUMBER}
         </div>
        </div>
        <div class="clear"></div>
        
        <form action="{S_JUMPBOX_ACTION}" method="get" onsubmit="if(document.jumpbox.f.value == -1){return false;}">
        <fieldset class="jumpbox">
         <label>{L_JUMP_TO}: </label>
         {S_JUMPBOX_SELECT}
         <input class="button2" type="submit" value="{L_GO}" />
        </fieldset>
        </form>
        
        <!-- BEGIN viewtopic_bottom -->
        <form method="get" action="{S_FORM_MOD_ACTION}">
        <fieldset class="quickmod">
         <input type="hidden" name="t" value="{TOPIC_ID}" />
        
         <!-- <input type="hidden" name="sid" value="{S_SID}" /> -->
         <input type="hidden" name="{SECURE_ID_NAME}" value="{SECURE_ID_VALUE}" />
         <label>{L_MOD_TOOLS}: </label>
         {S_SELECT_MOD}&nbsp;
         <input class="button2" type="submit" value="{L_GO}" />
        </fieldset>
        </form>
        <div class="clear"></div>
        <p class="right">{S_TOPIC_ADMIN}</p>
        <!-- END viewtopic_bottom -->
        
        <!-- BEGIN show_permissions -->
         <div class="h3">{L_TABS_PERMISSIONS}</div>
         {S_AUTH_LIST}
        <!-- END show_permissions -->
        
        <!-- BEGIN switch_image_resize -->
        <script type="text/javascript">
        //<![CDATA[
        $(resize_images({ 'selector' : '.postbody .content', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
        //]]>
        </script>
        <!-- END switch_image_resize -->
        
        <script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=forumotion" type="text/javascript"></script>
Salve e publique. Resultado será:
Adicionar - Como adicionar uma animação no avatar 0113

Atenciosamente.
Shek

Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 18896
Pontos : 22793

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ir para o topo Ir para baixo

  • 0

Tópico resolvido Re: Como adicionar uma animação no avatar

Mensagem por Connor R. 11.06.21 1:20

Seria bom você também colocar um avatar padrão para os membros e visitantes de seu fórum, pois o código é usado nos pseudo-elementos after e before, logo sem uma imagem padrão ficará apenas a borda animada e isto pode ocasionar bugs visuais.

No mais aceda ao Painel administrativo -> Visualização -> Avatares -> Gestão dos avatares -> Administração dos seus avatares e adicione os avatares padrões.
Connor R.

Connor R.
Super Membro

Membro desde : 06/08/2012
Mensagens : 1253
Pontos : 2021

http://somosmugiwara.forumeiros.com https://www.facebook.com/kadandajr https://twitter.com/SomosMugiwara

Ir para o topo Ir para baixo

Tópico resolvido Re: Como adicionar uma animação no avatar

Mensagem por LucianoMicle 11.06.21 18:52

Olá amigo!
Funcionou bem, embora existam pequenos problemas.
Se você olhar meu fórum e entrar na categoria desejada, verá uma pequena mudança de posição.
Por exemplo, no meu avatar o círculo giratório é um pouco mais baixo, e nos outros pode ser que fique fixo no avatar giratório sem que seja visto fora de sua posição.

Eu queria consertar modificando o css, mas não consigo.

- Vou esperar uma resposta, saudações -
LucianoMicle

LucianoMicle
****

Membro desde : 07/09/2019
Mensagens : 239
Pontos : 357

https://divtes.foroactivo.com/ https://www.facebook.com/facebook.com/lucianomicleok https://twitter.com/twitter.com/lucianomicleok

Ir para o topo Ir para baixo

  • 0

Tópico resolvido Re: Como adicionar uma animação no avatar

Mensagem por Connor R. 11.06.21 20:25

Não entendi muito bem os problemas relatados por você, mas entrei e vi alguns problemas. Para resolve-los siga os passos abaixo.

Localize em sua folha css a seguinte classe .postprofile e troue o margin atual para o margin: 0;.

Posteriormente altere os valores da classe .profile-avatar::after de left para left: 14px; e top para top: 4px;.

Caso exista algum outro problema, mostre por meio de prints, assim fica melhor de entender.
Connor R.

Connor R.
Super Membro

Membro desde : 06/08/2012
Mensagens : 1253
Pontos : 2021

http://somosmugiwara.forumeiros.com https://www.facebook.com/kadandajr https://twitter.com/SomosMugiwara

Ir para o topo Ir para baixo

  • 0

Tópico resolvido Re: Como adicionar uma animação no avatar

Mensagem por LucianoMicle 11.06.21 23:32

Funcionou perfeitamente! Qualquer que seja o meu problema, estarei criando um tema.
A partir de agora, muito obrigado pelo apoio que me deram neste tópico criado.

Saudações e bênçãos Coração
LucianoMicle

LucianoMicle
****

Membro desde : 07/09/2019
Mensagens : 239
Pontos : 357

https://divtes.foroactivo.com/ https://www.facebook.com/facebook.com/lucianomicleok https://twitter.com/twitter.com/lucianomicleok

Ir para o topo Ir para baixo

Principal Contribuidor

Tópico resolvido Re: Como adicionar uma animação no avatar

Mensagem por Shek 12.06.21 15:30

Olá @LucianoMicle

Quando for possível, recomendo clicar no botão "Obrigado" na mensagem sanou sua dúvida, para auxiliar membros no futuro, okay? Obrigado.

Tópico resolvido


Movido para "Questões resolvidas".
Atenciosamente,
Shek King
Shek

Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 18896
Pontos : 22793

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ir para o topo Ir para baixo

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

- Tópicos semelhantes

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