The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Widget: Recent topics of a specific sub-forum

2 posters

Go down

Tutorial Widget: Recent topics of a specific sub-forum

Post by Ange Tuteur 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"

Widget: Recent topics of a specific sub-forum Tuto19

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 :
Widget: Recent topics of a specific sub-forum Tuto210

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 :
Widget: Recent topics of a specific sub-forum Tuto311

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.

Widget: Recent topics of a specific sub-forum Tuto410

If you wish to change the amount of recent topics that display, just change the 11 in your Javascript.

Widget: Recent topics of a specific sub-forum Tuto510

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 :
Widget: Recent topics of a specific sub-forum Tuto610

Then just save your CSS and you're done ! :wouhou:

Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

TonnyKamper likes this post

Back to top Go down

Tutorial Re: Widget: Recent topics of a specific sub-forum

Post by skouliki February 11th 2020, 6:16 pm

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

updated 11.02.2020 by skouliki
skouliki
skouliki
Manager
Manager

Female Posts : 15029
Reputation : 1680
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

TonnyKamper likes this post

Back to top Go down

Back to top

- Similar topics

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