Tópicos recentes de fóruns específicos

Todos sabemos que há um recurso bem interessante nos fóruns de Forumeiros, que é o widget "últimos assuntos" com scroll. Ele mostra todos os tópicos recentemente respondidos ou criados, mas, já se passou em sua cabeça fazer isso para um subfórum específico?

O que fazer?

Primeiro de tudo, este tutorial é disponível para fóruns FORUMEIROS e PhpBB, porém, devido as URLs do phpbb serem completamente incompatíveis e não amigáveis, prefira usar o phpBBSEO.

Os códigos

Agora que está em seu fórum, acesse o seu Painel de Controle, Módulos, Portal e Widgets, Gestão dos widgets, e lá vamos Criar um widget personalizado, colocando nele os códigos que seguem.

phpBB2

JS:
<script>jQuery(document).ready(function(){ jQuery("#newsareal1").load("/f1-url-do-seu-forum div.topictitle:lt(11)"); });</script>

CSS:
.newsareal div.topictitle {<br /> display: block !important;<br /> margin: 2px 1px 0;<br /> padding: 2px 5px 5px 30px;<br /> border: 1px solid #B1BFC0;<br /> border-radius: 5px;<br /> background: #F3F9F9 url('http://i44.servimg.com/u/f44/16/54/26/99/old-ve10.png') no-repeat 5px center;<br /> }<br /> .newsareal div.topictitle:hover {<br /> background-color: #D8DEDE;<br /> }<br /> .newsareal div.topictitle a {<br /> color: #708090 !important;<br /> text-decoration: none !important;<br /> text-shadow: #fff 1px 1px 0px<br /> }

O CSS pode ser adicionado em Visualização > Imagens e Cores > Cores > Folha de estilos CSS >

phpBB3
.JS:
<script>jQuery(document).ready(function(){ jQuery("#newsareal1").load("/f1-url-do-seu-forum div.topic-title-container:lt(5)"); });</script>

CSS:
.newsareal a.topictitle {<br /> display: block !important;<br /> margin: 2px 1px 0;<br /> padding: 2px 5px 5px 30px;<br /> border: 1px solid #B1BFC0;<br /> border-radius: 5px;<br /> background: #F3F9F9 url('http://i44.servimg.com/u/f44/16/54/26/99/old-ve10.png') no-repeat 5px center;<br /> }<br /> .newsareal a.topictitle:hover {<br /> background-color: #D8DEDE;<br /> }<br /><br /> .newsareal a.topictitle a {<br /> color: #708090 !important;<br /> text-decoration: none !important;<br /> text-shadow: #fff 1px 1px 0px;<br /> }

PunBB e Invision:

JS:
<script>jQuery(document).ready(function(){ jQuery("#newsareal1").load("/f1-url-do-seu-forum a.topictitle:lt(11)"); });</script>

CSS:
.newsareal a.topictitle {<br /> display: block !important;<br /> margin: 2px 1px 0;<br /> padding: 2px 5px 5px 30px;<br /> border: 1px solid #B1BFC0;<br /> border-radius: 5px;<br /> background: #F3F9F9 url('http://i44.servimg.com/u/f44/16/54/26/99/old-ve10.png') no-repeat 5px center;<br /> text-decoration: none !important;<br /> }<br /> .newsareal a.topictitle:hover {<br /> background-color: #D8DEDE;<br /> color: #708090 !important;<br /> text-shadow: #fff 1px 1px 0px<br /> }

Depois, é só adicionar o HTML:
<div id="newsareal1"></div>

RESULTADO

Depois disso tudo, basta acessar o fórum e pronto, já está funcionando! Se precisar de ajuda, encontre-nos em www.shift.forumactif.com ;)


Espero que aproveitem. ;)