The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Who is Online table

View previous topic View next topic Go down

In progress Who is Online table

Post by angel_of_night on November 2nd 2013, 9:33 pm

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

Thank you Smile

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

angel_of_night
Forumember

Female Posts : 565
Reputation : 10
Language : portuguese

Back to top Go down

In progress Re: Who is Online table

Post by Sir Chivas™ on November 2nd 2013, 11:12 pm

Hi,

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

Sir Chivas™
Support Moderator
Support Moderator

Male Posts : 6756
Reputation : 428
Language : English, Spanish, and French
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

In progress Re: Who is Online table

Post by Ange Tuteur on November 3rd 2013, 12:17 am

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.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Who is Online table

Post by Guest on November 3rd 2013, 5:43 pm

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');
});

Guest
Guest


Back to top Go down

In progress Re: Who is Online table

Post by Ange Tuteur on November 3rd 2013, 6:17 pm

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!

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Who is Online table

Post by angel_of_night on November 3rd 2013, 6:49 pm

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?

angel_of_night
Forumember

Female Posts : 565
Reputation : 10
Language : portuguese

Back to top Go down

In progress Re: Who is Online table

Post by SLGray on November 3rd 2013, 7:03 pm

Administration Panel > Modules > HTML/JavaScript > JavaScript Management

Make sure that JavaScript Management is on.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35624
Reputation : 2372
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

In progress Re: Who is Online table

Post by angel_of_night on November 3rd 2013, 7:08 pm

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

angel_of_night
Forumember

Female Posts : 565
Reputation : 10
Language : portuguese

Back to top Go down

In progress Re: Who is Online table

Post by Ange Tuteur on November 3rd 2013, 7:10 pm

@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. Smile

I forgot the important part, preview:

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum