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,724 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
[ *  *  *  *  *  *  *  *  * ]
Remove this sidebar code and add the following coding.

Admin CP Posted Image Themes Posted Image Board Template Posted Image Javascripts
Code:
 
<style type="text/css">
div.margin {
margin-left: 220px !important;
}
</style>
Admin CP Posted Image Themes Posted Image Board Template Posted Image Below the Board
Code:
 
<script type="text/javascript">
(function ($) {
var amount = '5';
var amount2 = '5';

if (location.href.indexOf('/site') < 1 && location.href.indexOf('/search/?c=5') < 1) {
$('#main').before('<div id="sidebar" style="padding: 10px; width: 200px; position: absolute"><div id="portal"><div id="latest" class="portal_box"><h2>Latest Posts</h2></div><div></div>');
$('#main').addClass('margin');

$.get(main_url + 'search/?c=5', function (data) {
$('tr[class*="row"]:lt(' + amount + ')', data).find('td.c_cat-title > a, td.c_cat-lastpost a, td.c_cat-replies a').appendTo('#latest');

$('#latest a[href*="/topic"]').wrap('<h4 />');
$('#latest a[rel]').each(function () {
$(this).next('a[href*="/profile"]').andSelf().wrapAll('<div class="portal_content" />');
var next = $(this).next('a[href*="/profile"]')
$(this).insertAfter(next).before('<br />Replies: ');
});
});
}

$('#sidebar #portal').append('<div class="portal_box"><h2>Latest Profile Comments</h2><div class="portal_content"><table id="nComments"></table></div></div><div class="portal_box"><h2>Latest Status Updates</h2><div class="portal_content"><table id="status"></table></div></div>');

$.get(main_url + 'stats/status_updates', function (data) {
$('#status_updates tr:lt(' + amount2 + '):not(:eq(0))', data).appendTo('#status');
$.get(location.href);
});
})(jQuery);
</script>
Change the number in the 'var amount' line to the number of latest posts you want to display, and change the number in the 'var amount2' line to the number of latest status updates you want to display.

This code uses quite a bit of AJAX.
Offline Profile Quote Post Goto Top
 
DarkGizmo-ZNR
Member Avatar
Who ate all the pecan sandies?
[ * ]
Great! Can it be moved to the right side instead of the left? also would it be possible to have a 'hide' option? like a button a user can click and it colapses into the side/hides if they don't want it shown?
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Change 'margin-left' to 'margin-right' and insert '; right: 25px' after this:
Code:
 
padding: 10px; width: 200px; position: absolute
That will put the sidebar on the right side.

Sorry, I'm not sure how to add a legit toggle function because I don't know cookies very well and to make it work correctly would require cookies.
Offline Profile Quote Post Goto Top
 
DarkGizmo-ZNR
Member Avatar
Who ate all the pecan sandies?
[ * ]
That worked but it goes over a bit too much see here.

Edit: I tried a few things but what looks good on one skin looks bad on others. How can I get it to fit nicely next to the board and it look good on all skins without any big gaps between the two or overlapping?
Edited by DarkGizmo-ZNR, Apr 23 2012, 01:09 AM.
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
You'll have to change the right pixel number in Edit Theme Appearance for each theme:
Code:
 
#sidebar {
right: #px !important;
}
Change the number sign to the number (in pixels) till the sidebar is in the position you desire, do this for each theme.
Offline Profile Quote Post Goto Top
 
DarkGizmo-ZNR
Member Avatar
Who ate all the pecan sandies?
[ * ]
Got it, That worked. :) Is there a way to make it only show on the INDEX and no other pages?
Edited by DarkGizmo-ZNR, Apr 23 2012, 09:22 PM.
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Code:
 
if (location.href.indexOf('/index') !== -1) {
Add that after the starting script tag.
Code:
 
}
Add that before the ending script tag.
Offline Profile Quote Post Goto Top
 
DarkGizmo-ZNR
Member Avatar
Who ate all the pecan sandies?
[ * ]
Cool thanks. :) Worked great.
Offline Profile Quote Post Goto Top
 
andAshes
Member Avatar
Member
[ * ]
Any way to move the position of the side bar? I want to align it so that it fits nicely under the banner and beside the area where the forums itself start.

Here's the link. It's under the skin Checkered Floor. This is only a test forum for the real forum, I'm just doing it here so the main forum doesn't look cluttered.

Thanks xD I read through the pages but couldn't find what I was looking for.
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
You just need to add a margin to the #sidebar strip to put it in the proper place:
Code:
 
margin: 130px 0 0 50px;
Offline Profile Quote Post Goto Top
 
MissImpossible
Member Avatar
Member
[ * ]
So, I installed the sidebar and I have a problem in that the sidebar looks great on any page where the length of the content exceeds the length of the sidebar. However, if the content of the page is short, then the sidebar kind of floats beyond the footer and stretches the page down beyond the footer.

How do I stop it from doing this and keep the footer as the consistent 'bottom' of all the pages?
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Code:
 
<script type="text/javascript">
(function ($) {
var sidebarHeight = $('#sidebar').height();
$('#main').css('min-height', sidebarHeight + 'px');
})(jQuery);
</script>
Place that at the bottom of the theme layout that has the sidebar installed.
Offline Profile Quote Post Goto Top
 
MissImpossible
Member Avatar
Member
[ * ]
Thank you for the code, but it doesn't seem to be working. It's still unfortunately happening :(

I stuck this in Admin CP / Board Themes / Edit Theme Layouts at the bottom. My code looks like this (the only edit being I took the elements out of my sidebar to save confusion)

Spoiler: click to toggle


Is there something I have done wrong or missed? I am definitely not much more than a n00b at this :(
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
I just tested your theme layout on my test board and it seemed to work fine for me, can I see a link to your board (via PM will be fine)?
Offline Profile Quote Post Goto Top
 
Seiyoku
Member Avatar
Member
[ * ]
Hello,
I'm having the same issue as the person before me. I added in the extra section of code you offered. It did work, but not in an ideal way. What it did was push the rest of the topics all the way down to the end of the sidebar, so there was a really large space. It happens to any forums with subforums. I tried moving the extra code as I first had it at the very bottom of the theme layout but if I put it anywhere else (up near the sidebar code etc) then it made no changes at all.

The odd thing is that when I log out and view the board as a guest, then it all looks fine.

I took some screencaps.

It all looking fine as a guest Guest
The same page, just logged in. Logged in

Here is the (messy) code I have in the theme layout.

Code:
 
<div align="center"><div id="random"><div id="logoarea"><div id="logoright"><img src="http://i2.ifrm.com/7623/42/upload/p777216.gif" alt="" /><span id="links">

</span></div></div><div id="main_c">

<div id="wrap"><!-- TOPMENU --><!-- NAV -->

<div id="sidebar">
<div id="portal">
<div class="portal_box">
<h2>Welcome to The Stand</h2>
<div class="portal_content">
Welcome to The Stand: A Zombie based RP set in a realistic, modern day Tokyo. <p>

We accept muses from Japan, Korea and China and they do not have to be music based. Actors and celebrities are more than welcome. <p>

Please make sure you read all the rules and information given before signing up and if you have any questions don’t hesitate to contact a mod.
</div>
</div>
<div class="portal_box">
<h2>Navigation</h2>
<div class="portal_content">

<center>--> <a href="http://s4.zetaboards.com/The_Stand/topic/8348040/">The Premises</a><br>
--> <a href="http://s4.zetaboards.com/The_Stand/topic/8319251/">Rules</a><br>
--> <a href="http://s4.zetaboards.com/The_Stand/topic/8348039/">Immortal vs Mortal Concept</a><br>
--> <a href="http://s4.zetaboards.com/The_Stand/topic/9691014/">What you need to know about Japan</a><br>
--> <a href="http://s4.zetaboards.com/The_Stand/topic/8319154/">Claims List</a><br>
--> <a href="http://s4.zetaboards.com/The_Stand/topic/8319506/">Blank Survivor Application</a><br>
--> <a href="http://s4.zetaboards.com/The_Stand/topic/8348059/">Blank Zombie Application</a><br>
--> <a href="http://s4.zetaboards.com/The_Stand/topic/8405873/">Bulletin Board History</a><br></center>

</div>
</div>
<div class="portal_box">
<h2>Your Mod Team</h2>
<div class="portal_content">Content</div>
</div>
<div class="portal_box">
<h2>Weather Forecast</h2>
<div class="portal_content"><br>
<center><img src="http://img.photobucket.com/albums/v62/Minka_g/rpgs/stand/tokyo.png" border="0" alt="Photobucket"><p></center>
<b>Date: </b>November 25th
<br><b>High: </b> 16 degrees
<br><b>Low: </b> 9 degrees
<br><b>Rainy/Snow Days: </b> 25%
<p>Your friendly weather girl recommends light layers with a light to medium jacket to keep the chill off. A scarf at night wouldn’t go astray and for the ladies, it’s time to start embracing tights, thigh high socks and boots.
<br>Of course, be wary of your step as those once beautiful Autumn leaves are making the pavement rather slippery.

</div>
</div>
<div class="portal_box">
<h2>Thread of the Week!</h2>
<div class="portal_content"><center>Coming Soon</center></div>
</div>
<div class="portal_box">
<h2>Survivor of the Month!</h2>
<div class="portal_content"><center>Coming Soon</center></div>
</div>

</div>
</div>

<!-- BOARD --></div>
</div></div></div>

<script type="text/javascript" src="http://z3.ifrm.com/197/177/0/p86186/th2.js"></script>
<script type="text/javascript">
//<![CDATA[
$(function() {
$("canvas").remove();
$("#ucp_gallery a").corner("5px");
$("#copyright").appendTo("#wrap");
$("#copyright").append('<br />Augeas by <a href="http://s2.zetaboards.com/ifskinzone"><b>Nephos</b></a>');
});
//]]>
</script>

<script type='text/javascript'><!--
// Submenu links
var home = "http://s4.zetaboards.com/The_Stand/index/"
document.getElementById('links').innerHTML = "<a href='" + home + "site/'><img src='http://i2.ifrm.com/7623/42/upload/p857128.gif' alt='Portal' /></a><img src='http://i2.ifrm.com/7623/42/upload/p857248.gif' alt='' /><a href='" + home + "faq/'><img src='http://i2.ifrm.com/7623/42/upload/p857143.gif' alt='Help' /></a><img src='http://i2.ifrm.com/7623/42/upload/p857248.gif' alt='' /><a href='" + home + "search/'><img src='http://i2.ifrm.com/7623/42/upload/p857151.gif' alt='Search' /></a><img src='http://i2.ifrm.com/7623/42/upload/p857248.gif' alt='' /><a href='" + home + "members/'><img src='http://i2.ifrm.com/7623/42/upload/p857164.gif' alt='Members' /></a><img src='http://i2.ifrm.com/7623/42/upload/p857248.gif' alt='' /><a href='" + home + "calendar/'><img src='http://i2.ifrm.com/7623/42/upload/p857175.gif' alt='Calendar' /></a>"

// --></script>

<script type="text/javascript">
(function ($) {
var sidebarHeight = $('#sidebar').height();
$('#main').css('min-height', sidebarHeight + 'px');
})(jQuery);
</script>


Any ideas or suggestions? I really love this code and want to keep it if possible.
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