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,714 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
[ *  *  *  *  *  *  *  *  * ]
Kankuro: Each AJAX request loads an additional page in the background to grab the requested content. It appears your board is currently using minimal AJAX based on the page source. Each time a page is loaded, it consumes more bandwidth, which is what keeps building up the money needed to keep the servers running.

Gustavo12999: Place the following HTML in the sidebar code and put the following script at the very bottom of the Theme Layout for the theme you want to apply the script to.
Code: HTML
 
<div id="latest" class="portal_box"><h2>Latest Posts</h2></div>
Code:
 
<script type="text/javascript">
//<![CDATA[
(function($) {
var amount = '5';
if (location.href.indexOf('/site') === -1 && location.href.indexOf('/search/?c=5') === -1) {
$.get(main_url + 'search/?c=5&force_ads', function(data) {
$('tr[class*="row"]:lt(' + amount + ')', data).each(function() {
$(this).find('td.c_cat-title:eq(0) > 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: ');
});
$.get(location.href);
});
}
})(jQuery);
//]]>
</script>
Code:
 
#stats, #sbx {
margin-right: -220px
}
That snippet of CSS will stretch the board statistics and shoutbox back across the page, but it may overflow into the sidebar content due to the way the sidebar is coded.
Offline Profile Quote Post Goto Top
 
Gustavo12999
Member
[ * ]
WOOOOW, awesome! Ty very much, cory!
Offline Profile Quote Post Goto Top
 
Kankuro
Member Avatar
かんくろ
[ *  *  *  *  * ]
So what all are you able to do from my request if I approve for it?
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
All of them are possible, but would require 5 different AJAX requests and that's excluding grabbing the staff member's avatar.
Offline Profile Quote Post Goto Top
 
Kankuro
Member Avatar
かんくろ
[ *  *  *  *  * ]
Cory
Dec 15 2014, 06:37 PM
All of them are possible, but would require 5 different AJAX requests and that's excluding grabbing the staff member's avatar.
Would you mind doing it for #1-4? The statuses aren't a big deal and can that off with other codes.
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Do you have a sidebar setup currently, or do you want me to give you the coding needed to set it up with all the expected features in one bundle?
Offline Profile Quote Post Goto Top
 
Kankuro
Member Avatar
かんくろ
[ *  *  *  *  * ]
Cory
Dec 15 2014, 09:59 PM
Do you have a sidebar setup currently, or do you want me to give you the coding needed to set it up with all the expected features in one bundle?
Umm, I have css added to my sidebar but that's about it.

Code:
 

/* All of this is for the Sidebar*/

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

div.index {
margin-left: 170px !important;
}

#sidebar h2 {
background: url(http://z4.ifrm.com/30530/7/0/f5042443/sidebarh2.png) no-repeat!important;
height: 35px;
text-align: center;
}

div.portal_content {
background: url('http://z4.ifrm.com/30326/159/0/p1094562/table.png') repeat-x scroll center top #0F0F0F;
padding: -1px!important;
margin-top: -7px;
text-align: center;
}

#sidebar .portal_box {
margin-bottom: 50px;
}
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Ensuring you're using the sidebar CSS, try using the following coding:

HTML:
Code:
 
<div id="sidebar">
<div id="portal">
<div class="portal_box">
<h2>Site News</h2>
<div id="s_news" class="portal_content"></div>
</div>
<div class="portal_box">
<h2>Anime News</h2>
<div id="a_news" class="portal_content"></div>
</div>
<div class="portal_box">
<h2>Gaming News</h2>
<div id="g_news" class="portal_content"></div>
</div>
</div>
</div>
JavaScript:
Code:
 
<script type="text/javascript">
//<![CDATA[
$.get(main_url + 'forum/4056164/?force_ads', function(data) {
var title = $('td.c_cat-title:eq(0) > a', data).text();
var href = $('td.c_cat-title:eq(0) > a', data).attr('href');
$('#s_news').append('<a href="' + href + '">' + title + '</a>');
});

$.get(main_url + 'forum/4056628/?force_ads', function(data) {
var title = $('td.c_cat-title:eq(0) > a', data).text();
var href = $('td.c_cat-title:eq(0) > a', data).attr('href');
$('#a_news').append('<a href="' + href + '">' + title + '</a>');
});

$.get(main_url + 'forum/4060023/?force_ads', function(data) {
var title = $('td.c_cat-title:eq(0) > a', data).text();
var href = $('td.c_cat-title:eq(0) > a', data).attr('href');
$('#g_news').append('<a href="' + href + '">' + title + '</a>');
});
//]]>
</script>
There's option #2 through #4 for starters. I will add on option #1 once you've fully tested these to see if they work properly.
Offline Profile Quote Post Goto Top
 
Kankuro
Member Avatar
かんくろ
[ *  *  *  *  * ]
Okay, 2 issues I've noticed so far.

If the title is longer than the box is goes outside of the box. I'd rather the title either apply a horizontal scroll bar when it overflows or at least display like this:
Title = Hello, My Name Is Kankuro And This Is A Sidebar Code
Displays like this = Hello, My Name Is ...

And issue 2 is that the index only code isn't working anymore.
Screenshot: http://prntscr.com/5hqqdk


If you need to see it then go to my test board, you have an account on it already.
Edited by Kankuro, Dec 17 2014, 01:19 AM.
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
The title doesn't go outside of the box for me, it just overflows onto the next line: http://i.imgur.com/2Eqs0FD.png

Or, are you referring to the H2 and not the content area?

Change this:
Code:
 
<script type="text/javascript">
if (location.href.indexOf('/index') !== -1) {
$('#main').addClass('index');
}
</script>
To this:
Code:
 
<script type="text/javascript">
if (location.href.indexOf('/index') !== -1) {
$('#main').addClass('index');
} else {
$('#sidebar').hide();
}
</script>
Offline Profile Quote Post Goto Top
 
Kankuro
Member Avatar
かんくろ
[ *  *  *  *  * ]
Cory
Dec 17 2014, 05:36 AM
The title doesn't go outside of the box for me, it just overflows onto the next line: http://i.imgur.com/2Eqs0FD.png

Or, are you referring to the H2 and not the content area?

Change this:
Code:
 
<script type="text/javascript">
if (location.href.indexOf('/index') !== -1) {
$('#main').addClass('index');
}
</script>
To this:
Code:
 
<script type="text/javascript">
if (location.href.indexOf('/index') !== -1) {
$('#main').addClass('index');
} else {
$('#sidebar').hide();
}
</script>
http://prntscr.com/5hwctj

Now that I think about it, it's probably because of the long series of numbers with no space, but even this could potentially cause issues in the future. A fix would be great but not really needed as I don't think there will be massive words like this used often.

2nd error is fixed.
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Find this strip in your CSS:
Code:
 
div.portal_content {
background:#0a0a0a;
border:2px solid #0a0a0a;
font-size:88.3%;
margin:0;
padding:5px 7px;
color:#fff;
}
Add this before the ending curly bracket:
Code:
 
word-wrap: break-word;
Offline Profile Quote Post Goto Top
 
Kankuro
Member Avatar
かんくろ
[ *  *  *  *  * ]
Cory
Dec 17 2014, 10:53 PM
Find this strip in your CSS:
Code:
 
div.portal_content {
background:#0a0a0a;
border:2px solid #0a0a0a;
font-size:88.3%;
margin:0;
padding:5px 7px;
color:#fff;
}
Add this before the ending curly bracket:
Code:
 
word-wrap: break-word;
Great!
Now I just need #1 (Staff Online) and it's finished. :D
Offline Profile Quote Post Goto Top
 
Strifefox
Member Avatar
Tú Eres Pirata!
[ *  * ]
Okay so I hate to pester you, but I got two things to ask about. The first is this:

The code you gave me to fix the sidebar so that it fits on the forum rather than breaking out of it isn't working 'entirely' like it fits but it pokes out by about 5 pixels or so at the bottom. not a problem and it's only on one of the two themes our site has which is called Ledger. It worked originally but now it's not and the only thing I changed was adding information onto the sidebar sections. I don't know if I need to alter a number or something since i added my own new category to it to expand it.

Secondly, I want to widen it to 200px across. However, doing so makes it overlap the forum instead of just nudging the forum over a little to make room for it. I would like to keep the blank space between the forum and the sidebar as well but it just eats that space up rather then widening itself and pushing everything out of its way. Can that be done?
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Kankuro: So basically it only needs to dictate if these users are online or not?

Strifefox: It may just need a function wrapped around it so it will load when the page has fully loaded:
Code:
 
<script type="text/javascript">
$(document).ready(function() {
$('#main').css('min-height', $('#sidebar').height() + 'px');
});
</script>
If you increase the width by 40 pixels, this needs to be increased by 40 pixels as well:
Code:
 
#main {
margin-left: 170px !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