Widget: Recent topics of a specific sub-forum

[Ange Tuteur]

Widget: Recent topics of a specific sub-forum

This tutorial will allow you to create a widget that will display recent topics of a specific sub-forum. Here is an example that will be more meaningful I want to make a widget which displays all of the recent topics in my sub forum "The health of your cat" 1 - Create a Widget and add the following content Administration Panel > Modules > Portal & Widgets > Forum widgets management > Create a widget Code: <div id="newsareal1" class="newsareal"> </div> Example : Save your widget and put it in your column. 2 - Create a new Javascript and add the following code depending on the version of your forum Administration Panel > Modules > HTML & JAVASCRIPT > Javascript codes management > create a new script PhpBB2 : Code: jQuery(document).ready(function(){ jQuery("#newsareal1").load("/f1-the-health-of-your-cat div.topictitle:lt(11)"); }); PhpBB3 : Code: jQuery(document).ready(function(){ jQuery("#newsareal1").load("/f1-the-health-of-your-cat div.topic-title-container:lt(11)"); }); PunnBB & Invision : Code: jQuery(document).ready(function(){ jQuery("#newsareal1").load("/f1-the-health-of-your-cat a.topictitle:lt(11)"); }); Example : Remember to place your Javascript "in all the pages". It will also be good to check that the areas highlighted in the example correspond to your forum. "newsreal1" must appear in your widget. Replace "f1-the-health-of-your-cat" with what is in the url of your sub forum. If you wish to change the amount of recent topics that display, just change the 11 in your Javascript. When finished save your Javascript. 3 - Add the following CSS code which corresponds to the version of your forum Administration panel > Display > Pictures and colors > Colors > CSS stylesheet PhpBB2 : Code: .newsareal div.topictitle { display: block !important; margin: 2px 1px 0; padding: 2px 5px 5px 30px; border: 1px solid #B1BFC0; border-radius: 5px; background: #F3F9F9 url('https://i44.servimg.com/u/f44/16/54/26/99/old-ve10.png') no-repeat 5px center; } .newsareal div.topictitle:hover { background-color: #D8DEDE; } .newsareal div.topictitle a { color: #708090 !important; text-decoration: none !important; text-shadow: #fff 1px 1px 0px } PhpBB3 : Code: .newsareal div.topic-title-container { display: block !important; margin: 2px 1px 0; padding: 2px 5px 5px 30px; border: 1px solid #B1BFC0; border-radius: 5px; background: #F3F9F9 url('https://i44.servimg.com/u/f44/16/54/26/99/old-ve10.png') no-repeat 5px center; } .newsareal div.topic-title-container:hover { background-color: #D8DEDE; } .newsareal div.topic-title-container a { color: #708090 !important; text-decoration: none !important; text-shadow: #fff 1px 1px 0px } PunBB & Invision : Code: .newsareal a.topictitle { display: block !important; margin: 2px 1px 0; padding: 2px 5px 5px 30px; border: 1px solid #B1BFC0; border-radius: 5px; background: #F3F9F9 url('https://i44.servimg.com/u/f44/16/54/26/99/old-ve10.png') no-repeat 5px center; text-decoration: none !important; } .newsareal a.topictitle:hover { background-color: #D8DEDE; color: #708090 !important; text-shadow: #fff 1px 1px 0px } Example : Then just save your CSS and you're done !

This tutorial is based on the one by Dana Domirani and Zen. It has been translated to English by Ange Tuteur. No possible reproduction without our agreement, pursuant to article L122-1 of the intellectual property code.

[skouliki]

This code was updated to fit in with the new HTTPS address

updated 11.02.2020 by skouliki