|
|
(NOTE: This is copy and pasted from PBS, so the updates listed at the bottom, are from when editing that post. Hence "August 2013" for example.)
PREVIEW:
Admin > Themes > Layout Templates > HomeOn a default theme, scroll down to line 25, and replace EVERYTHING from line 25 below, with the following: Thanks to @smashmaster3 for correcting an error I was unaware of (2 technically). <!-- Slimline Info Center by Stinky666 - http://smangii.proboards.com / Do not remove this header -->
{if $[show_stats]}
<div class="container stats">
<div class="title-bar">
</div>
<div class="content">
<table>
<tbody>
<tr>
<td width="30%" style="padding: 5px 10px 5px 10px;">
<table>
<tbody>
{if $[last_updated_thread]}
<tr>
<td>
<b>Last Update:</b><a href="$[last_updated_thread.recent_link.href]" class="lastpost"> $[last_updated_thread.subject]</a><br />
<b>Updated by:</b> $[last_updated_thread.last_post.created_by_user]<br />
<b>When:</b> $[last_updated_thread.last_post.date]
</td>
</tr>
{/if}
</tbody>
</table>
</td>
<td width="25%" style="padding: 5px 10px 5px 10px;">
<table>
<tbody>
<tr>
<td>
<b>Threads:</b> $[total_threads]<br />
<b>Posts:</b> $[total_posts]<br />
View our <a href="$[recent_posts_link.href]"><u>most recent</u></a>
</td>
</tr>
</tbody>
</table>
</td>
<td width="20%" style="padding: 5px 10px 5px 10px;">
<table>
<tbody>
<tr>
<td>
<b>Categories:</b> $[category.length]<br /><b>Boards:</b>
<script type="text/javascript">
document.write($(".board").length);
</script>
<br />
<b>Sub-Boards:</b>
<script type="text/javascript">
document.write($(".sub-boards a").length);
</script>
</td>
</tr>
</tbody>
</table>
</td>
<td width="25%" style="padding: 5px 10px 5px 10px;">
<table>
<tbody>
<tr>
<td>
<b>Members:</b> $[total_members]<br />
<b>Newest:</b> $[newest_user]<br />
view today's <a href="/members?dir=asc&sort=name&view=birthdays">birthdays</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<td colspan="4">
<table>
<tbody>
<tr>
<td style="padding: 10px 10px 10px 10px;">
<table>
<tbody>
{foreach $[online_user]}
$[online_user]{if $[online_user.invisible]} <span class="small">(ninja)</span>{/if}$[online_user.comma]
{/foreach}
{if $[total_staff_online] == 0}
{if $[total_members_online] == 0}
There are currently no members online.
{/if}
{elseif $[total_members_online] == 0}
{if $[total_staff_online] == 0}
There are currently no members online.
{/if}
{/if}
{if $[total_online_not_shown]}
, and <a class="$[view_active_members_link.class]" href="$[view_active_members_link.href]">$[total_online_not_shown] more...</a>
{/if}
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<tr>
<td colspan="4" style="padding: 5px 10px 5px 10px; border-top: 1px dashed #3a474d;">
<table>
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td width="33%" style="text-align: center;">
<a href="/members?dir=desc&sort=last_online&view=online">Currently Online:</a> <a href="#" class="onlinetotal" title="$[total_staff_online] Staff, $[total_members_online] Member{if $[total_members_online] != 1}s{/if}"><u>$[total_online]</u></a> ($[total_guests_online] {if $[view_guests_online_link]}<a href="#" class="$[view_guests_online_link.class]">guest{if $[total_guests_online] != 1}s{/if}{/if}</a>)
</td>
<td width="34%" style="text-align: center;">
<a href="/members?dir=desc&sort=last_online&view=today">Online in the Last 24hrs:</a> <a href="#" class="onlinetotal24" title="$[total_staff_online_24] Staff, $[total_members_online_24] Member{if $[total_members_online_24] != 1}s{/if}, $[total_guests_online_24] Guest{if $[total_guests_online_24] != 1}s{/if}"><u>$[total_online_24]</u></a>
</td>
<td width="33%" style="text-align: center;">
Most users online: $[most_users_online]
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
{/if}Now go to Admin > Themes > Advanced Styles and CSS > Style Sheet. Find line 1260, and you should see: /* Info Centers */ If you don't see that, or can't find it for any reason, simply hit ctrl+f, then type in Info Centers. Press enter, and it should take you to it. In the same area and add the following to the very bottom: .stats .content > table > tbody > tr > td { border: @info_inner_border; border-right-width: 0px; border-bottom-width: 0px; width: auto; }
.stats .content > table > tbody > tr > td:first-child { border-left-width: 0px; width: auto; }Finally, scroll to the very bottom and press enter once or twice, and paste the following in: /**************************************************************************
* Users Online + Last 24hrs Legend *
**************************************************************************/
/* Users Online Total */
a.onlinetotal {
position: relative;
text-decoration: none;
}
a.onlinetotal:hover:before {
display: inline-block;
position: absolute;
padding: .5em;
content: attr(title);
min-width: auto;
text-align: center;
width: auto;
height: auto;
white-space: nowrap;
top: -32px;
right: -80px;
background: rgba(255, 255, 255,.8);
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
color: #000000;
font-size: .86em;
.box-shadow(0px, 1px, 4px, @shadow_color);
}
a.onlinetotal:hover:after {
position: absolute;
display: inline-block;
content: "";
border-color: rgba(255, 255, 255,.8) transparent transparent transparent;
border-style: solid;
border-width: 6px;
height:0;
width:0;
position:absolute;
top: -8px;
left: -2px;
}
/* Users Online in 24hrs Total */
a.onlinetotal24 {
position: relative;
text-decoration: none;
}
a.onlinetotal24:hover:before {
display: inline-block;
position: absolute;
padding: .5em;
content: attr(title);
min-width: auto;
text-align: center;
width: auto;
height: auto;
white-space: nowrap;
top: -32px;
right: -80px;
background: rgba(255, 255, 255,.8);
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
color: #000000;
font-size: .86em;
.box-shadow(0px, 1px, 4px, @shadow_color);
}
a.onlinetotal24:hover:after {
position: absolute;
display: inline-block;
content: "";
border-color: rgba(255, 255, 255,.8) transparent transparent transparent;
border-style: solid;
border-width: 6px;
height:0;
width:0;
position:absolute;
top: -8px;
left: -2px;
}If you need assistance for editing the colours, leave a reply asking 
Updates...[2nd August 2013]: Moved "Guests", and added link for Guest IPs.
Last Edit: Jan 20, 2014 11:48:43 GMT by Stinky666
|
|
|
|
|
|
Looks good. Only a few small things on your editing instructions:
Line numbers change over time as PBS produces new default CSS, HTML, or as a user edits it before adding your modification. It's actually better to just set the correct value with new rules for CSS.
|
|
|
|
|
|
Looks good. Only a few small things on your editing instructions: Line numbers change over time as PBS produces new default CSS, HTML, or as a user edits it before adding your modification. It's actually better to just set the correct value with new rules for CSS.I agree, obviously, and understand the first part of what you're saying, however, I'm honestly not too sure what you mean by that last sentence. I have mentioned to use CTRL+F to search for specific things, if that helps though?
|
|
|
|
|
Looks good. Only a few small things on your editing instructions: Line numbers change over time as PBS produces new default CSS, HTML, or as a user edits it before adding your modification. It's actually better to just set the correct value with new rules for CSS.I agree, obviously, and understand the first part of what you're saying, however, I'm honestly not too sure what you mean by that last sentence. I have mentioned to use CTRL+F to search for specific things, if that helps though? CTRL+F is a good improvement, for sure. In fact, I think they offer a shitty search field at the top of the box too. Anyways to clarify... when you remove the CSS, you're telling it to just reset to an earlier rule... in this case, likely "width: auto;" If we were to insert that rule at the end instead of deleting it earlier, it's easier to support future changes or removal of modifications.
|
|
|
|
|
|
|
The search PB have offered/included is some times good, but some times it doesn't find stuff if you just search for individual words etc. You some times, unfortunately, need to search for full lines, or at least multiple words in order for it to find it. However, with that said, luckily all (?) browsers have built in search, so where ever you are and use CTRL+F, it should be able to find stuff fine. And ah ok, I set it to width: auto and yeah, ok haha it worked. So that is better than removing it, definitely I've edited the post to say this. Also, as for the CSS not being on the same lines.. not sure what else I could say or suggest for it, since it's always changing. It's not TOO far out. I did this Info Center quite a long time ago, and on a new theme (one made Jan 9th) of PB's, the differences are: In my post above, line 1271 is now 1284, and line 1279 is now 1292. The only other thing I personally can think to do, is not find those lines, but instead add them both again at the bottom of the CSS, and let it override the previous ones. What would you suggest? One of those, or something else?
|
|
|
|
|
The search PB have offered/included is some times good, but some times it doesn't find stuff if you just search for individual words etc. You some times, unfortunately, need to search for full lines, or at least multiple words in order for it to find it. However, with that said, luckily all (?) browsers have built in search, so where ever you are and use CTRL+F, it should be able to find stuff fine. And ah ok, I set it to width: auto and yeah, ok haha it worked. So that is better than removing it, definitely I've edited the post to say this. Also, as for the CSS not being on the same lines.. not sure what else I could say or suggest for it, since it's always changing. It's not TOO far out. I did this Info Center quite a long time ago, and on a new theme (one made Jan 9th) of PB's, the differences are: In my post above, line 1271 is now 1284, and line 1279 is now 1292. The only other thing I personally can think to do, is not find those lines, but instead add them both again at the bottom of the CSS, and let it override the previous ones. What would you suggest? One of those, or something else? Adding at the bottom to override sounds like the best bet for me.
|
|
|
|
|
|
|
The search PB have offered/included is some times good, but some times it doesn't find stuff if you just search for individual words etc. You some times, unfortunately, need to search for full lines, or at least multiple words in order for it to find it. However, with that said, luckily all (?) browsers have built in search, so where ever you are and use CTRL+F, it should be able to find stuff fine. And ah ok, I set it to width: auto and yeah, ok haha it worked. So that is better than removing it, definitely I've edited the post to say this. Also, as for the CSS not being on the same lines.. not sure what else I could say or suggest for it, since it's always changing. It's not TOO far out. I did this Info Center quite a long time ago, and on a new theme (one made Jan 9th) of PB's, the differences are: In my post above, line 1271 is now 1284, and line 1279 is now 1292. The only other thing I personally can think to do, is not find those lines, but instead add them both again at the bottom of the CSS, and let it override the previous ones. What would you suggest? One of those, or something else? Adding at the bottom to override sounds like the best bet for me. Ok edited
|
|
|
