2
#1
Example 3: Remove Topics/Posts Columns on Forum Displays (phpbb3 and Invision)
Posted January 3rd 2011, 1:15am
Ever since I saw THIS, I have wanted to add the same capability to phpBB3 and IPB2/Invision boards. Since it was so easy, I thought it would make a great example script.

Here is the script for phpBB3:

var CopyrightNotice = 'Revised topics/posts display for forumotion phpBB3 boards. Copyright © 2011 by Dion Designs. All Rights Reserved. Use and/or modification of this script is allowed, provided this entire copyright notice remains in the original or modified script. Distribution is not allowed without written consent from Dion Designs.';

$(function() {
if ($('.forabg ul.forums')[0]) {
$('.hierarchy').next().remove();
x=$('.forabg ul.forums dl.icon').get();
for (i=0; i<x.length; i++) {
var topics=x[i].childNodes[1].childNodes[0].nodeValue;
var posts=x[i].childNodes[2].childNodes[0].nodeValue;
$(x[i]).find('.hierarchy').after('<div class="topicsposts" style="margin-bottom:3px;font-size:1.1em;"><b>'+topics+'</b> Topics, <b>'+posts+'</b> Posts</div>');
}

$('.forabg').addClass('index-box');
$('.forabg dd.topics').remove();
$('.forabg dd.posts').remove();
}
});

And here is the script for Invision:

var CopyrightNotice = 'Revised topics/posts display for forumotion Invision boards. Copyright © 2011 by Dion Designs. All Rights Reserved. Use and/or modification of this script is allowed, provided this entire copyright notice remains in the original or modified script. Distribution is not allowed without written consent from Dion Designs.';

$(function() {
if ($('table.index-box')[0]) {
x=$('table.index-box tbody tr').get();
for (i = 0; i < x.length; i++) {
var topics=x[i].childNodes[1].innerHTML;
var posts=x[i].childNodes[2].innerHTML;
$(x[i]).find('.hierarchy').after('<div class="topicsposts" style="margin-bottom:3px;"><b>'+topics+'</b> Topics, <b>'+posts+'</b> Posts</div>');
x[i].childNodes[1].innerHTML='';
x[i].childNodes[2].innerHTML='';
}

x=$('table.index-box thead tr').get();
for (i = 0; i < x.length; i++) {
x[i].childNodes[1].innerHTML='';
x[i].childNodes[2].innerHTML='';
}
}
});

As you can see, this is a very simple script. What it basically does is read the topics and posts data from each forum, write it out in a DIV tag underneath the forum name, and then remove/hide the topics/posts columns. That's it! The only real "trick" in phpBB3 is knowing the topics/posts data must be read as a text node because there is a hidden column definition that would cause problems reading the column innerHTML. In IPB2/Invision you're dealing with tables, so you must instead make the topics/posts columns empty and then zero out their width because the columns cannot be removed.

If you want, this code can be added to the code from example 2 to create a nice start to a great-looking phpBB3 or IPB2/Invision board!

In order to make this look clean, you must add some CSS. Since the topics and posts columns have been removed, the widths of the remaining columns must be adjusted. Here is the CSS that must be added for phpBB3:

div.index-box dl.icon dd.dterm {width: 68%;}
div.index-box dl.icon dd.lastpost {float: right; width: 29%;}

And here is the CSS that must be added for Invision:

table.index-box th.topics, table.index-box th.replies, table.index-box td.centered {width: 0px; padding: 0px; border: none;}
table.index-box th.forum {width: 71%;}
table.index-box th.last {width: 29%;}

The script enhancements on both boards look identical on all browsers, including Internet Explorer. They even display properly with IE6. That's right...Internet Explorer 6.0, the scourge of the Internet! The only display problems on either board are caused by forumotion's CSS and system scripts! :D
φ
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357
Example 3: Remove Topics/Posts Columns on Forum Displays (ph
Posted January 8th 2011, 10:18pm
The DOM on phpBB3 boards provides an interesting opportunity to change the position of the columns in forum/topic tables. The code from the example above can be slightly modified to accomplish this task. The following code will reverse the topics and forum description columns:
var CopyrightNotice = 'Reverse topics and forum description columns on forumotion phpBB3 boards. Copyright © 2011 by Dion Designs. All Rights Reserved. Use, modification, and/or distribution of this script is allowed, provided this entire copyright notice remains in the original, copied, or modified script.';

$(function() {
if ($('.forabg ul.forums')[0]) {
x=$('.forabg dl.icon').get();
for (i=0; i<x.length; i++) {
var dterm=x[i].childNodes[0];
var topics=x[i].childNodes[1];
x[i].insertBefore(topics,dterm);
if (x[i].parentNode.className=='row') {
var bgicon=x[i].style.background;
x[i].style.background='';
dterm.style.background=bgicon;
}
}
}
});

A similar loop is created as in the above example, and similar variables are defined. The insertBefore() method will flip the position of the two columns. If we're reversing columns in a header, then quit -- otherwise, move the background icon (new/nonew/locked) to the new position of the forum description column.

Simple, yet effective!
φ
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357
Example 3: Remove Topics/Posts Columns on Forum Displays (phpBB3 and Invision)
Posted August 5th 2011, 11:32pm
I used this script and did some tampering. I combined them like so in the caps below, but I have a problem. There is now a huge gap. In some categories the gap lies above the forum name, and in others between the forum name and description.

Image

Image

How can I remove the gap? Let me know if you need to see the alterations i made to the original script.
φ
Posts: 13
Joined: July 20th 2011, 11:00pm
Example 3: Remove Topics/Posts Columns on Forum Displays (phpBB3 and Invision)
Posted August 6th 2011, 12:16am
Actually what I need is the URL to your board, so I can see what's going on for myself...
φ
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357
Example 3: Remove Topics/Posts Columns on Forum Displays (phpBB3 and Invision)
Posted August 6th 2011, 3:21pm
φ
Posts: 13
Joined: July 20th 2011, 11:00pm
Example 3: Remove Topics/Posts Columns on Forum Displays (phpBB3 and Invision)
Posted August 7th 2011, 3:57pm
Your homepage isn't accesible to guests, but I don't need to see it.

You have some serious problems with your CSS, to the point where even the login page does not display properly. If you want to fix the CSS, start by deleting the .borderwrap rule that is setting a fixed width, and is using positioning to place it off the left side of the page.

By any chance did you get the skin from Hitskin? If so, I suggest that you start from scratch and choose another skin, because the one you chose is defective.
φ
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357
Example 3: Remove Topics/Posts Columns on Forum Displays (phpBB3 and Invision)
Posted August 8th 2011, 12:27pm
Really? I've been manipulating the CSS so long. The default skin looks entirely different from its current stage. There was just so much clutter, and text I didn't want. I don't have a design team, and a certain support board is typically no help. Do I have to scrap the entire thing or could I just validate it? I've removed the fixed width. I'm sorry, I'm sure I'm driving you crazy and thank you for your help.

**Edit
I have also deleted the rule that I used to move the Topics/Replies to the middle column.
φ
Posts: 13
Joined: July 20th 2011, 11:00pm
Example 3: Remove Topics/Posts Columns on Forum Displays (phpBB3 and Invision)
Posted November 23rd 2011, 3:45pm
dion can u make this into punbb system ?
φ
Posts:
Avatar
Guest
Example 3: Remove Topics/Posts Columns on Forum Displays (phpbb3 and Invision)
Posted November 26th 2011, 12:33pm
hey Dion,
I had tried hard to understand your method by live simulation here:
http://jsfiddle.net/defencedog/uacLS/

the only thing I am unable to understand are these lines:

 var topics = x[i].childNodes[1].childNodes[0].nodeValue;
var posts = x[i].childNodes[2].childNodes[0].nodeValue;


especially the necessity of .childNodes[0] in each line?
The HTML part to be manipulated is also mentioned in jsfiddle & index of these two html lines
<dd class="topics">0 <dfn>Topics</dfn></dd>  
<dd class="posts">0 <dfn>Posts</dfn></dd>

are 1 & 2 respectively, so the immediate children of <dl class="icon" ...> are selected which are 4 in total. This make me difficult to understand why this is needed .childNodes[0]
φ
Posts: 163
Joined: August 5th 2011, 11:00pm
Location: Pakistan
Likes Given: 34
Likes Received: 3
Example 3: Remove Topics/Posts Columns on Forum Displays (phpBB3 and Invision)
Posted November 26th 2011, 12:56pm
The topics/posts DD elements in phpBB3 have two nodes. The first is a text node which contains the count, and the second is a DFN element. To reference the count you use childNodes[0], and since it's a text node, you must use the nodeValue property to read its value.
φ
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357
Example 3: Remove Topics/Posts Columns on Forum Displays (phpBB3 and Invision)
Posted November 27th 2011, 6:05am
Thnx
φ
Posts: 163
Joined: August 5th 2011, 11:00pm
Location: Pakistan
Likes Given: 34
Likes Received: 3
Example 3: Remove Topics/Posts Columns on Forum Displays (phpBB3 and Invision)
Posted December 2nd 2011, 7:39am
Image Thank you!
φ
Posts:
Avatar
Guest
Topic locked
12 posts

Who is online

Users browsing this forum: No registered users and 1 guest