The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Widget: Recent topics of a specific sub-forum

View previous topic View next topic Go down

Widget: Recent topics of a specific sub-forum

Post by Ange Tuteur on December 17th 2013, 11:15 am

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 Smile

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('http://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('http://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('http://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 ! :wouhou:


Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum