Currently Active Users Area

[Amaury]

Okay, so I changed the following phrase a long time ago:

Most users ever online was X, [date] at [time]It was changed to:

Most users ever online: X - [date] at [time]Just now I changed the above phrase again, as well as "There are currently X users online. X members and Y guests," to the following:

Most users ever online: X
[date] at [time]and

Users currently online: X
Members: X | Guests: YI am interested in putting the "Most users..." to the right beside "Users currently..." so they're on the same line ("Most users..." would be on the exact same line as "Users currently..." and "[date] at [time]" would be on the exact same line as "Members: X | Guests: Y"). How would I accomplish this?

Screenshot:

http://i101.photobucket.com/albums/m62/AmauryGarcia/WGO-1.jpg

[Lynne]

If you look at the source code, each of those is within a <p>stuff</p> tag and there is not class associated with it. So, you would need to modify the template in order to do what you want.

To find the template to modify, do this - vboptions > General Settings > Add Template Name in HTML Comments > set to Yes . Then go back to your page and view the source code and you will see the name of the template called around your part of the code. (Sometimes the template is the one mentioned at the very top of the page source.)

[Amaury]

If you look at the source code, each of those is within a <p>stuff</p> tag and there is not class associated with it. So, you would need to modify the template in order to do what you want.

To find the template to modify, do this - vboptions > General Settings > Add Template Name in HTML Comments > set to Yes . Then go back to your page and view the source code and you will see the name of the template called around your part of the code. (Sometimes the template is the one mentioned at the very top of the page source.)

I found the code, but I'm not seeing the template. I see some ad board thing, but it ends before the WGO box.

http://i101.photobucket.com/albums/m62/AmauryGarcia/WGO2.png

EDIT: I found the template via Edit Templates, though. It's FORUMHOME.

Now the question is what do I edit?

[snakes1100]

forumhome

[Lynne]

Now the question is what do I edit?
Just change the <p> to <divs> and give them a class and then in additional.css set them to display:inline

[Amaury]

Just change the <p> to <divs> and give them a class and then in additional.css set them to display:inline

What do you mean by class?

Also, what would the additional.css code look like? Something like this?

.wgobox {
display: inline;
}

[Lynne]

You may want to take a look at the W3Schools site in my signature. They have excellent information about CSS. .wgobox is a class, yes. If you give something it's own class, like <div class="myfirst">, then you would write css like:

.myfirst {display:inline; float:left;}

[Amaury]

You may want to take a look at the W3Schools site in my signature. They have excellent information about CSS. .wgobox is a class, yes. If you give something it's own class, like <div class="myfirst">, then you would write css like:

.myfirst {display:inline; float:left;}

Thanks.

I made the codes the following:

<div class="myfirst">{vb:rawphrase there_are_x_y_online_link, {vb:raw totalonline}, {vb:raw session.sessionurl_q}} <span class="shade">{vb:rawphrase x_members_and_y_guests, {vb:raw numberregistered}, {vb:raw numberguest}}</span></div><div class="myfirst">{vb:rawphrase most_users_ever_online_was_x_y_at_z, {vb:raw recordusers}, {vb:raw recorddate}, {vb:raw recordtime}}</div>However, if you look at the forum, you'll notice it affected the user listings, too, as well a shortened the amount of space between the Currently Active Users text and that first border under it; therefore making "Users currently online" and "Most users ever online" overlap it, which, of course, I didn't want. :)

Did I do something wrong?

[Lynne]

Then just add this line to get the <ol> block to clear them:

.wgo_block .section div ol {
clear: both;}
You may want to add some padding/margins also.

[Amaury]

Then just add this line to get the <ol> block to clear them:

.wgo_block .section div ol {
clear: both;}You may want to add some padding/margins also.

That worked (see forum), but I want some space between the user listings and the "Users currently online / Most users ever online" -- preferably what it was before I made the changes to the FORUMHOME template -- which is what I'm assuming the padding is for...

What do I put for the padding, though? Something like 1px?

.wgo_block .section div ol {
clear: both;
padding: ?;
}

[Lynne]

Just add some padding like you have there. I doubt you only want 1px though, probably more likely 5px or 10px.

[Amaury]

Just add some padding like you have there. I doubt you only want 1px though, probably more likely 5px or 10px.

I did 2px. What do you think?

If you compare Dance of the Dream Eater (Dark) and Test (Default Style) by selecting in the Quick Style Chooser, does it look like the original back on Dream Eater (Dark)?

Also, one last question: if you again look at Test (Default Style) with no edited templates, you'll notice that "Users currently online..." and "Most users ever online..." line up with the user listings, but not on Dream Eater (Dark / Light)

What could I adjust to fix the minor alignment issue?

[Lynne]

Something is interferring with the style chooser on your site and I cannot change styles.

[Amaury]

Something is interferring with the style chooser on your site and I cannot change styles.

If it's Internet Explorer, for some reason it displays "Page cannot be found" in some areas.

Anyway, you can use this (http://www.kh-mediaflare.net/forum.php?styleid=120) direct link. Here's a direct link (http://www.kh-mediaflare.net/forum.php?styleid=115) to go back to Dance of the Dream Eater (Dark).

[Lynne]

The spacing looks just fine to me.

(And no, I'm using Chrome. I am guessing the code you added for those lights, that I keep breaking, it causing the issue with the dropdown as it is broken on both styles.)

[Amaury]

The spacing looks just fine to me.

(And no, I'm using Chrome. I am guessing the code you added for those lights, that I keep breaking, it causing the issue with the dropdown as it is broken on both styles.)

Odd. I was just using Chrome to check something as a guest, and I was able to click the QSC.

Anyway, thanks.

How about my last question? :)

Also, one last question: if you again look at Test (Default Style) with no edited templates, you'll notice that "Users currently online..." and "Most users ever online..." line up with the user listings, but not on Dream Eater (Dark / Light)

What could I adjust to fix the minor alignment issue?

[Lynne]

That's just some more padding. Just add some padding-left.

[Amaury]

That's just some more padding. Just add some padding-left.

Into the CSS you posted in post seven or nine?

[Lynne]

Yes.

Don't be afraid to try something - especially just a little CSS that you can so easily remove if it is wrong. If you don't like trying things on your live site, then you really should have a test site set up. It makes things a lot easier.

[Amaury]

Yes.

Don't be afraid to try something - especially just a little CSS that you can so easily remove if it is wrong. If you don't like trying things on your live site, then you really should have a test site set up. It makes things a lot easier.

Nah, I don't mind trying.

I went ahead tried the following earlier, and both didn't work:

.myfirst {
display: inline;
float: left;
padding-left;
}
.wgo_block .section div ol {
clear: both;
padding: 2px;
padding-left;
}

[Lynne]

Well, no, that won't work because you didn't specify any padding. Please take a look at the W3Schools site in my signature.

padding-left: xx;

You need to specify something.

[Amaury]

Well, no, that won't work because you didn't specify any padding. Please take a look at the W3Schools site in my signature.

padding-left: xx;

You need to specify something.

Okay, I tried adding this to the additional.css, and it works, but it moves everything -- user listings, Icon Legend, etc.

.wgo_block .section div, .wgo_block .section ol {
padding-left: 5px;
}I only want this moved:

Users currently online: 12
Members: 4 | Guests: 8

Most users ever online: 118
9-11-2012 at 4:16 AM

[Lynne]

You can try something like:
#wgo_onlineusers div.myfirst {padding-left: 5px;}
And then change the second class=myfirst" to something like class="mysecond" and add css for that one (exactly the same as for myfirst, but use mysecond instead).

[Amaury]

You can try something like:
#wgo_onlineusers div.myfirst {padding-left: 5px;}And then change the second class=myfirst" to something like class="mysecond" and add css for that one (exactly the same as for myfirst, but use mysecond instead).

That worked.

Thanks a lot, Lynne. for all your help! :)