Widget personalizado

Detalhes da questão

Endereço do fórum: projectgames-rpg.forumeiros.com
Versão do fórum: PunBB

Descrição

Alguem poderia me falar se tem como colocar um widget desse no forumeiros?
http://prntscr.com/9v34iy

Boa tarde, @xBullet_Storm

Tem como colocar sim, mas antes disso, você irá precisar de um widget que mostre os status e dê para os membros alterarem, para isso, acesse:

https://ajuda.forumeiros.com/t94953-widget-de-atualizar-status

Ok! Amigo, acessei o link! Criei o widget para atualizar o status!! Agora para colocar aquele outro widget da print acima!! Teria um codigo?

Up

Olá,

fiz este código rápido pra você:

Código:

 <ul id="recent_status">Carregando...</ul>
<script type="text/javascript">
jQuery(function() {
    var content = '';
    jQuery.ajax({
           url: '/u1wall',
           type: 'GET',
           success: function(responseHtml)
           {
           var status = jQuery('li.clearfix:contains("status_update")', responseHtml).wrapAll('<div>').parent().html();
           if(status) {
              content = status + '<a href="javascript:void(0)" onclick="atualizarStatus()" class="atualiza_status">Atualizar Status</a>';
              jQuery('#recent_status').each(function() {
                jQuery(this).html(content);
                jQuery(this).html(
                 jQuery(this).html()
                 .replace(/\ - status_update/g,'')
                ).find('ul.message-footer, .message-header img, .message-header em').remove();
              });
           } else {
              content = 'Não há status atualizado recentemente' +
                        '<br><br>' +
                        '<a href="javascript:void(0)" onclick="atualizarStatus()" class="atualiza_status">Atualizar Status</a>';
              jQuery('#recent_status').html(content);
           }
           },
           error: function(err)
           {
           console.log("AJAX error in request (Recent status update: Loading messages)");
           }
    });
});
function atualizarStatus() {
    var novoStatus = prompt("Digite o seu novo status:");
    if(novoStatus === '') {
       alert("Vazio");
    } else if(novoStatus === null) {
       return false;
    } else {
       var TID = jQuery('a[href*="tid="]').attr('href').split('tid=')[1].split('&')[0];
       jQuery.post("/ajax_profile.forum?jsoncallback=?", {
              id: -20,
              user: _userdata.user_id,
              active: "1",
              content: '[["profile_field_2_-20", "' + novoStatus + '"]]',
              tid: TID
       }, function(data){/*Only for calback reasons!*/},
       "json"
       ).done(function() {
       jQuery.ajax({
              url: '/u1wall',
              type: 'GET',
              success: function(responseHtml)
              {
              var matches = responseHtml.match(/\- (.*?)<\/title\>/);
              var user = matches[1];
              jQuery.post('/privmsg?mode=post_profile', {
                     message: novoStatus,
                     post: '1',
                     subject: 'status_update',
                     folder: 'profile',
                     username: user
              }).done(function() {
                 alert("Status atualizado & salvo com sucesso!");
                 location.reload();
              });
              },
              error: function(err)
              {
              console.log("AJAX error in request (Recent status update: Save in profile)");
              }
        });
        }).fail(function() {
          console.log("AJAX error in request (ajax_profile)");
        });
        // To fast return!!!
        return false;
    }
}
</script>
<style type="text/css">
.atualiza_status {
  display: block;
  text-align: center;
  background-color: #f0f0f0;
  padding: 6px;
  border: 1px solid #e0e0e0;
}
#recent_status li.clearfix {padding: 5px 0;}
#recent_status .avatar {
  float: left;
  -moz-border-radius: 0;
  -moz-box-shadow: 0 2px 2px rgba(0,0,0,0.1);
  -webkit-border-radius: 0;
  -webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.1);
  background: #fff;
  border: 1px solid #d5d5d5;
  border-radius: 0;
  box-shadow: 0 2px 2px rgba(0,0,0,0.1);
  padding: 1px;
}
#recent_status .avatar, #recent_status .avatar img {
  height: 30px;
  width: 30px;
}
#recent_status .message-date {float: right;}
#recent_status .message-block {margin-left: 40px;}
</style>

Adicione em um widget e veja se gosta...
Será exibido um botão no widget para que você ou outros usuários atualizem o status... Irá aparecer uma janela pra que seja inserido o novo status, e em seguida, ao ser atualizado, ele será salvo no campo do perfil (Comentários), e nas mensagens do perfil do usuário "/u1" (Para que o widget carregue os últimos status atualizados de lá)!

Codigo funcionando perfeitamente!!!
Com apenas um bugzinho!!
http://prntscr.com/9y1eir

O bug não está no código que te passei, e sim no CSS que está adicionando a imagem em seu nickname...
Troque:

Código:

a[href="/u1"] {
  background: url(http://2img.net/i/fa/admin/couronne.png) 0 -1px no-repeat;
  padding-bottom: 2px;
  padding-left: 20px;
  padding-top: 2px;
  text-shadow: 0 0 5px red;
}

Por:

Código:

a[href="/u1"] span {
  background: url(http://2img.net/i/fa/admin/couronne.png) 0 -1px no-repeat;
  padding-bottom: 2px;
  padding-left: 20px;
  padding-top: 2px;
  text-shadow: 0 0 5px red;
}

Já no código que lhe passei, junto ao CSS que está no final do código, adicione:

Código:

#recent_status {padding-left: 0 !important;}
#recent_status li {list-style: none;}

Até mais!

nao entendi a ultima parte!! a do #recent_status

É só você adicionar este CSS que lhe passei, antes da tag "</style>" no código do widget.

Ficou perfeito!! Obrigado!!!!!!

Dei uma rápida olhada no código e dei uma pequena alterada, substitua todo o código por este:

Código:

<ul id="recent_status">Carregando...</ul>
<a href="javascript:void(0)" onclick="atualizarStatus()" class="atualiza_status">Atualizar Status</a>
<script type="text/javascript">
jQuery(function() {
    jQuery.ajax({
          url: '/u1wall',
          type: 'GET',
          success: function(responseHtml)
          {
          var status = jQuery('li.clearfix:contains("status_update")', responseHtml).wrapAll('<div>').parent().html();
          if(status) {
              jQuery('#recent_status').each(function() {
                jQuery(this).html(status);
                jQuery(this).html(
                jQuery(this).html()
                .replace(/\ - status_update/g,'')
                ).find('ul.message-footer, .message-header img, .message-header em').remove();
              });
          } else {
              jQuery('#recent_status').html('Não há status atualizado recentemente');
          }
          },
          error: function(err)
          {
          console.log("AJAX error in request (Recent status update: Loading messages)");
          }
    });
});
function atualizarStatus() {
    var novoStatus = prompt("Digite o seu novo status:");
    if(novoStatus === '') {
      alert("Vazio");
    } else if(novoStatus === null) {
      return false;
    } else {
      var TID = jQuery('a[href*="tid="]').attr('href').split('tid=')[1].split('&')[0];
      jQuery.post("/ajax_profile.forum?jsoncallback=?", {
              id: -20,
              user: _userdata.user_id,
              active: "1",
              content: '[["profile_field_2_-20", "' + novoStatus + '"]]',
              tid: TID
      }, function(data){/*Only for calback reasons!*/},
      "json"
      ).done(function() {
      jQuery.ajax({
              url: '/u1wall',
              type: 'GET',
              success: function(responseHtml)
              {
              var matches = responseHtml.match(/\- (.*?)<\/title\>/);
              var user = matches[1];
              jQuery.post('/privmsg?mode=post_profile', {
                    message: novoStatus,
                    post: '1',
                    subject: 'status_update',
                    folder: 'profile',
                    username: user
              }).done(function() {
                alert("Status atualizado & salvo com sucesso!");
                location.reload();
              });
              },
              error: function(err)
              {
              console.log("AJAX error in request (Recent status update: Save in profile)");
              }
        });
        }).fail(function() {
          console.log("AJAX error in request (ajax_profile)");
        });
        // To fast return!!!
        return false;
    }
}
</script>
<style type="text/css">
.atualiza_status {
  display: block;
  margin-top: 8px;
  text-align: center;
  background-color: #f0f0f0;
  padding: 6px;
  border: 1px solid #e0e0e0;
}
#recent_status {padding-left: 0 !important;}
#recent_status li.clearfix {list-style-type: none;padding: 5px 0;}
#recent_status .avatar {
  float: left;
  -moz-border-radius: 0;
  -moz-box-shadow: 0 2px 2px rgba(0,0,0,0.1);
  -webkit-border-radius: 0;
  -webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.1);
  background: #fff;
  border: 1px solid #d5d5d5;
  border-radius: 0;
  box-shadow: 0 2px 2px rgba(0,0,0,0.1);
  padding: 1px;
}
#recent_status .avatar, #recent_status .avatar img {
  height: 30px;
  width: 30px;
}
#recent_status .message-date {float: right;}
#recent_status .message-block {margin-left: 40px;}
</style>

Até!

Obrigado!! Se quiser fechar o topico!! Fique avontade