Who is Online table

Hello.
IS this possible to make a Who is Online table like this to my forum?

Thank you

URL: http://www.namelesscraft.org/

Hi,

The URL provided above, is that your forum? Is the forum version phpBB3?

Yes, the forum version is phpbb3.

While it can be possible, the stability of the design would be difficult considering the lack of unique ID's and selectors for that section. It forces the use of nth-child to acquire pinpoint accuracy, but in some cases can be difficult, especially with pages that display more content while logged in and less content while logged out; this tends to reallocate ID's and cause bugs.

I came up with a quick design using nth-child which you can see below.



Most of the line separation you want wouldn't be possible right now considering that the content is inside one paragraph block, but you can added some borders to separate most of the content.



I bet if I tweaked most of the child elements with some unique formulas, it could be "stable", but there is still a chance of issues occurring.

This is the code used above for the example design:
It will most likely only display correctly for logged out users, which is why I advise against permanent usage of it.

Code:

/*Borders for statistics - phpbb3
nth-child usage may cause
visual bugs use at own risk!*/
.img-whois{
position:absolute;
left:70px;
bottom:250px;
}
#content-container div#content{
position:relative;
}
#main-content > p:nth-child(16), #page-body p.page-bottom{
margin-left:100px;
padding-left:6px;
border-right:1px solid;
border-left:1px solid;
}
#main-content > p:nth-child(16){
border-top:1px solid;
padding-top:30px;
padding-bottom:10px;
}
p.page-bottom:nth-child(21){
border-bottom:1px solid;
padding-bottom:5px;
}
p.page-bottom:nth-child(19){
border-top:1px solid;
padding-top:30px;
}
p.page-bottom{
position:relative;
bottom:45px;
}
div.h3:nth-child(18){
border-bottom:1px solid;
margin-left:100px;
position:relative;
bottom:15px;
}
div.h3:nth-child(14){
border-bottom:1px solid;
margin-left:100px;
position:relative;
top:25px;
}
/*Borders for statistics - phpbb3
nth-child usage may cause
visual bugs use at own risk!*/

I'd consider the above to be used only for design purposes, or a temporary look at what can be possible; it will only work on most phpbb3 platforms.

I believe it could be possible to design a stable version if you were to edit the HTML DOM.

It is however, possible to reposition the who is online image and a portion of the statistics without issues though. In case you want that for now.

Add intro new div:

Code:

$(function() {
$('#i_whosonline + p').wrap('<div class="your class" />');
});

Add your class:

Code:

$(function() {
$('#i_whosonline + p').addClass('your class');
});

cloner wrote:Add intro new div:

Code:

$(function() {
$('#i_whosonline + p').wrap('<div class="your class" />');
});

Add your class:

Code:

$(function() {
$('#i_whosonline + p').addClass('your class');
});

That is very useful, and allows for most of this to be possible. I'm not very handy with scripting, but I like what can be done. I'll tinker around a bit to see if I can figure something out, kudos!

cloner wrote:Add intro new div:

Code:

$(function() {
$('#i_whosonline + p').wrap('<div class="your class" />');
});

Add your class:

Code:

$(function() {
$('#i_whosonline + p').addClass('your class');
});

Where am I suppose to place this?

Administration Panel > Modules > HTML/JavaScript > JavaScript Management

Make sure that JavaScript Management is on.

He said "div" and "class" so it's obviously not in the javascript alone.

angel_of_night wrote:Where am I suppose to place this?

The codes above are mainly an example for adding a new class or new HTML element, I believe. They're actually quite helpful.

Thanks to cloner I was able to write something up, considering I am an amateur at this, anyone can correct me if I made a mistake.

Add this to your javascript:
Administration Panel > Modules > HTML & JAVASCRIPT > Javascript codes management > create a new script

You can name it what you want, but tick only in the homepage since that's where it will only be needed.

Then paste this and save the script:

Code:

$(function() {
$('#i_whosonline + p').addClass('VO-info');
var x = $('div.h3:contains("Who is online?")').addClass('VO-whois');$('div.h3:contains("Statistics")').addClass('VO-stats');$('div.h3:contains("Chatbox")').addClass('VO-chat');$('p.page-bottom:contains("Our users have posted a total of")').addClass('VO-bottom1');$('p.page-bottom:contains("The newest registered user is")').addClass('VO-bottom2');
});

Now go to:
Display > Pictures and colors > Colors > CSS stylesheet

Paste the following code in and save. (Make sure you remove the example code if you have it in there)

Code:

.img-whois{
position:absolute;
left:70px;
bottom:12%;
}
#content-container div#content{
position:relative;
}
#main-content > p.VO-info, #page-body p.page-bottom, div.page-bottom, div#chatbox_popup{
margin-left:100px;
padding-left:6px;
border-right:1px solid;
border-left:1px solid;
}
.VO-info{
border-top:1px solid;
padding-top:30px;
padding-bottom:10px;
}
p.page-bottom{
position:relative;
bottom:44px;
}
p.page-bottom.VO-bottom1{
border-top:1px solid;
padding-top:30px;
}
p.page-bottom.VO-bottom2{
border-bottom:1px solid;
padding-bottom:5px;
}
.VO-whois{
border-bottom:1px solid;
margin-left:100px;
position:relative;
top:25px;
z-index:1;
}
.VO-stats{
border-bottom:1px solid;
margin-left:100px;
position:relative;
bottom:20px;
z-index:1;
}
.VO-chat{
border-bottom:1px solid;
margin-left:100px;
position:relative;
bottom:65px;
z-index:1;
}
div.page-bottom, div#chatbox_popup{
position:relative;
bottom:87px;
}
div.page-bottom{
padding-top:30px;
}
div#chatbox_popup{
border-bottom:1px solid;
padding-bottom:5px;
}

Really makes me want to continue my study on javascript.

I forgot the important part, preview: