by Ange Tuteur December 31st 2013, 2:00 am
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 :