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,717 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
[ *  *  * ]
Cory
Jul 18 2014, 07:55 PM
polocolo: So it's only an issue as a member and for Safari?[/b] tag.
Yes. For guests it works fine (even in Safari). For members I need to refresh the page for the side bar to fit its space properly when I first log on in Safari.

EDIT: Same problem also happened in Explorer.
Edited by polocolo, Jul 20 2014, 11:14 PM.
Offline Profile Quote Post Goto Top
 
GodzillaV2
Member
[ *  * ]
How do you get 6 or more bars?
Offline Profile Quote Post Goto Top
 
DaPizzaMan
Member Avatar
#TeamSupport

GodzillaV2
Jul 20 2014, 11:44 PM
How do you get 6 or more bars?
Each time you see the following, you get 1 "bar":
Code:
 
<div class="portal_box">
<h2>Title</h2>
<div class="portal_content">Content</div>
</div>
Repeat that for more.
Offline Profile Quote Post Goto Top
 
GodzillaV2
Member
[ *  * ]
I tried doing that, but it isnt in the same formats like the rest
Posted Image
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
polocolo: I have Safari mobile and my mom has Internet Explorer on her computer, so I may have to check both of those whenever I get the chance.

GodzillaV2: It needs to be placed within the DIV with the portal ID:
Code: HTML
 
<div id="portal">
<!-- HTML Here -->
</div>
Edited by Cory, Jul 21 2014, 02:44 PM.
Offline Profile Quote Post Goto Top
 
Bradhadaire
Member Avatar
Member
[ * ]
Ello, I tried this code and either I put in wrong spot on the CSS or something because when I checked my forum after putting it in, I had this:

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

#main {
margin-left: 170px !important;
}
all at the top left of my forum just above my banner.
Is there a specific place within the CSS I needed to place it? (like after the body and background image at the top? or do I place it somewhere in the middle of the CSS? Or at the very end of the CSS?

Thanks in advance,
Bradhadaire
Offline Profile Quote Post Goto Top
 
Mr.Tom
Member
[ *  *  * ]
I tried this earlier, and you will want to put the CSS code at the bottom of the CSS. :)
Offline Profile Quote Post Goto Top
 
Bradhadaire
Member Avatar
Member
[ * ]
Ello again Tom and thanks again that worked!
Offline Profile Quote Post Goto Top
 
Mr.Tom
Member
[ *  *  * ]
That's alright, mate!
Offline Profile Quote Post Goto Top
 
FineArtain
Member
[ * ]
alright...
i am not sure how to add pictures to the sidebar like this
http://imgur.com/i1ZWv0u
Help please...
anyone help?
Edited by FineArtain, Oct 13 2014, 10:16 PM.
Offline Profile Quote Post Goto Top
 
zbug
Member Avatar
Galaxy Friend
[ *  *  * ]
FineArtain
Oct 13 2014, 08:02 PM
alright...
i am not sure how to add pictures to the sidebar like this
http://imgur.com/i1ZWv0u
Help please...
anyone help?
i'm pretty sure this is the code you are looking for. But it is A lot bigger in the box so might want to short the width

Code:
 
<img src="http://i.imgur.com/i1ZWv0u.png?1">

Edited by zbug, Oct 14 2014, 03:33 AM.
Offline Profile Quote Post Goto Top
 
nogats07
Member Avatar
Member
[ *  * ]
How can i hide this to guests ???
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.
Code:
 
div.noGuest #sidebar {
display: none;
}

div.noGuest #main {
margin-left: 0 !important;
}
Add that to your CSS.
Offline Profile Quote Post Goto Top
 
nogats07
Member Avatar
Member
[ *  * ]
nnn
Edited by nogats07, Dec 4 2014, 08:44 AM.
Offline Profile Quote Post Goto Top
 
Dark Shadow 6
Member Avatar
Member
[ *  * ]
Admin CP ~ Themes ~ Themes Edit ~ Theme Appearance
Code:
 
#sidebar {
padding: 10px;
position: absolute;
width: 150px;
}

#main {
margin-left: 170px !important;
}


change the margin-left to margin-right.
Edited by Dark Shadow 6, Dec 4 2014, 07:30 AM.
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