Widgets de Conteúdo de uma Categoria específica.

Qual é minha questão:
Boas galera gostaria de um código para Widget igual a dos ùltimos assuntos, porem com postagens recentes de uma categoria específica, é possível?

Agradeço quem puder ajudar, abraço.

Endereço do meu fórum:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Versão:
Invision

Alguem dá um Help aew galera... Please...

Sim, é possível, você gostaria do widget na mesma estrutura do widget de últimos assuntos?
Até mais!

Daemon escreveu:Sim, é possível, você gostaria do widget na mesma estrutura do widget de últimos assuntos?
Até mais!

Sim amigo gostaria.

Tem uma área  no Fórum que quero que as postagens sejam destacadas no widget.

Agradeço a ajuda.

Primeiro adicione ao seu css:

Código:

.recent_topics {
  border: 1px solid #AAA;
  background: #fff;
  box-shadow: 0 0 10px #ddd;
  -moz-box-shadow: 0 0 10px #ddd;
  -webkit-box-shadow: 0 0 10px #ddd;
  color: #333;
  font-size: 10px;
}
.recent_topics .news_title {
  margin: 0 0 5px;
  background: #F2F2F2 url(http://i.imgur.com/iPXDkuF.png) repeat-x 0 0;
  border: 1px solid #E3E3E3;
  border-bottom: 1px solid #E8E8E8;
  padding: 5px;
  color: #535353;
  font: Tahoma;
  font-size: 1.3em;
  text-shadow: 0 1px white;
  box-shadow: inset 0 10px 10px #DDD;
  -moz-box-shadow: inset 0 10px 10px #DDD;
  -webkit-box-shadow: inset 0 10px 10px #DDD;
  border-bottom: 1px solid white;
}
.recent_topics .news_desc, .recent_topics .news_topic .news_topic_desc {
  position: absolute;
  background-color: #111;
  color: white;
  padding: 5px;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  opacity: 0.9;
  -moz-opacity: 0.9;
  -webkit-opacity: 0.9;
  filter: alpha(opacity=90);
  max-width: 350px;
}
.recent_topics .news_topic {
  margin: 3px 5px;
  text-shadow: 0 1px white;
}
.recent_topics .news_topic .news_topic_desc {text-shadow: none;}
.recent_topics .news_topic .news_topic_desc img {
  max-height: 130px;
  max-width: 230px;
}
.recent_topics .news_topic_title {
  display: block;
  font-size: 1.1em;
  font-weight: bold;
  color: #105289;
}
.recent_topics .autor {display: block;}
.recent_topics .autor:before {
  content: 'Por ';
}
.recent_topics .time:before {
  content: 'Último post: ';
}

Depois crie um novo código JS com investimento em todas as páginas:

Código:

$(function(){
 
  var sForums = [1];
  var qtd = 8;
 
  var text = function(cont, tag) {
      tag = cont.getElementsByTagName(tag)[0];
      return (tag && tag.firstChild && tag.firstChild.nodeValue) || '';
  }; 
  for(var j = 0, f; (f = sForums[j++]); ) {
      var holder = document.getElementById('Recent_' + f);
      if(!holder) continue;
      $.get('/feed/?f=' + f, function(xml) {
        var forum_title = text(xml, 'title'), forum_desc = text(xml, 'description'), topics = xml.getElementsByTagName('item'), i = 0, t = null;
       
        var html = '<div class="inner_news"><div class="news_title" onmouseover="$(this.nextSibling).show()" onmouseout="$(this.nextSibling).hide()">' + forum_title + '</div>';
        html += '<div class="news_desc" style="display:none">' + forum_desc + '</div><div class="news_topics">';
       
        for(; (t = topics[i++]); ) {
            var topic_title = text(t, 'title'), preview = text(t, 'description'), link = text(t, 'link'), time = text(t, 'pubDate');
            var autor = t.getElementsByTagName('guid')[0].nextSibling.firstChild.nodeValue;
            html += '<div class="news_topic"><a href="' + link + '" class="news_topic_title" onmouseover="$(this.nextSibling).show()" onmouseout="$(this.nextSibling).hide()">' + topic_title + '</a>';
            html += '<div class="news_topic_desc" style="display:none">' + preview + '</div><span class="autor">' + autor + '</span><span class="time">' + time + '</span></div>';
            if(i >= qtd) break;
        }
        holder.innerHTML = html + '</div></div>';
      });
  };
});

Esta parte do código:

Código:

var sForums = [1];
  var qtd = 8;

O primeiro indica os sub-fóruns que irão aparecer no widget, você pode definir assim:

Código:

[1, 2, 3]

Desta forma irão aparecer os tópicos dos sub-fóruns 1, 2 e 3.
O segundo você define a quantidade de tópicos que irão aparecer no widget.
Depois iremos criar um novo widget personalizado, o conteúdo deve ser este:

Código:

<div class="recent_topics" id="Recent_1">
</div>

Neste código a única parte que deverá mudar é em "Recent_1", se você definir por exemplo o sub-fórum 15 você irá colocar "Recent_15".
Até mais!

Daemon escreveu:Primeiro adicione ao seu css:

Código:

.recent_topics {
   border: 1px solid #AAA;
   background: #fff;
   box-shadow: 0 0 10px #ddd;
   -moz-box-shadow: 0 0 10px #ddd;
   -webkit-box-shadow: 0 0 10px #ddd;
   color: #333;
   font-size: 10px;
}
.recent_topics .news_title {
   margin: 0 0 5px;
   background: #F2F2F2 url(http://i.imgur.com/iPXDkuF.png) repeat-x 0 0;
   border: 1px solid #E3E3E3;
   border-bottom: 1px solid #E8E8E8;
   padding: 5px;
   color: #535353;
   font: Tahoma;
   font-size: 1.3em;
   text-shadow: 0 1px white;
   box-shadow: inset 0 10px 10px #DDD;
   -moz-box-shadow: inset 0 10px 10px #DDD;
   -webkit-box-shadow: inset 0 10px 10px #DDD;
   border-bottom: 1px solid white;
}
.recent_topics .news_desc, .recent_topics .news_topic .news_topic_desc {
   position: absolute;
   background-color: #111;
   color: white;
   padding: 5px;
   border-radius: 3px;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   opacity: 0.9;
   -moz-opacity: 0.9;
   -webkit-opacity: 0.9;
   filter: alpha(opacity=90);
   max-width: 350px;
}
.recent_topics .news_topic {
   margin: 3px 5px;
   text-shadow: 0 1px white;
}
.recent_topics .news_topic .news_topic_desc {text-shadow: none;}
.recent_topics .news_topic .news_topic_desc img {
   max-height: 130px;
   max-width: 230px;
}
.recent_topics .news_topic_title {
   display: block;
   font-size: 1.1em;
   font-weight: bold;
   color: #105289;
}
.recent_topics .autor {display: block;}
.recent_topics .autor:before {
   content: 'Por ';
}
.recent_topics .time:before {
   content: 'Último post: ';
}

Depois crie um novo código JS com investimento em todas as páginas:

Código:

$(function(){
  
  var sForums = [1];
   var qtd = 8;
  
  var text = function(cont, tag) {
      tag = cont.getElementsByTagName(tag)[0];
      return (tag && tag.firstChild && tag.firstChild.nodeValue) || '';
   };  
  for(var j = 0, f; (f = sForums[j++]); ) {
      var holder = document.getElementById('Recent_' + f);
      if(!holder) continue;
      $.get('/feed/?f=' + f, function(xml) {
         var forum_title = text(xml, 'title'), forum_desc = text(xml, 'description'), topics = xml.getElementsByTagName('item'), i = 0, t = null;
        
        var html = '<div class="inner_news"><div class="news_title" onmouseover="$(this.nextSibling).show()" onmouseout="$(this.nextSibling).hide()">' + forum_title + '</div>';
         html += '<div class="news_desc" style="display:none">' + forum_desc + '</div><div class="news_topics">';
        
        for(; (t = topics[i++]); ) {
            var topic_title = text(t, 'title'), preview = text(t, 'description'), link = text(t, 'link'), time = text(t, 'pubDate');
            var autor = t.getElementsByTagName('guid')[0].nextSibling.firstChild.nodeValue;
            html += '<div class="news_topic"><a href="' + link + '" class="news_topic_title" onmouseover="$(this.nextSibling).show()" onmouseout="$(this.nextSibling).hide()">' + topic_title + '</a>';
            html += '<div class="news_topic_desc" style="display:none">' + preview + '</div><span class="autor">' + autor + '</span><span class="time">' + time + '</span></div>';
            if(i >= qtd) break;
         }
         holder.innerHTML = html + '</div></div>';
      });
   };
});

Esta parte do código:

Código:

var sForums = [1];
   var qtd = 8;

O primeiro indica os sub-fóruns que irão aparecer no widget, você pode definir assim:

Código:

[1, 2, 3]

Desta forma irão aparecer os tópicos dos sub-fóruns 1, 2 e 3.
O segundo você define a quantidade de tópicos que irão aparecer no widget.
Depois iremos criar um novo widget personalizado, o conteúdo deve ser este:

Código:

<div class="recent_topics" id="Recent_1">
</div>

Neste código a única parte que deverá mudar é em "Recent_1", se você definir por exemplo o sub-fórum 15 você irá colocar "Recent_15".
Até mais!

Bom amigo não deu certo.

Quando colo o Codigo CSS aparece a mensagem abaixo.

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

E o Widget fica como no Print abaixo.

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]




Não aparece nada.

Att

O erro não é do css que lhe passei, e sim alguma chave que o senhor não fechou no seu css padrão. Poderia me passar o link do sub-fórum que o senhor quer que apareça dentro do widget?
Até mais!

Daemon escreveu:O erro não é do css que lhe passei, e sim alguma chave que o senhor não fechou no seu css padrão. Poderia me passar o link do sub-fórum que o senhor quer que apareça dentro do widget?
Até mais!

Segue o link amigo..

[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Obrigado.

Troque o código JS por este:

Código:

$(function(){
 
  var sForums = [50];
  var qtd = 8;
 
  var text = function(cont, tag) {
      tag = cont.getElementsByTagName(tag)[0];
      return (tag && tag.firstChild && tag.firstChild.nodeValue) || '';
  }; 
  for(var j = 0, f; (f = sForums[j++]); ) {
      var holder = document.getElementById('Recent_' + f);
      if(!holder) continue;
      $.get('/feed/?f=' + f, function(xml) {
        var forum_title = text(xml, 'title'), forum_desc = text(xml, 'description'), topics = xml.getElementsByTagName('item'), i = 0, t = null;
       
        var html = '<div class="inner_news"><div class="news_title" onmouseover="$(this.nextSibling).show()" onmouseout="$(this.nextSibling).hide()">' + forum_title + '</div>';
        html += '<div class="news_desc" style="display:none">' + forum_desc + '</div><div class="news_topics">';
       
        for(; (t = topics[i++]); ) {
            var topic_title = text(t, 'title'), preview = text(t, 'description'), link = text(t, 'link'), time = text(t, 'pubDate');
            var autor = t.getElementsByTagName('guid')[0].nextSibling.firstChild.nodeValue;
            html += '<div class="news_topic"><a href="' + link + '" class="news_topic_title" onmouseover="$(this.nextSibling).show()" onmouseout="$(this.nextSibling).hide()">' + topic_title + '</a>';
            html += '<div class="news_topic_desc" style="display:none">' + preview + '</div><span class="autor">' + autor + '</span><span class="time">' + time + '</span></div>';
            if(i >= qtd) break;
        }
        holder.innerHTML = html + '</div></div>';
      });
  };
});

E no widget, lembre-se de colocar em não utilizar um table-type, coloque:

Código:

<div class="recent_topics" id="Recent_50">
</div>

Até mais!

Daemon escreveu:Troque o código JS por este:

Código:

$(function(){
  
 var sForums = [50];
   var qtd = 8;
  
 var text = function(cont, tag) {
      tag = cont.getElementsByTagName(tag)[0];
      return (tag && tag.firstChild && tag.firstChild.nodeValue) || '';
   };  
 for(var j = 0, f; (f = sForums[j++]); ) {
      var holder = document.getElementById('Recent_' + f);
      if(!holder) continue;
      $.get('/feed/?f=' + f, function(xml) {
         var forum_title = text(xml, 'title'), forum_desc = text(xml, 'description'), topics = xml.getElementsByTagName('item'), i = 0, t = null;
        
       var html = '<div class="inner_news"><div class="news_title" onmouseover="$(this.nextSibling).show()" onmouseout="$(this.nextSibling).hide()">' + forum_title + '</div>';
         html += '<div class="news_desc" style="display:none">' + forum_desc + '</div><div class="news_topics">';
        
       for(; (t = topics[i++]); ) {
            var topic_title = text(t, 'title'), preview = text(t, 'description'), link = text(t, 'link'), time = text(t, 'pubDate');
            var autor = t.getElementsByTagName('guid')[0].nextSibling.firstChild.nodeValue;
            html += '<div class="news_topic"><a href="' + link + '" class="news_topic_title" onmouseover="$(this.nextSibling).show()" onmouseout="$(this.nextSibling).hide()">' + topic_title + '</a>';
            html += '<div class="news_topic_desc" style="display:none">' + preview + '</div><span class="autor">' + autor + '</span><span class="time">' + time + '</span></div>';
            if(i >= qtd) break;
         }
         holder.innerHTML = html + '</div></div>';
      });
   };
});

E no widget, lembre-se de colocar em não utilizar um table-type, coloque:

Código:

<div class="recent_topics" id="Recent_50">
</div>

Até mais!

Continua na mesma amigo.

Poderia me conceder o acesso ao seu painel de controle pra que eu possa ativar tal código?
Até mais!

Daemon escreveu:Poderia me conceder o acesso ao seu painel de controle pra que eu possa ativar tal código?
Até mais!

Mandando por MP.

Daemon escreveu:Poderia me conceder o acesso ao seu painel de controle pra que eu possa ativar tal código?
Até mais!

Não conseguiu né parceiro?Tá tranquilo, vou ver por aqui se alguém resolve senão deixo do jeito que tá. Valeu pela ajuda. Pode fechar o tópico.

Obrigado.

[sucesso=Tópico Resolvido; e Bloqueado][/sucesso]Movido para: Arquivo - Pedido de código