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,725 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
[ *  *  *  *  *  *  *  *  * ]
If you change #main (the CSS you added) to div.margin and add the following JavaScript it will create a 'Toggle Sidebar' button that will expand and collapse the sidebar.
Code:
 
<script type='text/javascript'>
if (location.href.match('/post/')) {
$('input[name=show_edit]').attr('checked', false);
}

$('#sidebar').before('<button id="sidebar_toggle" style="margin-left: 1%">Toggle Sidebar</button>');
$('#main').addClass('margin');

$('#sidebar_toggle').click(function () {
$('#sidebar').toggle(function () {
if ($('#main.margin').length) {
$('#main').removeClass('margin');
} else {
$('#main').addClass('margin')
}
});
});
</script>
Offline Profile Quote Post Goto Top
 
Inaree-ZNR
Member Avatar
Member
[ * ]
I would like the sidebar navigation code for my forums. I've searched this site and others in an attempt to find one that worked with my board...but to no avail.

Is this a problem with the table I have located at the top of the site? Is there any code that would allow me to keep both?

My board can be found here: http://w11.zetaboards.com/Radiant_Glory/index/ (Select the "test theme" at the bottom to view my specific issue)

And the code I would like to imitate is here: http://s1.zetaboards.com/rs_iucc/index/ (It's been posted on this thread already)

Please help! Thanks in advance to those saints that help me understand what I'm doing!

I'm sorry if this should be simple, I'm not..trained in HTML or coding, what I know I've learned on my own.
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
I'm not quite sure what your issue is. The sidebar appears normally on your test theme for me. Is it that you want to make it look like the sidebar on the other board you linked to?
Offline Profile Quote Post Goto Top
 
Inaree-ZNR
Member Avatar
Member
[ * ]
Cory
Feb 2 2012, 07:06 AM
I'm not quite sure what your issue is. The sidebar appears normally on your test theme for me. Is it that you want to make it look like the sidebar on the other board you linked to?
Yes. Is that just the theme they're using?

Or how could I achieve this? :(
Offline Profile Quote Post Goto Top
 
Chronicler0781
Member
[ * ]
Hi Cory, I'm trying to make the sidebar collapsable based on the code you most recently put up, but I seem to be having issues.

I replaced the text "#main" with "div.margin" in the CSS like you said, and added the other code to the javascripts section, but it didn't necessarily make it collapsable, rather like the screenshot uploaded below.

Any help would be greatly appreciated. ^_^

~Chronicler

Attached to this post:
Attachments: helpimage.png (449.7 KB)
Offline Profile Quote Post Goto Top
 
Pando
Member Avatar
Member
[ *  *  *  *  *  * ]
Try adding the Javascript code after the sidebar HTML. Javascript needs to come after all the HTML that it manipulates, because if it came before then it would load before the HTML itself loaded, and do nothing.
Offline Profile Quote Post Goto Top
 
Chronicler0781
Member
[ * ]
Thank you, it's working now. I just had to do what you said, and switch div.margin back to #main. (for some reason, it worked) ^_^

Also, would there be an easy way to include some text (manually put in; for example, the last time the side bar was updated) that would appear when the side bar is collapsed?

Edit: I actually answered my question above a second ago, so no need to respond. =)
Edited by Chronicler0781, Feb 26 2012, 09:51 PM.
Offline Profile Quote Post Goto Top
 
shezse-ZNR
Member Avatar
Designer
[ * ]
I wanna use this CODE called "Sidebar" and yeah it's working but I have a problem.. Look at this PREVIEW...

I can't understand why the Sidebar is like this.. and I don't know if this codes conflicting in the codes of Latest Post by Cory

please help me fix this problem.. need it badly...


Additional problem:
But when I put the code below the NAV and above the BOARD, the sidebar will be covered with the LATEST DISCUSSION Box...
Edited by shezse-ZNR, Apr 20 2012, 09:48 AM.
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
If you're using my latest posts in sidebar code it will already add a sidebar to your board, so you don't need to add a new one, you can simply add content to the current sidebar, for example:
Code:
 
<script type="text/javascript">
$('#sidebar #portal').prepend('<div class="portal_box"><h2>Title</h2><div class="portal_content">Content</div></div>');
</script>
Offline Profile Quote Post Goto Top
 
Joshua J
Member Avatar
Member
[ *  *  * ]
How do i put text that direct links to a page example blog < when u click it it takes u to the blog?
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
With an HTML hyperlink:
Code:
 
<a href="URL">TEXT</a>
Offline Profile Quote Post Goto Top
 
Joshua J
Member Avatar
Member
[ *  *  * ]
any way to add color to the text in the content boxes?
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
With a span:
Code:
 
<span style="color: #HEX">TEXT</span>
#HEX can be a valid hexadecimal or color name.
Offline Profile Quote Post Goto Top
 
shezse-ZNR
Member Avatar
Designer
[ * ]
Oh! Thanks Cory! Really Nice Work!!!!

+1rep
Edited by shezse-ZNR, Apr 20 2012, 09:49 PM.
Offline Profile Quote Post Goto Top
 
DarkGizmo-ZNR
Member Avatar
Who ate all the pecan sandies?
[ * ]
Hey Cory can you get your sidebar to do the following things:
-Appear on the right instead of the left
-Latest Status updates shown from users
-Latest posts
-Latest comments (from ZBComments v2)

Thanks!
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