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,718 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:
polocolo
Member Avatar
Member
[ *  *  * ]
GodzillaV2, if you're using the code provided to me by Cory above, change 317px to whatever number that fits your site layout.

<div id="sidebar" style="margin-top: 317px">
Cory, after implementing the above no matter how much I adjusted the variable the side bar goes up to the very top. However, I want it to go below the recent update table…

Here is the screenshot when the index page is viewed as a member:

Spoiler: click to toggle


When the index page is viewed as a guest:

Spoiler: click to toggle


I put the code on my test board

I probably need 2 variables (to fix the px from margin-top), one for members and one for guests.
Edited by polocolo, Jul 14 2014, 11:30 AM.
Offline Profile Quote Post Goto Top
 
GodzillaV2
Member
[ *  * ]
Didn't seem to work after i tried
GodzillaV2
Jul 14 2014, 09:40 AM
One problem, the sidebar seems to go on the bottom of the board index,any way to fix this?

Posted Image
How come its on the bottom but not top?
Edited by GodzillaV2, Jul 15 2014, 05:30 AM.
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
polocolo: Here's how to set a different top margin for guests and members:
Code:
 
if ($.zb.logged_in === false) {
$('#sidebar').css('margin-top', '317px'); // Guest
} else {
$('#sidebar').css('margin-top', '317px'); // Member
}
GodzillaV2: Can you post your theme layout with the sidebar code added? Did you add the CSS?
Offline Profile Quote Post Goto Top
 
polocolo
Member Avatar
Member
[ *  *  * ]
I don't know what happened while the code works fine on my test board but on my actual Site it pushed everything to the right.

EDIT: Sorry, I made an error. :cry: now fixed. :D

EDIT: Members of our Forum love the side bar. All thanks to you.
Edited by polocolo, Jul 15 2014, 07:00 PM.
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
The ending script tag is missing:
Code:
 
<script type="text/javascript">
$('#logo a').html('<img src="http://ww4.sinaimg.cn/large/a4a703c4gw1eidsnhriqhj20sg0b4n14.jpg" alt="Logo" />');

function addLogo(forumID, imageURL) {
if ($('#nav a[href*="/forum/' + forumID + '"]').length || location.href.indexOf('/forum/' + forumID + '') !== -1) $('#logo a').html('<img src="' + imageURL + '" alt="Logo" />');
}

addLogo('3370294', 'http://ww2.sinaimg.cn/large/a4a703c4gw1eidso1rqjhj20sg0b4tcv.jpg');


addLogo('3370599', 'http://ww1.sinaimg.cn/large/a4a703c4gw1eidsnlij28j20sg0b4gpt.jpg');


addLogo('3371638', 'http://ww4.sinaimg.cn/large/a4a703c4gw1eidsnelso4j20sg0b4why.jpg');


addLogo('3376830', 'http://ww3.sinaimg.cn/large/a4a703c4gw1eidso4lgz7j20sg0b4gp0.jpg');


addLogo('3385495', 'http://ww4.sinaimg.cn/large/a4a703c4gw1eidso7lud4j20sg0b4dk5.jpg');
Offline Profile Quote Post Goto Top
 
GodzillaV2
Member
[ *  * ]
Cory
Jul 15 2014, 05:37 PM
polocolo: Here's how to set a different top margin for guests and members:
Code:
 
if ($.zb.logged_in === false) {
$('#sidebar').css('margin-top', '317px'); // Guest
} else {
$('#sidebar').css('margin-top', '317px'); // Member
}
GodzillaV2: Can you post your theme layout with the sidebar code added? Did you add the CSS?
I got it fixed myself ^_^
Offline Profile Quote Post Goto Top
 
polocolo
Member Avatar
Member
[ *  *  * ]
For some reason when I first logged on as a member the side bar would go up a bit. Only after I refresh the page the side bar would align correctly. I thought could it be the set up of the guest code but then the side bar under the guest code should be much lower because of the advertisement bar. However, when I logged out as a guest the side bar is aligned properly without the need of a page refresh.

Spoiler: click to toggle


EDIT: I found out only Safari and iPad have that problem. It works fine on Chrome.
Edited by polocolo, Jul 16 2014, 10:07 PM.
Offline Profile Quote Post Goto Top
 
GodzillaV2
Member
[ *  * ]
Cory
Jul 15 2014, 05:37 PM
polocolo: Here's how to set a different top margin for guests and members:
Code:
 
if ($.zb.logged_in === false) {
$('#sidebar').css('margin-top', '317px'); // Guest
} else {
$('#sidebar').css('margin-top', '317px'); // Member
}
GodzillaV2: Can you post your theme layout with the sidebar code added? Did you add the CSS?
Ok, i just noticed that when i enter a section of the forum, the sidebar is all malfunctioned and its on the very top of the page.

Theme Layout

Code:
 
<script type='text/javascript'>

/* Created by HolySavior of iFusion
Hows My Post v1 ZB
This may not be Edited at all!
*/
function word_count() {
var post_words = document.forms['posting'].post.value.split(/ /g); var count = 0;
for(i=0;i<post_words.length;i++) if(post_words[i].length > 2) count++;

var iObj = document.getElementById('count');
iObj.innerHTML = "<table><tr><td><div id='status_bar_holder' class='postbar'><div id='status_bar' style='width: "+count + "%;' class='innerbar'></div></div></td><td>"+ count+" words over 3 letters</td></tr></table>";
if(count >= 40){ iObj.innerHTML += "<span class='howspost'>Hows My Post? </span><span style='color:#308014'> Excellent Post!</span>";
}else if (count >=10){ iObj.innerHTML += "<span class='howspost'>Hows My Post? </span><span style='color:#308014'> Good Post!</span>";
} else if(count < 10){ iObj.innerHTML += "<span class='howspost'>Hows My Post? </span>You can do better than that!";
}
}

function check_count(){
var post_words = document.forms['posting'].post.value.split(/ /g); var count = 0;
for(i=0;i<post_words.length;i++) if(post_words[i].length > 2) count++;
if(count < 6){
return confirm("Post Length Alert!!\r\n\r\nYour post has only " + count + " words with over three letters. Are you sure you want to add it?");
}
}

var hows_my_post = {
init: function(){
if(location.href.match(/post/) || location.href.match("msg")){
document.getElementById("c_post").innerHTML += "<br/><div id='count'><span class='howspost'>Hows My Post? </span></div>";
}

if(document.forms['posting']){
if(document.getElementById('count') )

document.forms['posting'].post.onkeyup = function(){ word_count(); }
if(location.href.match("mode=")){
document.forms['posting'].post_submit.onclick = function(){ return check_count(); }
}
if(location.href.match("msg")) {
document.forms['posting'].submit.onclick = function(){ return check_count(); }
}
}
}
};

</script>

<!-- TOPMENU -->
<div id="main_content">

<div id="top_center_border">
<div id="top_left_border"></div>
<div id="top_right_border"></div>
</div>

<div id="left_border">
<div id="right_border">
<!-- HEADER -->
<div id="wrap">
<div id="submenu_wrap">
<!-- SUBMENU -->
</div>



<!-- NAV -->
<!-- BOARD -->


<script type='text/javascript'>
hows_my_post.init();
</script>


</div>
</div>
</div>

<div id="bottom_center_border">
<div id="bottom_left_border"></div>
<div id="bottom_right_border"></div>
</div>


<div align="center"><div class='img-container'>
<img src='http://i.imgur.com/L4hnVKH.png'/>
</div>
<p>
<div align="center">©2011-2014 WGE Universe All Rights Reserved. All WWE and TNA televised, live programming, talent names, images, likenesses, slogans, and all WWE and TNA logos are trademarks which are the exclusive property of WWE Inc. and TNA Entertainment LLC. All other trademarks are the property of their respective owners. This site is being used under fair copyright law 107. No copyright infringement is intended. Copyright WGE Universe 2014.</div>
<p>
<small><div align="center">Theme Designed by <a href="http://www.ericmckee.blogspot.com/" target="_blank">McKee91</a> and <a href="http://resources.zetaboards.com/profile/2029876/" target="_blank">Lout</a> of <a href="http://resources.zetaboards.com/index/" target="_blank">ZNR</a></div></small>

<script type="text/javascript" src="http://z1.ifrm.com/0/2/0/p401504/3h2.js"></script>
<script type="text/javascript">
//<![CDATA[
$(function() {
ff=(navigator.userAgent.indexOf("Firefox")!=-1)?" style='position:relative;left:-1px'":"";
$(".category td.c_foot").append('<div class="foot_left"'+ff+'></div><div class="foot_right"></div>');
$("#stats td.c_foot .right").prependTo("#stats .foot_right");
$("blockquote dl dt:contains('Code:')").parent("dl").addClass("code_dl");
});
//]]>
</script>

<script type="text/javascript">
if (location.href.indexOf('/index') !== -1) {
$('#main').addClass('margin');
} else {
$('#sidebar').remove();
}
</script>






<div id="sidebar" style="margin-top: -2430px">
<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>Promo</h2>
<div class="portal_content"><A HREF="http://s4.zetaboards.com/WGEUniverse/index/"><img src="http://i.imgur.com/nV9b7L9.jpg"></A></div>
</div>
<div class="portal_box">
<h2>Did you know?</h2>
<div class="portal_content">Sticky has a record-breaking 47 championships in a span of 8 GFX-Leagues.</div>
</div>
</div>
</div>

<script type="text/javascript">
if (location.href.indexOf('/index') === -1) {
$('#wrap').addClass('noIndex');
}
</script>
Edited by GodzillaV2, Jul 16 2014, 08:56 AM.
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
polocolo: So it's only an issue as a member and for Safari?

GodzillaV2: Remove the style attribute:
Code:
 
<div id="sidebar" style="margin-top: -2430px">
Move the sidebar HTML above the <!-- BOARD --> tag.
Offline Profile Quote Post Goto Top
 
GodzillaV2
Member
[ *  * ]
Not only does it come on every page now, but it has streched out even further.

Posted Image
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
The sidebar DIV start tag was removed:
Code:
 
<div id="sidebar">
Offline Profile Quote Post Goto Top
 
GodzillaV2
Member
[ *  * ]
Did that. Now the side bar isnt to the left but on the forum instead

Posted Image
Edited by GodzillaV2, Jul 19 2014, 12:04 AM.
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Code:
 
#sidebar {
padding: 100px;
position: absolute;
width: 170px;
}
Remove the padding line.
Offline Profile Quote Post Goto Top
 
GodzillaV2
Member
[ *  * ]
Yay its fixed, thanks.
Any way to not allow guests to view the side bars?
Edited by GodzillaV2, Jul 19 2014, 11:55 PM.
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Code:
 
<script type="text/javascript">
if ($.zb.logged_in === false) {
$('#wrap').addClass('noGuest');
}
</script>
Add that to the bottom of your Theme Layout.

Change this:
Code:
 
div.noIndex #sidebar {
display: none;
}

div.noIndex #main {
margin-left: 0 !important;
}
To this:
Code:
 
div.noIndex #sidebar, div.noGuest #sidebar {
display: none;
}

div.noIndex #main, div.noGuest #main {
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