More instances ->> Widget: Recent topics of a specific sub-forum

[HrvojeP]

Hello!  



I found very useful this tutorial: Widget: Recent topics of a specific sub-forum. (Widget)

To have more than one subforum exposed to forum members I must create more widgets which are nearly the same. The difference between these widgets is just the link to the subforum. Also, it was neccesary to write separate CSS code for each widget.

  What to do to pass the argument with a link to the same widget?
  Is it possible to think about widget as about an object receiving parameter value?


Thank you for the help.

[Ange Tuteur]

Hello HrvojeP ,

This is possible and after reflection I have updated the tuto with a class name. The reason as you mentioned, you should not have to add more CSS to style each newsareal, so you should now be able to apply this to all by using a single class name. ( updated here : https://help.forumotion.com/t129060-widget-recent-topics-of-a-specific-sub-forum#864372 )

The ID will be instead used to load the topics into the element.

I have set an example for multiple newsareals in one widget, please see below. ( I use phpbb3 )

First our CSS to style our link :
AP > Display > Pictured and colors > Colors > CSS stylesheet

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
    }

Now we create widget : (you do not have to do exactly like this  )
AP > Modules > Portal and widgets > Forum widgets management > create a new widget

Code:

<h3>newsareal 1</h3>
<div id="newsareal1" class="newsareal"> </div>
<h3>newsareal 2</h3>
<div id="newsareal2" class="newsareal"> </div>
<h3>newsareal 3</h3>
<div id="newsareal3" class="newsareal"> </div>
<h3>newsareal 4</h3>
<div id="newsareal4" class="newsareal"> </div>

I title each section, and below my title I place the div element which loads my topics. I label each one with a different ID to be used in the javascript. We use the same class for each div to be able to style every link.

Now we create our javascript :
AP > HTML & JAVASCRIPT > Javascript codes management > create a new script

Code:

jQuery(document).ready(function(){
jQuery("#newsareal1").load("/f1- div.topic-title-container:lt(3)");
jQuery("#newsareal2").load("/f2- div.topic-title-container:lt(3)");
jQuery("#newsareal3").load("/f3- div.topic-title-container:lt(3)");
jQuery("#newsareal4").load("/f4- div.topic-title-container:lt(3)");
});

I load a different forums topics for each ID. Each div will load three topics, but can be changed.

The result :

[HrvojeP]

Hello Ange Tuteur!   

Thank you so much for your engagement. I will try this solution and let you know how it works at my forum. If I catch the time I will try this this evening and if not today, than I will be diligent next year.   

Have a nice evening today. I wish you all the best in the next year.  

[Ange Tuteur]

You're welcome, if you encounter any problems do not hesitate.

Have a good new year

[TheCrow]

Το me its not working. Why?
Ok Working! My mistake!

Edit: How can i change the position of the boxes?

[HrvojeP]

...
Edit: How can i change the position of the boxes?

Change the position (order) of lines in widget definition and keep the same order in the javascript.

[TheCrow]

haha i said it wrong! Sorry. I meant that i wanted to move the boxes to the left so its not viewed like this. not change the boxes.. hehe just move them all a bit to the left.    

Thanks anyway for your help!

[HrvojeP]

It is OK Marios!   
I visited your forum, it looks fine. How did you make statistics with the national flags?

[TheCrow]

add this in widgets.

Code:

<center>
   <center>
      <script src="http://widget.supercounters.com/flag.js" type="text/javascript"></script><script type="text/javascript">sc_flag(712091,"fafafa","000000","cccccc",1,10,0,0)</script><br />
   </center>
</center>

[Ange Tuteur]

Hello ,

Please open a new topic for your questions / new questions.

Is this solved ?

[HrvojeP]

I am sorry for mixing the problems. It will not happen again.
Yes, thank you, everything is solved.

Regards,
Hrvoje

[Ange Tuteur]

Okay thank you, you're welcome.

Topic solved and archived