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
  • Pages:
  • 1
  • 17
Sidebar
Topic Started: Apr 27 2011, 11:23 PM (25,709 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
 
itsme37
Theme attemptist!
[ * ]
Amazing code! Thanks for the release!
Offline Profile Quote Post Goto Top
 
Nimor
Member Avatar
Fireman
[ *  *  *  * ]
It's cool, but I have one question: How can I change the color of the h2 on the sidebar?
Or put an image instead of the default?
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Code:
 
#sidebar h2 {
background: url(http://) repeat-x #HEX;
}
That should do it.
Offline Profile Quote Post Goto Top
 
Nimor
Member Avatar
Fireman
[ *  *  *  * ]
Thanks. :)
Offline Profile Quote Post Goto Top
 
Toon4Eva
Member Avatar
Member
[ *  * ]
preview?
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Try this: Preview
Offline Profile Quote Post Goto Top
 
nguyensonk4-ZNR
Member
[ * ]
Cory
Apr 28 2011, 02:18 PM
Try this one instead: Preview
i added the sidebar, but it 's empty, pls leave the intro how to put the content on the sidebar from the board. tks.
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Can I please have a link to your board? It should have five boxes in it if you added the code above.
Offline Profile Quote Post Goto Top
 
lilythefox
Member
[ * ]
When placed it either posts too high and covers the sign out option, or it posts to the middle of the page.

http://s1.zetaboards.com/shadowinsignia/index/
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Try putting it directly after this: <div id="side_r">

Add margin-top: 35px; to the #sidebar strip if it's covering the navigation.
Offline Profile Quote Post Goto Top
 
DynamicDesigns
Member Avatar
Member
[ * ]
any codes to add into it? like something that puts a top poster list at the side?
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Here's some other sidebar codes.If none of those are what you're looking for, I suggest requesting a code in the Code Requests forum.
Offline Profile Quote Post Goto Top
 
Toon4Eva
Member Avatar
Member
[ *  * ]
Cory
May 5 2011, 10:21 PM
Try putting it directly after this: <div id="side_r">

Add margin-top: 35px; to the #sidebar strip if it's covering the navigation.
so what should the code look like with this bit added?
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
What bit are you referring to exactly?
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
  • Pages:
  • 1
  • 17