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,719 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
[ *  *  * ]
The above code doesn't work. Nothing happened after I installed the code. Also, as addressed in post #117 for some reason the side bar appeared on the left hand side of my banner. Please refer to below image:

Posted Image
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Can you post your theme layout, please?
Offline Profile Quote Post Goto Top
 
polocolo
Member Avatar
Member
[ *  *  * ]
Do you mean the CSS? Here it is

Spoiler: click to toggle
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
That's the Edit Theme Appearance coding, I need the Edit Theme Layout coding.
Offline Profile Quote Post Goto Top
 
polocolo
Member Avatar
Member
[ *  *  * ]
I put the code at the bottom above. Here it is again:

Spoiler: click to toggle
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Code:
 
div.noIndex #sidebar {
display: none;
}

div.noIndex #main {
margin-left: 0 !important;
}
Add that to your CSS.

Change your theme layout to this:
Code:
 
<!-- TOPMENU --><!-- HEADER --> <div id="submenu_bar"></div>
<div id="submenu">
<a href="http://www.wallacehuo.info">Homepage</a>
<a href="https://www.facebook.com/WallaceHuoInfo">Facebook</a>
<a href="http://www.weibo.com/WallaceHuoInfo">Weibo</a>
<a href="http://www.wallacehuoforum.info/boardrules/">Board Rules</a>
<a href="http://wallacehuoforum.info/pages/faq/">FAQ</a>
<a href="http://wallacehuoforum.info/search/">Search</a>
</div><div id="wrap"><!-- NAV -->

<div id="sidebar" style="margin-top: 317px">
<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>

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


<script type="text/javascript">
$('#logo a').html('<img src="http://www.wallacehuo.info/photos/i-tPf54CH/0/X3/i-tPf54CH-X3.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://www.wallacehuo.info/photos/i-jQPG9Tf/0/X3/i-jQPG9Tf-X3.jpg');
addLogo('3371318', 'http://www.wallacehuo.info/photos/i-jQPG9Tf/0/X3/i-jQPG9Tf-X3.jpg');

addLogo('3370599', 'http://www.wallacehuo.info/photos/i-VjPm27n/0/X3/i-VjPm27n-X3.jpg');
addLogo('3371641', 'http://www.wallacehuo.info/photos/i-ktR96wR/0/X3/i-ktR96wR-X3.jpg');

addLogo('3371638', 'http://www.wallacehuo.info/photos/i-pDFB2nt/0/X3/i-pDFB2nt-X3.jpg');
addLogo('3371641', 'http://www.wallacehuo.info/photos/i-pDFB2nt/0/X3/i-pDFB2nt-X3.jpg');

addLogo('3376830', 'http://www.wallacehuo.info/photos/i-7dw4LxM/0/X3/i-7dw4LxM-X3.jpg');
addLogo('3385071', 'http://www.wallacehuo.info/photos/i-7dw4LxM/0/X3/i-7dw4LxM-X3.jpg');

addLogo('3385495', 'http://www.wallacehuo.info/photos/i-jwZVjp6/0/X3/i-jwZVjp6-X3.jpg');
addLogo('3375576', 'http://www.wallacehuo.info/photos/i-jwZVjp6/0/X3/i-jwZVjp6-X3.jpg');
</script>

<script type="text/javascript">
if (location.href.indexOf('/index') !== -1) {
$('#recent_updates, table:has(iframe)').css({
'width': $('#recent_updates').width() + 170 + 'px',
'margin-left': '-170px'
});
} else {
$('#wrap').addClass('noIndex');
}
</script>
Offline Profile Quote Post Goto Top
 
polocolo
Member Avatar
Member
[ *  *  * ]
Thank you Cory.

The above code works fine on the index page. However, for the rest of the pages, the side bar still show.
Offline Profile Quote Post Goto Top
 
GodzillaV2
Member
[ *  * ]
Yeah i was wondering where you can get that big gap space whenever you look in another section of the forum. Could it go back to regular size once you hit another section?
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
polocolo
Jul 12 2014, 09:56 PM
The above code works fine on the index page. However, for the rest of the pages, the side bar still show.
You didn't add the CSS.

GodzillaV2
Jul 12 2014, 10:36 PM
Yeah i was wondering where you can get that big gap space whenever you look in another section of the forum. Could it go back to regular size once you hit another section?
You mean you want what polocolo wants where the sidebar only appears on the forum index, correct?
Offline Profile Quote Post Goto Top
 
polocolo
Member Avatar
Member
[ *  *  * ]
Ooops, got it. Works perfectly.

Thanks a million!
Edited by polocolo, Jul 13 2014, 02:19 AM.
Offline Profile Quote Post Goto Top
 
GodzillaV2
Member
[ *  * ]
Cory
Jul 13 2014, 12:21 AM
polocolo
Jul 12 2014, 09:56 PM
The above code works fine on the index page. However, for the rest of the pages, the side bar still show.
You didn't add the CSS.

GodzillaV2
Jul 12 2014, 10:36 PM
Yeah i was wondering where you can get that big gap space whenever you look in another section of the forum. Could it go back to regular size once you hit another section?
You mean you want what polocolo wants where the sidebar only appears on the forum index, correct?
Yes i do. But whenever you go to another section theres a big gap space next to the forum.
Edited by GodzillaV2, Jul 13 2014, 03:29 PM.
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Code:
 
<script type="text/javascript">
if (location.href.indexOf('/index') === -1) {
$('#wrap').addClass('noIndex');
}
</script>
Add that to the bottom of your Edit Theme Layout and add this to your Edit Theme Appearance:
Code:
 
div.noIndex #sidebar {
display: none;
}

div.noIndex #main {
margin-left: 0 !important;
}
Offline Profile Quote Post Goto Top
 
polocolo
Member Avatar
Member
[ *  *  * ]
I have put the codes onto my official site (www.walllacehuo.info). There is a minor issue with the above codes. I noticed every time a page (other than the index page of course) is loaded, the side bar would appear first and then a code hit in and hided it. This is even more obvious when someone has a slow internet as what they saw is just a side bar. I'm not sure whether this can be fixed or not.

EDIT: Also because the advertising bar is different when the page is viewed as a guest or member (the guest one is much bigger), the side bar cannot be aligned from the top to fit both.

There is a gap as shown on this picture when the page is read as a member.

Spoiler: click to toggle


Also, to make the index page more appealing, can I force the shout box and statistic box (below the second advertisement bar) expand across the page?

Spoiler: click to toggle
Edited by polocolo, Jul 14 2014, 04:34 AM.
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Try putting the JavaScript I gave you before all other codes so it will be the one to load the quickest.
Code:
 
<div id="sidebar" style="margin-top: 317px">
Change that to this:
Code:
 
<div id="sidebar">
Add this above the ending script tag:
Code:
 
if ($.zb.logged_in === false) {
$('#sidebar').css('margin-top', '317px');
}
Change this:
Code:
 
$('#recent_updates, table:has(iframe)').css({
'width': $('#recent_updates').width() + 170 + 'px',
'margin-left': '-170px'
});
To this:
Code:
 
$('#recent_updates, table:has(iframe), #stats, #sbx').css({
'width': $('#recent_updates').width() + 170 + 'px',
'margin-left': '-170px'
});
Offline Profile Quote Post Goto Top
 
GodzillaV2
Member
[ *  * ]
One problem, the sidebar seems to go on the bottom of the board index,any way to fix this?

Posted Image
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