We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Add Reply
Sidebar
Topic Started: Apr 27 2011, 11:23 PM (25,713 Views)
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Code Name: Sidebar

Preview

What the code does: This code will add a sidebar to the left of your board so you can add in content to the side of your board.

How to use the code: Simply follow the instructions below and edit in any content that you wish to display on the sidebar.

How to install the code:

Admin CP Posted Image Themes Posted Image Themes Posted Image Edit Theme Appearance
Code:
 
#sidebar {
padding: 10px;
position: absolute;
width: 150px;
}

#main {
margin-left: 170px !important;
}
Admin CP Posted Image Themes Posted Image Themes Posted Image Edit Theme Layout: Above <!-- BOARD --> Tag HTML
Code:
 
<div id="sidebar">
<div id="portal">
<div class="portal_box">
<h2>Title</h2>
<div class="portal_content">Content</div>
</div>
<div class="portal_box">
<h2>Title</h2>
<div class="portal_content">Content</div>
</div>
<div class="portal_box">
<h2>Title</h2>
<div class="portal_content">Content</div>
</div>
<div class="portal_box">
<h2>Title</h2>
<div class="portal_content">Content</div>
</div>
<div class="portal_box">
<h2>Title</h2>
<div class="portal_content">Content</div>
</div>
</div>
</div>
Extra notes: The HTML will add five blocks for you to modify, you can add more or remove some to have less. Please post here if the code didn't work or you wish to make modifications to it.
Offline Profile Quote Post Goto Top
 
Replies:
Kankuro
Member Avatar
かんくろ
[ *  *  *  *  * ]
Cory
Dec 19 2014, 09:12 AM
Kankuro: So basically it only needs to dictate if these users are online or not?

Strifefox: It may just need a function wrapped around it so it will load when the page has fully loaded:
Code:
 
<script type="text/javascript">
$(document).ready(function() {
$('#main').css('min-height', $('#sidebar').height() + 'px');
});
</script>
If you increase the width by 40 pixels, this needs to be increased by 40 pixels as well:
Code:
 
#main {
margin-left: 170px !important;
}
As long as it auto-updates when I edit that page, yes.
That's a staff listing page I made myself. If I add a new staff member I'd like it to display when that new staff member is on as well.
Offline Profile Quote Post Goto Top
 
Strifefox
Member Avatar
Tú Eres Pirata!
[ *  * ]
Quote:
 
[It may just need a function wrapped around it so it will load when the page has fully loaded:
Code:
 
<script type="text/javascript">
$(document).ready(function() {
$('#main').css('min-height', $('#sidebar').height() + 'px');
});
</script>


Is this a Below the Board code?
Offline Profile Quote Post Goto Top
 
Dark Shadow 6
Member Avatar
Member
[ *  * ]
Yes
Offline Profile Quote Post Goto Top
 
Kankuro
Member Avatar
かんくろ
[ *  *  *  *  * ]
Strifefox
Dec 19 2014, 11:07 AM
Quote:
 
[It may just need a function wrapped around it so it will load when the page has fully loaded:
Code:
 
<script type="text/javascript">
$(document).ready(function() {
$('#main').css('min-height', $('#sidebar').height() + 'px');
});
</script>


Is this a Below the Board code?
Most likely.
Offline Profile Quote Post Goto Top
 
Strifefox
Member Avatar
Tú Eres Pirata!
[ *  * ]
Unfortunately it's still having the same issue and still only on the Ledger theme. Most noticeable on the Users Online list page; here is my .js for the Below the Board just incase I uploaded it wrong or something.

http://z5.ifrm.com/30262/174/0/p1228042/belowtheboard.js
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Kankuro: HTML for the portal block:
Code: HTML
 
<div id="staff" class="portal_box">
<h2>Staff Online</h2>
<div class="portal_content"></div>
</div>
JavaScript:
Code:
 
<script type="text/javascript">
$.get(main_url + 'stats/staff/?force_ads', function(data) {
$('#forum_leaders_global tbody tr', data).each(function() {
if ($(this).find('td:eq(2) img').attr('alt') === 'PM Online Member') {
$(this).find('td:eq(0) a').appendTo('#staff div.portal_content');
}
});
});
</script>
Strifefox: Here's the bottom of the online list page for me: http://i.imgur.com/3KjvZZh.png
Offline Profile Quote Post Goto Top
 
Kankuro
Member Avatar
かんくろ
[ *  *  *  *  * ]
Cory
Dec 19 2014, 12:17 PM
Kankuro: HTML for the portal block:
Code: HTML
 
<div id="staff" class="portal_box">
<h2>Staff Online</h2>
<div class="portal_content"></div>
</div>
JavaScript:
Code:
 
<script type="text/javascript">
$.get(main_url + 'stats/staff/?force_ads', function(data) {
$('#forum_leaders_global tbody tr', data).each(function() {
if ($(this).find('td:eq(2) img').attr('alt') === 'PM Online Member') {
$(this).find('td:eq(0) a').appendTo('#staff div.portal_content');
}
});
});
</script>
Strifefox: Here's the bottom of the online list page for me: http://i.imgur.com/3KjvZZh.png
Where do I put the HTML? I want it as the top box.

Code:
 

<div id="sidebar">
<div id="portal">
<div class="portal_box">
<h2>Site News</h2>
<div id="s_news" class="portal_content"></div>
</div>
<div class="portal_box">
<h2>Anime News</h2>
<div id="a_news" class="portal_content"></div>
</div>
<div class="portal_box">
<h2>Gaming News</h2>
<div id="g_news" class="portal_content"></div>
</div>
</div>
</div>
Edited by Kankuro, Dec 19 2014, 12:26 PM.
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Put the HTML below this:
Code:
 
<div id="sidebar">
<div id="portal">
Offline Profile Quote Post Goto Top
 
Kankuro
Member Avatar
かんくろ
[ *  *  *  *  * ]
Cory
Dec 19 2014, 12:28 PM
Put the HTML below this:
Code:
 
<div id="sidebar">
<div id="portal">
Any way to make it display the avatar and on hover display their name and staff ranking?
Like this: http://prntscr.com/5im98k
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
You would have to set it up manually (insert the avatar's and staff ranking's) so too many AJAX requests wouldn't have to be used.
Offline Profile Quote Post Goto Top
 
Kankuro
Member Avatar
かんくろ
[ *  *  *  *  * ]
Cory
Dec 19 2014, 12:34 PM
You would have to set it up manually (insert the avatar's and staff ranking's) so too many AJAX requests wouldn't have to be used.
That's fine, how would I do that?

Also, can you add a comma and space after each member's name?
http://prntscr.com/5imq5r

And last issue is that it doen't show regular mods, only global and admins.
Edited by Kankuro, Dec 19 2014, 01:10 PM.
Offline Profile Quote Post Goto Top
 
Strifefox
Member Avatar
Tú Eres Pirata!
[ *  * ]
http://oi57.tinypic.com/10f9ic5.jpg

There is what it's doing to me. Latest version of Chrome, zoom is set to 100%. Don't know why it's doing that to me. I must have something else messed up somewhere in my own browser. It's been giving me guff lately. As long as its just me having problems then that's fine! Thank you Cory, you sir are amazing.
Edited by Strifefox, Dec 19 2014, 05:07 PM.
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Kankuro: Do you want all staff members avatars to appear whether online or not, or did you only want the online staff members avatars to appear?
Code:
 
<script type="text/javascript">
$.get(main_url + 'stats/staff/?force_ads', function(data) {
$('#forum_leaders_global tbody tr', data).each(function() {
if ($(this).find('td:eq(2) img').attr('alt') === 'PM Online Member') {
$(this).find('td:eq(0) a').appendTo('#staff div.portal_content');
$('#staff a:not(:last)').after(', ');
}
});
});
</script>
Try that instead to add the commas.

The code grabs the users from this page: http://w11.zetaboards.com/GamesAndAnime/stats/staff/

Strifefox: You could always add more pixels to the overall height:
Code:
 
<script type="text/javascript">
$(document).ready(function() {
$('#main').css('min-height', parseInt($('#sidebar').height() + 50, 10) + 'px');
});
</script>
Offline Profile Quote Post Goto Top
 
Kankuro
Member Avatar
かんくろ
[ *  *  *  *  * ]
Cory
Dec 21 2014, 09:08 AM
Kankuro: Do you want all staff members avatars to appear whether online or not, or did you only want the online staff members avatars to appear?
Code:
 
<script type="text/javascript">
$.get(main_url + 'stats/staff/?force_ads', function(data) {
$('#forum_leaders_global tbody tr', data).each(function() {
if ($(this).find('td:eq(2) img').attr('alt') === 'PM Online Member') {
$(this).find('td:eq(0) a').appendTo('#staff div.portal_content');
$('#staff a:not(:last)').after(', ');
}
});
});
</script>
Try that instead to add the commas.

The code grabs the users from this page: http://w11.zetaboards.com/GamesAndAnime/stats/staff/

Strifefox: You could always add more pixels to the overall height:
Code:
 
<script type="text/javascript">
$(document).ready(function() {
$('#main').css('min-height', parseInt($('#sidebar').height() + 50, 10) + 'px');
});
</script>
I want it to show just when they are online.

And is there any way to include the regular moderators?
Along with what I said above I've noticed 2 more issues since adding it to my main board.

1: It shows a blank space and/or an extra comma - http://prntscr.com/5jlq5t

2: In the news boxes it displays the top thread, so any pinned threads I have are shown...Can you make it so the newest thread is displayed instead? Like newest when it comes to creation date?
Edited by Kankuro, Dec 22 2014, 03:26 AM.
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Do you still want the avatar setup, or do you not mind the plain-text setup?
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
Go to Next Page
« Previous Topic · ZetaBoards Codes & Modifications · Next Topic »
Add Reply