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
  • 8
  • 17
Sidebar
Topic Started: Apr 27 2011, 11:23 PM (25,720 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:
NettoSaito
Member Avatar
Member
[ *  * ]
One thing I really like about the whole set up though is how it is almost completely controlled by the CSS. Although I'm guessing discussing it would go against the ZB ToS as well, there are web browsers with built in ad blocking capabilities, and that will cause issues for anyone viewing your forum who is using one of them applications/browsers. While the sidebar will be aligned below the advertisements, this wont be the case for the ones with blocks set in place since the advertisement section may scale down or up depending on the page (which in return pushes the forum lower or brings it up higher).

Although the simple way to fix this is to tell your members to allow advertisements on the forum and support zetaboards, the fact is that the people visiting your forum has the right to use whatever browser they want. If they want to block advertisements from their view, there's really no way you can stop them from doing so. If you want to be really nice and fix this issue for them, you actually can.

Since just about everything is controlled from the skin layout (and CSS in general), you can simply duplicate your skin to create an extra version of it, and then adjust the values as needed. That way the forum can still appear how you want it even for the people who choose to cheat the system.

I really like that I can do this because that way I don't have to worry about the forum appearing funky for anyone. Everyone sees the exact same thing.
Edited by NettoSaito, Aug 1 2013, 01:44 PM.
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
I notice the gap with the ads blocked on your forum. I wouldn't really worry about it since the gap is not overly large and members that have features blocked from multiple websites should expect such odd anomalies to happen. It's quite a simple fix by using a :hidden selector, but we probably shouldn't touch the advertisement area anymore.
Offline Profile Quote Post Goto Top
 
NettoSaito
Member Avatar
Member
[ *  * ]
So, you think that'll be fine? For the second skin I mean? It only covers a few pixels of the ad banner in the bottom left corner, which really doesn't mess with the advertisement. All information is still clearly displayed.
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
You would have to send in a support ticket for confirmation on what is and is not allowed in terms of modifying the advertisement area. The code I used that affected the ads table was simply setting the margin from 170px to 0, which is what it was set to by default anyways.
Offline Profile Quote Post Goto Top
 
NettoSaito
Member Avatar
Member
[ *  * ]
Okay thanks. I went ahead and screen capped the mini overlap and sent it in as a support ticket. I figure it is better safe than sorry.
Offline Profile Quote Post Goto Top
 
NettoSaito
Member Avatar
Member
[ *  * ]
Hey Cory; I hate to bother you, but is there some java script I could use to make it so the guests can only see the sidebar on the index page of the forum? I found that in other pages on guest view, the sidebar was covering up the advertisements; so as of right now I just have it flat out disabled in the guest view. Wasn't quite sure how to edit the script so that the page blocking took being logged in or not into account.
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Code:
 
if ($.zb.logged_in === false) {
$('#sidebar').css('margin-top', '260px');
}
Change that to this:
Code:
 
if ($.zb.logged_in === false && location.href.indexOf('/index') !== -1) {
$('#sidebar').css('margin-top', '260px');
} else if ($.zb.logged_in === false && location.href.indexOf('/index') === -1) {
$('body').addClass('guest');
}
Code:
 
body.sidebar #ads, body.sidebar #main > ul.cat-pages, body.sidebar #main > div[class*="buttons"]
Change that to this:
Code:
 
body.sidebar #ads, body.sidebar #main > ul.cat-pages, body.sidebar #main > div[class*="buttons"], body.guest #main > *, body.guest #main > form table, body.guest #foot_wrap
Code:
 
body.guest #sidebar {
display: none;
}

body.guest #main table {
width: 100% !important;
}

body.guest #main > ul.cat-pages {
position: static;
}
Add that to your CSS.
Offline Profile Quote Post Goto Top
 
NettoSaito
Member Avatar
Member
[ *  * ]
Oh ok thanks. Actually for now I'm going to leave it as is but for future skins I'm simply going to block it off from the guest's view. The issue is that the position of the advertisements and forum changes depending on which page you view, and that was causing some overlap in the guest view.

Right now I'm actually using
Code:
 
if ($.zb.logged_in === false && location.href.indexOf('/topic') !== -1) {
$('#sidebar').css('margin-top', '307px');
}
if ($.zb.logged_in === false && location.href.indexOf('/372') !== -1) {
$('#sidebar').css('margin-top', '305px');
}

to change the position of it on each page (372 being the forums themselves), but that's going to be quite the pain for future skins. Each time I make a change to the skin or sidebar, not only will I have to adjust the position for the members, but I'd have to take into consideration the guests as well. By simply blocking it from being viewed on other pages, that saves a lot of time and trouble. Anyway, thanks again.
Edited by NettoSaito, Aug 4 2013, 11:46 AM.
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Code:
 
$('#sidebar').css('margin-top', $('#ads').height() + 'px');
You could just use that.
Offline Profile Quote Post Goto Top
 
KaizoKeitaro
Member Avatar
Member
[ * ]
My sidebar is stuck in the middle of my boards.

My board: My Webpage
Edited by KaizoKeitaro, Jul 8 2014, 12:41 AM.
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
I don't see it on your board currently. Did you also add the CSS; the Edit Theme Appearance coding?
Offline Profile Quote Post Goto Top
 
polocolo
Member Avatar
Member
[ *  *  * ]
I think my board ( http://w11.zetaboards.com/Polocolo/index/ ) is a bit complicated. I have custom banners as well as the Recent Updates - Reload table on top of the various categories.

After I put in the above codes on my test board as instructed, the side bar appears next to my banners. Possible if I can make the side bar to be appeared as follows (and only on the index page)?

Posted Image
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Currently the advertisement and recent updates table is pushed to the right, do you just want them spread across the entirety of the main area or did you wish to relocate them?
Offline Profile Quote Post Goto Top
 
polocolo
Member Avatar
Member
[ *  *  * ]
I want the advertisement bar and recent updates table spread across entirely as shown on the image in post #117.

EDIT: the side bar is to be shown on the index page only.
Edited by polocolo, Jul 11 2014, 10:54 AM.
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Try this:

JavaScript:
Code:
 
<script type="text/javascript">
if (location.href.indexOf('/index') !== -1) {
$('#recent_updates, table:has(iframe)').css({
'width': $('#recent_updates').width() + 170 + 'px',
'margin-left': '-170px'
});
} else {
$('#main').addClass('noIndex');
}
</script>
CSS:
Code:
 
div.noIndex #sidebar {
display: none;
}

#main.noIndex {
margin-left: 0 !important;
}
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
  • 8
  • 17