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
  • 2
  • 17
Sidebar
Topic Started: Apr 27 2011, 11:23 PM (25,726 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:
Toon4Eva
Member Avatar
Member
[ *  * ]
Cory
May 14 2011, 06:47 PM
What bit are you referring to exactly?
you said to add it after the bit you said i tried that and i have the problemm still where it is hanging over the login bit
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Can I see a link to your board with the sidebar added so I can determine a fix?
Offline Profile Quote Post Goto Top
 
RaynePOTM
Member Avatar
POTM - Only special people know what it means
[ * ]
lilythefox
May 5 2011, 10:04 PM
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/
If neither of the options Cory suggested work, then you can place it after <!-- SUBMENU --> and in front of <!-- NAV -->.
Rather than in front of <!-- BOARD --> which is what Cory suggested in his first post.

It seems to work just as well and mimics the Preview.


<Important> I'm only a novice and was just trying different things because it didn't work for my board <Important>

Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
If the DIV doesn't work, you could always used the looked-down-upon table.
Offline Profile Quote Post Goto Top
 
.Realm
Member Avatar
Crowd in the Face
[ *  * ]
Would it be possible to create a possibility for the entire sidebar to collide?


Also, I'd like to view it as a solid bar to the left of my screen, instead of a table-shape. Is it possible to create that?
Edited by .Realm, Jan 5 2012, 12:39 PM.
Offline Profile Quote Post Goto Top
 
paradise.engineering
Member Avatar
Lowpoly Workshop Founder
[ *  *  * ]
If I would want it on the right, I would place it bellow the <!-- BOARD --> tag, right?
could you add an arrow to it? when clicked the whole sidebar would slide and hide. that would be awesome for those that don't want it or want to have full space on the threads
Edited by paradise.engineering, Jan 5 2012, 04:15 PM.
Offline Profile Quote Post Goto Top
 
Pando
Member Avatar
Member
[ *  *  *  *  *  * ]
Code:
 
#sidebar {
padding: 10px;
position: absolute;
width: 150px;
right:3%;
}

#main {
margin-right: 170px !important;
}
That should make it right-aligned, just replaced the CSS Cory posted with this. Note that the right:3%; will not match with all themes, it should be fine on Zeta Original and most themes.. If needed change the 3 to another number.

As for the ability to hide it, I am not skilled with Javascript to be able to do it.
Edited by Pando, Jan 5 2012, 04:32 PM.
Offline Profile Quote Post Goto Top
 
paradise.engineering
Member Avatar
Lowpoly Workshop Founder
[ *  *  * ]
it really works, thanks a lot! I tried it as well without th 3% earlier but didn't worked /:)
Offline Profile Quote Post Goto Top
 
triforceguy1-ZNR
Member
[ *  * ]
Hello,

I absolutely love this code but I have encountered a problem with a newly installed theme on my forum.
Most of the boxes on the sidebar have a transparent background except the last one, so it looks like this:

http://z4.ifrm.com/30343/95/0/f5247913/ScreenShot2012-01-07at122633.png

and the is what the code looks like (with a bit from the actual theme):

Code:
 
<div id="nav_middle"><!-- NAV --></div>
</div>
</div>


<div id="head_left">
<div id="head_right">
<div id="head"></div>
</div>
</div>

<div id="sidebar">
<div id="portal">
<div class="portal_box">
<h2>Important Links</h2>
<div class="content"><a href="http://simple-studios.co.uk/forum/3773888/">Important News and Announcements</a><hr>
<a href="http://simple-studios.co.uk/forum/3774325/">Introductions and Farewells</a><hr>
<a href="http://simple-studios.co.uk/topic/9002653/2/#new">General Chit-Chat</a><hr>
<a href="http://simple-studios.co.uk/topic/9197258/1">Help with Forum Cash</a><hr>
<a href="http://film.simple-studios.co.uk">Film Blog</a></div>
</div>

<div class="portal_box">
<h2>Current Events and Promotions</h2>
<div class="content"><a href="http://simple-studios.co.uk/calendar/event/51070/">JJCAG (Contests and Giveaways</a><hr>
<a href="http://simple-studios.co.uk/calendar/event/51070/">Festive Holiday Contests</a><hr>
<a href="http://simple-studios.co.uk/calendar/event/51194/">Santa's Posting Grotto</a></div>
</div>

<div class="portal_box">
<h2>Featured Sites</h2>
<div class="portal_content"><a href="http://fc-zb.com"> <b>Forum Chat</b> - A chat forum that offers a place to make friends, advertise your site, and show off.</a></div>
</div>
</div>
</div>

<div id="wrap_left">
<div id="wrap_right">
<div id="wrap"><!-- BOARD --></div>


And this is the theme I use - http://outlineforum.com/topic/4181109/1/

Could someone please help me out here?

Thanks
Leon
Offline Profile Quote Post Goto Top
 
triforceguy1-ZNR
Member
[ *  * ]
Anyone?
Offline Profile Quote Post Goto Top
 
Pando
Member Avatar
Member
[ *  *  *  *  *  * ]
Code:
 
#sidebar div.portal_content { background: #dcdfe4; border:0; }
Add that to the CSS :)
Offline Profile Quote Post Goto Top
 
triforceguy1-ZNR
Member
[ *  * ]
I guess that will do for now, but if anyone figures out how to change all of the boxes like the last box in th screenshot, please tell me ^_^

Thank you ^_^
Offline Profile Quote Post Goto Top
 
Pando
Member Avatar
Member
[ *  *  *  *  *  * ]
If you want all the boxes like that then change that to this:
Code:
 
#sidebar div.content { background: url(http://z4.ifrm.com/30024/89/0/p1019981/rowtop.png) repeat-x top #d0d3d8; border:1px solid #c6c6c6; }
:)
Offline Profile Quote Post Goto Top
 
triforceguy1-ZNR
Member
[ *  * ]
Nevermind, I see what I did wrong

for some reason the other boxes were only content not portal_content

Thanks anyway though ^_^
Offline Profile Quote Post Goto Top
 
chilbot
Member
[ * ]
Hey cory when I add the code you have in you OP to my board it just appears above the board I do not have it on right now due to people asking what is going on but I added it above the Board tags in the layout but it won't become a side bar. I think one of the CSS codes you have is conflicting with the CSS for the theme. It's hard to say any idea's?

Nevermind up there I got it to the right spot but is there a way to make it scroll with the page?


Sorry I have messed around with the CSS and got it to work thanks for the code Cory :)

http://w11.zetaboards.com/antioch_gaming/index
Edited by chilbot, Jan 15 2012, 04:48 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
  • Pages:
  • 1
  • 2
  • 17