Problem with tutorial - recent topics

Technical Details

Forum version : phpBB3
Position : Administrator
Concerned browser(s) : Mozilla Firefox
Who the problem concerns : All members
Forum link : ( link is hidden, you must reply to see )

Description of problem

Hello,

I tested this tutorial
https://help.forumotion.com/t129060-widget-recent-topics-of-a-specific-sub-forum

I think I followed all steps correctly, but after that the box for recent topics displays nothing, it's empty.
Does anybody has an idea?

Also I don't understand what "newsareal1" is. Do I have to edit this or not?

I hope posting in right area and getting an answer from someone.

Greetings

Hello,

Did you Add the Correct Java script for your forum version and check the box for all pages.
This one :

Code:

jQuery(document).ready(function(){
jQuery("#newsareal1").load("/f1-the-health-of-your-cat div.topic-title-container:lt(11)");
});

And the correct CSS for your version:

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
}

As well as adding the forum widget like it asked. THEN PLACE IT IN YOUR COLUMN (where you add widgets to your forum.)

Hello @darki,

You first must create a widget with the following content :

Code:

<div id="newsareal1" class="newsareal"></div>

You then have to create a script in all the pages with the script that applies to your version. Yours is phpbb3 :

Code:

jQuery(document).ready(function(){
jQuery("#newsareal1").load("/f1-the-health-of-your-cat div.topic-title-container:lt(11)");
});

and you only need to add the CSS once for the style :

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
}

When you create another widget you must change the ID of the element from newsareal1 to newsareal2, etc.. in both the script and HTML.

Yes, I added the right ones (Java & CSS) and placed the widget in the column.
Result: the box appears without a content, only with the title from the widget.

@AngeTuteur Uhm, I have more widgets and want to place this one on position 3. So I edited it to newsareal3, but that didn't help.
Did I do this wrong?

Uhm, another question: It is indifferent where I add the CSS code in CSS stylesheet or should the CSS code be placed on a special line?

It usually should not matter, however if you add it to the bottom and its not showing up i may suggest adding it to the top, unless it has !important on it then should not matter, But i may be wrong i have not used CSS in quite a while.

Also when you placed it on position 3 did you make sure to change the javascript to say it as well like so :

Code:

jQuery(document).ready(function(){
jQuery("#newsareal3").load("/f1-the-health-of-your-cat div.topic-title-container:lt(11)");
});

Also I think you may also need to edit this line to match the fourm you want

Code:

.load("/f1-the-health-of-your-cat

Try to replace /f1-the-health-of-your-cat with your link

Yes, it has !important on it. Also I added it some minutes ago to the top and to the bottom, but it didn't bring the desired succes.
Yeah I changed the Javascript like you do (as well I changed the url to the desired subforum).

I found my fault, now it works. ^^'

But it shows the stickys etc. These shouldn't be in the box. It is possible to "remove" them?
And if I want more subforums than one, it is possible with a ";" to add more url's?

Edit: This doesn't work:
https://help.forumotion.com/t139273-how-to-remove-global-announcement-in-recent-topic

Does no one has an idea?

I tried with this js code:

Code:

[panda=js]jQuery(document).ready(function(){
jQuery("#newsareal3").load("/f102-neuigkeiten-infos;f112-guides-und-analyse div.topic-title-container:not(div.topic-title-contains(global announcement:)):lt(6)");
});

But the problem is that sticky threads (post-it's) shouldn't be shown (not: global announcement). So I don't reach a solution.

Try it with this

Code:

jQuery(document).ready(function(){
jQuery("#newsareal3").load("/f102-neuigkeiten-infose div.topic-title-container:not(div.topic-title-contains(global announcement:)):lt(6)");
});

Just remove the [Panda=js]
and ;f112-guides-und-analys from your javascript and see if that works

Change the selector in the script from div.topic-title-container:lt(11) to .forumbg:not(.announcement) div.topic-title-container:lt(11)

This should prevent sticky / announcements from displaying the the topics.

As for what you want, you can just do something like the following.

Widget contents :

Code:

<div id="newsareal1" class="newsareal"></div>
<div id="newsareal2" class="newsareal"></div>
<div id="newsareal3" class="newsareal"></div>

Script :

Code:

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

You could also combine the javascript with the widget HTML :

Code:

<div id="newsareal1" class="newsareal"></div>
<div id="newsareal2" class="newsareal"></div>
<div id="newsareal3" class="newsareal"></div>
<script type="text/javascript">//<![CDATA[
jQuery("#newsareal1").load("/f1- .forumbg:not(.announcement) div.topic-title-container:lt(3)");
jQuery("#newsareal2").load("/f2- .forumbg:not(.announcement) div.topic-title-container:lt(3)");
jQuery("#newsareal3").load("/f3- .forumbg:not(.announcement) div.topic-title-container:lt(3)");
//]]></script>

Ange Tuteur wrote:Change the selector in the script from div.topic-title-container:lt(11) to .forumbg:not(.announcement) div.topic-title-container:lt(11)

This should prevent sticky / announcements from displaying the the topics

Works, thank you!

For the other half of your answer, that didn't work. The box only displayed the first newsareal respektively the first url.
The problem is that the proposed subforum contents lots of more sub-subforums. My goal is that the box displays new threads of all sub-subforums (in a chronological order, means that the box should not displays the first 3 new threads of the first sub-subforum, then the first 3 new threads of the second sub-subforum and so on).

That's the reason why the box didn't work first: I took the url of the big subforum, not of the sub-subforums.

Is my goal realizable that the big subforum respetively the sub-subforums will display in the box (in chronological order)?
If not, will anyone has an alternative widget, code or something like that?
I would be very grateful!

push/bump
Has anyone an idea?