| 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: |
| Sidebar | |
|---|---|
| Topic Started: Oct 13 2008, 11:04 PM (641 Views) | |
| Kitsueki | Oct 13 2008, 11:04 PM Post #1 |
Member
  ![]](http://209.85.62.24/static/1/pip_r.png)
|
Im trying to figure out how to create a sidebar, with different groups of information Like, the sidebar is on the left side of the page... and theres A scrolling box of a story, at the top of that box it uses your board maintitle. Below it is a new box that contain like the wheather in an RP, and so forth, different boxes down the side of the page... and each different box uses a title.. like one of the maintitles. this would be javascript correct? |
 |
 
|
| Fission | Oct 13 2008, 11:06 PM Post #2 |
SRS BSNS
|
This would actually rather be an HTML sort of thing. I could possibly whip something up really quick that you could use, but there are other codes that could easily be found around here. |
|
|
|
| Kitsueki | Oct 13 2008, 11:16 PM Post #3 |
|
Member
|
Alright, i'll take a look, I dont need any super sidebar, but a basic outline and such, and maybe a few tips on what I could accomplish with it. Edit! I just realized I said left side of the page.. I meant right. Edited by Kitsueki, Oct 13 2008, 11:18 PM.
|
|
|
|
| Nicola | Oct 14 2008, 03:24 AM Post #4 |
|
.....
|
If you're wanting to use a sidebar on Zetaboards (your profile has a ZB board link)... you can't. Or at least you can only do it one way, and it might suck for someone in a particular browser. I've tried to do this several ways since people seem to want one (I have no idea why, I think they're pointless), and each time a problem has cropped up in a particular browser with each method. The most problematic was that Internet Explorer users couldn't use their Inbox/Preference pages at all. The thing with my codes is that I personally want to make sure they're as flexible as possible. I didn't want to say to people "Actually, you can only do it this way, not the way you want it to do. Even if that way sucks". Because not everyone wants a sidebar on the left, not everyone wants one straight down the side of the entire page, and not everyone wants it going down the side of the board but under the header/navigation. You might instead want to utilise the Portal. You can add anything you want in there, new blocks, change the layout etc. I think your board will function just fine without a sidebar. It is not essential to have something displayed on every page. Another 'con' is that it's a poor thing for users with small resolutions. So..sorry, but we can't help you do this. If Fission wants to try then they can give you personal support for it  But since my HTML coding abilities are absolutely fine, I doubt anyone else is going to have much luck unless you want it in one particular position it might possibly work in. Unless I'm being optimistic with my memory... it might not have worked at all that time. Can't remember. I just know that Zetaboards and Sidebars just don't mix.Also, please post support threads about your board in the appropriate forum 
|
|
|
|
| Kitsueki | Oct 14 2008, 05:32 AM Post #5 |
|
Member
|
Wow, nice post Nicola. And yeah sorry about that but I kinda had a little trouble figuring out which would be the correct place lol. I think you're right about displaying it on every page I didnt really like that, is there any reference on how I can customize the portal to do what i'd like? Edit: Sorry I didnt notice your link, thinkin ahead
Edited by Kitsueki, Oct 14 2008, 05:33 AM.
|
|
|
|
| Nicola | Oct 14 2008, 05:34 AM Post #6 |
|
.....
|
Well if you click the orange 'Portal', it's a link, and it should take you to a documentation a staff member has written on adding blocks to the Portal. http://docs.zetaboards.com/acp/board/prefs/portal <- there is also another there for general settings. |
|
|
|
| Kitsueki | Oct 14 2008, 06:13 AM Post #7 |
|
Member
|
thanks 
|
|
|
|
| FearKiller | Oct 14 2008, 11:59 PM Post #8 |
www.fearkiller.net
|
  I didn't see any problem with a Sidebar. That should be perfect for 1024x768 users and above. 800x600 users are only screwed over by the Google ads being too wide and producing a horizontal scroll bar, but who uses 800x600 anymore... Tested in FF3, Opera, and Chrome. IE6 gives issues with the sidebar background not extending all the way, but that'll be fixed with the trick on doing that with a background image on the HTML with a repeat-y. IE7 is currently untested. I'm tired and going to bed for the night. 
|
|
|
|
| Nicola | Oct 15 2008, 03:55 AM Post #9 |
|
.....
|
Yeah, smaller resolutions will be screwed. There was this board in support tickets the other day (IF) that tried to have a 700px width board with a sidebar and a board. That definitely does not work  Here, these are two screenshots I took a couple of months ago showing someone who happens when you use divs for a sidebar, in IE7. It has something to do with the floated menus in the Preferences/Inbox page. Their widths go nuts. I was actually able to fix that with javascript, but that isn't good enough for me. Javascript shouldn't have to be used to fix a layout. If someone has a High security setting in IE and therefore has JS disabled, nothing works. http://aquate.us/u/sidebar.jpg http://aquate.us/u/sidebar5.jpg And that's with divs. When I discovered that error, I used a table, and that also had a problem, but I can't remember what happened at this moment of time. Technically, it doesn't matter to me. I tried creating a code that people could use, that I could give support for, after seeing far too many poorly constructed sidebars that kill boards on InvisionFree. Because I am nice. But, there was no way I could code something that was flexible, and worked for all browsers. I think there is probably only one way and one layout type you can do for it in order for it to work. That's not good enough for me, so there is no code. If others want to try and code one and give support for it, they can if they want to, but we won't provide any sort of support for sidebars on Zetaboards because we don't support custom codes. I even asked Seth for help with this, before anyone doubts my HTML/CSS abilities
|
|
|
|
| FearKiller | Oct 15 2008, 10:53 PM Post #10 |
|
www.fearkiller.net
|
Coding the sidebar took me about 30-45 minutes total. You have to be clever in order to get things to work sometimes. Here's how it's done. The first thing one will do is attempt to get the entire page within a single element to work with. This is already done for you using the BODY element. It can be styled in the same manner as a DIV. Next, one will attempt to add a percentage width on the BODY element and float it to the opposite side as to where they want their sidebar. This is a mistake. You see, there are two ways to tell the body element to be a certain width. You can add the width property to the element or you can use margins. I believe all you web designers are with me that an element that has 20% margins on each side will have a width of 60% unless specified by a width property. The key here is to only specify a margin on either the left or right side depending on where your sidebar will be. The sidebar I created is on the left side so I gave my body element a 200px left margin. Upon performing this step, you can see that the BODY element appears to have a width and a float applied to it, but in fact it does not. There is the room for your sidebar. Next we create the sidebar. This is obviously done with HTML and most likely inside a DIV wrapping element. Most will think now this is where floating will be applied. Wrong again. I chose absolute positioning to accomplish this. Setting the top and left properties to zero and the width to 200px on the sidebar DIV. I'm using 200px because that is the size of the margin I used on the BODY element. Yay! The sidebar is over to the left and now you want it to have its own pretty background color. You add the properties and see that it doesn't extend to the bottom of the page. Trusty Google to the rescue. Wrong! Most of the answers you find there will tell you to specify a height of 100%. Doesn't work. So how do you get passed this? Remember, we have a margin on the BODY element. Margins are transparent and guess what is being exposed underneath? The HTML element. Add a background color to the HTML element and be amazed. After this, all it takes is a little simple tweaking here and there and you're all set. The only draw back seems to be that if you ever make a change to the sidebar it has to be changed at every theme. Although, I believe this can be resolved using the OBJECT element as sort of a PHP include for external HTML documents. So there you have it. Tested in IE6, IE7, FF, Opera, and Chrome. Best with 1024x768 and the lower resolutions are able to view the board as a whole without using the horizontal scroll. The only reason it appears is because the ads aren't fluid. You can see this script in action on my little test board (link below.) Just click the FearKiller theme. http://s1.zetaboards.com/fearkiller/ |
|
|
|
| ValorNET | Sep 29 2009, 12:09 PM Post #11 |
Member
|
I've attempted and successfully added the sidebar to my site, but how do I fix the background image for the sidebar? Setting the sidebar background height at 100% doesn't cover the height of the page without adding more content... //Remember not to advertise! ~ Nicolas Edited by Nicolas, Sep 29 2009, 01:31 PM.
|
|
|
|
| 1 user reading this topic (1 Guest and 0 Anonymous) | |
| « Previous Topic · Programming and Scripting Chat · Next Topic » |
2:11 PM Nov 22
