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
  • 6
  • 17
Sidebar
Topic Started: Apr 27 2011, 11:23 PM (25,722 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
[ *  *  *  *  *  *  *  *  * ]
Try this instead:
Code: HTML
 
<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" class="c" style="line-height: 0">
<div><iframe frameborder="0" width="130" height="305" src="http://www4.cbox.ws/box/?boxid=4196373&boxtag=45mn52&sec=main" scrolling="auto" name="cboxmain4-4196373" style="border: 1px solid #343434" id="cboxmain4-4196373"></iframe></div>
<div><iframe frameborder="0" width="130" height="75" src="http://www4.cbox.ws/box/?boxid=4196373&boxtag=45mn52&sec=form" scrolling="no" name="cboxform4-4196373" style="border: 1px solid #343434; border-top: 0" id="cboxform4-4196373"></iframe></div>
</div>
Offline Profile Quote Post Goto Top
 
Yuuaku
Member
[ * ]
Amazing! That solved it, thank you so much! Even tho I changed it slightly wider (170px), it's working now. Thank you.

Another problem I got are backgrounds of titles in portal boxes. They look currently like this (attachment added to reply) and I can't remember the code to make those backgrounds 'higher' so the text wouldn't flood over. Thanks already for this too.

//nevermind, I figured it out!
Attached to this post:
Attachments: Untitled.png (9.96 KB)
Edited by Yuuaku, Jul 20 2013, 09:34 AM.
Offline Profile Quote Post Goto Top
 
NettoSaito
Member Avatar
Member
[ *  * ]
Is it possible to align this side bar with the "top" of your actual forum? As in, where the first category starts? I'd rather have it there below the advertisement if possible. Also is there a way to make it so it does not show up on the portal page?

Edit: figured I'd better include a URL

http://forums.nettosgameroom.com/index/
Edited by NettoSaito, Jul 31 2013, 05:27 PM.
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Add this to the bottom of the Theme Layout:
Code:
 
<script type="text/javascript">
//<![CDATA[
if (location.href.indexOf('/site') === -1) {
$('body').addClass('sidebar');
} else {
$('#sidebar').hide();
}
//]]>
</script>
Change the CSS to this:
Code:
 
body.sidebar #sidebar {
padding: 10px;
position: absolute;
width: 150px;
margin-top: 110px;
}

body.sidebar #main > * {
margin-left: 170px !important;
}

body.sidebar #main > table[style*="height:90px"] {
margin-left: 0 !important;
}
Offline Profile Quote Post Goto Top
 
NettoSaito
Member Avatar
Member
[ *  * ]
Thanks Cory, but changing the CSS didn't seem to work; it actually caused it to error...
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
You have to add the JavaScript as well in order for the CSS to take affect.
Offline Profile Quote Post Goto Top
 
NettoSaito
Member Avatar
Member
[ *  * ]
Oh, okay. I just figured that was to block it from showing up on other pages (which I'm still discussing with the others). Well anyway, thanks a lot!

Edit: Actually even with the script, it isn't quite working right. The box not appearing in the portal, but it is appearing on other pages with the forum's default margin. Also when viewing a topic, it is making the reply button appear higher up on the page.
Edited by NettoSaito, Jul 31 2013, 06:07 PM.
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Code:
 
body.sidebar #sidebar {
padding: 10px;
position: absolute;
width: 150px;
margin-top: 99px;
}

#sidebar {
padding: 10px;
position: absolute;
width: 150px;
}

#main {
margin-left: 170px !important;
}
Change that to this:
Code:
 
body.sidebar #sidebar {
padding: 10px;
position: absolute;
width: 150px;
margin-top: 99px;
}

body.sidebar #main > * {
margin-left: 170px !important;
}

body.sidebar #main > table[style*="height:90px"] {
margin-left: 0 !important;
}
Offline Profile Quote Post Goto Top
 
NettoSaito
Member Avatar
Member
[ *  * ]
That was actually my attempt at fixing it. I changed it to the new CSS and it is having the issue once again.
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Code:
 
body.sidebar #main > * {
margin-left: 170px !important;
}

body.sidebar #main > table[style*="height:90px"] {
margin-left: 0 !important;
}
Change that to this:
Code:
 
body.sidebar #main > *, body.sidebar #main > form table {
margin-left: 170px !important;
}

body.sidebar #ads {
margin-left: 0 !important;
}
Code:
 
<script type="text/javascript">
//<![CDATA[
$('td:has(iframe), td:has(script[src*="google"])').css({
'border': '0',
'background': 'none'
});
//]]>
</script>
Change that to this:
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>
Offline Profile Quote Post Goto Top
 
NettoSaito
Member Avatar
Member
[ *  * ]
It's getting closer, but now it just pushes the entire forum to the right... Would it just be easier to block it from showing up on any page other than the main page?
Edited by NettoSaito, Jul 31 2013, 06:43 PM.
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Code:
 
$('#main table:not(#ads)').width($('#main').width() - 170);
Add that with the rest of the JavaScript.
Offline Profile Quote Post Goto Top
 
NettoSaito
Member Avatar
Member
[ *  * ]
Okay, so there's just one issue that seems to remain... If you view a topic with more than one page (for example http://forums.nettosgameroom.com/topic/8773204/8/#new) the reply button floats above the forum higher than it should. Also the page numbers at the bottom are lower than they would normally be.

Also the reply page itself/new topic page is still pushed to the right, and the emoticon box is sort of messed up... Maybe I will just block the side bar from every page besides the index. Is there a way to do so?

Edit: Actually, could I just flat out block it from the posting page? It really doesn't need to show up there anyway.
Edited by NettoSaito, Jul 31 2013, 06:56 PM.
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Code:
 
body.sidebar #ads {
margin-left: 0 !important;
}
Change that to this:
Code:
 
body.sidebar #ads, body.sidebar #main > ul.cat-pages, body.sidebar #main > div[class*="buttons"] {
margin-left: 0 !important;
}

body.sidebar #main > ul.cat-pages {
position: relative;
left: 170px;
}
Code:
 
if (location.href.indexOf('/site') === -1) {
Change that to this:
Code:
 
if (location.href.indexOf('/site') === -1 && location.href.indexOf('/post') === -1) {
Offline Profile Quote Post Goto Top
 
NettoSaito
Member Avatar
Member
[ *  * ]
And, it seems everything is now working as it should! Thank you very much Cory!
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
  • 6
  • 17