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
  • Pages:
  • 1
  • 7
  • 17
Sidebar
Topic Started: Apr 27 2011, 11:23 PM (25,721 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:
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
You'll need to use some additional JavaScript for guest view:
Code:
 
if ($.zb.logged_in === false) {
$('#sidebar').css('margin-top', '260px');
}
Offline Profile Quote Post Goto Top
 
NettoSaito
Member Avatar
Member
[ *  * ]
Oh ok, thanks. Btw I hate to keep bothering you, but is it possible to set a custom distance depending on the page? While 110 px works just fine for the front page, due to advertisements not showing up in actual topics, and due to the "new topic" button in the forum view, the side bar does get off. If there's no way to fix it it's fine, but I figured I'd go ahead and ask.

Edit: Just found another issue actually. When you log in the side bar extends past the bottom of the board. I saw you posted codes earlier to prevent this, but I wasn't quite sure how to work them in. Never mind about the last part. Fixed it.
Edited by NettoSaito, Jul 31 2013, 07:44 PM.
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Try this:
Code:
 
if (location.href.indexOf('/topic') !== -1) {
$('#sidebar').css('margin-top', '0');
}
Offline Profile Quote Post Goto Top
 
NettoSaito
Member Avatar
Member
[ *  * ]
While that works to stick it to the top of the page, it doesn't really give me any control. I was messing around with the very same script for the past 15 minutes and I couldn't find anyway to control it. Even if I change the 0 to 1, it'll drop back to the original position.

Nvm thanks! Got it all to work out correctly. I'm still having an issue where the side bar extends past the bottom of the board though. It's only in a few remote pages/forums with too few of posts. Specifically here

http://forums.nettosgameroom.com/forum/3727857/
Edited by NettoSaito, Jul 31 2013, 08:35 PM.
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Try this:
Code:
 
if ($('#main').height() < $('#sidebar').height()) {
$('#main').css('height', $('#sidebar').height() + parseInt($('#sidebar').css('margin-top').split('px')[0], 10) + 'px');
}
Offline Profile Quote Post Goto Top
 
NettoSaito
Member Avatar
Member
[ *  * ]
Nope... Didn't seem to do anything...
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Try this instead:
Code:
 
$(document).ready(function () {
if ($('#main').height() < $('#sidebar').height()) {
$('#main').css('height', $('#sidebar').height() + parseInt($('#sidebar').css('margin-top').split('px')[0], 10) + 'px');
}
});
Offline Profile Quote Post Goto Top
 
NettoSaito
Member Avatar
Member
[ *  * ]
Well now it is actually expanding, but is there a way to move the white bar to the right? So it lines up with the rest of the forum?
Edited by NettoSaito, Jul 31 2013, 08:58 PM.
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Code:
 
body.sidebar #main > *, body.sidebar #main > form table {
margin-left: 170px !important;
}
Change that to this:
Code:
 
body.sidebar #main > *, body.sidebar #main > form table, body.sidebar #foot_wrap {
margin-left: 170px !important;
}
Offline Profile Quote Post Goto Top
 
NettoSaito
Member Avatar
Member
[ *  * ]
Thanks a lot! You really helped me out big time with this one! However there is still one minor issue. I really hate to keep asking, but is there a way to move the white bar in posts as well?

http://forums.nettosgameroom.com/topic/8773204/8/#new

The one that has the "« Previous Topic · General Discussion · Next Topic »" options on it.
Edited by NettoSaito, Jul 31 2013, 09:11 PM.
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Code:
 
<script type="text/javascript">
//<![CDATA[
$('td:has(iframe), td:has(script[src*="google"])').css({
'border': '0',
'background': 'none'
}).parents('table').attr('id', 'ads');
//]]>
</script>
Change that to this:
Code:
 
<script type="text/javascript">
//<![CDATA[
$('td:has(iframe), td:has(script[src*="google"])').css({
'border': '0',
'background': 'none'
});

$('#main > table:has(td:has(iframe)):not(#topic_viewer + table), #main > table:has(td:has(script[src*="google"])):not(#topic_viewer + table)').attr('id', 'ads');
//]]>
</script>
Edited by Cory, Jul 31 2013, 09:32 PM.
Offline Profile Quote Post Goto Top
 
NettoSaito
Member Avatar
Member
[ *  * ]
Thanks for everything Cory!
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Thank you actually, due to your requests some inventive codes have been introduced in this topic for the sidebar.
Offline Profile Quote Post Goto Top
 
NettoSaito
Member Avatar
Member
[ *  * ]
I hope a lot of people will be able to make use of them for their forums! Really I wish I could have been of some actual help on the coding end... I'm still not quite used to Zetaboards, and it has been quite some time since I learned how to use HTML, Java Script, and CSS... Still I know enough/remember enough to get by with the basics, but this side bar had me flat out stumped. You really are an amazing coder/scripter. You've helped me out quite a bit, and a lot of my forums' members really like your work as well. I personally look forward to seeing what you do next lol
Edited by NettoSaito, Aug 1 2013, 12:22 AM.
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
It was even a bit confusing for me because I was working with absolute positioning and the advertisement area. What you requested could have been done with a JavaScript one-liner by relocating the advertisement table, but moving the ads are against the ZetaBoards TOS, so I had to work with CSS.

I'm so knowledge with coding because I've been doing it for so long and I'm pretty familiar with the ZetaBoards source code. I've learned by searching and seeking for answers but also some of the best coders of this network have helped me along the way, the ones that I remember helping me in the past are Reid, Mike, Quozzo, slayer766 and RedBldSandman.
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
  • Pages:
  • 1
  • 7
  • 17