Add time and author to recent topics of a specific subforum

Hi,

in relation to this topic by @Ange Tuteur
https://help.forumotion.com/t129060-widget-recent-topics-of-a-specific-sub-forum

I would like to know whether it's possible to add the author and date/time to the recent topic widget. An Appearance ike in the normal widget for recent topics would be great.

(The widget for recent topic of a specific subforum is actually in progress in my forum.)

Greetings

Hi @darki,

The response I made here should give you the effect you're looking for.

@Ange Tuteur I added the js code and CSS without changing something, the widget content is this:

Code:

<div id="topicbox-1" class="last-ajax-posts">
</div>
 <script type="text/javascript">
_getNewest({
  forum : 102,
  amount : 2,
  node : 'topicbox-1'
});
</script>
<div id="topicbox-2" class="last-ajax-posts">
</div>
 <script type="text/javascript">
_getNewest({
  forum : 105,
  amount : 2,
  node : 'topicbox-2'
});
</script>
<div id="topicbox-3" class="last-ajax-posts">
</div>
 <script type="text/javascript">
_getNewest({
  forum : 119,
  amount : 2,
  node : 'topicbox-3'
});
</script>
<div id="topicbox-4" class="last-ajax-posts">
</div>
 <script type="text/javascript">
_getNewest({
  forum : 91,
  amount : 2,
  node : 'topicbox-4'
});
</script>
<div id="topicbox-5" class="last-ajax-posts">
</div>
 <script type="text/javascript">
_getNewest({
  forum : 104,
  amount : 2,
  node : 'topicbox-5'
});
</script>
<div id="topicbox-6" class="last-ajax-posts">
</div>
 <script type="text/javascript">
_getNewest({
  forum : 92,
  amount : 2,
  node : 'topicbox-6'
});
</script>
<div id="topicbox-7" class="last-ajax-posts">
</div>
 <script type="text/javascript">
_getNewest({
  forum : 18,
  amount : 2,
  node : 'topicbox-7'
});
</script>

The result is this:
https://i.servimg.com/u/f21/18/92/88/56/thjkj410.png

I think to get the appearance like the normal widget for recent topics I need CSS from it. With Firebug I couldn't find it.

From what I can tell, you need to reduce the font size so the font takes up less space, and reduce the size of the avatar too. If the column for the widgets were bigger that would probably help too. Do you need any help finding the CSS selectors ?

Any of the children can be referenced by the parent selector : .last-ajax-posts

@Ange Tuteur Changing font size and the width of the column for the widgets don't help. The result is the same but with a bigger column/widget.

It is possible that the avatars will not appear, if avatars for last posts enabled under Display > Structure and Hierarchy are activated? Maybe through CSS?

My bad, I just realized the size of the lastposts is being set to 20% by default.

Try adding this CSS to your stylesheet :

Code:

.last-ajax-posts .lastpost {
  width:auto !important;
  font-size:10px;
  margin:10px 0;
  overflow:auto;
}

.last-ajax-posts .lastpost-avatar {
  width:20px;
}

.last-ajax-posts .lastpost-avatar img {
  width:20px;
  height:20px;
}

It'll tone everything down a little. You can adjust it if you like.

@Ange Tuteur
1. After adding this to CSS stylesheet it looks better. Problem: the title of topic appears only for the first recent topic in this widget. By the others only author, date, time and avatar appear.

2. I don't want to have the avatars in this widget, but in the last posts. I tried by changing 20px for width and height for avatars to 0px to remove it, but then there appears a space instead of the avatar.

3. By your tutorial linked by me in first post I could add the following:

Code:

.forumbg:not(.forumbg.announcement

Where do I have to add it in the script here?

1. That's weird, do you have an example I can look at ?

2. Hide the avatars by changing the display state to none :

Code:

.last-ajax-posts .lastpost-avatar { display:none; }

3. In the script you installed in the JS codes management, replace this :

Code:

$('.row .lastpost:has(a[href^="/t"])', d)

by :

Code:

$('.forumbg:not(.forumbg.announcement) .row .lastpost:has(a[href^="/t"])', d)

@Ange Tuteur
2. and 3. work great.

1. https://i.servimg.com/u/f21/18/92/88/56/grhfng10.png
In the screen is "Neueste Beiträge" = means latest posts and a grey pokeball instead of the title of the topic.
The appearance of the normal widget for recent topics:
https://i.servimg.com/u/f21/18/92/88/56/fghjkl10.png
Like that the new widget should look like.

Weird, do you have anything on your forum that's hiding the topic titles ? ( I can't tell since I don't see the widget on your forum )

The return content I get on my phpbb3 test forum looks like this :

@Ange Tuteur Maybe I activate the widget so that you can see it?

Edit: Done.

I see where the texts are coming from. Add this to your CSS :

Code:

.last-ajax-posts .lastpost dfn { display:none }

Then replace the script that gets the topics with this :

Code:

window._getNewest = function(o) {
  if (!o.node) return false;
  if (!o.forum) o.forum = 1;

  if (!o.amount) o.amount = 5;

  o.node = document.getElementById(o.node);

  if (o.node) {
    $.get('/f' + o.forum + '-?change_version=prosilver', function(d) {
      var last = $('.forumbg:not(.forumbg.announcement) .row', d), content = document.createElement('DIV'), i = 0;
     
      for (; i < o.amount; i++) {
        if (!last[i]) break;
        else {
          content.appendChild($('.topictitle', last[i])[0]);
          content.appendChild($('.lastpost', last[i])[0]);
        }
      }

      o.node.appendChild(content);
    });
  }
};

@Ange Tuteur Now it's better, but not as it should.
As you can see and compare to the normal widget in my forum, the grey pokeball is still there. Also topic title and username are bold.
Adding font-weight: normal to .last-ajax-posts .lastpost didn't help.

Perfect, one step closer.

Here, add the following rules to your stylesheet :

Code:

.last-ajax-posts a.topictitle { font-weight:normal; }
.last-ajax-posts .lastpost { margin-top:0; }
.last-ajax-posts .lastpost span { padding:0; }
.last-ajax-posts .lastpost span > a, .last-ajax-posts .lastpost span > br { display:none; }

/* pseudo-content */
.last-ajax-posts .lastpost div > span > strong:before {
  content:"von ";
  font-weight:normal;
}

.last-ajax-posts a.topictitle:before {
  content:"» ";
  color:#333;
}

.last-ajax-posts dd.lastpost span.color-groups {
  float:none;
  display:inline;
}

This should make it very similar to the latest topics widget.

@Ange Tuteur Wow, you realized "von" and "»" - that would has been my next question.
Great, another step closer.
Unfortunately, the username is still bold.
And between topictitle and the next line is a small space. You see? Possible to remove it?

Replace the CSS I gave you before with this :

Code:

.last-ajax-posts a.topictitle, .last-ajax-posts .lastpost div > span > strong { font-weight:normal; }
.last-ajax-posts .lastpost { margin-top:0 !important; }
.last-ajax-posts .lastpost span { padding:0; }
.last-ajax-posts .lastpost span > a, .last-ajax-posts .lastpost span > br { display:none; }

/* pseudo-content */
.last-ajax-posts .lastpost div > span > strong:before {
  content:"von ";
  font-weight:normal;
}

.last-ajax-posts a.topictitle:before {
  content:"» ";
  color:#333;
}

.last-ajax-posts dd.lastpost span.color-groups {
  float:none;
  display:inline;
}

That should fix the space and bold usernames.

It works and looks like the normal widget. FANTASTIC!
Thank you for your fantastic support, day after day!

Solved!

You're welcome ^^

Topic archived

Have a great day.